feat: #20: add error handling from the backend to the workEntryModal

Author: MDI74

src/pages/time-tracker/sections/work-entry-modal/WorkEntryModalContainer.cy.tsx

@@ -31,14 +31,8 @@ function addWorkEntryTests() {
   beforeEach(() => {
     workEntryModalState = new WorkEntryModalState()
 
-    workEntryModalState.setDate({
-      date: new Date(`2025-11-27T09:00:00`),
-    })
-    workEntryModalState.setStartTime({
-      startTime: new Date(`2025-11-27T09:00:00`),
-    })
-    workEntryModalState.setEndTime({
-      endTime: new Date(`2025-11-27T11:30:00`),
+    setDateAndTime({
+      workEntryModalState,
     })
   })
 
@@ -125,16 +119,8 @@ function updateWorkEntryTests() {
       description: `Task description`,
     })
 
-    workEntryModalState.setDate({
-      date: new Date(`2025-11-27T09:00:00`),
-    })
-
-    workEntryModalState.setStartTime({
-      startTime: new Date(`2025-11-27T09:00:00`),
-    })
-    
-    workEntryModalState.setEndTime({
-      endTime: new Date(`2025-11-27T11:30:00`),
+    setDateAndTime({
+      workEntryModalState,
     })
   })
 
@@ -204,20 +190,17 @@ function onCloseModalTests() {
     workEntryModalState.setTitle({
       title: `Title`,
     })
+
     workEntryModalState.setTaskId({
       taskId: `TaskId`,
     })
+
     workEntryModalState.setDescription({
       description: `Description`,
     })
-    workEntryModalState.setDate({
-      date: new Date(`2025-11-27T09:00:00`),
-    })
-    workEntryModalState.setStartTime({
-      startTime: new Date(`2025-11-27T09:00:00`),
-    })
-    workEntryModalState.setEndTime({
-      endTime: new Date(`2025-11-27T11:30:00`),
+
+    setDateAndTime({
+      workEntryModalState,
     })
   })
 
@@ -281,14 +264,8 @@ function setErrorTests() {
   beforeEach(() => {
     workEntryModalState = new WorkEntryModalState()
 
-    workEntryModalState.setDate({
-      date: new Date(`2025-11-27T09:00:00`),
-    })
-    workEntryModalState.setStartTime({
-      startTime: new Date(`2025-11-27T09:00:00`),
-    })
-    workEntryModalState.setEndTime({
-      endTime: new Date(`2025-11-27T11:30:00`),
+    setDateAndTime({
+      workEntryModalState,
     })
   })
 
@@ -308,6 +285,47 @@ function setErrorTests() {
 
     cy.contains(`Fill in all the fields`)
   })
+
+  it(`
+  GIVEN opened work entry modal
+  WHEN click on submit button
+  AND server validation error will be returned
+  SHOULD display error message
+  `, () => {
+    cy
+      .intercept(
+        `POST`,
+        `*/time/tracking/work-entries`,
+        {
+          statusCode: 400,
+          body: {
+            detail: `Error message`,
+          },
+        },
+      )
+      
+    workEntryModalState.setTitle({
+      title: `Task name`,
+    })
+
+    workEntryModalState.setTaskId({
+      taskId: `1`,
+    })
+    
+    workEntryModalState.setDescription({
+      description: `Task description`,
+    })
+    
+    mountComponent({
+      workEntryModalState,
+    })
+
+    cy
+      .contains(`Add Task`)
+      .click()
+
+    cy.contains(`Error message`)
+  })
 }
 
 function mountComponent({
@@ -333,3 +351,19 @@ function mountComponent({
       </WorkEntryModalStateContext.Provider>,
     )
 }
+
+function setDateAndTime({
+  workEntryModalState,
+}: {
+  workEntryModalState: WorkEntryModalState,
+}) {
+  workEntryModalState.setDate({
+    date: new Date(`2025-11-27T09:00:00`),
+  })
+  workEntryModalState.setStartTime({
+    startTime: new Date(`2025-11-27T09:00:00`),
+  })
+  workEntryModalState.setEndTime({
+    endTime: new Date(`2025-11-27T11:30:00`),
+  })
+}

src/pages/time-tracker/sections/work-entry-modal/WorkEntryModalContainer.tsx

@@ -4,6 +4,7 @@ import { useContext } from "react"
 import { WorkEntryModalStateContext } from "./state/WorkEntryModalStateContext"
 import { concatDateAndTime } from "../../utils/date-and-time"
 import { api } from "../../../../common/api/api"
+import axios from "axios"
 
 export const WorkEntryModalContainer = observer(({
   onClose,
@@ -71,6 +72,15 @@ export const WorkEntryModalContainer = observer(({
 
       workEntryModalState.resetError()
     }
+    catch (error) {
+      if (axios.isAxiosError(error)) {
+        if (error.response) {
+          workEntryModalState.setError({
+            error: error.response.data.detail,
+          })
+        }
+      }
+    }
     finally {
       workEntryModalState.resetIsSaving()
       workEntryModalState.resetIsTriedToSubmit()