First iteration of admin

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";