notification now tells which fields are missing

backend/src/api-tests/timeUnit/create.test.ts

@@ -19,11 +19,11 @@ describe('Creating new time unit works', () => {
   })
 
   it('Request succeeds and returns valid number id', async () => {
-    const { body: resultBody } = await send<{ id: string }>('time-unit', 'PUT', {
+    const { body: resultBody } = await send<{ tu_name: string }>('time-unit', 'PUT', {
       timeUnit: { ...newTimeUnitBasis },
     })
 
-    const { id: createdId } = resultBody
+    const { tu_name: createdId } = resultBody
 
     expect(typeof createdId).toEqual('string') // `Invalid result returned on write: ${createdId}`)
 
@@ -34,7 +34,7 @@ describe('Creating new time unit works', () => {
   it('Contains correct data', () => {
     const { tu_name, tu_display_name, tu_comment } = createdTimeUnit!
     expect(tu_name).toEqual(newTimeUnitBasis.tu_display_name?.toLowerCase().replace(' ', '')) //'Name is different than expected'
-    expect(tu_display_name).toEqual(newTimeUnitBasis.tu_display_name) // 'Display name differs')
+    expect(tu_display_name).toEqual(newTimeUnitBasis.tu_display_name) // 'Display name differs'
     expect(tu_comment).toEqual(newTimeUnitBasis.tu_comment) // 'Comment differs'
   })
 

backend/src/routes/timeUnit.ts

@@ -44,10 +44,10 @@ router.put(
     const { comment, references, ...editedTimeUnit } = req.body.timeUnit
     const validationErrors = validateEntireTimeUnit(editedTimeUnit)
     if (validationErrors.length > 0) {
-      return res.status(400).send({ validationErrors })
+      return res.status(403).send(validationErrors)
     }
-    const result = await writeTimeUnit(editedTimeUnit, comment, references, req.user!.initials)
-    return res.status(200).send({ id: result })
+    const tu_name = await writeTimeUnit(editedTimeUnit, comment, references, req.user!.initials)
+    return res.status(200).send({ tu_name })
   }
 )
 

frontend/src/components/TimeUnit/TimeUnitDetails.tsx

@@ -1,4 +1,4 @@
-import { EditDataType, TimeUnitDetailsType } from '@/backendTypes'
+import { EditDataType, TimeUnitDetailsType, ValidationErrors } from '@/backendTypes'
 import { useNotify } from '@/hooks/notification'
 import { CircularProgress } from '@mui/material'
 import { useEffect } from 'react'
@@ -22,25 +22,20 @@ export const TimeUnitDetails = () => {
     document.title = 'New time unit'
   }
   const { isLoading, isError, isFetching, data } = useGetTimeUnitDetailsQuery(encodeURIComponent(id!), { skip: isNew })
-  const [editTimeUnitRequest, { isSuccess: editSuccess, isError: editError }] = useEditTimeUnitMutation()
+  const [editTimeUnitRequest] = useEditTimeUnitMutation()
 
   const notify = useNotify()
   const navigate = useNavigate()
   const [deleteMutation, { isSuccess: deleteSuccess, isError: deleteError }] = useDeleteTimeUnitMutation()
 
   useEffect(() => {
-    if (editSuccess) {
-      notify('Edited item successfully.')
-    } else if (editError) {
-      notify('Could not edit item. Error happened.', 'error')
-    }
     if (deleteSuccess) {
       notify('Deleted item successfully.')
       navigate('/time-unit')
     } else if (deleteError) {
       notify('Could not delete item. Error happened.', 'error')
     }
-  }, [editSuccess, editError, deleteSuccess, deleteError, notify, navigate])
+  }, [deleteSuccess, deleteError, notify, navigate])
 
   if (isError) return <div>Error loading data</div>
   if (isLoading || isFetching || (!data && !isNew)) return <CircularProgress />
@@ -53,7 +48,22 @@ export const TimeUnitDetails = () => {
   }
 
   const onWrite = async (editData: EditDataType<TimeUnitDetailsType>) => {
-    await editTimeUnitRequest(editData)
+    try {
+      const { tu_name } = await editTimeUnitRequest(editData).unwrap()
+      setTimeout(() => navigate(`/time-unit/${tu_name}`), 15)
+      notify('Edited item succesfully.')
+    } catch (e) {
+      if (e && typeof e === 'object' && 'status' in e && e.status !== 403) {
+        notify('Could not edit item. Error happened.', 'error')
+      } else {
+        const error = e as ValidationErrors
+        let message = 'Could not save item. Missing: '
+        Object.keys(error.data).forEach(key => {
+          message += `${error.data[key].name}. `
+        })
+        notify(message, 'error')
+      }
+    }
   }
 
   const tabs: TabType[] = [