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({

server/models/user.ts

@@ -92,7 +92,11 @@ export class User {
 
     async getFriends(id: number | string) {
         try {
-            const sql = fs.readFileSync(appRoot + '/db/sql/derived/friendships.sql').toString();
+            // const sql = fs.readFileSync(appRoot + '/db/sql/derived/friendships.sql').toString();
+            const sql = `
+                SELECT * FROM recipin.cmp_userfriendships
+                WHERE senderid = $1;
+            `
             const result = await pool.query(sql, [id]);
             if (result.rows.length) return result.rows;
             return null;

server/routes/users.ts

@@ -1,5 +1,6 @@
 import { Express, Router } from 'express';
 import UserCtl from '../controllers/UserCtl';
+import { IUser } from '../schemas';
 const router = Router();
 const userCtl = new UserCtl();
 
@@ -13,11 +14,18 @@ export const userRoute = (app: Express) => {
     })
 
     // get, put by id
-    router.get('/:id', async (req, res, next) => {
-        const { id } = req.params;
+    router.get('/:userid', async (req, res, next) => {
+        const { userid } = req.params;
         try {
-            const result = await userCtl.getOne(id);
-            res.status(200).send(result);
+            const result: IUser = await userCtl.getOne(userid);
+            const { email, id, firstname, lastname, handle } = result;
+            res.status(200).send({
+                id: id,
+                email: email,
+                firstname: firstname,
+                lastname: lastname,
+                handle: handle
+            });
         } catch(e) {
             next(e);
         }

server/schemas/index.ts

@@ -49,4 +49,10 @@ export interface ICollection extends HasHistory, CanDeactivate {
 export interface IGroceryList extends HasHistory, CanDeactivate {
     name: string
     ownerid: string | number
+}
+
+export interface IFriendship extends HasHistory, CanDeactivate {
+    senderid: string | number
+    targetid: string | number
+    pending: boolean
 }