Merge branch 'next-profile' of https://github.com/coralproject/talk into next-profile

2026-08-14 12:50:17 +08:00 · 2018-10-03 15:51:52 +02:00
parent fabe52a0a6 13b039099f
commit 5c77ed2c31
36 changed files with 697 additions and 185 deletions
@@ -0,0 +1,10 @@
+const path = require("path");
+module.exports = {
+  extends: "../.babelrc.js",
+  plugins: [
+    [
+      "babel-plugin-relay",
+      { artifactDirectory: path.resolve(__dirname, "./__generated__") },
+    ],
+  ],
+};
@@ -0,0 +1,4 @@
+.root {
+  width: 1080px;
+  margin: 0 auto;
+}
@@ -0,0 +1,13 @@
+import React, { StatelessComponent } from "react";
+import { HorizontalGutter } from "talk-ui/components";
+import styles from "./App.css";
+import Navigation from "./Navigation";
+
+const App: StatelessComponent = ({ children }) => (
+  <HorizontalGutter className={styles.root}>
+    <Navigation />
+    {children}
+  </HorizontalGutter>
+);
+
+export default App;
@@ -0,0 +1,10 @@
+import React, { StatelessComponent } from "react";
+import { HorizontalGutter, Typography } from "talk-ui/components";
+
+const Community: StatelessComponent = ({ children }) => (
+  <HorizontalGutter>
+    <Typography variant="heading3">Community</Typography>
+  </HorizontalGutter>
+);
+
+export default Community;
@@ -0,0 +1,10 @@
+import React, { StatelessComponent } from "react";
+import { HorizontalGutter, Typography } from "talk-ui/components";
+
+const Configure: StatelessComponent = ({ children }) => (
+  <HorizontalGutter>
+    <Typography variant="heading3">Configure</Typography>
+  </HorizontalGutter>
+);
+
+export default Configure;
@@ -0,0 +1,10 @@
+import React, { StatelessComponent } from "react";
+import { HorizontalGutter, Typography } from "talk-ui/components";
+
+const Moderate: StatelessComponent = ({ children }) => (
+  <HorizontalGutter>
+    <Typography variant="heading3">Moderate</Typography>
+  </HorizontalGutter>
+);
+
+export default Moderate;
@@ -0,0 +1,7 @@
+.link {
+  text-decoration: none;
+}
+
+.active {
+  border-bottom: 3px solid var(--palette-primary-main);
+}
@@ -0,0 +1,40 @@
+import { Link } from "found";
+import React, { StatelessComponent } from "react";
+import { Button, Flex, Typography } from "talk-ui/components";
+import styles from "./Navigation.css";
+
+const Navigation: StatelessComponent = () => (
+  <Flex itemGutter="double">
+    <Typography variant="heading1">Talk</Typography>
+    <Link
+      to="/admin/moderate"
+      className={styles.link}
+      activeClassName={styles.active}
+    >
+      <Button>Moderate</Button>
+    </Link>
+    <Link
+      to="/admin/community"
+      className={styles.link}
+      activeClassName={styles.active}
+    >
+      <Button>Community</Button>
+    </Link>
+    <Link
+      to="/admin/stories"
+      className={styles.link}
+      activeClassName={styles.active}
+    >
+      <Button>Stories</Button>
+    </Link>
+    <Link
+      to="/admin/configure"
+      className={styles.link}
+      activeClassName={styles.active}
+    >
+      <Button>Configure</Button>
+    </Link>
+  </Flex>
+);
+
+export default Navigation;
@@ -0,0 +1,10 @@
+import React, { StatelessComponent } from "react";
+import { HorizontalGutter, Typography } from "talk-ui/components";
+
+const Stories: StatelessComponent = ({ children }) => (
+  <HorizontalGutter>
+    <Typography variant="heading3">Stories</Typography>
+  </HorizontalGutter>
+);
+
+export default Stories;
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Talk - Admin</title>
+  <meta charset="utf-8">
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, user-scalable=no">
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+
+</html>
@@ -0,0 +1,40 @@
+import { BrowserProtocol, queryMiddleware } from "farce";
+import { createFarceRouter, createRender } from "found";
+import { Resolver } from "found-relay";
+
+import React, { StatelessComponent } from "react";
+import ReactDOM from "react-dom";
+import { createManaged } from "talk-framework/lib/bootstrap";
+import { TalkContextConsumer } from "talk-framework/lib/bootstrap/TalkContext";
+import { initLocalState } from "./local";
+import localesData from "./locales";
+import routeConfig from "./routeConfig";
+
+async function main() {
+  const ManagedTalkContextProvider = await createManaged({
+    initLocalState,
+    localesData,
+    userLocales: navigator.languages,
+  });
+
+  const Router = createFarceRouter({
+    historyProtocol: new BrowserProtocol(),
+    historyMiddlewares: [queryMiddleware],
+    routeConfig,
+    render: createRender({}),
+  });
+
+  const Index: StatelessComponent = () => (
+    <ManagedTalkContextProvider>
+      <TalkContextConsumer>
+        {({ relayEnvironment }) => (
+          <Router resolver={new Resolver(relayEnvironment)} />
+        )}
+      </TalkContextConsumer>
+    </ManagedTalkContextProvider>
+  );
+
+  ReactDOM.render(<Index />, document.getElementById("app"));
+}
+
+main();
@@ -0,0 +1 @@
+export { default as initLocalState } from "./initLocalState";
@@ -0,0 +1,21 @@
+import { commitLocalUpdate, Environment } from "relay-runtime";
+
+import {
+  createAndRetain,
+  LOCAL_ID,
+  LOCAL_TYPE,
+} from "talk-framework/lib/relay";
+
+/**
+ * Initializes the local state, before we start the App.
+ */
+export default async function initLocalState(environment: Environment) {
+  commitLocalUpdate(environment, s => {
+    const root = s.getRoot();
+
+    // Create the Local Record which is the Root for the client states.
+    const localRecord = createAndRetain(environment, s, LOCAL_ID, LOCAL_TYPE);
+
+    root.setLinkedRecord(localRecord, "local");
+  });
+}
@@ -0,0 +1,5 @@
+type Local {}
+
+extend type Query {
+  local: Local!
+}
@@ -0,0 +1,9 @@
+/**
+ * The actual content of this file is being generated by our `locales-loader`.
+ * Please check `./src/loaders` and the webpack config for more information.
+ *
+ * This file only represents the types that gets exported.
+ */
+
+import { LocalesData } from "talk-framework/lib/i18n";
+export default {} as LocalesData;
@@ -0,0 +1,17 @@
+import { makeRouteConfig, Route } from "found";
+import React from "react";
+
+import App from "./components/App";
+import Community from "./components/Community";
+import Configure from "./components/Configure";
+import Moderate from "./components/Moderate";
+import Stories from "./components/Stories";
+
+export default makeRouteConfig(
+  <Route path="admin" Component={App}>
+    <Route path="moderate" Component={Moderate} />
+    <Route path="community" Component={Community} />
+    <Route path="stories" Component={Stories} />
+    <Route path="configure" Component={Configure} />
+  </Route>
+);
				`@@ -0,0 +1 @@`
				`export { default as initLocalState } from "./initLocalState";`