From 8d2584cd4e96a2d2d9b1205c4994eca0d89fb4cf Mon Sep 17 00:00:00 2001
From: Anna Cai <annacai44@gmail.com>
Date: Tue, 21 Jan 2025 11:49:36 -0600
Subject: [PATCH] add real friend count to Account page

---
 src/App.jsx                                  | 4 +++-
 src/components/Account/Account.jsx           | 4 ++--
 src/components/Account/Friends/MyFriends.jsx | 3 +--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 1778d5b..38df009 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -28,6 +28,7 @@ function App() {
   const [user, setUser] = useState(null);
   const [userEmail, setUserEmail] = useState(null);
   const [profilePic, setProfilePic] = useState(null);
+  const [friends, setFriends] = useState([]);
 
   const isAuthenticated = DEV_MODE || user;
 
@@ -73,6 +74,7 @@ function App() {
                     userName={user}
                     userEmail={userEmail}
                     profilePic={profilePic}
+                    friends={friends}
                   />
                 : <Navigate to="/" />
             }
@@ -89,7 +91,7 @@ function App() {
             path="/my-friends"
             element={
               isAuthenticated
-                ? <MyFriends user={user} />
+                ? <MyFriends user={user} friends={friends} setFriends={setFriends} />
                 : <Navigate to="/" />
             }
           />
diff --git a/src/components/Account/Account.jsx b/src/components/Account/Account.jsx
index 94af26c..c41bb35 100644
--- a/src/components/Account/Account.jsx
+++ b/src/components/Account/Account.jsx
@@ -7,7 +7,7 @@ import { useNavigate } from 'react-router-dom';
 import Avatar from '@mui/material/Avatar';
 import "./Account.css";
 
-function Account({ userName, userEmail, profilePic }) {
+function Account({ userName, userEmail, profilePic, friends }) {
   const navigate = useNavigate();
 
   const signOut = () => {
@@ -80,7 +80,7 @@ function Account({ userName, userEmail, profilePic }) {
           >
             <CardContent>
               <Typography variant="subtitle1">Friends:</Typography>
-              <Typography variant="h5" style={{ fontWeight: 'bold' }}>87</Typography>
+              <Typography variant="h5" style={{ fontWeight: 'bold' }}>{friends.length}</Typography>
             </CardContent>
           </Card>
         </Box>
diff --git a/src/components/Account/Friends/MyFriends.jsx b/src/components/Account/Friends/MyFriends.jsx
index b5bb336..2c747e4 100644
--- a/src/components/Account/Friends/MyFriends.jsx
+++ b/src/components/Account/Friends/MyFriends.jsx
@@ -7,8 +7,7 @@ import AppBar from '../../AppBar/AppBar';
 import NavigationBar from '../../NavigationBar/NavigationBar';
 import "./Friends.css";
 
-function MyFriends({ user }) {
-  const [friends, setFriends] = useState([]);
+function MyFriends({ user, friends, setFriends }) {
 
   useEffect(() => {
     if (!user) return;