activates edit reminder button

.env

@@ -13,5 +13,5 @@ REACT_APP_USERS_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfitu
 
 REACT_APP_SESSION_EXPIRE_MINUTES = 5
 
-REACT_APP_TRACKING = "Tracking"
-REACT_APP_RESOURCES = "Resources"
+REACT_APP_TRACKING="Tracking"
+REACT_APP_RESOURCES="Resources"

src/App.jsx

@@ -1,4 +1,4 @@
-// import Toaster from "./components/Helpers/Toaster";
+import Toaster from "./components/Helpers/Toaster";
 import Routers from "./Routers";
 import Default from "./components/Partials/Default";
 
@@ -7,7 +7,7 @@ function App() {
       <Default>
           <>
               <Routers />
-              {/* <Toaster /> */}
+              <Toaster />
           </>
       </Default>
   );

src/Routers.jsx

@@ -59,6 +59,7 @@ export default function Routers() {
           <Route exact path="/my-collection" element={<MyCollection />} />*/}
           <Route exact path="/reminders" element={<RemindersPage />} />
           <Route exact path="/add-reminder" element={<RemindersAddPage />} />
+          <Route exact path="/add-reminder/:reminder_uuid" element={<RemindersAddPage />} />
           <Route exact path="/tracking" element={<TrackingPage />} />
           <Route exact path="/calendar" element={<CalendarPage />} />
           <Route exact path="/resources" element={<ResourcePage />} />

src/components/Helpers/Icons.jsx

@@ -1,4 +1,11 @@
 import React from "react";
+import Calendar from "../../assets/images/icons/myFit_calendar.png";
+import History from "../../assets/images/icons/myFit_history.png";
+import Profile from "../../assets/images/icons/myFit_profile.png";
+import Reminder from "../../assets/images/icons/myFit_reminder.png";
+import Resources from "../../assets/images/icons/myFit_resources.png";
+import Settings from "../../assets/images/icons/myFit_settings.png";
+import Tracking from "../../assets/images/icons/myFit_tracking.png";
 
 export default function Icons({ name }) {
   return (
@@ -468,7 +475,14 @@ export default function Icons({ name }) {
         >
           <rect y="0.823242" width="20" height="2.35294" rx="1.17647" />
         </svg>
-      ) : (
+      ) : name === "settings" ? (<img src={Settings} alt="image" className="w-[24px] h-[24px]" />)
+        : name === "tracking" ? (<img src={Tracking} alt="image" className="w-[24px] h-[24px]" />)
+        : name === "resources" ? (<img src={Resources} alt="image" className="w-[24px] h-[24px]" />)
+        : name === "reminder" ? (<img src={Reminder} alt="image" className="w-[24px] h-[24px]" />)
+        : name === "profile" ? (<img src={Profile} alt="image" className="w-[24px] h-[24px]" />)
+        : name === "History" ? (<img src={History} alt="image" className="w-[24px] h-[24px]" />)
+        : name === "calendar" ? (<img src={Calendar} alt="image" className="w-[24px] h-[24px]" />)
+        : (
         ""
       )}
     </>

src/components/Partials/Sidebar.jsx

@@ -116,11 +116,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   } `}
                   to="/"
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
                     <Icons name="dashboard" />
                   </span>
                   <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white dark:focus:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -136,16 +136,16 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="active-bids" />
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                    <Icons name="reminder" />
                   </span>
                   <span
-                    className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
+                    className={`item-content relative group-hover:text-purple dark:hover:text-white dark:focus:text-white text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
                    Reminders
-                    <span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
+                    <span className={`absolute left-24 -top-1 text-sm flex primary-gradient justify-center items-center w-5 h-5 rounded-full text-white ${'dark' ? 'dark-primary-gradient text-purple' : '', userReminders.length == 0 ? 'hidden' : ''}`}>
                       {userReminders.length > 0 && userReminders.length}
                     </span>
                   </span>
@@ -159,11 +159,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="active-bids" />
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                    <Icons name="tracking" />
                   </span>
                   <span
-                    className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
+                    className={`item-content relative group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -179,11 +179,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="active-bids" />
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                    <Icons name="calendar" />
                   </span>
                   <span
-                    className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
+                    className={`item-content relative group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -199,11 +199,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="star" />
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                    <Icons name="resources" />
                   </span>
                   <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -220,11 +220,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="history" />
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                    <Icons name="History" />
                   </span>
                   <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -249,11 +249,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="people-two" />
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                    <Icons name="profile" />
                   </span>
                   <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -269,11 +269,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="setting" />
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                    <Icons name="settings" />
                   </span>
                   <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >

src/components/Reminders/AddEditReminder.jsx

@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react'
 import Layout from '../Partials/Layout'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useNavigate, useLocation, useParams } from 'react-router-dom'
 
 // import { toast } from 'react-toastify';
 
@@ -16,6 +16,10 @@ export default function AddEditReminder({ className }) {
   let navigate = useNavigate()
   const api = new usersService();
 
+  let {reminder_uuid} = useParams() // uuid of single reminder
+  
+  let location = useLocation()
+
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(new Date());
 
@@ -29,15 +33,14 @@ export default function AddEditReminder({ className }) {
     message: ''
   })
 
-
   const [reminder, setReminder]=useState({
     'member_id': localStorage.getItem('member_id'),
-    description: '',
-    note: '',
-    category: '',
-    mode: '',
-    'start_date': startDate,
-    'end_date': endDate
+    description: location.state?.reminder.description || '',
+    note: location.state?.reminder.note || '',
+    category: location.state?.reminder.category || '',
+    mode: location.state?.reminder.mode || '',
+    'start_date': location.state? new Date(location.state?.reminder.start_date) : startDate,
+    'end_date': location.state? new Date(location.state?.reminder.end_date) : endDate
   })
   
   const onReminderInputChange = ({target:{name,value}}) => { //function to run when user changes any input on the add reminder page
@@ -67,6 +70,9 @@ export default function AddEditReminder({ className }) {
 
   const handleAddReminder = async () => { // function to add reminder, after all test cases are met
      // toast('Reminder Added')
+     if(location.state){
+      reminder.uuid = reminder_uuid
+     }
     setSuccess(true)
     setMessage({status: true, message: ''})
     let {description, note, category, mode} = reminder
@@ -81,14 +87,14 @@ export default function AddEditReminder({ className }) {
       const res = await api.addReminder(reminder);
       if(res && res.status == 200){
         setSuccess(false)
-        setMessage({status: true, message: 'Reminder added successfully'})
+        setMessage({status: true, message: 'Reminder successfully'})
         setTimeout(()=>{
           navigate('/reminders', {replace: true})
         }, 2000)
         return
       }
       setSuccess(false)
-      setMessage({status: false, message: 'Opps cannot add reminder, try again'})
+      setMessage({status: false, message: `Opps, couldn't perform action`})
     } catch (error) {
       setSuccess(false)
       setMessage({status: false, message: 'An error occurred'})
@@ -120,7 +126,7 @@ export default function AddEditReminder({ className }) {
                 placeholder="Describe the Reminder"
                 value={reminder.description}
                 inputHandler={onReminderInputChange}
-                maxLength={10}
+                maxLength={100}
               />
             </div>
 
@@ -135,7 +141,7 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Reminder Type</label>
-                <select name='category' className='bg-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
+                <select value={reminder.category} name='category' className='bg-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
                   <option className='' value="">Select category</option>
                   {category.length > 0 &&
                   <>
@@ -156,7 +162,7 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Mode</label>
-                <select name='mode' className='bg-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
+                <select value={reminder.mode} name='mode' className='bg-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
                 <option className='' value="">Select mode</option>
                   {category.length > 0 &&
                   <>
@@ -180,7 +186,7 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Start Date</label>
-                <Calendar onChange={setStartDate} value={startDate} calendarType="US" />
+                <Calendar onChange={setStartDate} value={reminder.start_date} calendarType="US" />
               </div>
               <div className="field w-full">
                 {/* <InputCom
@@ -191,7 +197,7 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">End Date</label>
-                <Calendar onChange={setEndDate} value={endDate} calendarType="US" />
+                <Calendar onChange={setEndDate} value={reminder.end_date} calendarType="US" />
               </div>
             </div>
 

src/components/Reminders/ReminderTable.jsx

@@ -110,8 +110,7 @@ export default function ReminderTable({ className }) {
                           <span className="text-sm text-thin-light-gray">
                           
                             Added <span className="text-purple">
-                              {/* {new Date(reminder.added).toLocaleString()} */}
-                              {reminder.added.split('.')[0].replace(/-/g, '/').replace(/ /g, ', ')}
+                              {new Date(reminder.added).toLocaleString().replace(/-/g, '/')}
                               </span>
                           </span>
                         </div>
@@ -121,16 +120,14 @@ export default function ReminderTable({ className }) {
                       <div className="flex space-x-1 items-center justify-center">
              
                         <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                        {/* {new Date(reminder.start_date).toLocaleString()} */}
-                        {reminder.start_date.split('.')[0].replace(/-/g, '/').replace(/ /g, ', ')}
+                        {new Date(reminder.start_date).toLocaleString().replace(/-/g, '/')}
                         </span>
                       </div>
                     </td>
                     <td className="text-center py-4 px-2">
                       <div className="flex space-x-1 items-center justify-center">
                         <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                        {/* {new Date(reminder.end_date).toLocaleString()} */}
-                        {reminder.end_date.split('.')[0].replace(/-/g, '/').replace(/ /g, ', ')}
+                        {new Date(reminder.end_date).toLocaleString().replace(/-/g, '/')}
                         </span>
                       </div>
                     </td>
@@ -140,12 +137,7 @@ export default function ReminderTable({ className }) {
                       </span>
                     </td>
                     <td className="text-right py-4 px-2">
-                      <button
-                        type="button"
-                        className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
-                      >
-                        Edit
-                      </button>
+                    <Link to={`/add-reminder/${reminder.uuid}`} state={{reminder}} className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full">Edit</Link>
                     </td>
                       </tr>
                       ))
@@ -171,8 +163,7 @@ export default function ReminderTable({ className }) {
                           <span className="text-sm text-thin-light-gray">
                           
                             Added <span className="text-purple">
-                              {/* {new Date(reminder.added).toLocaleString()} */}
-                              {reminder.added.split('.')[0].replace(/-/g, '/').replace(/ /g, ', ')}
+                            {new Date(reminder.added).toLocaleString().replace(/-/g, '/')}
                               </span>
                           </span>
                         </div>
@@ -182,16 +173,14 @@ export default function ReminderTable({ className }) {
                       <div className="flex space-x-1 items-center justify-center">
              
                         <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                        {/* {new Date(reminder.start_date).toLocaleString()} */}
-                        {reminder.start_date.split('.')[0].replace(/-/g, '/').replace(/ /g, ', ')}
+                        {new Date(reminder.start_date).toLocaleString().replace(/-/g, '/')}
                         </span>
                       </div>
                     </td>
                     <td className="text-center py-4 px-2">
                       <div className="flex space-x-1 items-center justify-center">
                         <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                        {/* {new Date(reminder.end_date).toLocaleString()} */}
-                        {reminder.end_date.split('.')[0].replace(/-/g, '/').replace(/ /g, ', ')}
+                        {new Date(reminder.end_date).toLocaleString().replace(/-/g, '/')}
                         </span>
                       </div>
                     </td>
@@ -201,12 +190,13 @@ export default function ReminderTable({ className }) {
                       </span>
                     </td>
                     <td className="text-right py-4 px-2">
-                      <button
+                      {/* <button
                         type="button"
                         className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
                       >
                         Edit
-                      </button>
+                      </button> */}
+                      <Link to={`/add-reminder/${reminder.uuid}`} state={{reminder}} className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full">Edit</Link>
                     </td>
                           </tr>
                         )

src/index.css

@@ -47,6 +47,10 @@ html {
   background-size: cover; */
 }
 
+.dark .dark-primary-gradient {
+  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(188,73,190,1) 100%);
+}
+
 .primary-home {
   /*background: linear-gradient(134.38deg, #f539f8 0%, #284f64 43.55%, #1a3544 104.51%); */
   background-image: url("./assets/images/left-myft.jpg");
@@ -309,6 +313,9 @@ input[type="number"] {
 .menu-setting-items .nav-item.active span.item-content {
   @apply text-purple;
 }
+.dark .menu-setting-items .nav-item.active span.item-content {
+  @apply text-white
+}
 /* TODO: =================================layout end================================ */
 /* TODO: =================================HomePage ================================ */
 .home-page-wrapper .hero-slider .slick-slider .slick-dots li {
@@ -520,7 +527,7 @@ input[type="number"] {
   transition: all 0.5s ease-in-out;
   width: 58px;
   height: 58px;
-  @apply bg-pink;
+  @apply bg-purple;
 }
 
 /* TODO: =================================login end================================= */

src/middleware/AuthRoute.jsx

@@ -1,26 +1,49 @@
 import React, {useEffect} from "react";
-import { Navigate, Outlet, useNavigate } from "react-router-dom";
-// import { toast } from "react-toastify";
+import { Navigate, Outlet, useNavigate, useLocation } from "react-router-dom";
+import { toast } from "react-toastify";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const isLogin = localStorage.getItem("email");
   const profile = localStorage.getItem("profile")
 
   const navigate = useNavigate();
+  const { pathname } = useLocation();
 
-  //FUNCTION TO EXPIRE SESSION AFETR 5 MINUTES
+
+  //FUNCTION TO EXPIRE SESSION AFETR 5 MINUTES AND REDIRECT USER TO LOGIN PAGE
   const expireSession = () => {
     localStorage.removeItem("email");
     localStorage.removeItem('session_token');
     localStorage.removeItem('profile');
-    // navigate("/login", { replace: true });
+    localStorage.removeItem('member_id');
+    localStorage.removeItem('member_uuid');
+    localStorage.removeItem('status');
+    navigate("/login", { replace: true }); // redirects user to login page after session expires
   };
 
+   //FUNCTION TO REMIND USER OF EXPIRY TIME
+  const expireSessionReminder = () => {
+    toast.success("session is about to expire", {
+      icon: `🙂`,
+    });
+  }
+
+
   useEffect(()=>{
-    setTimeout(()=>{
+    let sessionExpReminder = setTimeout(()=>{ //reminds user of session expiry after 4 mins 240000
+      expireSessionReminder()
+    }, 240000) 
+
+    let timeForSessionExpiry = setTimeout(()=>{ //reminds user of session expiry after 4 mins 300000
       expireSession()
-    }, 300000) //expires user login session after 5 minutes
-  },[])
+    }, 300000) 
+
+    return ()=>{ // clears timeout side effect
+      clearTimeout(sessionExpReminder)
+      clearInterval(timeForSessionExpiry)
+    }
+  },[pathname])
+
 
   if (!isLogin || !profile || (typeof JSON.parse(profile) == 'object' && JSON.parse(profile).firstname == undefined)) {
     return <Navigate to={redirectPath} replace />;