Bugfix/reminder validation error (#106)

* refactor pet reducer methods to async/await (#101) * refactor pet reducer methods to async/await * convert reminder reducer to async-await * change reminder controller error handling * change on reminderform * complete error handling on reminder form * rebase main and run build * rebase main and run build again * remove console log * appease linter error --------- Co-authored-by: Christopher Trent <ChristopherJTrent@outlook.com>
acheung-94 · May 1, 2024 · a5aa2db · a5aa2db
1 parent e07c98f
commit a5aa2db
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 89 deletions.
diff --git a/backend/app/controllers/ReminderController.js b/backend/app/controllers/ReminderController.js
@@ -69,24 +69,30 @@ export default class ReminderController extends ApplicationController {
 		return res.status(404).end()
 	}
 	static async create(req, res, _) {
-		const newReminder = new Reminder({
-			type: req.body.type,
-			title: req.body.title,
-			dueDate: req.body.dueDate,
-			performDate: req.body.performDate,
-			description: req.body.description,
-			location: req.body.location,
-			pet: req.body.pet,
-			user: req.user._id
-		})
-		try{
+		try {
+			const newReminder = new Reminder({
+				type: req.body.type,
+				title: req.body.title,
+				dueDate: req.body.dueDate,
+				performDate: req.body.performDate,
+				description: req.body.description,
+				location: req.body.location,
+				pet: req.body.pet,
+				user: req.user._id
+			})
 			const reminder = await newReminder.save()
-			if (reminder) {
-				return res.json( reminder )
+			return res.json( reminder )
+		} catch (error) {
+			if(error.name === 'ValidationError') {
+				const validationErrors = {}
+				for (let err in error.errors) {
+					validationErrors[err] = error.errors[err].message
+				}
+				return res.status(422).json({ errors: validationErrors })
+			} else {
+				return res.status(500).json({ error: 'Internal server error' })
 			}
-			return res.status(400).end()
-		} catch (err) {
-			return res.status(422).json(err)
+
 		}
 	}
 }
diff --git a/frontend/dist/assets/index-3e6bf173.js → frontend/dist/assets/index-a503083c.js b/frontend/dist/assets/index-3e6bf173.js → frontend/dist/assets/index-a503083c.js
diff --git a/frontend/dist/assets/index-ede0d88a.css → frontend/dist/assets/index-db86f0d3.css b/frontend/dist/assets/index-ede0d88a.css → frontend/dist/assets/index-db86f0d3.css
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/x-icon" href="https://pet-portal-assets.s3.us-west-1.amazonaws.com/paw-svgrepo-com.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Pet Portal</title>
-    <script type="module" crossorigin src="/assets/index-3e6bf173.js"></script>
-    <link rel="stylesheet" href="/assets/index-ede0d88a.css">
+    <script type="module" crossorigin src="/assets/index-a503083c.js"></script>
+    <link rel="stylesheet" href="/assets/index-db86f0d3.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/src/components/ReminderFormModal/ReminderFormModal.css b/frontend/src/components/ReminderFormModal/ReminderFormModal.css
@@ -185,4 +185,9 @@ textarea {
     font-family: Arial, sans-serif; 
     font-size: 14px; 
     color: grey; 
+}
+.reminder-error {
+    font-size: 10px;
+    font-style: italic;
+    color: #f34607;
 }
diff --git a/frontend/src/components/ReminderFormModal/ReminderFormModal.jsx b/frontend/src/components/ReminderFormModal/ReminderFormModal.jsx
@@ -20,6 +20,7 @@ const ReminderFormModal = ({modalState, setModalState, pet, reminder={}}) => {
     const [location, setLocation] = useState(
         modalState === 'edit' ? reminder.location : '')
     const dispatch = useDispatch()
+    const [errors, setErrors] = useState({})
 
     const conditionalOptions = useCallback((type) => {
         switch (type) {
@@ -92,16 +93,28 @@ const ReminderFormModal = ({modalState, setModalState, pet, reminder={}}) => {
         modalState === 'edit' ?
         dispatch(updateReminder(reminderInfo)) :
         dispatch(createReminder(reminderInfo))
+            .then(() => {
+                setErrors({})
+            })
+            .catch(async res =>{
+                let data = await res.json()
+                setErrors(data.errors)
+            })
 
-        setModalState(null)
+        if(Object.keys(errors).length !== 0) {
+            setModalState(null)
+        }
         setType('')
         setTitle('')
         setDue('')
         setPerformDate('')
         setDescription('')
         setLocation('')
     }
-
+
+    useEffect(() => {
+    },[errors])
+
     const reminderForm = () => (
         <>
             <label className="input-label">
@@ -126,6 +139,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.split(' ').slice(1).join(' ')}</div>}
                 <select
                     className="title-select"
                     value={title}
@@ -142,6 +156,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.split(' ').slice(1).join(' ')}</div>}
                 <input placeholder='Due Date' 
                     type={ type === 'appointment' ? 'datetime-local' : 'date'} value={due} onChange={e => setDue(e.target.value)} />
             </label>

diff --git a/frontend/src/store/petReducer.js b/frontend/src/store/petReducer.js
@@ -47,33 +47,31 @@ export const fetchPet = petInfo => dispatch => {
         .then(pet => dispatch(receivePet(pet)))
     }
 
-export const createPet = petInfo => dispatch => (
-    postPet(petInfo)
-        .then(res => {
-            if (res.ok) {
-                return res.json()
-            } else {
-                throw res
-            }
-        })
-        .then(pet => dispatch(receivePet(pet)))
-        .catch(err => console.error(err))
-)
+export const createPet = petInfo => async dispatch => {
+    const res = await postPet(petInfo)
 
-export const updatePet = (petInfo, petId) => dispatch => {
+    if (res.ok) {
+        return dispatch(receivePet(await res.json()))
+    } else if (res.status === 422) {
+        return await res.json()
+    } else {
+        throw res
+    }
+}
+
+export const updatePet = (petInfo, petId) => async dispatch => {
     if (! petId) {
-        console.error('attempted to update a pet without an id')
+        //console.error('attempted to update a pet without an id')
         return petInfo
     }
-    putPet(petInfo, petId)
-        .then(res => {
-            if (res.ok) {
-                return res.json()
-            } else {
-                throw res
-            }
-        })
-        .then(pet => dispatch(receivePet(pet)))
+    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 {
+        throw res
+    }
 }
 
 export const destroyPet = petId => dispatch => (
@@ -96,7 +94,8 @@ const petReducer = (state = {}, action) => {
     switch(action.type) {
         case RECEIVE_PETS:
 
-            return (action.pets.reduce((a, e)=> {
+
+        return (action.pets.reduce((a, e)=> {
                 a[e._id] = e
                 return a
             }, {}))

diff --git a/frontend/src/store/reminderReducer.js b/frontend/src/store/reminderReducer.js
@@ -59,30 +59,27 @@ export const fetchReminder = (reminderId) => dispatch => (
         .then(reminder => dispatch(receiveReminder(reminder)))
         .catch(err => console.error(err))
 )
-export const createReminder = (reminderInfo) => dispatch => (
-    postReminder(reminderInfo)
-        .then(res => {
-            if(res.ok) {
-                return res.json()
-            } else {
-                throw res
-            }
-        })
-        .then(reminder => dispatch(receiveReminder(reminder)))
-        .catch(err => console.error(err))
-)
-export const updateReminder = (reminderInfo) => dispatch => (
-    editReminder(reminderInfo)
-        .then(res => {
-            if(res.ok) {
-                return res.json()
-            } else {
-                throw res
-            }
-        })
-        .then(reminder => dispatch(receiveReminder(reminder)))
-        .catch(err => console.error(err))
-)
+export const createReminder = (reminderInfo) => async dispatch => {
+    const res = await postReminder(reminderInfo)
+
+    if (res.ok) {
+        return dispatch(receiveReminder(await res.json()))
+    } else if (res.status === 422) {
+        return await res.json()
+    } else {
+        throw res
+    }
+}
+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 {
+        throw res
+    }
+}
 
 export const destroyReminder = (reminderId) => dispatch => (
     deleteReminder(reminderId)