From 022a32764202e64a510a2b2fa41dc3040a34e921 Mon Sep 17 00:00:00 2001
From: ZihaoQian <zihaoqian2022@163.com>
Date: Sun, 6 Oct 2024 18:42:12 -0400
Subject: [PATCH 1/2] Update logout

Logout button will redirect to login page
---
 code/client/src/App.js | 58 ++++++++++++++++++++++++------------------
 1 file changed, 33 insertions(+), 25 deletions(-)

diff --git a/code/client/src/App.js b/code/client/src/App.js
index b9c64ab2d..88433b4cf 100644
--- a/code/client/src/App.js
+++ b/code/client/src/App.js
@@ -32,7 +32,7 @@ import LoginIcon from "@mui/icons-material/Login";
 import EditNoteIcon from "@mui/icons-material/EditNote";
 import TrackChangesIcon from "@mui/icons-material/TrackChanges";
 import CloseIcon from "@mui/icons-material/Close";
-
+import { useNavigate } from 'react-router-dom';
 import "@fontsource/mulish";
 
 const sidebarWidth = "20vh";
@@ -49,6 +49,29 @@ const theme = createTheme({
   },
 });
 
+function LogoutButton({ setIsAuthenticated }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+  
+    localStorage.removeItem('authToken');
+
+    setIsAuthenticated(false);
+
+    navigate('/login');
+  };
+
+  return (
+    <ListItem disablePadding>
+      <ListItemButton onClick={handleLogout}>
+        <ListItemIcon>
+          <LogoutIcon />
+        </ListItemIcon>
+        <ListItemText primary="Logout" />
+      </ListItemButton>
+    </ListItem>
+  );
+}
 
 
 function App() {
@@ -60,14 +83,6 @@ function App() {
     setIsAuthenticated(!!token);
   }, []);
 
-  const handleLogout = () => {
-  
-    localStorage.removeItem('authToken');
-    
-    setIsAuthenticated(false);
-    
-    // navigate('/login');
-  };
   return (
     <ThemeProvider theme={theme}>
       <Router>
@@ -131,23 +146,16 @@ function App() {
               </ListItem>
 
               {!isAuthenticated ? (
-              <ListItem disablePadding>
-                <ListItemButton component={Link} to="/login">
-                  <ListItemIcon>
-                    <LoginIcon />
-                  </ListItemIcon>
-                  <ListItemText primary="Login" />
-                </ListItemButton>
-              </ListItem>
+                <ListItem disablePadding>
+                  <ListItemButton component={Link} to="/login">
+                    <ListItemIcon>
+                      <LoginIcon />
+                    </ListItemIcon>
+                    <ListItemText primary="Login" />
+                  </ListItemButton>
+                </ListItem>
               ) : (
-              <ListItem disablePadding>
-                <ListItemButton onClick={handleLogout}>
-                  <ListItemIcon>
-                    <LogoutIcon />
-                  </ListItemIcon>
-                  <ListItemText primary="Logout" />
-                </ListItemButton>
-              </ListItem>
+                <LogoutButton setIsAuthenticated={setIsAuthenticated} />
               )}
             
               <ListItem disablePadding>

From 4c65b8b0ee913566f55fab2ff4b0186f6f6ce484 Mon Sep 17 00:00:00 2001
From: ZihaoQian <zihaoqian2022@163.com>
Date: Sun, 6 Oct 2024 20:52:43 -0400
Subject: [PATCH 2/2] Logout component

Put logout component in sperate file to keep clean
---
 code/client/src/App.js               | 46 ++++++++--------------------
 code/client/src/components/Logout.js | 32 +++++++++++++++++++
 2 files changed, 44 insertions(+), 34 deletions(-)
 create mode 100644 code/client/src/components/Logout.js

diff --git a/code/client/src/App.js b/code/client/src/App.js
index c510b0e43..76b0a74c4 100644
--- a/code/client/src/App.js
+++ b/code/client/src/App.js
@@ -8,6 +8,7 @@ import ManageProfile from "./components/ManageProfile.js";
 import DailyData from "./components/DailyData.js";
 import CreateGoal from "./components/CreateGoal.js";
 import ManageDailyData from "./components/ManageDailyData.js";
+import LogoutButton from './components/Logout.js';
 
 import React, { useState, useEffect } from 'react';
 import LogoutIcon from '@mui/icons-material/Logout';
@@ -56,29 +57,6 @@ const theme = createTheme({
   },
 });
 
-function LogoutButton({ setIsAuthenticated }) {
-  const navigate = useNavigate();
-
-  const handleLogout = () => {
-  
-    localStorage.removeItem('authToken');
-
-    setIsAuthenticated(false);
-
-    navigate('/login');
-  };
-
-  return (
-    <ListItem disablePadding>
-      <ListItemButton onClick={handleLogout}>
-        <ListItemIcon>
-          <LogoutIcon />
-        </ListItemIcon>
-        <ListItemText primary="Logout" />
-      </ListItemButton>
-    </ListItem>
-  );
-}
 
 
 function App({ RouterComponent = Router }) {
@@ -153,17 +131,17 @@ function App({ RouterComponent = Router }) {
               </ListItem>
 
               {!isAuthenticated ? (
-                <ListItem disablePadding>
-                  <ListItemButton component={Link} to="/login">
-                    <ListItemIcon>
-                      <LoginIcon />
-                    </ListItemIcon>
-                    <ListItemText primary="Login" />
-                  </ListItemButton>
-                </ListItem>
-              ) : (
-                <LogoutButton setIsAuthenticated={setIsAuthenticated} />
-              )}
+              <ListItem disablePadding>
+                <ListItemButton component={Link} to="/login">
+                  <ListItemIcon>
+                    <LoginIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Login" />
+                </ListItemButton>
+              </ListItem>
+            ) : (
+              <LogoutButton setIsAuthenticated={setIsAuthenticated} />
+            )}
             
               <ListItem disablePadding>
                 <ListItemButton component={Link} to="/enter-daily-data">
diff --git a/code/client/src/components/Logout.js b/code/client/src/components/Logout.js
new file mode 100644
index 000000000..0aaddcec8
--- /dev/null
+++ b/code/client/src/components/Logout.js
@@ -0,0 +1,32 @@
+// LogoutButton.js
+
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import LogoutIcon from '@mui/icons-material/Logout';
+import { ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+
+function LogoutButton({ setIsAuthenticated }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+ 
+    localStorage.removeItem('authToken');
+
+    setIsAuthenticated(false);
+
+    navigate('/login');
+  };
+
+  return (
+    <ListItem disablePadding>
+      <ListItemButton onClick={handleLogout}>
+        <ListItemIcon>
+          <LogoutIcon />
+        </ListItemIcon>
+        <ListItemText primary="Logout" />
+      </ListItemButton>
+    </ListItem>
+  );
+}
+
+export default LogoutButton;