add possibility of clearing the api error message (#264)

aboutbits · Aug 10, 2023 · 2c0abad · 2c0abad
1 parent 875c18f
commit 2c0abad
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
diff --git a/src/components/react-hook-form/useHandleSubmit.ts b/src/components/react-hook-form/useHandleSubmit.ts
@@ -1,4 +1,5 @@
 import { FieldValues, Path, UseFormReturn } from 'react-hook-form'
+import { useCallback } from 'react'
 import {
   joinFieldErrorMessages,
   useHandleRequest,
@@ -11,7 +12,7 @@ const DEFAULT_ERROR_FIELD_PATH = 'apiError'
 
 export type UseHandleSubmitReturn<V, R> = Pick<
   UseHandleRequestReturn<V, R>,
-  'apiErrorMessage'
+  'apiErrorMessage' | 'clearApiErrorMessage'
 > & {
   isSubmitting: boolean
   triggerSubmit: UseHandleRequestTrigger<V, R>
@@ -39,11 +40,12 @@ export function useHandleSubmit<
 
   options?: UseHandleRequestOptions<TActualFieldValues, Response, Error>,
 ): UseHandleSubmitReturn<TActualFieldValues, Response> {
-  const { apiErrorMessage, isRequesting, triggerRequest } = useHandleRequest<
-    TActualFieldValues,
-    Response,
-    Error
-  >(
+  const {
+    apiErrorMessage,
+    clearApiErrorMessage,
+    isRequesting,
+    triggerRequest,
+  } = useHandleRequest<TActualFieldValues, Response, Error>(
     async (values) => {
       clearErrors(DEFAULT_ERROR_FIELD_PATH as Path<TFieldValues>)
       return await submitAction(values)
@@ -69,8 +71,14 @@ export function useHandleSubmit<
     },
   )
 
+  const clearError = useCallback(() => {
+    clearErrors(DEFAULT_ERROR_FIELD_PATH as Path<TFieldValues>)
+    clearApiErrorMessage()
+  }, [clearApiErrorMessage, clearErrors])
+
   return {
     apiErrorMessage,
+    clearApiErrorMessage: clearError,
     isSubmitting: isRequesting,
     triggerSubmit: triggerRequest,
   }

diff --git a/src/components/util/__test__/useHandleRequest.test.ts b/src/components/util/__test__/useHandleRequest.test.ts
@@ -81,7 +81,7 @@ describe('useHandleRequest', () => {
 
     await act(() => result.current.triggerRequest())
 
-    expect(result.current.apiErrorMessage).toBe('Server Error')
+    expect(result.current.apiErrorMessage).toBe(expectedErrorMessage)
 
     act(() => {
       void result.current.triggerRequest()
@@ -115,4 +115,19 @@ describe('useHandleRequest', () => {
 
     expect(result.current.apiErrorMessage).toBe(defaultMessages['error.api'])
   })
+
+  test('should correctly clear the api error message', async () => {
+    const { result } = renderHook(() =>
+      useHandleRequest(onRequestWithErrorResponse, { onSuccess }),
+    )
+    expect(result.current.apiErrorMessage).toBeUndefined()
+
+    await act(() => result.current.triggerRequest())
+    expect(result.current.apiErrorMessage).toBe(expectedErrorMessage)
+
+    act(() => {
+      result.current.clearApiErrorMessage()
+    })
+    expect(result.current.apiErrorMessage).toBeUndefined()
+  })
 })
diff --git a/src/components/util/useHandleRequest.ts b/src/components/util/useHandleRequest.ts
@@ -37,6 +37,7 @@ export type UseHandleRequestReturn<V, R> = {
   apiErrorMessage: string | undefined
   isRequesting: boolean
   triggerRequest: UseHandleRequestTrigger<V, R>
+  clearApiErrorMessage: () => void
 }
 
 export function useHandleRequest<
@@ -52,6 +53,10 @@ export function useHandleRequest<
   const { messages } = useInternationalization()
   const isMounted = useIsMounted()
 
+  const clearApiErrorMessage = useCallback(() => {
+    setApiErrorMessage(undefined)
+  }, [])
+
   const triggerRequest: UseHandleRequestTrigger<Values, Response> = useCallback(
     async (values) => {
       try {
@@ -92,6 +97,7 @@ export function useHandleRequest<
 
   return {
     apiErrorMessage,
+    clearApiErrorMessage,
     isRequesting,
     triggerRequest,
   }