move loadFriends from MyFriends.jsx to App.jsx

src/App.jsx

@@ -1,5 +1,5 @@
 // App.js
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import './App.css';
 import {
   BrowserRouter as Router,
@@ -18,6 +18,9 @@ import MyFriends from './components/Account/Friends/MyFriends';
 import RatingHistory from './components/RatingHistory/RatingHistory';
 import Comment from './components/Comment/Comment';
 import SearchPage from './components/SearchPage/SearchPage';
+import { fetchUserFriends } from './services/friendService';
+import { doc, getDoc } from 'firebase/firestore';
+import { db } from './utilities/firebase';
 
 // Toggle this to `true` in dev if you want to skip sign-in
 const DEV_MODE = false;
@@ -31,6 +34,24 @@ function App() {
 
   const isAuthenticated = DEV_MODE || user;
 
+  const loadFriends = async () => {
+    const friendIds = await fetchUserFriends(user.uid);
+    const friendProfiles = await Promise.all(friendIds.map(async (fid) => {
+      const ref = doc(db, 'users', fid);
+      const snap = await getDoc(ref);
+      if (snap.exists()) {
+        return { id: fid, ...snap.data() };
+      }
+      return { id: fid, displayName: 'Unknown', email: null };
+    }));
+    setFriends(friendProfiles);
+  };
+
+  useEffect(() => {
+    if (!user) return;
+    loadFriends();
+  }, [user]);
+
   return (
     <Container className="app-background" maxWidth="sm" disableGutters>
       <Router>
@@ -80,7 +101,7 @@ function App() {
             path="/my-friends"
             element={
               isAuthenticated
-                ? <MyFriends user={user} friends={friends} setFriends={setFriends} />
+                ? <MyFriends user={user} friends={friends} loadFriends={loadFriends} />
                 : <Navigate to="/" />
             }
           />

src/components/Account/Friends/MyFriends.jsx

@@ -1,33 +1,11 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { List, ListItem, ListItemText, Button, Container } from '@mui/material';
-import { fetchUserFriends, removeFriend } from '../../../services/friendService';
-import { doc, getDoc } from 'firebase/firestore';
-import { db } from '../../../utilities/firebase';
+import { removeFriend } from '../../../services/friendService';
 import AppBar from '../../AppBar/AppBar';
 import NavigationBar from '../../NavigationBar/NavigationBar';
 import "./Friends.css";
 
-function MyFriends({ user, friends, setFriends }) {
-
-  useEffect(() => {
-    if (!user) return;
-    loadFriends();
-  }, [user]);
-
-  const loadFriends = async () => {
-    const friendIds = await fetchUserFriends(user.uid);
-    const friendProfiles = await Promise.all(friendIds.map(async (fid) => {
-      const ref = doc(db, 'users', fid);
-      const snap = await getDoc(ref);
-      if (snap.exists()) {
-        return { id: fid, ...snap.data() };
-      } else {
-        return { id: fid, displayName: 'Unknown', email: null };
-      }
-    }));
-    setFriends(friendProfiles);
-  };
-
+function MyFriends({ user, friends, loadFriends }) {
   const handleUnfriend = async (friendId) => {
     await removeFriend(user.uid, friendId);
     await loadFriends();