From d1aaeda4458f4dd855e0c5d33ce116d74c663a1c Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Fri, 7 Oct 2022 18:07:47 -0500
Subject: [PATCH] refactoring for dry in auth section of components

---
 client/src/App.tsx                            |  8 ++---
 .../components/AdminPortal/AdminPortal.scss   |  0
 .../components/AdminPortal/AdminPortal.tsx    |  0
 client/src/components/Auth/AuthForm.scss      |  0
 .../Auth/{Login.tsx => AuthForm.tsx}          | 21 ++++++++----
 client/src/components/Auth/Register.tsx       | 33 -------------------
 client/src/components/Cart/Cart.scss          |  0
 client/src/components/Cart/Cart.tsx           |  0
 client/src/components/Nav/Navbar.tsx          |  9 +++--
 client/src/components/Product/Product.scss    |  0
 client/src/components/Product/Product.tsx     |  0
 client/src/components/User/User.scss          |  0
 client/src/components/User/User.tsx           |  0
 client/src/util/types.ts                      |  5 ++-
 14 files changed, 28 insertions(+), 48 deletions(-)
 create mode 100644 client/src/components/AdminPortal/AdminPortal.scss
 create mode 100644 client/src/components/AdminPortal/AdminPortal.tsx
 create mode 100644 client/src/components/Auth/AuthForm.scss
 rename client/src/components/Auth/{Login.tsx => AuthForm.tsx} (50%)
 delete mode 100644 client/src/components/Auth/Register.tsx
 create mode 100644 client/src/components/Cart/Cart.scss
 create mode 100644 client/src/components/Cart/Cart.tsx
 create mode 100644 client/src/components/Product/Product.scss
 create mode 100644 client/src/components/Product/Product.tsx
 create mode 100644 client/src/components/User/User.scss
 create mode 100644 client/src/components/User/User.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index e67b2bc..4d72250 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -5,8 +5,7 @@ import { useEffect, useState } from 'react'
 // components
 import Home from './components/Home'
 import Navbar from './components/Nav/Navbar'
-import Register from './components/Auth/Register'
-import Login from './components/Auth/Login'
+import AuthForm from './components/Auth/AuthForm'
 
 // util
 import { SupabaseProvider, getSupabaseClient, useSupabase } from './supabase/SupabaseContext'
@@ -52,9 +51,8 @@ export default function App() {
             <Route path="/" element={<Home />} />
 
             {/* Second level routes */}
-            <Route path="/register" element={<Register />} />
-            <Route path="/login" element={<Login />} />
-
+            <Route path="/register" element={<AuthForm format="register" />} />
+            <Route path="/login" element={<AuthForm format="login" />} />
           </Routes>
         </div>
       </BrowserRouter>
diff --git a/client/src/components/AdminPortal/AdminPortal.scss b/client/src/components/AdminPortal/AdminPortal.scss
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/AdminPortal/AdminPortal.tsx b/client/src/components/AdminPortal/AdminPortal.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/Auth/AuthForm.scss b/client/src/components/Auth/AuthForm.scss
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/Auth/Login.tsx b/client/src/components/Auth/AuthForm.tsx
similarity index 50%
rename from client/src/components/Auth/Login.tsx
rename to client/src/components/Auth/AuthForm.tsx
index 154e11a..ea859b9 100644
--- a/client/src/components/Auth/Login.tsx
+++ b/client/src/components/Auth/AuthForm.tsx
@@ -1,14 +1,17 @@
-import { FormInput, getSession, handleLogin } from "../../util/authHelpers";
 import { useSupabase } from "../../supabase/SupabaseContext";
-import { useState } from "react"
+import { FormInput, getSession, handleLogin, handleRegister } from "../../util/authHelpers";
+import { AuthFormType } from "../../util/types";
+import { useState } from "react";
 
-export default function Login() {
+const AuthForm: AuthFormType = ({ format }) => {
     const [input, setInput] = useState<FormInput>({ email: "", password: "" });
     const supabase = useSupabase();
+    const formText = format == "login" ? "Login" : "Register";
+    const formFunction = format == "login" ? () => handleLogin(supabase, input) : () => handleRegister(supabase, input);
 
     return (
         <section>
-            <h1>Login</h1>
+            <h1>{formText}</h1>
 
             <form>
                 <div>
@@ -21,8 +24,12 @@ export default function Login() {
                 </div>
             </form>
 
-            <button onClick={() => handleLogin(supabase, input)}>Login</button>
-            <button onClick={() => getSession(supabase)}>Session</button>
+            <div className="auth-actions">
+                <button onClick={formFunction}>{formText}</button>
+                <button onClick={() => getSession(supabase)}>Session</button>
+            </div>
         </section>
     )
-}
\ No newline at end of file
+}
+
+export default AuthForm
\ No newline at end of file
diff --git a/client/src/components/Auth/Register.tsx b/client/src/components/Auth/Register.tsx
deleted file mode 100644
index 9946423..0000000
--- a/client/src/components/Auth/Register.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useState } from "react";
-import { useSupabase } from "../../supabase/SupabaseContext";
-import { getSession, handleRegister } from "../../util/authHelpers";
-
-interface FormInput {
-    email: string
-    password: string
-}
-
-export default function Register() {
-    const [input, setInput] = useState<FormInput>({email: "", password: ""});
-    const supabase = useSupabase();
-
-    return (
-        <section>
-            <h1>Register</h1>
-
-            <form>
-                <div>
-                    <label>Email:</label>
-                    <input required type="text" onChange={(e) => setInput({...input, email: e.target.value})} />
-                </div>
-                <div>
-                    <label>Password:</label>
-                    <input required type="text" onChange={(e) => setInput({...input, password: e.target.value})} />
-                </div>
-            </form>
-
-            <button onClick={() => handleRegister(supabase, input)}>Register</button>
-            <button onClick={() => getSession(supabase)}>Session</button>
-        </section>
-    )
-}
\ No newline at end of file
diff --git a/client/src/components/Cart/Cart.scss b/client/src/components/Cart/Cart.scss
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/Cart/Cart.tsx b/client/src/components/Cart/Cart.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/Nav/Navbar.tsx b/client/src/components/Nav/Navbar.tsx
index 622191c..a39666a 100644
--- a/client/src/components/Nav/Navbar.tsx
+++ b/client/src/components/Nav/Navbar.tsx
@@ -18,13 +18,18 @@ export default function Navbar() {
 
         setView(
             <section id="navbar-section">
-                <h1>Express Spice Market</h1>
+                <h1><a href="/">Express Spice Market</a></h1>
                 <div className="user-data">
                     {
                         user?.email && <p>{user.email}</p>
                     }
                     {
-                        user ? <button onClick={handleLogout}>Log Out</button> : <button onClick={() => navigate('/login')}>Log In</button>
+                        user ? <button onClick={handleLogout}>Log Out</button> : (
+                            <>
+                            <button onClick={() => navigate('/login')}>Log In</button>
+                            <button onClick={() => navigate('/register')}>Register</button>
+                            </>
+                        )
                     }
                 </div>
             </section>
diff --git a/client/src/components/Product/Product.scss b/client/src/components/Product/Product.scss
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/Product/Product.tsx b/client/src/components/Product/Product.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/User/User.scss b/client/src/components/User/User.scss
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/User/User.tsx b/client/src/components/User/User.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/util/types.ts b/client/src/util/types.ts
index 1b98444..882efe6 100644
--- a/client/src/util/types.ts
+++ b/client/src/util/types.ts
@@ -1,7 +1,10 @@
 import { Session, SupabaseClient, User } from "@supabase/supabase-js";
+import { FC } from "react";
 
 export interface AppState {
     supabase?: SupabaseClient
     session?: Session
     user?: User
-}
\ No newline at end of file
+}
+
+export type AuthFormType = FC<{ format: string }>
\ No newline at end of file