user route for getting friendships

client/src/components/derived/Friends.tsx

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+import { useAuthContext } from "../../context/AuthContext";
+import { Panel } from "../ui";
+
+export default function Friends() {
+    const { user } = useAuthContext();
+
+    useEffect(() => {
+        
+    })
+
+    return (
+        <Panel>
+
+        </Panel>
+    )
+}

client/src/components/pages/Browser.tsx

@@ -1,8 +1,9 @@
+import Protect from "../../util/Protect";
 import { Button, Page } from "../ui";
 
 export default function Browser() {
     return (
-        <Page>
+        <Protect>
             <h1>Search recipes</h1>
             <div>
                 <input type="text"></input>
@@ -12,6 +13,6 @@ export default function Browser() {
             {/* divider */}
 
             {/* recipe cards, or "no recipes matching your search" */}
-        </Page>
+        </Protect>
     )
 }

client/src/components/pages/Profile.tsx

@@ -7,13 +7,14 @@ import Protect from "../../util/Protect";
 
 export default function Profile() {
     const [message, setMessage] = useState<JSX.Element>();
-    const { user } = useContext(AuthContext);
+    // const { user } = useAuthContext();
+    const { user } = useAuthContext();
     const navigate = useNavigate();
 
     return (
         <Protect>
             <div className="profile-authenticated">
-                <h1>{user!.firstname}'s Profile</h1>
+                <h1>{user?.firstname}'s Profile</h1>
                 <p>Things and stuff!</p>
             </div>
         </Protect>

client/src/components/pages/Subscriptions/Constructor.tsx

@@ -0,0 +1,3 @@
+export default class Constructor {
+    
+}

client/src/components/pages/Subscriptions/Subscriptions.tsx

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+import { useAuthContext } from "../../../context/AuthContext";
+import Protect from "../../../util/Protect";
+
+export default function Subscriptions() {
+    const { user } = useAuthContext();
+
+    return (
+        <Protect>
+            <h1>{user?.firstname}'s Subscriptions</h1>
+        </Protect>
+    )
+}

client/src/components/ui/Navbar.tsx

@@ -7,7 +7,7 @@ import Button from "./Button";
 import "/src/sass/components/Navbar.scss";
 
 const Navbar = () => {
-    const { user } = useContext(AuthContext);
+    const { user } = useAuthContext();
     const navigate = useNavigate();
 
     const navbarLoggedIn = (

client/src/util/Protect.tsx

@@ -3,9 +3,10 @@ import { useNavigate } from "react-router-dom";
 import { Button, Page } from "../components/ui";
 import Divider from "../components/ui/Divider";
 import { AuthContext } from "../context/AuthContext";
+import { ProtectPortal } from "./types";
 
-export default function Protect({ children = <></> }) {
-    const { user } = useContext(AuthContext);
+const Protect: ProtectPortal = ({ children = <></> }) => {
+    const { user } = useAuthContext();
     const navigate = useNavigate();
 
     if (!user) {
@@ -26,4 +27,6 @@ export default function Protect({ children = <></> }) {
             </Page>
         )
     }
-}
+}
+
+export default Protect;

client/src/util/apiUtils.tsx

@@ -87,6 +87,13 @@ export const getAllRecipes = async () => {
     } catch (e: any) {
         throw e;
     }
-    // const result = await fetch(API + 'recipe').then(response => response.json());
-    // return result;
+}
+
+// for user friendships
+export const getFriendships = async () => {
+    try {
+        
+    } catch (e: any) {
+        throw e;
+    }
 }

client/src/util/types.ts

@@ -10,6 +10,11 @@ interface ButtonParams extends PortalBase {
     onClick?: (params?: any) => any
 }
 
+interface ModifiedPortal extends PortalBase {
+    children?: ReactNode | ReactNode[]
+}
+
 export type PageComponent = FC<PortalBase>
 export type PanelComponent = FC<PortalBase>
-export type ButtonComponent = FC<ButtonParams>
+export type ButtonComponent = FC<ButtonParams>
+export type ProtectPortal = FC<ModifiedPortal>