fixed statistics FE

frontend/src/App.js

@@ -11,9 +11,16 @@ import Signup from './components/signup';
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = React.useState(false);
+  const [currentUser, setCurrentUser] = React.useState('');  // Added state for current user
 
   const handleLogout = () => {
     setIsLoggedIn(false); 
+    setCurrentUser('');  // Clear the current user on logout
+  };
+
+  const handleLogin = (username) => {  // Modified to accept a username parameter
+    setIsLoggedIn(true);
+    setCurrentUser(username);  // Set the current user on login
   };
 
   return (
@@ -27,10 +34,10 @@ function App() {
 
         <div className="componentContainer">
           <Routes>
-            <Route path="/login" element={isLoggedIn ? <Navigate to="/" /> : <Login onLogin={() => setIsLoggedIn(true)} />} />
+            <Route path="/login" element={isLoggedIn ? <Navigate to="/" /> : <Login onLogin={handleLogin} />} />
             <Route path="/signup" element={isLoggedIn ? <Navigate to="/" /> : <Signup onSignup={() => setIsLoggedIn(true)} />} />
             <Route path="/trackExercise" element={isLoggedIn ? <TrackExercise /> : <Navigate to="/login" />} />
-            <Route path="/statistics" element={isLoggedIn ? <Statistics /> : <Navigate to="/login" />} />
+            <Route path="/statistics" element={isLoggedIn ? <Statistics currentUser={currentUser} /> : <Navigate to="/login" />} />
             <Route path="/" element={isLoggedIn ? <Navigate to="/trackExercise" /> : <Navigate to="/login" />} />
           </Routes>
         </div>

frontend/src/components/login.js

@@ -18,7 +18,7 @@ const Login = ({ onLogin }) => {
       });
 
       if (response.status === 200) {
-        onLogin();
+        onLogin(username);
       } else {
         setError('Invalid credentials');
       }

frontend/src/components/statistics.js

@@ -1,35 +1,36 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 
-const Statistics = () => {
+const Statistics = ({ currentUser }) => {
   const [data, setData] = useState([]);
 
   useEffect(() => {
     const url = 'http://localhost:5050/stats';
 
     axios.get(url)
       .then(response => {
-        setData(response.data.stats);
+        const userData = response.data.stats.find(user => user.username === currentUser);
+        setData(userData ? userData.exercises : []);
       })
       .catch(error => {
         console.error('There was an error fetching the data!', error);
       });
-  }, []);
+  }, [currentUser]);
 
   return (
     <div>
       {data && data.length > 0 ? (
         data.map((item, index) => (
           <div key={index}>
-            <p>Exercise Type: {item._id}</p>
-            <p>Total Duration: {item.duration}</p>
+            <p>Exercise Type: {item.exerciseType}</p>
+            <p>Total Duration: {item.totalDuration}</p>
           </div>
         ))
       ) : (
-        <p>No data available</p>
+        <p>No data available for {currentUser}</p>
       )}
     </div>
   );
 };
 
-export default Statistics;
+export default Statistics;