fixed: Friends list not shown in settings page

frontend/src/components/FriendsList.jsx

@@ -1,37 +1,10 @@
-import { Avatar, Flex, Image, Loader, NavLink, Text, Title } from '@mantine/core';
+import { Avatar, Flex, Loader, NavLink, Text, Title } from '@mantine/core';
 import { Link } from 'react-router-dom';
-import React, { useEffect, useState } from 'react';
-import { getAuthToken, getUserData } from '../../utils/auth'
+import { UserDataContext } from '../context/user-data-context';
+import React, { useContext } from 'react';
 
 const FriendsList = () => {
-    const [friends, setFriends] = useState(null);
-    const user = getUserData();
-    let { id:userid } = user;
-    useEffect(() => {
-        let response = null;
-
-        const fetchData = async () => {
-            let url = `${import.meta.env.VITE_BACKEND_HOST}/api/user/${userid}/friends`;
-            try {
-                response = await fetch(url, {
-                    headers: {
-                        'Authorization': `Bearer ${getAuthToken()}`
-                    }
-                });
-                const data = await response.json();
-                if (data.success) {
-                    setFriends(data.friends);
-                } else {
-                    throw data.error;
-                }
-            } catch (error) {
-                console.error(error)
-            }
-        }
-
-        fetchData();
-
-    }, []);
+    const { friends } = useContext(UserDataContext)
 
     if (!friends) {
         return (
@@ -43,7 +16,12 @@ const FriendsList = () => {
         <Flex sx={{ flexGrow: '1' }} height="100%" justify="start" my="md" align="start" direction="column">
             <Title px="sm" pt="md" order={3}>Friends</Title>
             {
-                friends.map((friend, index) => <NavLink key={index} component={Link} to={`/play/friend/${friend.username}`} p='5px' icon={<Avatar size='sm' color='blue' children={friend.username[0].toUpperCase()} />} label={<Text fw={700}>{friend.username}</Text>} />)
+                friends.length === 0 ?
+                    <Text>
+                        No friends
+                    </Text>
+                    :
+                    friends.map((friend, index) => <NavLink key={index} component={Link} to={`/play/friend/${friend.username}`} p='5px' icon={<Avatar size='sm' color='blue' children={friend.username[0].toUpperCase()} />} label={<Text fw={700}>{friend.username}</Text>} />)
             }
         </Flex>
     )

frontend/src/context/user-data-context.jsx

@@ -8,6 +8,7 @@ const UserDataContextProvider = ({ children }) => {
     const [isLoggedIn, setIsLoggedIn] = useState(JSON.parse(localStorage.getItem('loggedIn')));
     const [user, setUser] = useState(null);
     const [errorMessage, setErrorMessage] = useState("");
+    console.log(user)
 
     async function fetchUserDetails() {
         try {
@@ -35,7 +36,7 @@ const UserDataContextProvider = ({ children }) => {
     }, []);
 
     return (
-        <UserDataContext.Provider value={{ user, errorMessage, isLoggedIn,setIsLoggedIn }}>
+        <UserDataContext.Provider value={{ user, friends: user?.friends , games: user?.games, errorMessage, isLoggedIn, setIsLoggedIn }}>
             {children}
         </UserDataContext.Provider>
     )