move loadFriends from MyFriends.jsx to App.jsx

394-w25 · Jan 21, 2025 · 5eabbb8 · 5eabbb8
1 parent eb43e45
commit 5eabbb8
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 60 deletions.
diff --git a/src/App.jsx b/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="/" />
             }
           />

diff --git a/src/components/Account/Account.jsx b/src/components/Account/Account.jsx
@@ -1,15 +1,13 @@
-import { Box, Container, Typography, Button, Switch, Divider, Card, CardContent } from '@mui/material';
+import { Box, Container, Typography, Button, Divider, Card, CardContent } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import NavigationBar from '../NavigationBar/NavigationBar';
 import AppBar from '../AppBar/AppBar';
-import React, {useEffect} from 'react';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import Avatar from '@mui/material/Avatar';
 import "./Account.css";
-import { collection, getDocs } from "firebase/firestore";
-import { db } from "../../utilities/firebase";
 
-function Account({ userName, userEmail, profilePic, friends, filteredPost, setFilteredPost }) {
+function Account({ userName, userEmail, profilePic, friends, filteredPost }) {
   const navigate = useNavigate();
 
   const signOut = () => {
@@ -20,34 +18,6 @@ function Account({ userName, userEmail, profilePic, friends, filteredPost, setFi
     navigate('/my-friends');
   };
 
-  async function getPostsFromDB() {
-    try {
-        const querySnapshot = await getDocs(collection(db, "posts"));
-        const posts = [];
-        querySnapshot.forEach((doc) => {
-            if (doc.data().username === userName?.displayName){
-                posts.push({ id: doc.id, ...doc.data() });
-            }
-        });
-        return posts;
-    } catch (error) {
-        console.log("Error: ", error);
-    }
-
-}
-
-useEffect(() => {
-    async function fetchPosts() {
-        try {
-            const fetchedPosts = await getPostsFromDB();
-            setFilteredPost(fetchedPosts);
-        } catch (error) {
-            console.error("Error fetching posts: ", error);
-        }
-    }
-    fetchPosts();
-}, [userName]);
-
   return (
     <div>
       <AppBar />

diff --git a/src/components/Account/Friends/MyFriends.jsx b/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();