updated reminder state

src/components/Reminders/AddEditReminder.jsx

@@ -5,8 +5,10 @@ import { Link, useNavigate, useLocation, useParams } 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";
 
 
@@ -35,8 +37,8 @@ export default function AddEditReminder({ className }) {
     'member_id': localStorage.getItem('member_id'),
     description: location.state?.reminder.description || '',
     note: location.state?.reminder.note || '',
-    category: location.state?.reminder.category || '',
-    mode: location.state?.reminder.mode || '',
+    category: location.state?.reminder.code || '',
+    mode: location.state?.reminder.code || '',
     'start_date': location.state? new Date(location.state?.reminder.start_date) : startDate,
     'end_date': location.state? new Date(location.state?.reminder.end_date) : endDate
   })
@@ -47,7 +49,6 @@ export default function AddEditReminder({ className }) {
     ))
   }
 
-  
   const getUserMode = async () => {
     try {
       const res = await api.getUserModeCategory('remmode');
@@ -85,19 +86,21 @@ export default function AddEditReminder({ className }) {
       const res = await api.addReminder(reminder);
       if(res && res.status == 200){
         setSuccess(false)
-        setMessage({status: true, message: 'Reminder successfully'})
+        setMessage({status: true, message: 'Reminder set successfully'})
         setTimeout(()=>{
           navigate('/reminders', {replace: true})
         }, 2000)
         return
       }
       setSuccess(false)
-      setMessage({status: false, message: `Opps, couldn't perform action`})
+      setMessage({status: false, message: `Sorry, couldn't perform action`})
     } catch (error) {
       setSuccess(false)
       setMessage({status: false, message: 'An error occurred'})
     }
   }
+
+  
   
   useEffect(() => {
     getUserMode();
@@ -130,7 +133,7 @@ export default function AddEditReminder({ className }) {
 
              {/* first name and last name */}
              <div className="xl:flex xl:space-x-7 mb-6">
-              <div className="field w-full reminder-select mb-6 xl:mb-0">
+              <div className="field w-full mb-6 xl:mb-0">
                 {/* <InputCom
                   label="Reminder Type"
                   type="text"
@@ -139,19 +142,19 @@ 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 value={reminder.category} name='category' className='bg-slate-50 rounded-full pl-4 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 &&
                   <>
                     {category.map((option, index)=>(
-                      <option key={index} className='' value={option.category}>{option.category}</option>
+                      <option key={index} className='' value={option.code}>{option.category}</option>
                     ))
                     }
                   </>
                   }
                 </select>
               </div>
-              <div className="field w-full reminder-select">
+              <div className="field w-full">
                 {/* <InputCom
                   label="Mode"
                   type="text"
@@ -160,12 +163,12 @@ 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 value={reminder.mode} name='mode' className='bg-slate-50 rounded-full pl-4 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 &&
                   <>
                     {mode.map((option, index)=>(
-                      <option key={index} className='' value={option.mode}>{option.mode}</option>
+                      <option key={index} className='' value={option.code}>{option.mode}</option>
                     ))
                     }
                   </>

src/index.css

@@ -712,28 +712,3 @@ TODO: Responsive ===========================
   height: 4.813rem !important;
   transition: all 500ms;
 }
-
-.reminder-select select{
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat #fafafa;
-  background-position: calc(100% - 0.75rem) center !important;
-  box-shadow: 0 0 0.5em 0 rgba(194, 194, 194, 0.2); 
-}
-
-.reminder-select select::-ms-expand {
-  display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
-}
-
-.reminder-select select option{
-  color: inherit;
-}
-
-/* Target Internet Explorer 9 to undo the custom arrow */
-@media screen and (min-width:0\0) {
-  .reminder-select select {
-      background: none\9;
-      padding: 5px\9;
-  }
-}