From ff0f00a486742715a25925818a394f0ee05bc074 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 24 Sep 2018 19:52:08 -0300
Subject: [PATCH] initial work

---
 config/watcher.ts                             |  3 ++
 src/core/build/createWebpackConfig.ts         | 14 ++++++++
 src/core/build/paths.ts                       |  4 +++
 src/core/client/admin/.babelrc.js             | 10 ++++++
 src/core/client/admin/components/App.tsx      | 22 ++++++++++++
 .../client/admin/containers/AppContainer.tsx  | 25 +++++++++++++
 src/core/client/admin/index.html              | 15 ++++++++
 src/core/client/admin/index.tsx               | 27 ++++++++++++++
 .../__snapshots__/initLocalState.spec.ts.snap | 18 ++++++++++
 src/core/client/admin/local/index.ts          |  1 +
 .../client/admin/local/initLocalState.spec.ts | 36 +++++++++++++++++++
 src/core/client/admin/local/initLocalState.ts | 28 +++++++++++++++
 src/core/client/admin/local/local.graphql     | 11 ++++++
 src/core/client/admin/locales.ts              |  9 +++++
 src/core/server/app/handlers/admin/admin.ts   |  5 +++
 src/core/server/app/router.ts                 |  4 +++
 16 files changed, 232 insertions(+)
 create mode 100644 src/core/client/admin/.babelrc.js
 create mode 100644 src/core/client/admin/components/App.tsx
 create mode 100644 src/core/client/admin/containers/AppContainer.tsx
 create mode 100644 src/core/client/admin/index.html
 create mode 100644 src/core/client/admin/index.tsx
 create mode 100644 src/core/client/admin/local/__snapshots__/initLocalState.spec.ts.snap
 create mode 100644 src/core/client/admin/local/index.ts
 create mode 100644 src/core/client/admin/local/initLocalState.spec.ts
 create mode 100644 src/core/client/admin/local/initLocalState.ts
 create mode 100644 src/core/client/admin/local/local.graphql
 create mode 100644 src/core/client/admin/locales.ts
 create mode 100644 src/core/server/app/handlers/admin/admin.ts

diff --git a/config/watcher.ts b/config/watcher.ts
index 10dd6e54d..29c541528 100644
--- a/config/watcher.ts
+++ b/config/watcher.ts
@@ -16,6 +16,9 @@ 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",
diff --git a/src/core/build/createWebpackConfig.ts b/src/core/build/createWebpackConfig.ts
index a19c33c47..61aa28e3c 100644
--- a/src/core/build/createWebpackConfig.ts
+++ b/src/core/build/createWebpackConfig.ts
@@ -416,6 +416,12 @@ export default function createWebpackConfig({
           paths.appAuthIndex,
           // Remove deactivated entries.
         ],
+        admin: [
+          // We ship polyfills by default
+          paths.appPolyfill,
+          ...devServerEntries,
+          paths.appAdminIndex,
+        ],
       },
       plugins: [
         ...baseConfig.plugins!,
@@ -435,6 +441,14 @@ export default function createWebpackConfig({
           inject: "body",
           ...htmlWebpackConfig,
         }),
+        // Generates an `admin.html` file with the <script> injected.
+        new HtmlWebpackPlugin({
+          filename: "admin.html",
+          template: paths.appAdminHTML,
+          chunks: ["admin"],
+          inject: "body",
+          ...htmlWebpackConfig,
+        }),
         // Makes some environment variables available in index.html.
         // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
         // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
diff --git a/src/core/build/paths.ts b/src/core/build/paths.ts
index d7e3b090d..1e23eea7a 100644
--- a/src/core/build/paths.ts
+++ b/src/core/build/paths.ts
@@ -29,6 +29,10 @@ export default {
   appAuthLocalesTemplate: resolveSrc("core/client/auth/locales.ts"),
   appAuthIndex: resolveSrc("core/client/auth/index.tsx"),
 
+  appAdminHTML: resolveSrc("core/client/admin/index.html"),
+  appAdminLocalesTemplate: resolveSrc("core/client/admin/locales.ts"),
+  appAdminIndex: resolveSrc("core/client/admin/index.tsx"),
+
   appEmbedIndex: resolveSrc("core/client/embed/index.ts"),
   appEmbedHTML: resolveSrc("core/client/embed/index.html"),
   appEmbedArticleHTML: resolveSrc("core/client/embed/article.html"),
diff --git a/src/core/client/admin/.babelrc.js b/src/core/client/admin/.babelrc.js
new file mode 100644
index 000000000..11bf9a670
--- /dev/null
+++ b/src/core/client/admin/.babelrc.js
@@ -0,0 +1,10 @@
+const path = require("path");
+module.exports = {
+  extends: "../.babelrc.js",
+  plugins: [
+    [
+      "babel-plugin-relay",
+      { artifactDirectory: path.resolve(__dirname, "./__generated__") },
+    ],
+  ],
+};
diff --git a/src/core/client/admin/components/App.tsx b/src/core/client/admin/components/App.tsx
new file mode 100644
index 000000000..dfdcaa37c
--- /dev/null
+++ b/src/core/client/admin/components/App.tsx
@@ -0,0 +1,22 @@
+import React, { StatelessComponent } from "react";
+
+export type View = "MODERATE" | "%future added value";
+
+export interface AppProps {
+  view: View;
+}
+
+const renderView = (view: View) => {
+  switch (view) {
+    case "MODERATE":
+      return <div>Moderate</div>;
+    default:
+      throw new Error(`Unknown view ${view}`);
+  }
+};
+
+const App: StatelessComponent<AppProps> = ({ view }) => (
+  <div>{renderView(view)}</div>
+);
+
+export default App;
diff --git a/src/core/client/admin/containers/AppContainer.tsx b/src/core/client/admin/containers/AppContainer.tsx
new file mode 100644
index 000000000..7d424672e
--- /dev/null
+++ b/src/core/client/admin/containers/AppContainer.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import { AppContainerLocal as Local } from "talk-auth/__generated__/AppContainerLocal.graphql";
+import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
+
+import App from "../components/App";
+
+interface InnerProps {
+  local: Local;
+}
+
+const AppContainer: StatelessComponent<InnerProps> = ({ local: { view } }) => {
+  return <App view={view} />;
+};
+
+const enhanced = withLocalStateContainer(
+  graphql`
+    fragment AppContainerLocal on Local {
+      view
+    }
+  `
+)(AppContainer);
+
+export default enhanced;
diff --git a/src/core/client/admin/index.html b/src/core/client/admin/index.html
new file mode 100644
index 000000000..78a4c7467
--- /dev/null
+++ b/src/core/client/admin/index.html
@@ -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>
diff --git a/src/core/client/admin/index.tsx b/src/core/client/admin/index.tsx
new file mode 100644
index 000000000..f26f0bcf5
--- /dev/null
+++ b/src/core/client/admin/index.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { StatelessComponent } from "react";
+import ReactDOM from "react-dom";
+
+import { createManaged } from "talk-framework/lib/bootstrap";
+
+import AppContainer from "./containers/AppContainer";
+import { initLocalState } from "./local";
+import localesData from "./locales";
+
+async function main() {
+  const ManagedTalkContextProvider = await createManaged({
+    initLocalState,
+    localesData,
+    userLocales: navigator.languages,
+  });
+
+  const Index: StatelessComponent = () => (
+    <ManagedTalkContextProvider>
+      <AppContainer />
+    </ManagedTalkContextProvider>
+  );
+
+  ReactDOM.render(<Index />, document.getElementById("app"));
+}
+
+main();
diff --git a/src/core/client/admin/local/__snapshots__/initLocalState.spec.ts.snap b/src/core/client/admin/local/__snapshots__/initLocalState.spec.ts.snap
new file mode 100644
index 000000000..25e900e0c
--- /dev/null
+++ b/src/core/client/admin/local/__snapshots__/initLocalState.spec.ts.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`init local state 1`] = `
+"{
+  \\"client:root\\": {
+    \\"__id\\": \\"client:root\\",
+    \\"__typename\\": \\"__Root\\",
+    \\"local\\": {
+      \\"__ref\\": \\"client:root.local\\"
+    }
+  },
+  \\"client:root.local\\": {
+    \\"__id\\": \\"client:root.local\\",
+    \\"__typename\\": \\"Local\\",
+    \\"view\\": \\"SIGN_IN\\"
+  }
+}"
+`;
diff --git a/src/core/client/admin/local/index.ts b/src/core/client/admin/local/index.ts
new file mode 100644
index 000000000..2b196f8c4
--- /dev/null
+++ b/src/core/client/admin/local/index.ts
@@ -0,0 +1 @@
+export { default as initLocalState } from "./initLocalState";
diff --git a/src/core/client/admin/local/initLocalState.spec.ts b/src/core/client/admin/local/initLocalState.spec.ts
new file mode 100644
index 000000000..f87cd6415
--- /dev/null
+++ b/src/core/client/admin/local/initLocalState.spec.ts
@@ -0,0 +1,36 @@
+import { Environment, RecordSource } from "relay-runtime";
+
+import { LOCAL_ID } from "talk-framework/lib/relay";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
+
+import initLocalState from "./initLocalState";
+
+let environment: Environment;
+let source: RecordSource;
+
+beforeEach(() => {
+  source = new RecordSource();
+  environment = createRelayEnvironment({
+    source,
+    initLocalState: false,
+  });
+});
+
+it("init local state", () => {
+  initLocalState(environment);
+  expect(JSON.stringify(source.toJSON(), null, 2)).toMatchSnapshot();
+});
+
+it("set view from query", () => {
+  const view = "MODERATE";
+  const previousLocation = location.toString();
+  const previousState = window.history.state;
+  window.history.replaceState(
+    previousState,
+    document.title,
+    `http://localhost/?view=${view}`
+  );
+  initLocalState(environment);
+  expect(source.get(LOCAL_ID)!.view).toBe(view);
+  window.history.replaceState(previousState, document.title, previousLocation);
+});
diff --git a/src/core/client/admin/local/initLocalState.ts b/src/core/client/admin/local/initLocalState.ts
new file mode 100644
index 000000000..9ac02783f
--- /dev/null
+++ b/src/core/client/admin/local/initLocalState.ts
@@ -0,0 +1,28 @@
+import qs from "query-string";
+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);
+
+    // Parse query params
+    const query = qs.parse(location.search);
+
+    // Set default view.
+    localRecord.setValue(query.view || "MODERATE", "view");
+
+    root.setLinkedRecord(localRecord, "local");
+  });
+}
diff --git a/src/core/client/admin/local/local.graphql b/src/core/client/admin/local/local.graphql
new file mode 100644
index 000000000..d9813c6c4
--- /dev/null
+++ b/src/core/client/admin/local/local.graphql
@@ -0,0 +1,11 @@
+enum View {
+  MODERATE
+}
+
+type Local {
+  view: View!
+}
+
+extend type Query {
+  local: Local!
+}
diff --git a/src/core/client/admin/locales.ts b/src/core/client/admin/locales.ts
new file mode 100644
index 000000000..b9c9f16c7
--- /dev/null
+++ b/src/core/client/admin/locales.ts
@@ -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;
diff --git a/src/core/server/app/handlers/admin/admin.ts b/src/core/server/app/handlers/admin/admin.ts
new file mode 100644
index 000000000..df36614fc
--- /dev/null
+++ b/src/core/server/app/handlers/admin/admin.ts
@@ -0,0 +1,5 @@
+import { RequestHandler } from "express";
+
+export const adminHandler: RequestHandler = (req, res) => {
+  res.render("admin");
+};
diff --git a/src/core/server/app/router.ts b/src/core/server/app/router.ts
index 577331c97..ff98c1c45 100644
--- a/src/core/server/app/router.ts
+++ b/src/core/server/app/router.ts
@@ -1,6 +1,7 @@
 import express from "express";
 import passport from "passport";
 
+import { adminHandler } from "talk-server/app/handlers/admin/admin";
 import {
   logoutHandler,
   signupHandler,
@@ -153,5 +154,8 @@ 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;
 }