activates edit reminder button

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>
                         )