chore: updated old formik forms to use hooks

This commit is contained in:
2024-02-06 20:25:27 -06:00
parent 7f758d9d0b
commit 7d5c0aeea9
5 changed files with 22 additions and 87 deletions
+4 -17
View File
@@ -5,6 +5,7 @@ import FormGroup from '@/components/ui/form/FormGroup'
import Input from '@/components/ui/form/Input' import Input from '@/components/ui/form/Input'
import TextArea from '@/components/ui/form/TextArea' import TextArea from '@/components/ui/form/TextArea'
import { useAppDispatch } from '@/hooks/useAppDispatch' import { useAppDispatch } from '@/hooks/useAppDispatch'
import useManageError from '@/hooks/useManageError'
import { addAlert } from '@/state/feedbackSlice' import { addAlert } from '@/state/feedbackSlice'
import { css } from '@/styled-system/css' import { css } from '@/styled-system/css'
import { teamApplicationDataSchema, type TeamApplicationData } from '@/utilities/teamApplication' import { teamApplicationDataSchema, type TeamApplicationData } from '@/utilities/teamApplication'
@@ -19,6 +20,7 @@ import { useEffect, type FC } from 'react'
const ApplyForm: FC = () => { const ApplyForm: FC = () => {
const searchParams = useSearchParams() const searchParams = useSearchParams()
const { manageError } = useManageError()
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
const formik = useFormik<TeamApplicationData>({ const formik = useFormik<TeamApplicationData>({
@@ -46,26 +48,11 @@ const ApplyForm: FC = () => {
severity: 'success' severity: 'success'
})) }))
} catch (error) { } catch (error) {
if (error instanceof Error) { manageError(error, 'Error al enviar el formulario', 'Error desconocido al enviar el formulario', 'error')
dispatch(addAlert({
id: nanoid(),
title: 'Error al enviar el formulario',
message: error.message,
severity: 'error'
}))
return
}
console.error('Error al enviar el formulario', error)
dispatch(addAlert({
id: nanoid(),
title: 'Error al enviar el formulario',
message: 'Error desconocido',
severity: 'error'
}))
} }
}, },
validationSchema: teamApplicationDataSchema, validationSchema: teamApplicationDataSchema,
isInitialValid: false validateOnMount: true
}) })
useEffect(() => { useEffect(() => {
if (searchParams.has('role')) { if (searchParams.has('role')) {
+5 -19
View File
@@ -6,10 +6,8 @@ import Input from '@/components/ui/form/Input'
import PasswordInput from '@/components/ui/form/PasswordInput' import PasswordInput from '@/components/ui/form/PasswordInput'
import { useAppDispatch } from '@/hooks/useAppDispatch' import { useAppDispatch } from '@/hooks/useAppDispatch'
import { useAppSelector } from '@/hooks/useAppSelector' import { useAppSelector } from '@/hooks/useAppSelector'
import { addAlert } from '@/state/feedbackSlice' import useManageError from '@/hooks/useManageError'
import { setCurrentUser, setSession, setStatus } from '@/state/sessionSlice' import { setCurrentUser, setSession, setStatus } from '@/state/sessionSlice'
import { nanoid } from '@reduxjs/toolkit'
import { AppwriteException } from 'appwrite'
import { getCurrentUser, login } from 'entgamers-database/frontend/session' import { getCurrentUser, login } from 'entgamers-database/frontend/session'
import { useFormik } from 'formik' import { useFormik } from 'formik'
import NextLink from 'next/link' import NextLink from 'next/link'
@@ -29,6 +27,7 @@ const loginSchema = object({
const LoginForm: FC = () => { const LoginForm: FC = () => {
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
const { manageError } = useManageError()
const session = useAppSelector((state) => state.session) const session = useAppSelector((state) => state.session)
const router = useRouter() const router = useRouter()
@@ -45,26 +44,13 @@ const LoginForm: FC = () => {
dispatch(setSession(session)) dispatch(setSession(session))
dispatch(setCurrentUser(user)) dispatch(setCurrentUser(user))
} catch (error) { } catch (error) {
if (error instanceof AppwriteException) { manageError(error, 'Error mientras se iniciaba sesión', 'Error desconocido mientras se iniciaba sesión', 'error')
dispatch(addAlert({
id: nanoid(),
message: error.message,
title: 'Error mientras se iniciaba sesión',
severity: 'error'
}))
} else {
dispatch(addAlert({
id: nanoid(),
message: 'Error desconocido',
title: 'Error mientras se iniciaba sesión',
severity: 'error'
}))
}
} finally { } finally {
dispatch(setStatus('idle')) dispatch(setStatus('idle'))
} }
}, },
validationSchema: loginSchema validationSchema: loginSchema,
validateOnMount: true
}) })
useEffect(() => { useEffect(() => {
@@ -4,9 +4,9 @@ import Typography from '@/components/ui/Typography'
import FormGroup from '@/components/ui/form/FormGroup' import FormGroup from '@/components/ui/form/FormGroup'
import Input from '@/components/ui/form/Input' import Input from '@/components/ui/form/Input'
import { useAppDispatch } from '@/hooks/useAppDispatch' import { useAppDispatch } from '@/hooks/useAppDispatch'
import useManageError from '@/hooks/useManageError'
import { addAlert } from '@/state/feedbackSlice' import { addAlert } from '@/state/feedbackSlice'
import { nanoid } from '@reduxjs/toolkit' import { nanoid } from '@reduxjs/toolkit'
import { AppwriteException } from 'appwrite'
import { createPasswordRecovery } from 'entgamers-database/frontend/session' import { createPasswordRecovery } from 'entgamers-database/frontend/session'
import { useFormik } from 'formik' import { useFormik } from 'formik'
import { type FC } from 'react' import { type FC } from 'react'
@@ -21,6 +21,7 @@ const recoverPasswordSchema = object({
}) })
const CreateRecoverPasswordForm: FC = () => { const CreateRecoverPasswordForm: FC = () => {
const { manageError } = useManageError()
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
const formik = useFormik<RecoverPasswordData>({ const formik = useFormik<RecoverPasswordData>({
@@ -38,25 +39,11 @@ const CreateRecoverPasswordForm: FC = () => {
severity: 'success' severity: 'success'
})) }))
} catch (error) { } catch (error) {
if (error instanceof AppwriteException) { manageError(error, 'Error mientras se registraba', 'Error desconocido mientras se registraba', 'error')
dispatch(addAlert({
id: nanoid(),
message: error.message,
title: 'Error mientras se registraba',
severity: 'error'
}))
} else {
dispatch(addAlert({
id: nanoid(),
message: 'Error desconocido',
title: 'Error mientras se solicitaba la recuperación de contraseña',
severity: 'error'
}))
}
} }
}, },
validationSchema: recoverPasswordSchema, validationSchema: recoverPasswordSchema,
isInitialValid: false validateOnMount: true
}) })
return ( return (
<form <form
@@ -3,9 +3,9 @@ import Typography from '@/components/ui/Typography'
import FormGroup from '@/components/ui/form/FormGroup' import FormGroup from '@/components/ui/form/FormGroup'
import PasswordInput from '@/components/ui/form/PasswordInput' import PasswordInput from '@/components/ui/form/PasswordInput'
import { useAppDispatch } from '@/hooks/useAppDispatch' import { useAppDispatch } from '@/hooks/useAppDispatch'
import useManageError from '@/hooks/useManageError'
import { addAlert } from '@/state/feedbackSlice' import { addAlert } from '@/state/feedbackSlice'
import { nanoid } from '@reduxjs/toolkit' import { nanoid } from '@reduxjs/toolkit'
import { AppwriteException } from 'appwrite'
import { updatePasswordRecovery } from 'entgamers-database/frontend/session' import { updatePasswordRecovery } from 'entgamers-database/frontend/session'
import { useFormik } from 'formik' import { useFormik } from 'formik'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
@@ -34,6 +34,7 @@ const updateRecoverPasswordSchema = object({
const UpdateRecoverPasswordForm: FC<UpdateRecoverPasswordFormProps> = (props) => { const UpdateRecoverPasswordForm: FC<UpdateRecoverPasswordFormProps> = (props) => {
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
const { manageError } = useManageError()
const router = useRouter() const router = useRouter()
const formik = useFormik<UpdateRecoverPasswordData>({ const formik = useFormik<UpdateRecoverPasswordData>({
@@ -54,25 +55,11 @@ const UpdateRecoverPasswordForm: FC<UpdateRecoverPasswordFormProps> = (props) =>
})) }))
router.push('/login') router.push('/login')
} catch (error) { } catch (error) {
if (error instanceof AppwriteException) { manageError(error, 'Error al recuperar contraseña', 'Error desconocido mientras se solicitaba la recuperación de contraseña', 'error')
dispatch(addAlert({
id: nanoid(),
message: error.message,
title: 'Error mientras se registraba',
severity: 'error'
}))
} else {
dispatch(addAlert({
id: nanoid(),
message: 'Error desconocido',
title: 'Error mientras se solicitaba la recuperación de contraseña',
severity: 'error'
}))
}
} }
}, },
validationSchema: updateRecoverPasswordSchema, validationSchema: updateRecoverPasswordSchema,
isInitialValid: false validateOnMount: true
}) })
return ( return (
<form <form
+5 -17
View File
@@ -5,9 +5,9 @@ import FormGroup from '@/components/ui/form/FormGroup'
import Input from '@/components/ui/form/Input' import Input from '@/components/ui/form/Input'
import PasswordInput from '@/components/ui/form/PasswordInput' import PasswordInput from '@/components/ui/form/PasswordInput'
import { useAppDispatch } from '@/hooks/useAppDispatch' import { useAppDispatch } from '@/hooks/useAppDispatch'
import useManageError from '@/hooks/useManageError'
import { addAlert } from '@/state/feedbackSlice' import { addAlert } from '@/state/feedbackSlice'
import { nanoid } from '@reduxjs/toolkit' import { nanoid } from '@reduxjs/toolkit'
import { AppwriteException } from 'appwrite'
import { register } from 'entgamers-database/frontend/session' import { register } from 'entgamers-database/frontend/session'
import { useFormik } from 'formik' import { useFormik } from 'formik'
import { type FC } from 'react' import { type FC } from 'react'
@@ -32,6 +32,7 @@ const RegisterSchema = object({
const RegisterForm: FC = () => { const RegisterForm: FC = () => {
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
const { manageError } = useManageError()
const formik = useFormik<RegisterData>({ const formik = useFormik<RegisterData>({
initialValues: { initialValues: {
@@ -50,24 +51,11 @@ const RegisterForm: FC = () => {
})) }))
formik.resetForm() formik.resetForm()
} catch (error) { } catch (error) {
if (error instanceof AppwriteException) { manageError(error, 'Error mientras se registraba', 'Error desconocido mientras se registraba', 'error')
dispatch(addAlert({
id: nanoid(),
message: error.message,
title: 'Error mientras se registraba',
severity: 'error'
}))
} else {
dispatch(addAlert({
id: nanoid(),
message: 'Error desconocido',
title: 'Error mientras se registraba',
severity: 'error'
}))
}
} }
}, },
validationSchema: RegisterSchema validationSchema: RegisterSchema,
validateOnMount: true
}) })
return ( return (