Merge pull request #23 from LMacPhail/auth

Auth
LMacPhail · Jan 29, 2024 · 3b23edb · 3b23edb
2 parents 8fc936f + 97bb841
commit 3b23edb
Show file tree

Hide file tree

Showing 33 changed files with 634 additions and 250 deletions.
diff --git a/.env b/.env
@@ -1,2 +1,2 @@
 REACT_APP_API_ENDPOINT=https://api.futurelabourmps.com/
-REACT_APP_API_COLS=A3:AZ70
+REACT_APP_API_COLS=A3:AZ70
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.14.19",
     "@phosphor-icons/react": "^2.0.14",
+    "@supabase/supabase-js": "^2.39.3",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -18,8 +19,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",
+    "react-router-dom": "6",
     "react-scripts": "5.0.1",
-    "rippleui": "^1.12.1",
     "styled-components": "^6.1.1",
     "typescript": "^4.4.2",
     "vanilla-cookieconsent": "^3.0.0-rc.17",
@@ -52,6 +53,7 @@
   },
   "devDependencies": {
     "@reduxjs/toolkit": "^1.9.7",
+    "daisyui": "^4.6.0",
     "redux": "^4.2.1",
     "tailwindcss": "^3.3.5"
   },

diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/scales.png" />
+    <link rel="icon" href="%PUBLIC_URL%/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="New Labour MP database" />

diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/manifest.json b/public/manifest.json
@@ -3,14 +3,9 @@
   "name": "Future Labour MPs",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "logo.svg",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "scales.png",
-      "type": "image/png",
-      "sizes": "192x192"
     }
   ],
   "start_url": ".",

diff --git a/public/scales.png b/public/scales.png
diff --git a/src/App.css b/src/App.css
@@ -27,11 +27,14 @@
   color: #61dafb;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.nav-link {
+  @apply btn btn-sm bg-slate-200 dark:bg-slate-700 dark:text-white;
+}
+
+.nav-link.accent {
+  @apply bg-accent;
+}
+
+.nav-link.active {
+  @apply bg-slate-800 text-white dark:bg-slate-100 dark:text-black;
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,18 +1,23 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import "./App.css";
 import { Sidebar } from "./components/sidebar/Sidebar";
-import Main from "./components/Main";
-import { SidebarContent } from "./components/sidebar/SidebarContent";
 import { Header } from "./components/Header";
-import { AppState } from "./state/store";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { fetchMPs } from "./data/utils/utils";
 import { DataStatus, MP } from "./data/types";
 import { SET_DATA_ACTION } from "./state/actions";
 import { useAnalytics } from "./analytics";
+import { supabase } from "./supabaseClient";
+import { Session } from "@supabase/supabase-js";
+import { SignUpModal } from "./components/auth/SignUpModal";
+import MPIndex from "./pages/MPIndex";
+import { Routes, Route } from "react-router-dom";
+import About from "./pages/About";
+import { AccountPage } from "./pages/Account";
+import { SignUpPage } from "./pages/SignUp";
+import { MODAL_DISMISSED_KEY } from "./state/store";
 
 function App() {
-  const view = useSelector((state: AppState) => state.view);
   const dispatch = useDispatch();
   const updateData = useCallback(
     (mpData: MP[], status: DataStatus) => {
@@ -24,16 +29,52 @@ function App() {
     [dispatch]
   );
   fetchMPs(updateData);
-  useAnalytics()
+  useAnalytics();
+
+  const [session, setSession] = useState<Session | null>(null);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+    });
+
+    supabase.auth.onAuthStateChange((_event, session) => {
+      setSession(session);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (document !== null) {
+      // @ts-ignore
+      document.getElementById("sign_up_modal")?.showModal();
+    }
+  });
+
+  const modalDismissed = localStorage.getItem(MODAL_DISMISSED_KEY) !== "true";
 
   return (
-    <div className="">
-      <Header view={view} />
-      <Sidebar>
-        <SidebarContent />
-      </Sidebar>
-      <Main view={view} />
-    </div>
+    <Sidebar>
+      <>
+        {modalDismissed && (
+          <SignUpModal
+            status={session?.user ? "add-info" : "sign-up"}
+            session={session}
+          />
+        )}
+        <Header session={session} />
+        <div className="w-full pt-4 px-4 sm:px-6 md:px-8">
+          <Routes>
+            <Route path="/" element={<MPIndex />} />
+            <Route path="/about" element={<About />} />
+            <Route
+              path="/account"
+              element={<AccountPage session={session} />}
+            />
+            <Route path="/sign-up" element={<SignUpPage />} />
+          </Routes>
+        </div>
+      </>
+    </Sidebar>
   );
 }
 

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,20 +1,13 @@
 import React from "react";
 import { ProjectTitle } from "./atoms/ProjectTitle";
-import { ViewType } from "../data/types";
-import { SET_VIEW_ACTION } from "../state/actions";
-import { useDispatch } from "react-redux";
 import { SearchInput } from "./filters/SearchInput";
+import { NavLink, useLocation } from "react-router-dom";
+import { Session } from "@supabase/supabase-js";
 
-export const Header: React.FC<{
-  view: "about" | "index";
-}> = ({ view }) => {
-  const dispatch = useDispatch();
-  const setView = (view: ViewType) => {
-    dispatch({ type: SET_VIEW_ACTION, payload: { view } });
-  };
-
+export const Header: React.FC<{ session: Session | null }> = ({ session }) => {
+  const route = useLocation();
   return (
-    <header className="sticky top-0 inset-x-0 flex flex-wrap sm:justify-start sm:flex-nowrap z-[48] w-full bg-white border-b text-sm py-2.5 sm:py-4 md:pl-72 dark:bg-gray-800 dark:border-gray-700">
+    <header className="sticky top-0 z-10 inset-x-0 flex flex-wrap sm:justify-start sm:flex-nowrap w-full bg-white border-b text-sm py-2.5 sm:py-4 dark:bg-gray-800 dark:border-gray-700">
       <nav
         className="flex flex-wrap justify-between flex-row gap-2 basis-full items-center w-full mx-auto px-4 sm:px-6 md:px-8"
         aria-label="Global"
@@ -23,27 +16,47 @@ export const Header: React.FC<{
           <ProjectTitle />
         </div>
 
-        <div className="flex items-center justify-between sm:gap-x-3 sm:order-3">
-          <div className="flex gap-2">
-            <button
-              className={`btn btn-${
-                view === "index" ? "outline-primary" : "ghost"
-              }`}
-              onClick={() => setView("index")}
-            >
+        <div className="flex items-center justify-end sm:gap-x-3 sm:order-3">
+          <div className="flex flex-wrap gap-2">
+            <NavLink className="nav-link" to="/">
               Home
-            </button>
-            <button
-              className={`btn btn-${
-                view === "about" ? "outline-primary" : "ghost"
-              }`}
-              onClick={() => setView("about")}
-            >
+            </NavLink>
+            <NavLink className="nav-link" to="/about">
               About
-            </button>
+            </NavLink>
+            {session === null ? (
+              <NavLink className="nav-link accent" to="/sign-up">
+                Sign Up
+              </NavLink>
+            ) : (
+              <NavLink className="nav-link" to="/account">
+                Account
+              </NavLink>
+            )}
+
+            <div className="md:hidden">
+              <label
+                htmlFor="my-drawer"
+                className="btn btn-sm drawer-button bg-slate-200 dark:bg-slate-700"
+              >
+                <span className="sr-only">Toggle Sidebar</span>
+                <svg
+                  className="w-5 h-5"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  viewBox="0 0 16 16"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
+                  />
+                </svg>
+              </label>
+            </div>
           </div>
         </div>
-        <SearchInput />
+        {route.pathname === "/" && <SearchInput />}
       </nav>
     </header>
   );

diff --git a/src/components/Main.tsx b/src/components/Main.tsx
diff --git a/src/components/atoms/TextInput.tsx b/src/components/atoms/TextInput.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+export const TextInput: React.FC<{
+  label: string;
+  id: string;
+  required?: boolean;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  value: string;
+  disabled?: boolean;
+}> = ({ label, id, required = false, onChange, value, disabled = false }) => {
+  return (
+    <label className="form-control w-full max-w-xs">
+      <div className="label">
+        <span className="label-text">{label}</span>
+      </div>
+      <input
+        className="input input-sm input-bordered bg-inherit w-full max-w-xs"
+        id={id}
+        type="text"
+        required={required}
+        disabled={disabled}
+        value={value}
+        onChange={onChange}
+      />
+    </label>
+  );
+};