feat/BAC-31-Register-handle-form-errors

src/api/axios/custom-instance.ts

@@ -5,12 +5,13 @@ import { getApiError } from '@baca/utils'
 import Axios, { AxiosError, AxiosRequestConfig } from 'axios'
 import i18n from 'i18next'
 import qs from 'qs'
+import { notify } from 'react-native-notificated'
 
 import { injectTokenToRequest } from './interceptors'
 
 export type ApiError = {
-  message: string
-  errors: {
+  error?: string
+  errors?: {
     [key: string]: string[]
   }
 }
@@ -35,9 +36,18 @@ AXIOS_INSTANCE.interceptors.response.use(
     return response
   },
   async (error: AxiosError<ApiError>) => {
-    const errorMessage = error?.response?.data?.message
+    const errorMessage = error?.response?.data?.error
+    const formErrors = error?.response?.data?.errors
 
+    if (formErrors) {
+      throw formErrors
+    }
+
+    // TODO: we should handle certain error type
     if (errorMessage) {
+      notify('error', {
+        params: { title: 'ERROR', description: i18n.t('errors.something_went_wrong') },
+      })
       //CONFIG: Add errors in getApiError
       const api_error = getApiError(errorMessage)
 

src/hooks/forms/useSignUpForm.ts

@@ -1,6 +1,7 @@
 import { useAuthControllerRegister } from '@baca/api/query/auth/auth'
 import { AuthRegisterLoginDto } from '@baca/api/types'
 import { hapticImpact } from '@baca/utils'
+import { handleFormError } from '@baca/utils/handleFormErrors'
 import { isError } from '@tanstack/react-query'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
@@ -20,14 +21,14 @@ const defaultValues: AuthRegisterLoginDto = {
 export const useSignUpForm = () => {
   const [error, setError] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
-  const { mutate } = useAuthControllerRegister()
-
+  const { mutateAsync } = useAuthControllerRegister()
   const { t } = useTranslation()
 
   const {
     control,
     formState: { errors },
     handleSubmit,
+    setError: setFormError,
     setFocus,
   } = useForm<AuthRegisterLoginDto>({
     mode: 'onTouched',
@@ -39,13 +40,21 @@ export const useSignUpForm = () => {
       setIsSubmitting(true)
       setError('')
 
-      mutate({ data })
+      await mutateAsync({ data })
     } catch (e) {
       if (isError(e)) {
         setError(e.message)
       } else {
         setError(t('errors.something_went_wrong'))
       }
+
+      handleFormError<keyof AuthRegisterLoginDto>(
+        e as keyof AuthRegisterLoginDto,
+        ({ field, description }) => {
+          setFormError(field as keyof AuthRegisterLoginDto, { message: description })
+        }
+      )
+
       hapticImpact()
     } finally {
       setIsSubmitting(false)

src/screens/SignUpScreen.tsx

@@ -1,5 +1,4 @@
 import { ControlledField, KeyboardAwareScrollView } from '@baca/components'
-import { REGEX } from '@baca/constants'
 import { Button, Center, Spacer } from '@baca/design-system'
 import { useScreenOptions, useSignUpForm, useTranslation } from '@baca/hooks'
 import { useCallback, useEffect } from 'react'
@@ -67,10 +66,6 @@ export const SignUpScreen = () => {
           placeholder={t('sign_up_screen.email_placeholder')}
           rules={{
             required: t('form.required'),
-            pattern: {
-              value: REGEX.EMAIL,
-              message: t('form.invalid_email_format'),
-            },
           }}
         />
         <ControlledField.Input
@@ -85,10 +80,6 @@ export const SignUpScreen = () => {
           placeholder={t('sign_up_screen.password_placeholder')}
           rules={{
             required: t('form.required'),
-            pattern: {
-              value: REGEX.REGISTRATION_PASSWORD,
-              message: t('form.invalid_password_format'),
-            },
           }}
           type="password"
         />

src/utils/handleFormErrors.ts

@@ -0,0 +1,21 @@
+type BackendErrorResponseType<TField extends string> =
+  | {
+      [key in TField]: string
+    }
+  | string
+
+type CallbackArgType<TField> = {
+  field: TField
+  description: string
+}
+
+type CallbackType<TField> = (arg: CallbackArgType<TField>) => void
+
+export const handleFormError = <TField extends string>(
+  e: BackendErrorResponseType<TField>,
+  callback: CallbackType<TField>
+) => {
+  Object.entries(e).forEach(([key, value]) => {
+    callback({ field: key as TField, description: value as string })
+  })
+}