@@ -28,6 +29,8 @@ export default function InputCom({
className="input-field placeholder:text-base text-bese px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
type={type}
id={name}
+ name={name}
+ maxLength={maxLength}
/>
{iconName && (
diff --git a/src/components/Reminders/AddEditReminder.jsx b/src/components/Reminders/AddEditReminder.jsx
index 94c4f1c..ea15153 100644
--- a/src/components/Reminders/AddEditReminder.jsx
+++ b/src/components/Reminders/AddEditReminder.jsx
@@ -1,10 +1,104 @@
-import React from 'react'
+import React, {useState, useEffect} from 'react'
import Layout from '../Partials/Layout'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
+
+// import { toast } from 'react-toastify';
+
import InputCom from "../Helpers/Inputs/InputCom";
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
+
+import usersService from "../../services/UsersService";
+
export default function AddEditReminder({ className }) {
+ let navigate = useNavigate()
+ const api = new usersService();
+
+ const [startDate, setStartDate] = useState(new Date());
+ const [endDate, setEndDate] = useState(new Date());
+
+ const [mode, setMode] = useState([]) // for setting mode option display, content is updated when page loads
+
+ const [category, setCategory] = useState([]) // for setting category option display, content is updated when page loads
+
+ const [success, setSuccess] = useState(false)
+ const [message, setMessage]=useState({
+ status: false,
+ message: ''
+ })
+
+
+ const [reminder, setReminder]=useState({
+ 'member_id': localStorage.getItem('member_id'),
+ description: '',
+ note: '',
+ category: '',
+ mode: '',
+ 'start_date': startDate,
+ 'end_date': endDate
+ })
+
+ const onReminderInputChange = ({target:{name,value}}) => { //function to run when user changes any input on the add reminder page
+ setReminder(prev=>(
+ {...prev, [name]:value}
+ ))
+ }
+
+
+ const getUserMode = async () => {
+ try {
+ const res = await api.getUserModeCategory('remmode');
+ setMode(res.data);
+ } catch (error) {
+ console.log("Error getting mode");
+ }
+ };
+
+ const getUserCategory = async () => {
+ try {
+ const res = await api.getUserModeCategory('remcategory');
+ setCategory(res.data);
+ } catch (error) {
+ console.log("Error getting user category");
+ }
+ };
+
+ const handleAddReminder = async () => { // function to add reminder, after all test cases are met
+ // toast('Reminder Added')
+ setSuccess(true)
+ setMessage({status: true, message: ''})
+ let {description, note, category, mode} = reminder
+ //CHECKING IF AN EMPTY FIELD WAS PASSED
+ if(!description || !note || !category || !mode){
+ setSuccess(false)
+ setMessage({status: false, message: 'All fields must be filled'})
+ return
+ }
+
+ try {
+ const res = await api.addReminder(reminder);
+ if(res && res.status == 200){
+ setSuccess(false)
+ setMessage({status: true, message: 'Reminder added successfully'})
+ setTimeout(()=>{
+ navigate('/reminders', {replace: true})
+ }, 2000)
+ return
+ }
+ setSuccess(false)
+ setMessage({status: false, message: 'Opps cannot add reminder, try again'})
+ } catch (error) {
+ setSuccess(false)
+ setMessage({status: false, message: 'An error occurred'})
+ }
+ }
+
+ useEffect(() => {
+ getUserMode();
+ getUserCategory()
+ }, []);
return (
<>
@@ -16,7 +110,6 @@ export default function AddEditReminder({ className }) {
className || ""
}`}
>
-
{/*description */}
@@ -25,50 +118,80 @@ export default function AddEditReminder({ className }) {
type="text"
name="description"
placeholder="Describe the Reminder"
- value={''}
+ value={reminder.description}
+ inputHandler={onReminderInputChange}
+ maxLength={10}
/>
{/* first name and last name */}
-
+ /> */}
+
+
-
+ /> */}
+
+
-
+ /> */}
+
+
-
+ /> */}
+
+
@@ -78,16 +201,18 @@ export default function AddEditReminder({ className }) {
-
-
+ {message.message}