Implement 404 page

bryphe-coder · bryphe-coder · commit 389854460a3c · 2022-03-08T21:35:25.000Z
diff --git a/site/app.tsx b/site/app.tsx
@@ -7,6 +7,7 @@ import { light } from "./theme"
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
 
 import CliAuthenticationPage from "./pages/cli-auth"
+import NotFoundPage from "./pages/404"
 import IndexPage from "./pages/index"
 import LoginPage from "./pages/login"
 import ProjectsPage from "./pages/projects"
@@ -57,7 +58,7 @@ export const App: React.FC = () => {
                 {/* Using path="*"" means "match anything", so this route
                 acts like a catch-all for URLs that we don't have explicit
                 routes for. */}
-                <Route path="*" element={<div>404</div>} />
+                <Route path="*" element={<NotFoundPage />} />
               </Route>
             </Routes>
           </ThemeProvider>
diff --git a/site/pages/404.tsx b/site/pages/404.tsx
@@ -0,0 +1,40 @@
+import { makeStyles } from "@material-ui/core/styles"
+import React, { useEffect, useState } from "react"
+import { getApiKey } from "../api"
+import { CliAuthToken } from "../components/SignIn"
+
+import { FullScreenLoader } from "../components/Loader/FullScreenLoader"
+import { useUser } from "../contexts/UserContext"
+import { Typography } from "@material-ui/core"
+
+const CliAuthenticationPage: React.FC = () => {
+  const { me } = useUser(true)
+  const styles = useStyles()
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.headingContainer}>
+        <Typography variant="h4">404</Typography>
+      </div>
+      <Typography variant="body2">This page could not be found.</Typography>
+    </div>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: "100vw",
+    height: "100vh",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  headingContainer: {
+    margin: theme.spacing(1),
+    padding: theme.spacing(1),
+    borderRight: theme.palette.divider,
+  },
+}))
+
+export default CliAuthenticationPage
diff --git a/site/webpack.dev.ts b/site/webpack.dev.ts
@@ -20,9 +20,7 @@ const config: webpack.Configuration = {
     headers: {
       "Access-Control-Allow-Origin": "*",
     },
-    historyApiFallback: {
-      index: "html_templates/index.html",
-    },
+    historyApiFallback: true,
     hot: true,
     proxy: {
       "/api": "http://localhost:3000",
