refactoring for dry in auth section of components

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>

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>
     )
 }
+
+export default AuthForm

client/src/components/Auth/Register.tsx

@@ -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>
-    )
-}

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>

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
 }
+
+export type AuthFormType = FC<{ format: string }>