component mapping for friends after fetch

client/src/components/derived/Friends.tsx

@@ -1,17 +1,34 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { v4 } from "uuid";
 import { useAuthContext } from "../../context/AuthContext";
+import { getFriendships } from "../../util/apiUtils";
+import UserCard from "../ui/UserCard";
+import { IUser } from "../../schemas";
 import { Panel } from "../ui";
 
 export default function Friends() {
+    const [friends, setFriends] = useState<IUser[]>();
     const { user } = useAuthContext();
 
     useEffect(() => {
-        
-    })
+        if (!user) return;
+        const { id } = user;
+
+        const wrapper = async () => {
+            // HARD CODED
+            const result = await getFriendships(1);
+            setFriends(result);
+        }
+
+        wrapper();
+    }, [user])
 
     return (
-        <Panel>
-
+        <Panel extraStyles="flex-row">
+            <h2>Your friendships:</h2>
+            { friends && friends.map((user: IUser) => {
+                return <UserCard key={v4()} user={user} />
+            })}
         </Panel>
     )
 }

client/src/components/pages/Profile.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { AuthContext, useAuthContext } from "../../context/AuthContext";
 import { Button, Page } from "../ui";
 import Protect from "../../util/Protect";
+import Friends from "../derived/Friends";
 
 export default function Profile() {
     const [message, setMessage] = useState<JSX.Element>();
@@ -16,6 +17,7 @@ export default function Profile() {
             <div className="profile-authenticated">
                 <h1>{user?.firstname}'s Profile</h1>
                 <p>Things and stuff!</p>
+                <Friends />
             </div>
         </Protect>
     )

client/src/components/ui/Card.tsx

@@ -0,0 +1,12 @@
+import { FC } from "react"
+import { MultiChildPortal } from "../../util/types"
+
+const Card: FC<MultiChildPortal> = ({ children = <></>, extraStyles = ""}) => {
+    return (
+        <div className={`ui-card ${extraStyles}`}>
+            { children }
+        </div>
+    )
+}
+
+export default Card;

client/src/components/ui/Navbar.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { AuthContext } from "../../context/AuthContext";
+import { AuthContext, useAuthContext } from "../../context/AuthContext";
 import { IUser } from "../../schemas";
 import { attemptLogout } from "../../util/apiUtils";
 import Button from "./Button";

client/src/components/ui/UserCard.tsx

@@ -0,0 +1,14 @@
+import { UserCardType } from "../../util/types";
+import Card from "./Card";
+
+const UserCard: UserCardType = ({ extraStyles, user }) => {
+    return (
+        <Card extraStyles={extraStyles}>
+            <div className="avatar"></div>
+            <h3>{user.firstname} {user.lastname.substring(0,1)}.</h3>
+            <h4>@{user.handle}</h4>
+        </Card>
+    )
+}
+
+export default UserCard;

client/src/util/Protect.tsx

@@ -1,8 +1,7 @@
-import { useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import { Button, Page } from "../components/ui";
 import Divider from "../components/ui/Divider";
-import { AuthContext } from "../context/AuthContext";
+import { useAuthContext } from "../context/AuthContext";
 import { ProtectPortal } from "./types";
 
 const Protect: ProtectPortal = ({ children = <></> }) => {

client/src/util/apiUtils.tsx

@@ -62,6 +62,20 @@ export const attemptRegister = async (body: IUser) => {
     }
 }
 
+// for user friendships
+export const getFriendships = async (id: string | number) => {
+    try {
+        const response = await axios({
+            method: "GET",
+            url: API + '/users/friends/' + id
+        })
+
+        return Promise.resolve(response.data);
+    } catch (e: any) {
+        throw e;
+    }
+}
+
 // on recipe route
 export const getRecipeByID = async (id: string | number) => {
     try {
@@ -88,12 +102,3 @@ export const getAllRecipes = async () => {
         throw e;
     }
 }
-
-// for user friendships
-export const getFriendships = async () => {
-    try {
-        
-    } catch (e: any) {
-        throw e;
-    }
-}

client/src/util/types.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from "react";
-import * as schemas from "../schemas";
+import { IUser } from "../schemas";
 
 interface PortalBase {
     children?: ReactNode
@@ -10,11 +10,16 @@ interface ButtonParams extends PortalBase {
     onClick?: (params?: any) => any
 }
 
-interface ModifiedPortal extends PortalBase {
+export interface MultiChildPortal extends PortalBase {
     children?: ReactNode | ReactNode[]
 }
 
+interface UserCardProps extends PortalBase {
+    user: IUser
+}
+
 export type PageComponent = FC<PortalBase>
 export type PanelComponent = FC<PortalBase>
 export type ButtonComponent = FC<ButtonParams>
-export type ProtectPortal = FC<ModifiedPortal>
+export type ProtectPortal = FC<MultiChildPortal>
+export type UserCardType = FC<UserCardProps>