activates edit reminder button

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/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: '',
+    description: location.state?.reminder.description || '',
-    note: '',
+    note: location.state?.reminder.note || '',
-    category: '',
+    category: location.state?.reminder.category || '',
-    mode: '',
+    mode: location.state?.reminder.mode || '',
-    'start_date': startDate,
+    'start_date': location.state? new Date(location.state?.reminder.start_date) : startDate,
-    'end_date': endDate
+    '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()} */}
+                              {new Date(reminder.added).toLocaleString().replace(/-/g, '/')}
-                              {reminder.added.split('.')[0].replace(/-/g, '/').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()} */}
+                        {new Date(reminder.start_date).toLocaleString().replace(/-/g, '/')}
-                        {reminder.start_date.split('.')[0].replace(/-/g, '/').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()} */}
+                        {new Date(reminder.end_date).toLocaleString().replace(/-/g, '/')}
-                        {reminder.end_date.split('.')[0].replace(/-/g, '/').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
+                    <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>
-                        type="button"
-                        className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
-                      >
-                        Edit
-                      </button>
                     </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()} */}
+                            {new Date(reminder.added).toLocaleString().replace(/-/g, '/')}
-                              {reminder.added.split('.')[0].replace(/-/g, '/').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()} */}
+                        {new Date(reminder.start_date).toLocaleString().replace(/-/g, '/')}
-                        {reminder.start_date.split('.')[0].replace(/-/g, '/').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()} */}
+                        {new Date(reminder.end_date).toLocaleString().replace(/-/g, '/')}
-                        {reminder.end_date.split('.')[0].replace(/-/g, '/').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

@@ -527,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 { Navigate, Outlet, useNavigate, useLocation } from "react-router-dom";
-// import { toast } from "react-toastify";
+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 />;