From 07a40ee808db35c8a79bc338290825a6d32c825c Mon Sep 17 00:00:00 2001
From: Chief Bube <ebube.ojinta@chiefsoft.com>
Date: Tue, 24 Oct 2023 01:25:12 -0700
Subject: [PATCH] Added profile data but clears after refresh

---
 components/Authentication/SignInForm.js |  5 +++--
 components/_App/TopNavbar/Profile.js    |  4 +++-
 pages/_app.js                           |  3 ++-
 pages/auth/logout.js                    |  3 ++-
 utils/localStorageHandler.js            | 27 +++++++++++++++++++++++++
 5 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 utils/localStorageHandler.js

diff --git a/components/Authentication/SignInForm.js b/components/Authentication/SignInForm.js
index 5b666fd..27cde34 100644
--- a/components/Authentication/SignInForm.js
+++ b/components/Authentication/SignInForm.js
@@ -107,12 +107,13 @@ const SignInForm = () => {
         httpOnly: true, // Make the cookie accessible only via HTTP (recommended for security)
       };
 
-      
       // Set the login token in a cookie
       await setCookie("cmc-token", res.token);
 
       const userProfileData = res.profile;
-      dispatch({ type: 'SET_USER_PROFILE', payload: userProfileData });
+      localStorage.setItem("cmc-profile", JSON.stringify(userProfileData));
+
+      dispatch({ type: "SET_USER_PROFILE", payload: userProfileData });
 
       enqueueSnackbar("Login Successful", {
         variant: "success",
diff --git a/components/_App/TopNavbar/Profile.js b/components/_App/TopNavbar/Profile.js
index 4d60705..9deca39 100644
--- a/components/_App/TopNavbar/Profile.js
+++ b/components/_App/TopNavbar/Profile.js
@@ -23,6 +23,8 @@ const Profile = () => {
   const { state } = useUserProfile();
   const userProfile = state.userProfile;
 
+  console.log(userProfile)
+
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
@@ -102,7 +104,7 @@ const Profile = () => {
                 fontWeight: "500",
               }}
             >
-              Adison Jeck
+              {`${userProfile?.firstname} ${userProfile?.lastname}`}
             </Typography>
           </Box>
         </MenuItem>
diff --git a/pages/_app.js b/pages/_app.js
index 0aa3586..e226791 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -31,8 +31,9 @@ function MyApp({ Component, pageProps }) {
     }
   };
 
-  // Attach the event handler when the component mounts
   useEffect(() => {
+    
+    // Attach the event handler when the component mounts
     window.onpopstate = handlePopState;
 
     // Clean up the event handler when the component unmounts
diff --git a/pages/auth/logout.js b/pages/auth/logout.js
index 1aeb13f..5558dd2 100644
--- a/pages/auth/logout.js
+++ b/pages/auth/logout.js
@@ -8,8 +8,9 @@ import { deleteCookie } from "cookies-next";
 export default function Logout() {
   const router = useRouter();
   const handleLogout = () => {
-    // Remove the cookie
+    // Remove the cookie and local storage
     deleteCookie("cmc-token");
+    localStorage.removeItem("cmc-profile");
 
     // Use replaceState to replace the current URL with the root URL
     window.history.replaceState({}, document.title, window.location.href);
diff --git a/utils/localStorageHandler.js b/utils/localStorageHandler.js
new file mode 100644
index 0000000..a50ae7a
--- /dev/null
+++ b/utils/localStorageHandler.js
@@ -0,0 +1,27 @@
+// utils/localStorageHandler.js
+import { getCookie, deleteCookie } from "cookies-next";
+
+const handleLocalStorageChanges = () => {
+  const storedUserProfile = localStorage.getItem('cmc-profile');
+  const storedToken = getCookie('cmc-token');
+
+  window.onstorage = (e) => {
+    if (e.key === 'userProfile' && e.newValue !== storedUserProfile) {
+      // User profile data in 'localStorage' has changed
+
+      // Delete the 'userProfile' from 'localStorage'
+      localStorage.removeItem("cmc-profile");
+
+      // Delete the 'cmc-token' cookie
+      deleteCookie('cmc-token');
+
+      // Redirect to the login page
+      window.location.href = '/auth/login';
+
+      // Reload the page
+      window.location.reload();
+    }
+  };
+};
+
+export default handleLocalStorageChanges;