requests for user data on ui

client/src/components/derived/Friends.tsx

@@ -1,34 +1,50 @@
 import { useEffect, useState } from "react";
 import { v4 } from "uuid";
 import { useAuthContext } from "../../context/AuthContext";
-import { getFriendships } from "../../util/apiUtils";
+import { getAllUsers, getFriendships, getPendingFriendRequests, getUserByID } from "../../util/apiUtils";
 import UserCard from "../ui/UserCard";
-import { IUser } from "../../schemas";
+import { IUser, IFriendship } from "../../schemas";
 import { Panel } from "../ui";
 
 export default function Friends() {
-    const [friends, setFriends] = useState<IUser[]>();
+    const [friends, setFriends] = useState<IFriendship[]>();
+    const [userList, setUserList] = useState(new Array<IUser>());
     const { user } = useAuthContext();
 
     useEffect(() => {
         if (!user) return;
-        const { id } = user;
+        (async function() {
+            const rawResult = await getFriendships();
+            console.log(rawResult);
+
+            const result = rawResult.filter((item: IFriendship) => (item.senderid == user.id) && !(item.pending));
+            console.log(result);
 
-        const wrapper = async () => {
-            // HARD CODED
-            const result = await getFriendships();
             setFriends(result);
-        }
-
-        wrapper();
+        })()
     }, [user])
 
+    useEffect(() => {
+        friends && friends.map(async (friend: IFriendship) => {
+            const userData = await getUserByID(friend.targetid);
+            if (userData) setUserList((prev: IUser[]) => {
+                return [...prev, userData]
+            })
+        })
+    }, [friends]);
+
+    useEffect(() => {
+        console.log(userList);
+    }, [setUserList])
+
     return (
         <Panel extraStyles="flex-row">
             <h2>Your friendships:</h2>
-            { friends && friends.map((user: IUser) => {
-                return <UserCard key={v4()} user={user} />
-            })}
+            {
+                userList.map((user: IUser) => {
+                    return <UserCard key={v4()} user={user} />
+                })
+            }
         </Panel>
     )
 }

client/src/components/pages/Register/addfriends.tsx

@@ -10,7 +10,7 @@ const AddFriends: RegisterVariantType = ({ transitionDisplay }) => {
     const [userPool, setUserPool] = useState<IUser[]>([]);
     const [friendResults, setFriendResults] = useState<IUser[]>([]);
 
-    const handleClick = async () => {
+    const handleTransition = async () => {
         transitionDisplay(VariantLabel.FinishUp);
     }
 
@@ -70,7 +70,7 @@ const AddFriends: RegisterVariantType = ({ transitionDisplay }) => {
                 </div>
             </Panel>
 
-            <Button onClick={handleClick}>Finish</Button>
+            <Button onClick={handleTransition}>Finish</Button>
         </Page>
     )
 }

client/src/components/ui/UserCard.tsx

@@ -1,12 +1,11 @@
 import { useEffect, useState } from "react";
-import { IUser } from "../../schemas";
 import { addFriend, getPendingFriendRequests } from "../../util/apiUtils";
 import { UserCardType } from "../../util/types";
 import Button from "./Button";
 import Card from "./Card";
 
 const UserCard: UserCardType = ({ extraStyles, user, canAdd = false, liftData }) => {
-    const [shouldDisable, setShouldDisable] = useState<boolean>(false);
+    const [shouldDisable, setShouldDisable] = useState<boolean>(canAdd);
     
     useEffect(() => {
         (async function() {
@@ -16,7 +15,6 @@ const UserCard: UserCardType = ({ extraStyles, user, canAdd = false, liftData })
             for (let req of requestsOpen) {
                 if (req.targetid == user.id) {
                     setShouldDisable(true);
-                    console.log(req);
                     return;
                 }
             }

client/src/util/apiUtils.tsx

@@ -95,6 +95,19 @@ export const getAllUsers = async () => {
     }
 }
 
+export const getUserByID = async (id: string | number) => {
+    try {
+        const response = await axios({
+            method: "GET",
+            url: API + '/users/' + id as string
+        })
+
+        return Promise.resolve(response.data);
+    } catch (e: any) {
+        throw e;
+    }
+}
+
 export const addFriend = async (id: string) => {
     try {
         const response = await axios({