MyFit/users-myfit
2
0
Fork 0
Code Issues Pull Requests Releases Activity

activate edit reminder conflict fixed #45

Merged
tokslaw merged 1 commits from activate_edit_reminder_conflict_fixed into master 2023-02-08 13:18:02 +00:00
Conversation 0 Commits 1 Files Changed 3
+38 -42
3 changed files with 38 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Routers.jsx
+1
View File
@@ -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
+27 -22
View File
@@ -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: '',
notes: '',
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,29 +70,31 @@ 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, notes, category, mode} = reminder
let {description, note, category, mode} = reminder
//CHECKING IF AN EMPTY FIELD WAS PASSED
if(!description || !notes || !category || !mode){
if(!description || !note || !category || !mode){
setSuccess(false)
setMessage({status: false, message: 'All fields must be filled'})
return
}
try {
// debugger;
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'})
@@ -121,7 +126,7 @@ export default function AddEditReminder({ className }) {
placeholder="Describe the Reminder"
value={reminder.description}
inputHandler={onReminderInputChange}
maxLength={35}
maxLength={100}
/>
</div>
@@ -136,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='input-field bg-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 ' 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 &&
<>
@@ -157,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='input-field bg-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 ' 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 &&
<>
@@ -181,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
@@ -192,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>
@@ -202,8 +207,8 @@ export default function AddEditReminder({ className }) {
<div className="input-field mt-2">
<div className="input-wrapper w-full ">
<textarea
name='notes'
value={reminder.notes}
name='note'
value={reminder.note}
placeholder="provide a detailed description of your item."
rows="7"
className="w-full h-full px-7 py-4 border border-light-purple dark:border-[#5356fb29] rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
@@ -242,7 +247,7 @@ export default function AddEditReminder({ className }) {
className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
onClick={handleAddReminder}
>
Upadate
{location.state?.reminder ? 'Edit' : 'Upadate'}
</button>
}
</div>
@@ -253,4 +258,4 @@ export default function AddEditReminder({ className }) {
</Layout>
</>
)
}
}
src/components/Reminders/ReminderTable.jsx
+10 -20
View File
@@ -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="btn-gradient lg:flex hidden w-[55px] h-[40px] rounded-full text-white justify-center items-center"
>
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>
)