🏡 index : ~doyle/chartered.git

author Jordan Doyle <jordan@doyle.la> 2021-11-09 23:25:49.0 +00:00:00
committer Jordan Doyle <jordan@doyle.la> 2021-11-09 23:25:49.0 +00:00:00
commit
73c6a7a0a41119dd7a7504531110fc26a97e3323 [patch]
tree
e2f0751ffef6382638ea91726c2fa83f0c8f7e96
parent
0437bc9760b616fd198678f5b53932eba09f631f
download
73c6a7a0a41119dd7a7504531110fc26a97e3323.tar.gz

Add 404 page to chartered-frontend



Diff

 chartered-frontend/src/index.tsx          |  4 ++++
 chartered-frontend/src/pages/NotFound.tsx | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/chartered-frontend/src/index.tsx b/chartered-frontend/src/index.tsx
index 9cf29b5..0d755e4 100644
--- a/chartered-frontend/src/index.tsx
+++ a/chartered-frontend/src/index.tsx
@@ -28,6 +28,7 @@
import { backgroundFix } from "./overscrollColourFixer";
import Register from "./pages/Register";
import ListSessions from "./pages/sessions/ListSessions";
import NotFound from "./pages/NotFound";

if (
  window.matchMedia &&
@@ -76,6 +77,9 @@

          <Route path="/sessions" element={<Private element={<Navigate to="/sessions/list" />} />} />
          <Route path="/sessions/list" element={<Private element={<ListSessions />} />} />

          <Route path="/404" element={<NotFound />} />
          <Route path="*" element={<Navigate to="/404" />} />
        </Routes>
      </Router>
    </ProvideAuth>
diff --git a/chartered-frontend/src/pages/NotFound.tsx b/chartered-frontend/src/pages/NotFound.tsx
new file mode 100644
index 0000000..43fa46f 100644
--- /dev/null
+++ a/chartered-frontend/src/pages/NotFound.tsx
@@ -1,0 +1,32 @@
import Nav from "../sections/Nav";
import { useAuth } from "../useAuth";

export default function NotFound() {
  return (
    <>
      <MaybeShowNav />

      <div
        className="d-flex justify-content-center align-items-center"
        style={{ minHeight: "calc(100vh - 6rem)" }}
      >
        <div className="card border-0 shadow-sm text-black p-2 m-3">
          <div className="card-body">
            Seems you've taken a wrong turn! The page you requested couldn't be
            found.
          </div>
        </div>
      </div>
    </>
  );
}

function MaybeShowNav() {
  const auth = useAuth();

  if (!auth?.getAuthKey()) {
    return <></>;
  }

  return <Nav />;
}