add real friend count to Account page

394-w25 · Jan 21, 2025 · 8d2584c · 8d2584c
1 parent 304cad5
commit 8d2584c
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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;