initial work

2026-06-30 18:16:50 +08:00 · 2018-09-24 19:52:08 -03:00
parent 65156c0528
commit ff0f00a486
16 changed files with 232 additions and 0 deletions
@@ -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",
@@ -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">
@@ -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"),
@@ -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,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;
@@ -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;
@@ -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,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();
@@ -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\\"
+  }
+}"
+`;
@@ -0,0 +1 @@
+export { default as initLocalState } from "./initLocalState";
@@ -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);
+});
@@ -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");
+  });
+}
@@ -0,0 +1,11 @@
+enum View {
+  MODERATE
+}
+
+type Local {
+  view: View!
+}
+
+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,5 @@
+import { RequestHandler } from "express";
+
+export const adminHandler: RequestHandler = (req, res) => {
+  res.render("admin");
+};
@@ -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;
 }
				`@@ -0,0 +1 @@`
				`export { default as initLocalState } from "./initLocalState";`