refactoring db seed

client/src/App.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { IUser } from './schemas';
+import { useEffect, useState } from 'react';
+import { AuthContext, IAuthContext } from './context/AuthContext';
 import { checkCredientials } from './util/apiUtils';
-import { AuthContext, defaultValue, IAuthContext } from './context/AuthContext';
+import Subscriptions from './components/pages/Subscriptions/Subscriptions';
 import Browser from './components/pages/Browser';
 import Collection from './components/pages/Collection';
 import Login from './components/pages/Login';
@@ -30,13 +30,15 @@ function App() {
       <AuthContext.Provider value={ user }>
         <div className="App">
           <Routes>
-            <Route path="/"               element={<Welcome />} />
-            <Route path="/register"       element={<Register />} />
-            <Route path="/login"          element={<Login />} />
-            <Route path="/profile"        element={<Profile />} />
-            <Route path="/collection"     element={<Collection />} />
-            <Route path="/explore"        element={<Browser />} />
-            <Route path="/recipe/:id"     element={<Recipe />} />
+            <Route path="/"                       element={<Welcome />} />
+            <Route path="/register"               element={<Register />} />
+            <Route path="/login"                  element={<Login />} />
+            <Route path="/profile"                element={<Profile />} />
+            <Route path="/collection"             element={<Collection />} />
+            <Route path="/explore"                element={<Browser />} />
+            <Route path="/recipe/:id"             element={<Recipe />} />
+            <Route path="/subscriptions"          element={<Subscriptions />} />
+            <Route path="/subscriptions/:id"      element={<Collection />} />
           </Routes>
         </div>
       </AuthContext.Provider>

client/src/components/pages/Collection.tsx

@@ -1,14 +1,40 @@
-import { Page } from "../ui";
+import { useAuthContext } from "../../context/AuthContext";
+import Protect from "../../util/Protect";
+import { useParams } from "react-router-dom";
+import { useState } from "react";
+
+const Collection = () => {
+    const [isDefault, setIsDefault] = useState(true);
+    const { user } = useAuthContext();
+    const { id } = useParams();
+
+    if (id) {
+        setIsDefault(false);
+    }
 
-export default function Collection() {
     return (
-        <Page>
+        <Protect>
+            { isDefault ?
+
+            <>
             <h1>Mikayla's collection</h1>
             <p>37 recipes</p>
             <p>71 ingredients</p>
             <p>11 types of cuisine</p>
+            </>
+
+            :
+
+            <>
+
+            </>
+
+            }
+            
 
             {/* recipes */}
-        </Page>
+        </Protect>
     )
-}
+}
+
+export default Collection;

client/src/components/pages/Login.tsx

@@ -37,6 +37,7 @@ export default function Login() {
     }
 
     useEffect(() => {
+        if (authContext) navigate('/');
         setForm(new Form<IUserAuth>(formConfig).mount())
     }, [])
 

client/src/context/AuthContext.tsx

@@ -1,13 +1,12 @@
-import { createContext, useContext } from "react";
+import { createContext, Dispatch, SetStateAction, useContext } from "react";
 import { IUser } from "../schemas";
 
-
 export interface IAuthContext {
     user?: IUser
 }
 
 export const defaultValue: IAuthContext = {
-    user: undefined,
+    user: undefined
 }
 
 export const AuthContext = createContext<IAuthContext>(defaultValue);