From 5b845baac9308a7c71a028d8de44a6afdd793c86 Mon Sep 17 00:00:00 2001
From: acheung-94 <acheung@ucdavis.edu>
Date: Wed, 1 May 2024 12:03:12 -0700
Subject: [PATCH 1/5] add past/future date validations to schema

---
 backend/app/models/Pet.js      | 3 ++-
 backend/app/models/Reminder.js | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/backend/app/models/Pet.js b/backend/app/models/Pet.js
index 4d5f2eb..3c93f41 100644
--- a/backend/app/models/Pet.js
+++ b/backend/app/models/Pet.js
@@ -7,7 +7,8 @@ const petSchema = Schema({
 	},
 	dob: {
 		type: Date,
-		required: true
+		required: true,
+		max: Date.now
 	},
 	sex: {
 		type: String,
diff --git a/backend/app/models/Reminder.js b/backend/app/models/Reminder.js
index 7ed4ef9..40d6518 100644
--- a/backend/app/models/Reminder.js
+++ b/backend/app/models/Reminder.js
@@ -8,11 +8,13 @@ const reminderSchema = Schema({
 	},
 	dueDate: {
 		type: Date,
-		required: true
+		required: true,
+		min: Date.now
 	},
 	performDate: {
 		type: Date,
-		required: false
+		required: false,
+		max: Date.now
 	},
 	description: {
 		type: String,

From 8ae4bdfdd6990a0d9ded79d259bdf65c59217b5f Mon Sep 17 00:00:00 2001
From: acheung-94 <acheung@ucdavis.edu>
Date: Wed, 1 May 2024 13:05:30 -0700
Subject: [PATCH 2/5] add error rendering to due date and perform date on
 reminders, customize validation messages

---
 backend/app/models/Pet.js                     |  2 +-
 backend/app/models/Reminder.js                |  8 +--
 .../ReminderFormModal/ReminderFormModal.jsx   | 56 ++++++++++++-------
 3 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/backend/app/models/Pet.js b/backend/app/models/Pet.js
index 3c93f41..f01ded5 100644
--- a/backend/app/models/Pet.js
+++ b/backend/app/models/Pet.js
@@ -8,7 +8,7 @@ const petSchema = Schema({
 	dob: {
 		type: Date,
 		required: true,
-		max: Date.now
+		max: [Date.now, 'Pet birthdate can\'t be in the future.']
 	},
 	sex: {
 		type: String,
diff --git a/backend/app/models/Reminder.js b/backend/app/models/Reminder.js
index 40d6518..51fe9cb 100644
--- a/backend/app/models/Reminder.js
+++ b/backend/app/models/Reminder.js
@@ -3,18 +3,18 @@ import mongoose, { Schema } from 'mongoose'
 const reminderSchema = Schema({
 	title: {
 		type: String,
-		required: true,
+		required: [true, 'Must select a title.'],
 		maxLength: 32
 	},
 	dueDate: {
 		type: Date,
-		required: true,
-		min: Date.now
+		required: [true, 'Must enter a date.'],
+		min: [Date.now, 'Due date can\'t be in the past.']
 	},
 	performDate: {
 		type: Date,
 		required: false,
-		max: Date.now
+		max: [Date.now, 'Perform date can\'t be in the future.']
 	},
 	description: {
 		type: String,
diff --git a/frontend/src/components/ReminderFormModal/ReminderFormModal.jsx b/frontend/src/components/ReminderFormModal/ReminderFormModal.jsx
index 453c740..83231cf 100644
--- a/frontend/src/components/ReminderFormModal/ReminderFormModal.jsx
+++ b/frontend/src/components/ReminderFormModal/ReminderFormModal.jsx
@@ -19,6 +19,7 @@ const ReminderFormModal = ({modalState, setModalState, pet, reminder={}}) => {
         modalState === 'edit' ? reminder.description : '')
     const [location, setLocation] = useState(
         modalState === 'edit' ? reminder.location : '')
+    const [reminderErrors, setReminderErrors] = useState({})
     const dispatch = useDispatch()
     const [errors, setErrors] = useState({})
 
@@ -90,31 +91,43 @@ const ReminderFormModal = ({modalState, setModalState, pet, reminder={}}) => {
             pet: pet._id
         }
 
-        modalState === 'edit' ?
-        dispatch(updateReminder(reminderInfo)) :
-        dispatch(createReminder(reminderInfo))
-            .then(() => {
-                setErrors({})
+        if (modalState === 'edit') {
+            dispatch(updateReminder(reminderInfo))
+            .then( () => {
+                setModalState(null)
+                setType('')
+                setTitle('')
+                setDue('')
+                setPerformDate('')
+                setDescription('')
+                setLocation('')
             })
-            .catch(async res =>{
-                let data = await res.json()
-                setErrors(data.errors)
+            .catch( async (res) => {
+                let errors = await res.json()
+                console.log(errors.errors)
+                setReminderErrors(errors.errors)
             })
 
-        if(Object.keys(errors).length !== 0) {
-            setModalState(null)
+        }else {
+            dispatch(createReminder(reminderInfo))
+            .then( () => {
+                setModalState(null)
+                setType('')
+                setTitle('')
+                setDue('')
+                setPerformDate('')
+                setDescription('')
+                setLocation('')
+            })
+            .catch( async (res) => {
+                let errors = await res.json()
+                setReminderErrors(errors.errors)
+                console.log(errors.errors)
+            })
         }
-        setType('')
-        setTitle('')
-        setDue('')
-        setPerformDate('')
-        setDescription('')
-        setLocation('')
     }
 
-    useEffect(() => {
-    },[errors])
-
+    
     const reminderForm = () => (
         <>
             <label className="input-label">
@@ -143,6 +156,7 @@ const ReminderFormModal = ({modalState, setModalState, pet, reminder={}}) => {
                 <select
                     className="title-select"
                     value={title}
+                    onFocus={() => setReminderErrors( old => ({...old, title:null}))}
                     onChange={e => setTitle(e.target.value)}>
                     <optgroup>
                         <option disabled value=""> {`Select ${modalState !== 'edit' && modalState}`} </option>
@@ -152,14 +166,17 @@ const ReminderFormModal = ({modalState, setModalState, pet, reminder={}}) => {
                     </optgroup>
                 </select>
             </label>
+            {reminderErrors.title && <span className='errors'>{reminderErrors.title.message}</span>}
             <label className="input-label">
                 <div className='duedate-input-label'>
                     <span>Due Date<span className="required">· required</span></span>
                 </div>
                 {errors.dueDate && <div className='reminder-error'>* {errors.dueDate.split(' ').slice(1).join(' ')}</div>}
                 <input placeholder='Due Date' 
+                    onFocus={() => setReminderErrors( old => ({...old, dueDate:null}))}
                     type={ type === 'appointment' ? 'datetime-local' : 'date'} value={due} onChange={e => setDue(e.target.value)} />
             </label>
+            {reminderErrors.dueDate && <span className='errors'>{reminderErrors.dueDate.message}</span>}
             <label className="input-label">
                 <div className='perform-date-input-label'>
                     <span>Perform Date</span>
@@ -167,6 +184,7 @@ const ReminderFormModal = ({modalState, setModalState, pet, reminder={}}) => {
                 <input placeholder='Perform Date' 
                     type={ type === 'appointment' ? 'datetime-local' : 'date'} value={performDate} onChange={e => setPerformDate(e.target.value)} />
             </label>
+            {reminderErrors.performDate && <span className='errors'>{reminderErrors.performDate.message}</span>}
             <label className='input-label'>
                 <div className='description-input-label'>
                     <span>Description</span>

From 8d4d272c4476c0970383ff9785bcb0dec5a46657 Mon Sep 17 00:00:00 2001
From: acheung-94 <acheung@ucdavis.edu>
Date: Wed, 1 May 2024 13:15:08 -0700
Subject: [PATCH 3/5] reconcile error styling

---
 .../ReminderFormModal/ReminderFormModal.jsx   | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/ReminderFormModal/ReminderFormModal.jsx b/frontend/src/components/ReminderFormModal/ReminderFormModal.jsx
index 83231cf..2f26fbf 100644
--- a/frontend/src/components/ReminderFormModal/ReminderFormModal.jsx
+++ b/frontend/src/components/ReminderFormModal/ReminderFormModal.jsx
@@ -19,7 +19,6 @@ const ReminderFormModal = ({modalState, setModalState, pet, reminder={}}) => {
         modalState === 'edit' ? reminder.description : '')
     const [location, setLocation] = useState(
         modalState === 'edit' ? reminder.location : '')
-    const [reminderErrors, setReminderErrors] = useState({})
     const dispatch = useDispatch()
     const [errors, setErrors] = useState({})
 
@@ -104,8 +103,8 @@ const ReminderFormModal = ({modalState, setModalState, pet, reminder={}}) => {
             })
             .catch( async (res) => {
                 let errors = await res.json()
-                console.log(errors.errors)
-                setReminderErrors(errors.errors)
+
+                setErrors(errors.errors)
             })
 
         }else {
@@ -121,8 +120,8 @@ const ReminderFormModal = ({modalState, setModalState, pet, reminder={}}) => {
             })
             .catch( async (res) => {
                 let errors = await res.json()
-                setReminderErrors(errors.errors)
-                console.log(errors.errors)
+                setErrors(errors.errors)
+
             })
         }
     }
@@ -152,11 +151,11 @@ const ReminderFormModal = ({modalState, setModalState, pet, reminder={}}) => {
                 <div className='title-select-label'>
                     <span>Title<span className="required">· required</span></span>
                 </div>
-                {errors.title && <div className='reminder-error'>* {errors.title.split(' ').slice(1).join(' ')}</div>}
+                {errors.title && <div className='reminder-error'>* {errors.title.message}</div>}
                 <select
                     className="title-select"
                     value={title}
-                    onFocus={() => setReminderErrors( old => ({...old, title:null}))}
+                    onFocus={() => setErrors( old => ({...old, title:null}))}
                     onChange={e => setTitle(e.target.value)}>
                     <optgroup>
                         <option disabled value=""> {`Select ${modalState !== 'edit' && modalState}`} </option>
@@ -166,17 +165,17 @@ const ReminderFormModal = ({modalState, setModalState, pet, reminder={}}) => {
                     </optgroup>
                 </select>
             </label>
-            {reminderErrors.title && <span className='errors'>{reminderErrors.title.message}</span>}
+            
             <label className="input-label">
                 <div className='duedate-input-label'>
                     <span>Due Date<span className="required">· required</span></span>
                 </div>
-                {errors.dueDate && <div className='reminder-error'>* {errors.dueDate.split(' ').slice(1).join(' ')}</div>}
+                {errors.dueDate && <div className='reminder-error'>* {errors.dueDate.message}</div>}
                 <input placeholder='Due Date' 
-                    onFocus={() => setReminderErrors( old => ({...old, dueDate:null}))}
+                    onFocus={() => setErrors( old => ({...old, dueDate:null}))}
                     type={ type === 'appointment' ? 'datetime-local' : 'date'} value={due} onChange={e => setDue(e.target.value)} />
             </label>
-            {reminderErrors.dueDate && <span className='errors'>{reminderErrors.dueDate.message}</span>}
+            
             <label className="input-label">
                 <div className='perform-date-input-label'>
                     <span>Perform Date</span>
@@ -184,7 +183,7 @@ const ReminderFormModal = ({modalState, setModalState, pet, reminder={}}) => {
                 <input placeholder='Perform Date' 
                     type={ type === 'appointment' ? 'datetime-local' : 'date'} value={performDate} onChange={e => setPerformDate(e.target.value)} />
             </label>
-            {reminderErrors.performDate && <span className='errors'>{reminderErrors.performDate.message}</span>}
+            
             <label className='input-label'>
                 <div className='description-input-label'>
                     <span>Description</span>

From f73c6fe685fb71b8722e77fa626fd5f85626605e Mon Sep 17 00:00:00 2001
From: acheung-94 <acheung@ucdavis.edu>
Date: Wed, 1 May 2024 13:15:42 -0700
Subject: [PATCH 4/5] customize error messages for Pet

---
 backend/app/models/Pet.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/backend/app/models/Pet.js b/backend/app/models/Pet.js
index f01ded5..28e707c 100644
--- a/backend/app/models/Pet.js
+++ b/backend/app/models/Pet.js
@@ -3,26 +3,26 @@ import mongoose, { Schema } from 'mongoose'
 const petSchema = Schema({
 	name: {
 		type: String,
-		required: true
+		required: [true, 'Must provide a name.']
 	},
 	dob: {
 		type: Date,
-		required: true,
+		required: [true, 'Must provide a birth date.'],
 		max: [Date.now, 'Pet birthdate can\'t be in the future.']
 	},
 	sex: {
 		type: String,
-		lowercase: true,
+		lowercase: [true, 'Must provide a sex.'],
 		trim: true,
 		match: /(male|female|unknown)/
 	},
 	species: {
 		type: String,
-		required: true
+		required: [true, 'Must provide a species.']
 	},
 	color: {
 		type: String,
-		required: true
+		required: [true, 'Must provide a color.']
 	},
 	breed: {
 		type: String,

From b41d002cecc721d94aa0147cd1ef111682c15e3d Mon Sep 17 00:00:00 2001
From: acheung-94 <acheung@ucdavis.edu>
Date: Wed, 1 May 2024 13:38:59 -0700
Subject: [PATCH 5/5] add error rendering to pet form

---
 .../NewPetFormModal/NewPetFormModal.css       |  8 +++
 .../NewPetFormModal/NewPetFormModal.jsx       | 52 ++++++++++++-------
 .../ReminderFormModal/ReminderFormModal.jsx   |  5 +-
 frontend/src/store/petReducer.js              |  8 +--
 frontend/src/store/reminderReducer.js         |  8 +--
 5 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/NewPetFormModal/NewPetFormModal.css b/frontend/src/components/NewPetFormModal/NewPetFormModal.css
index 096a22c..afa2aa2 100644
--- a/frontend/src/components/NewPetFormModal/NewPetFormModal.css
+++ b/frontend/src/components/NewPetFormModal/NewPetFormModal.css
@@ -153,6 +153,9 @@
 
 .input-label {
     padding-bottom: 5px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
 }
 
 .input-label input{
@@ -217,4 +220,9 @@ input[type="file"] {
     border:2px solid rgb(205, 205, 205);
     border-radius: 16px;
     font-size: 16px;
+}
+.errors{
+    font-size: 12px;
+    font-style: italic;
+    color: #f34607;
 }
\ No newline at end of file
diff --git a/frontend/src/components/NewPetFormModal/NewPetFormModal.jsx b/frontend/src/components/NewPetFormModal/NewPetFormModal.jsx
index 0e0c697..ea678f0 100644
--- a/frontend/src/components/NewPetFormModal/NewPetFormModal.jsx
+++ b/frontend/src/components/NewPetFormModal/NewPetFormModal.jsx
@@ -18,6 +18,7 @@ const NewPetForm = ({modalState, setModalState, editModalState, setEditModalStat
     const [photo, setPhoto] = useState(initialPetData ? initialPetData.photo : null)
     const [imageUpdated, setImageUpdated] = useState(false)
     const [filePreview, setFilePreview] = useState(initialPetData?.imageUrl ?? '')
+    const [petErrors, setPetErrors] = useState({})
     const dispatch = useDispatch();
     const location = useLocation()
     const {pathname} = location
@@ -49,8 +50,15 @@ const NewPetForm = ({modalState, setModalState, editModalState, setEditModalStat
             }
         }
         dispatch(updatePet(data, petId))
-        setEditModalState(null)
-        setImageUpdated(false)
+        .then( () => {
+            setEditModalState(null)
+            setImageUpdated(false)
+        })
+        .catch( async res => {
+            let errors = await res.json()
+            setPetErrors(errors.errors)
+        })
+
     }
     
     const handleCreateSubmit = (e) => {
@@ -80,22 +88,25 @@ const NewPetForm = ({modalState, setModalState, editModalState, setEditModalStat
             data.append('image', photo);
         }
 
-        // if( /dashboard\/?$/.test(pathname)) {
         dispatch(createPet(data))
-        setModalState(null)
-        // }
-
-        setName('')
-        setDob('')
-        setSex('')
-        setSpecies('')
-        setColor('')
-        setBreed('')
-        setMicrochipNum('')
-        setInsurancePolicyId('')
-        setWeight('')
-        setPhoto(null)
-        setFilePreview('')
+        .then( () => {
+            setModalState(null)
+            setName('')
+            setDob('')
+            setSex('')
+            setSpecies('')
+            setColor('')
+            setBreed('')
+            setMicrochipNum('')
+            setInsurancePolicyId('')
+            setWeight('')
+            setPhoto(null)
+            setFilePreview('')
+        })
+        .catch( async res => {
+            let errors = await res.json()
+            setPetErrors(errors.errors)
+        })
     } 
 
 
@@ -110,6 +121,7 @@ const NewPetForm = ({modalState, setModalState, editModalState, setEditModalStat
                 <div className='name-input-label'>
                     <span>Name<span className="required">· required</span></span>
                 </div>
+                {petErrors.name && <span className="errors">{petErrors.name.message}</span> }
                 <input placeholder='Name' 
                     type='text' value={name} onChange={e => setName(e.target.value)} />
             </label>
@@ -118,6 +130,7 @@ const NewPetForm = ({modalState, setModalState, editModalState, setEditModalStat
                 <div className='dob-input-label'>
                     <span>Date of Birth<span className="required">· required</span></span>
                 </div>
+                {petErrors.dob && <span className="errors">{petErrors.dob.message}</span> }
                 <input placeholder='Date of birth' 
                     type='date' value={dob} onChange={e => setDob(e.target.value)} />
             </label>
@@ -126,6 +139,7 @@ const NewPetForm = ({modalState, setModalState, editModalState, setEditModalStat
                 <div className='sex-select-label'>
                     <span>Sex<span className="required">· required</span></span>
                 </div>
+                {petErrors.sex && <span className="errors">{petErrors.sex.message}</span> }
                 <select
                     className="sex-select"
                     placeholder='Sex'
@@ -138,12 +152,13 @@ const NewPetForm = ({modalState, setModalState, editModalState, setEditModalStat
                         <option value="unknown" id="unknown">Unknown</option>
 
                     </optgroup>
-                </select>
+                </select> 
             </label>
             <label className="input-label">
                 <div className='species-input-label'>
                     <span>Species<span className="required">· required</span></span>
                 </div>
+                {petErrors.species && <span className="errors">{petErrors.species.message}</span> }
                 <select className='species-select'
                         value={species}
                         onChange={e => setSpecies(e.target.value)}>
@@ -159,6 +174,7 @@ const NewPetForm = ({modalState, setModalState, editModalState, setEditModalStat
                 <div className='color-input-label'>
                     <span>Color<span className="required">· required</span></span> 
                 </div>
+                {petErrors.color && <span className="errors">{petErrors.color.message}</span> }
                 <input placeholder='Color' 
                     type='text' value={color} onChange={e => setColor(e.target.value)} />
             </label>
diff --git a/frontend/src/components/ReminderFormModal/ReminderFormModal.jsx b/frontend/src/components/ReminderFormModal/ReminderFormModal.jsx
index 2f26fbf..7f9b8b6 100644
--- a/frontend/src/components/ReminderFormModal/ReminderFormModal.jsx
+++ b/frontend/src/components/ReminderFormModal/ReminderFormModal.jsx
@@ -121,6 +121,7 @@ const ReminderFormModal = ({modalState, setModalState, pet, reminder={}}) => {
             .catch( async (res) => {
                 let errors = await res.json()
                 setErrors(errors.errors)
+                console.log(errors.errors)
 
             })
         }
@@ -151,7 +152,7 @@ const ReminderFormModal = ({modalState, setModalState, pet, reminder={}}) => {
                 <div className='title-select-label'>
                     <span>Title<span className="required">· required</span></span>
                 </div>
-                {errors.title && <div className='reminder-error'>* {errors.title.message}</div>}
+                {errors.title && <div className='reminder-error'>* {errors.title}</div>}
                 <select
                     className="title-select"
                     value={title}
@@ -170,7 +171,7 @@ const ReminderFormModal = ({modalState, setModalState, pet, reminder={}}) => {
                 <div className='duedate-input-label'>
                     <span>Due Date<span className="required">· required</span></span>
                 </div>
-                {errors.dueDate && <div className='reminder-error'>* {errors.dueDate.message}</div>}
+                {errors.dueDate && <div className='reminder-error'>* {errors.dueDate}</div>}
                 <input placeholder='Due Date' 
                     onFocus={() => setErrors( old => ({...old, dueDate:null}))}
                     type={ type === 'appointment' ? 'datetime-local' : 'date'} value={due} onChange={e => setDue(e.target.value)} />
diff --git a/frontend/src/store/petReducer.js b/frontend/src/store/petReducer.js
index 05757f4..e0f9739 100644
--- a/frontend/src/store/petReducer.js
+++ b/frontend/src/store/petReducer.js
@@ -52,9 +52,7 @@ export const createPet = petInfo => async dispatch => {
 
     if (res.ok) {
         return dispatch(receivePet(await res.json()))
-    } else if (res.status === 422) {
-        return await res.json()
-    } else {
+    }else {
         throw res
     }
 }
@@ -67,9 +65,7 @@ export const updatePet = (petInfo, petId) => async dispatch => {
     const res = await putPet(petInfo, petId)
     if (res.ok) {
         return dispatch(receivePet(await res.json()))
-    } else if (res.status === 422) {
-        return await res.json()
-    } else {
+    }else {
         throw res
     }
 }
diff --git a/frontend/src/store/reminderReducer.js b/frontend/src/store/reminderReducer.js
index 826c38c..f95f1cd 100644
--- a/frontend/src/store/reminderReducer.js
+++ b/frontend/src/store/reminderReducer.js
@@ -64,9 +64,7 @@ export const createReminder = (reminderInfo) => async dispatch => {
 
     if (res.ok) {
         return dispatch(receiveReminder(await res.json()))
-    } else if (res.status === 422) {
-        return await res.json()
-    } else {
+    }else {
         throw res
     }
 }
@@ -74,9 +72,7 @@ export const updateReminder = (reminderInfo) => async dispatch => {
     const res = await editReminder(reminderInfo)
     if (res.ok){
         return dispatch(receiveReminder(await res.json()))
-    } else if (res.status === 422) {
-        return await res.json()
-    } else {
+    }else {
         throw res
     }
 }