From 24023fefcb875482cf2aaee9b792909ebda3ff4e Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Wed, 23 Nov 2022 11:36:50 -0600
Subject: [PATCH] component mapping for friends after fetch

---
 client/src/components/derived/Friends.tsx | 27 ++++++++++++++++++-----
 client/src/components/pages/Profile.tsx   |  2 ++
 client/src/components/ui/Card.tsx         | 12 ++++++++++
 client/src/components/ui/Navbar.tsx       |  2 +-
 client/src/components/ui/UserCard.tsx     | 14 ++++++++++++
 client/src/util/Protect.tsx               |  3 +--
 client/src/util/apiUtils.tsx              | 23 +++++++++++--------
 client/src/util/types.ts                  | 11 ++++++---
 8 files changed, 74 insertions(+), 20 deletions(-)
 create mode 100644 client/src/components/ui/UserCard.tsx

diff --git a/client/src/components/derived/Friends.tsx b/client/src/components/derived/Friends.tsx
index 648a328..652452d 100644
--- a/client/src/components/derived/Friends.tsx
+++ b/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>
     )
 }
\ No newline at end of file
diff --git a/client/src/components/pages/Profile.tsx b/client/src/components/pages/Profile.tsx
index ab9d24b..563bb79 100644
--- a/client/src/components/pages/Profile.tsx
+++ b/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>
     )
diff --git a/client/src/components/ui/Card.tsx b/client/src/components/ui/Card.tsx
index e69de29..f6d8216 100644
--- a/client/src/components/ui/Card.tsx
+++ b/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;
\ No newline at end of file
diff --git a/client/src/components/ui/Navbar.tsx b/client/src/components/ui/Navbar.tsx
index a1c9790..bb1019b 100644
--- a/client/src/components/ui/Navbar.tsx
+++ b/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";
diff --git a/client/src/components/ui/UserCard.tsx b/client/src/components/ui/UserCard.tsx
new file mode 100644
index 0000000..862cc2a
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/client/src/util/Protect.tsx b/client/src/util/Protect.tsx
index 4cf5481..93d1c5d 100644
--- a/client/src/util/Protect.tsx
+++ b/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 = <></> }) => {
diff --git a/client/src/util/apiUtils.tsx b/client/src/util/apiUtils.tsx
index 1bc2653..4aa3631 100644
--- a/client/src/util/apiUtils.tsx
+++ b/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;
-    }
-}
\ No newline at end of file
diff --git a/client/src/util/types.ts b/client/src/util/types.ts
index a595f8d..c81347b 100644
--- a/client/src/util/types.ts
+++ b/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>
\ No newline at end of file
+export type ProtectPortal = FC<MultiChildPortal>
+export type UserCardType = FC<UserCardProps>
\ No newline at end of file