First iteration of admin

config/watcher.ts

@@ -16,15 +16,15 @@ const config: Config = {
     },
     compileRelayStream: {
       paths: [
-        "core/client/admin/**/*.ts",
-        "core/client/admin/**/*.tsx",
-        "core/client/admin/**/*.graphql",
         "core/client/stream/**/*.ts",
         "core/client/stream/**/*.tsx",
         "core/client/stream/**/*.graphql",
         "core/client/auth/**/*.ts",
         "core/client/auth/**/*.tsx",
         "core/client/auth/**/*.graphql",
+        "core/client/admin/**/*.ts",
+        "core/client/admin/**/*.tsx",
+        "core/client/admin/**/*.graphql",
         "core/server/**/*.graphql",
       ],
       ignore: [
@@ -37,6 +37,23 @@ const config: Config = {
         runOnInit: true,
       }),
     },
+    compileRelayAdmin: {
+      paths: [
+        "core/client/admin/**/*.ts",
+        "core/client/admin/**/*.tsx",
+        "core/client/admin/**/*.graphql",
+        "core/server/**/*.graphql",
+      ],
+      ignore: [
+        "core/**/*.d.ts",
+        "core/**/*.graphql.ts",
+        "**/test/**/*",
+        "core/**/*.spec.*",
+      ],
+      executor: new CommandExecutor("npm run compile:relay-admin", {
+        runOnInit: true,
+      }),
+    },
     compileRelayAuth: {
       paths: [
         "core/client/auth/**/*.ts",
@@ -83,6 +100,7 @@ const config: Config = {
       "compileCSSTypes",
       "compileRelayStream",
       "compileRelayAuth",
+      "compileRelayAdmin",
       "compileSchema",
     ],
     docz: ["runDocz", "compileCSSTypes"],

package.json

@@ -10,6 +10,7 @@
     "compile:css-types": "tcm src/core/client/",
     "compile:relay-stream": "ts-node ./scripts/compileRelay --src ./src/core/client/stream --schema tenant",
     "compile:relay-auth": "ts-node ./scripts/compileRelay --src ./src/core/client/auth --schema tenant",
+    "compile:relay-admin": "ts-node ./scripts/compileRelay --src ./src/core/client/admin --schema tenant",
     "compile:schema": "node ./scripts/generateSchemaTypes.js",
     "docz": "docz",
     "start": "node dist/index.js",

src/core/build/createWebpackConfig.ts

@@ -239,6 +239,22 @@ export default function createWebpackConfig({
                 },
               ],
             },
+            {
+              test: paths.appAdminLocalesTemplate,
+              use: [
+                // This is the locales loader that loads available locales
+                // from a particular target.
+                {
+                  loader: "locales-loader",
+                  options: {
+                    ...localesOptions,
+                    // Target specifies the prefix for fluent files to be loaded.
+                    // ${target}-xyz.ftl and ${†arget}.ftl are loaded into the locales.
+                    target: "admin",
+                  },
+                },
+              ],
+            },
             // Loader for our fluent files.
             {
               test: /\.ftl$/,

src/core/client/admin/components/App.tsx

@@ -1,6 +1,13 @@
 import React, { StatelessComponent } from "react";
+import { HorizontalGutter } from "talk-ui/components";
+import NavigationContainer from "../containers/NavigationContainer";
 
-export type View = "MODERATE" | "%future added value";
+export type View =
+  | "MODERATE"
+  | "COMMUNITY"
+  | "STORIES"
+  | "CONFIGURE"
+  | "%future added value";
 
 export interface AppProps {
   view: View;
@@ -9,14 +16,23 @@ export interface AppProps {
 const renderView = (view: View) => {
   switch (view) {
     case "MODERATE":
-      return <div>Moderate</div>;
+      return <div>MODERATE</div>;
+    case "COMMUNITY":
+      return <div>COMMUNITY</div>;
+    case "STORIES":
+      return <div>STORIES</div>;
+    case "CONFIGURE":
+      return <div>CONFIGURE</div>;
     default:
       throw new Error(`Unknown view ${view}`);
   }
 };
 
 const App: StatelessComponent<AppProps> = ({ view }) => (
-  <div>{renderView(view)}</div>
+  <HorizontalGutter>
+    <NavigationContainer />
+    {renderView(view)}
+  </HorizontalGutter>
 );
 
 export default App;

src/core/client/admin/components/Navigation.tsx

@@ -0,0 +1,26 @@
+import React, { StatelessComponent } from "react";
+import { Button, Flex, Typography } from "talk-ui/components";
+
+export interface AppProps {
+  goToModerate: () => void;
+  goToCommunity: () => void;
+  goToStories: () => void;
+  goToConfigure: () => void;
+}
+
+const Navigation: StatelessComponent<AppProps> = ({
+  goToModerate,
+  goToCommunity,
+  goToStories,
+  goToConfigure,
+}) => (
+  <Flex itemGutter="double">
+    <Typography variant="heading1">Talk</Typography>
+    <Button onClick={goToModerate}>Moderate</Button>
+    <Button onClick={goToCommunity}>Community</Button>
+    <Button onClick={goToStories}>Stories</Button>
+    <Button onClick={goToConfigure}>Configure</Button>
+  </Flex>
+);
+
+export default Navigation;

src/core/client/admin/containers/NavigationContainer.tsx

@@ -0,0 +1,26 @@
+import React, { Component } from "react";
+import Navigation from "../components/Navigation";
+import { SetViewMutation, withSetViewMutation } from "../mutations";
+
+interface NavigationContainerProps {
+  setView: SetViewMutation;
+}
+
+class NavigationContainer extends Component<NavigationContainerProps> {
+  private goToModerate = () => this.props.setView({ view: "MODERATE" });
+  private goToCommunity = () => this.props.setView({ view: "COMMUNITY" });
+  private goToStories = () => this.props.setView({ view: "STORIES" });
+  private goToConfigure = () => this.props.setView({ view: "CONFIGURE" });
+  public render() {
+    return (
+      <Navigation
+        goToModerate={this.goToModerate}
+        goToCommunity={this.goToCommunity}
+        goToStories={this.goToStories}
+        goToConfigure={this.goToConfigure}
+      />
+    );
+  }
+}
+
+export default withSetViewMutation(NavigationContainer);

src/core/client/admin/mutations/SetViewMutation.ts

@@ -0,0 +1,19 @@
+import { commitLocalUpdate, Environment } from "relay-runtime";
+
+import { createMutationContainer } from "talk-framework/lib/relay";
+import { LOCAL_ID } from "talk-framework/lib/relay/withLocalStateContainer";
+
+export interface SetViewInput {
+  view: "MODERATE" | "COMMUNITY" | "STORIES" | "CONFIGURE";
+}
+
+export type SetViewMutation = (input: SetViewInput) => Promise<void>;
+
+export async function commit(environment: Environment, input: SetViewInput) {
+  return commitLocalUpdate(environment, store => {
+    const record = store.get(LOCAL_ID)!;
+    record.setValue(input.view, "view");
+  });
+}
+
+export const withSetViewMutation = createMutationContainer("setView", commit);

src/core/client/admin/mutations/index.ts

@@ -0,0 +1 @@
+export { withSetViewMutation, SetViewMutation } from "./SetViewMutation";

src/core/server/app/router.ts

@@ -50,6 +50,9 @@ async function createTenantRouter(app: AppOptions, options: RouterOptions) {
   // Setup auth routes.
   router.use("/auth", createNewAuthRouter(app, options));
 
+  // Handle the admin handler.
+  router.get("/admin", adminHandler);
+
   // Tenant API
   router.use(
     "/graphql",
@@ -154,8 +157,5 @@ export async function createRouter(app: AppOptions, options: RouterOptions) {
   // Handle the stream handler.
   router.get("/embed/stream", cacheHeadersMiddleware("1h"), streamHandler);
 
-  // Handle the stream handler.
-  router.get("/admin", adminHandler);
-
   return router;
 }