Remove react router and build signin/verify pages

Hubs-Foundation · May 4, 2020 · 4fe49a1 · 4fe49a1
1 parent 9f19d3a
commit 4fe49a1
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 40 deletions.
diff --git a/src/index.js b/src/index.js
@@ -1,35 +1,26 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { BrowserRouter, Route, Switch } from "react-router-dom";
 import { IntlProvider } from "react-intl";
 import registerTelemetry from "./telemetry";
 import Store from "./storage/store";
 import "./utils/theme";
 import { HomePage } from "./react-components/home/HomePage";
 import { lang, messages } from "./utils/i18n";
 import { AuthContextProvider } from "./react-components/auth/AuthContext";
-import { SignInPage } from "./react-components/auth/SignInPage";
-import { VerifyPage } from "./react-components/auth/VerifyPage";
 
 registerTelemetry("/home", "Hubs Home Page");
 
 const store = new Store();
 window.APP = { store };
 
-function Routes() {
+function Root() {
   return (
-    <BrowserRouter>
-      <IntlProvider locale={lang} messages={messages}>
-        <AuthContextProvider store={store}>
-          <Switch>
-            <Route exact path="/" component={HomePage} />
-            <Route path="/signin" component={SignInPage} />
-            <Route path="/verify" component={VerifyPage} />
-          </Switch>
-        </AuthContextProvider>
-      </IntlProvider>
-    </BrowserRouter>
+    <IntlProvider locale={lang} messages={messages}>
+      <AuthContextProvider store={store}>
+        <HomePage />
+      </AuthContextProvider>
+    </IntlProvider>
   );
 }
 
-ReactDOM.render(<Routes />, document.getElementById("ui-root"));
+ReactDOM.render(<Root />, document.getElementById("ui-root"));
diff --git a/src/react-components/auth/SignInPage.js b/src/react-components/auth/SignInPage.js
@@ -1,6 +1,5 @@
-import React, { useCallback, useState, useReducer, useContext } from "react";
+import React, { useCallback, useState, useReducer, useContext, useEffect } from "react";
 import PropTypes from "prop-types";
-import { useLocation, Redirect } from "react-router";
 import { Page } from "../layout/Page";
 import styles from "./SignInPage.scss";
 import configs from "../../utils/configs";
@@ -148,17 +147,25 @@ WaitForVerification.propTypes = {
 };
 
 export function SignInPage() {
-  const location = useLocation();
   const qs = new URLSearchParams(location.search);
   const { step, submitEmail, cancel, email } = useSignIn();
+  const redirectUrl = qs.get("sign_in_destination_url") || "/";
+
+  useEffect(
+    () => {
+      if (step === SignInStep.complete) {
+        window.location = redirectUrl;
+      }
+    },
+    [step, redirectUrl]
+  );
 
   return (
     <Page>
       {step === SignInStep.submit && (
         <SubmitEmail onSubmitEmail={submitEmail} initialEmail={email} signInReason={qs.get("sign_in_reason")} />
       )}
       {step === SignInStep.waitForVerification && <WaitForVerification onCancel={cancel} email={email} />}
-      {step === SignInStep.complete && <Redirect to={qs.get("sign_in_destination_url") || "/"} />}
     </Page>
   );
 }
diff --git a/src/react-components/auth/VerifyPage.js b/src/react-components/auth/VerifyPage.js
@@ -1,6 +1,5 @@
 import React, { useState, useContext, useEffect } from "react";
 import PropTypes from "prop-types";
-import { useLocation } from "react-router";
 import { Page } from "../layout/Page";
 import styles from "./SignInPage.scss";
 import { Loader } from "../misc/Loader";
@@ -67,7 +66,6 @@ VerificationError.propTypes = {
 };
 
 export function VerifyPage() {
-  const location = useLocation();
   const qs = new URLSearchParams(location.search);
 
   const authParams = {

diff --git a/src/react-components/home/HomePage.js b/src/react-components/home/HomePage.js
@@ -1,5 +1,4 @@
-import React, { useContext } from "react";
-import { useLocation, Redirect } from "react-router";
+import React, { useContext, useEffect } from "react";
 import { FormattedMessage, addLocaleData } from "react-intl";
 import en from "react-intl/locale-data/en";
 import classNames from "classnames";
@@ -14,25 +13,32 @@ import styles from "../../assets/stylesheets/index.scss";
 import mediaBrowserStyles from "../../assets/stylesheets/media-browser.scss";
 import discordLogoSmall from "../../assets/images/discord-logo-small.png";
 import { AuthContext } from "../auth/AuthContext";
+import { createAndRedirectToNewHub } from "../../utils/phoenix-utils";
 
 addLocaleData([...en]);
 
 export function HomePage() {
-  const location = useLocation();
-  const qs = new URLSearchParams(location.search);
   const featuredRooms = useFeaturedRooms();
   const auth = useContext(AuthContext);
 
-  // Support legacy sign in urls.
-  if (qs.has("sign_in")) {
-    return <Redirect to={{ pathname: "/signin", search: location.search }} />;
-  } else if (qs.has("auth_topic")) {
-    return <Redirect to={{ pathname: "/verify", search: location.search }} />;
-  }
+  useEffect(() => {
+    const qs = new URLSearchParams(location.search);
 
-  if (qs.has("new")) {
-    return <Redirect to="/new" />;
-  }
+    // Support legacy sign in urls.
+    if (qs.has("sign_in")) {
+      const redirectUrl = new URL("/signin");
+      redirectUrl.search = location.search;
+      window.location = redirectUrl;
+    } else if (qs.has("auth_topic")) {
+      const redirectUrl = new URL("/verify");
+      redirectUrl.search = location.search;
+      window.location = redirectUrl;
+    }
+
+    if (qs.has("new")) {
+      createAndRedirectToNewHub(null, null, true);
+    }
+  }, []);
 
   const canCreateRooms = !configs.feature("disable_room_creation") || auth.isAdmin;
 

diff --git a/src/react-components/layout/Header.js b/src/react-components/layout/Header.js
@@ -1,6 +1,5 @@
 import React, { useContext } from "react";
 import { FormattedMessage } from "react-intl";
-import { Link } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCog } from "@fortawesome/free-solid-svg-icons/faCog";
 import IfFeature from "../if-feature";
@@ -21,7 +20,7 @@ export function Header() {
           </li>
           <IfFeature name="show_cloud">
             <li>
-              <a href="https://hubs.mozilla.com/cloud">
+              <a href="/cloud">
                 <FormattedMessage id="home.cloud_link" />
               </a>
             </li>
@@ -78,9 +77,9 @@ export function Header() {
             </a>
           </div>
         ) : (
-          <Link to="/signin">
+          <a href="/signin" rel="noreferrer noopener">
             <FormattedMessage id="sign-in.in" />
-          </Link>
+          </a>
         )}
       </div>
     </header>

diff --git a/src/signin.html b/src/signin.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <!-- DO NOT REMOVE/EDIT THIS COMMENT - META_TAGS -->
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <link rel="shortcut icon" type="image/png" href="/favicon.ico">
+    <title>Sign In</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
+    <script>
+    if (navigator.doNotTrack !== "1") {
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+    }
+    </script>
+</head>
+
+<body>
+    <div id="ui-root"></div>
+</body>
+
+</html>
diff --git a/src/signin.js b/src/signin.js
@@ -0,0 +1,26 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { IntlProvider } from "react-intl";
+import registerTelemetry from "./telemetry";
+import Store from "./storage/store";
+import "./utils/theme";
+import { lang, messages } from "./utils/i18n";
+import { AuthContextProvider } from "./react-components/auth/AuthContext";
+import { SignInPage } from "./react-components/auth/SignInPage";
+
+registerTelemetry("/signin", "Hubs Sign In Page");
+
+const store = new Store();
+window.APP = { store };
+
+function Root() {
+  return (
+    <IntlProvider locale={lang} messages={messages}>
+      <AuthContextProvider store={store}>
+        <SignInPage />
+      </AuthContextProvider>
+    </IntlProvider>
+  );
+}
+
+ReactDOM.render(<Root />, document.getElementById("ui-root"));
diff --git a/src/verify.html b/src/verify.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <!-- DO NOT REMOVE/EDIT THIS COMMENT - META_TAGS -->
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <link rel="shortcut icon" type="image/png" href="/favicon.ico">
+    <title>Verify Email</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
+    <script>
+    if (navigator.doNotTrack !== "1") {
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+    }
+    </script>
+</head>
+
+<body>
+    <div id="ui-root"></div>
+</body>
+
+</html>
diff --git a/src/verify.js b/src/verify.js
@@ -0,0 +1,26 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { IntlProvider } from "react-intl";
+import registerTelemetry from "./telemetry";
+import Store from "./storage/store";
+import "./utils/theme";
+import { lang, messages } from "./utils/i18n";
+import { AuthContextProvider } from "./react-components/auth/AuthContext";
+import { VerifyPage } from "./react-components/auth/VerifyPage";
+
+registerTelemetry("/verify", "Hubs Verify Email Page");
+
+const store = new Store();
+window.APP = { store };
+
+function Root() {
+  return (
+    <IntlProvider locale={lang} messages={messages}>
+      <AuthContextProvider store={store}>
+        <VerifyPage />
+      </AuthContextProvider>
+    </IntlProvider>
+  );
+}
+
+ReactDOM.render(<Root />, document.getElementById("ui-root"));
diff --git a/webpack.config.js b/webpack.config.js
@@ -249,6 +249,8 @@ module.exports = async (env, argv) => {
       link: path.join(__dirname, "src", "link.js"),
       discord: path.join(__dirname, "src", "discord.js"),
       cloud: path.join(__dirname, "src", "cloud.js"),
+      signin: path.join(__dirname, "src", "signin.js"),
+      verify: path.join(__dirname, "src", "verify.js"),
       "whats-new": path.join(__dirname, "src", "whats-new.js")
     },
     output: {
@@ -266,7 +268,15 @@ module.exports = async (env, argv) => {
         "Access-Control-Allow-Origin": "*"
       },
       inline: !env.bundleAnalyzer,
-      historyApiFallback: true,
+      historyApiFallback: {
+        rewrites: [
+          { from: /^\/signin/, to: "/signin.html" },
+          { from: /^\/discord/, to: "/discord.html" },
+          { from: /^\/cloud/, to: "/cloud.html" },
+          { from: /^\/verify/, to: "/verify.html" },
+          { from: /^\/whats-new/, to: "/whats-new.html" }
+        ]
+      },
       before: function(app) {
         // Local CORS proxy
         app.all("/cors-proxy/*", (req, res) => {
@@ -497,6 +507,16 @@ module.exports = async (env, argv) => {
         chunks: ["cloud"],
         inject: "head"
       }),
+      new HTMLWebpackPlugin({
+        filename: "signin.html",
+        template: path.join(__dirname, "src", "signin.html"),
+        chunks: ["signin"]
+      }),
+      new HTMLWebpackPlugin({
+        filename: "verify.html",
+        template: path.join(__dirname, "src", "verify.html"),
+        chunks: ["verify"]
+      }),
       new CopyWebpackPlugin([
         {
           from: "src/hub.service.js",