diff --git a/src/app/(app)/pet-register/components/DefaultScren.tsx b/src/app/(app)/pet-register/components/DefaultScreen.tsx similarity index 95% rename from src/app/(app)/pet-register/components/DefaultScren.tsx rename to src/app/(app)/pet-register/components/DefaultScreen.tsx index e703edd..afbe795 100644 --- a/src/app/(app)/pet-register/components/DefaultScren.tsx +++ b/src/app/(app)/pet-register/components/DefaultScreen.tsx @@ -9,11 +9,7 @@ import { BreadcrumbList, BreadcrumbItem, BreadcrumbLink, - BreadcrumbSeparator, - BreadcrumbEllipsis, - BreadcrumbPage, } from '@/components/Breadcrump'; -import { Home } from 'lucide-react'; export function DefaultScreen() { const { nextStep, previousStep, resetPetNewsValues } = diff --git a/src/app/(app)/pet-register/components/NameAndGender.tsx b/src/app/(app)/pet-register/components/NameAndGender.tsx index 5b4916d..13a776c 100644 --- a/src/app/(app)/pet-register/components/NameAndGender.tsx +++ b/src/app/(app)/pet-register/components/NameAndGender.tsx @@ -3,12 +3,11 @@ import { Button } from '@/components/Button'; import { ToggleGroup, ToggleGroupItem } from '@/components/ToggleGroup'; import { IconFemale } from '@/components/icons/IconFemale'; import { IconMale } from '@/components/icons/IconMale'; -import { ChangeEvent, useContext } from 'react'; +import { useContext } from 'react'; import { PetRegisterContext } from '../context/PetRegisterContext'; import { usePetRegisterSteps } from './usePetRegisterSteps'; import { species } from '@/utils/species'; import { InputControl } from '@/components/Fields/InputControl'; -import { Label } from '@/components/Label'; import { Input } from '@/components/Fields/Input'; import { Breadcrumb, @@ -16,48 +15,48 @@ import { BreadcrumbItem, BreadcrumbLink, } from '@/components/Breadcrump'; -import { Home } from 'lucide-react'; import Image from 'next/image'; +import { useForm } from 'react-hook-form'; +import { NameAndGenderProps, nameAndGenderSchema } from '@/schemas/PetRegister/NameAndGender'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { Label } from '@/components/Label'; +import { InputMessage } from '@/components/Fields/InputMessage'; export function NameAndGender() { const { newPet } = useContext(PetRegisterContext); - const { error, clickNextStep, clickPreviousStep, setError, pet, setPet } = - usePetRegisterSteps(); + const { clickNextStep, clickPreviousStep, pet, setPet } = usePetRegisterSteps(); const specieName = species[pet.specieName as keyof typeof species]; - function handleClickNextStep() { - if (!pet.gender || !pet.petName) { - clickNextStep(null); - return; - } - clickNextStep({ - ...newPet, - gender: pet.gender, - petName: pet.petName, - }); - } + const { + handleSubmit, + register, + formState: { errors }, + setValue, + getValues, + clearErrors, + } = useForm({ + resolver: zodResolver(nameAndGenderSchema), + criteriaMode: 'firstError', + reValidateMode: 'onChange', + mode: 'onBlur', + }); function handleClickPreviousStep() { clickPreviousStep(); } - function handleOnChangePetName(evt: ChangeEvent) { - setError(false); - const { value } = evt.target; - - setPet((state) => ({ - ...state, - petName: value, - })); + function handleClickNextStep(data: NameAndGenderProps) { + clickNextStep({ + ...newPet, + gender: data.gender, + petName: data.petName, + }); } - function handleOnChangeGender(value: string) { - setError(false); - setPet((state) => ({ - ...state, - gender: value, - })); + function handleGenderChange(value: string) { + setValue('gender', value, { shouldValidate: true }); + clearErrors('gender') } return ( @@ -81,63 +80,59 @@ export function NameAndGender() {

Uau! - Ficamos muito felizes em receber mais um {specieName} em nossa - comunidade! + Ficamos muito felizes em receber mais um {specieName} em nossa comunidade!

- + Qual o nome do seu companheiro? - - *Campo obrigatório + {errors?.petName && ( + + )}
Qual o sexo de seu Pet? Macho Fêmea - *Campo obrigatório + {errors?.gender && ( + + )}
- {error && ( - - Preencha todas as informações... - - )} -
-
diff --git a/src/app/(app)/pet-register/components/PetRegister.tsx b/src/app/(app)/pet-register/components/PetRegister.tsx index 8796ac8..6e92bd9 100644 --- a/src/app/(app)/pet-register/components/PetRegister.tsx +++ b/src/app/(app)/pet-register/components/PetRegister.tsx @@ -1,6 +1,6 @@ 'use client'; import { useContext, useEffect, useState } from 'react'; -import { DefaultScreen } from './DefaultScren'; +import { DefaultScreen } from './DefaultScreen'; import { Specie } from './Specie'; import { NameAndGender } from './NameAndGender'; import { SizeAndBreed } from './SizeAndBreed'; diff --git a/src/app/(app)/pet-register/components/SizeAndBreed.tsx b/src/app/(app)/pet-register/components/SizeAndBreed.tsx index d167d15..48d91e5 100644 --- a/src/app/(app)/pet-register/components/SizeAndBreed.tsx +++ b/src/app/(app)/pet-register/components/SizeAndBreed.tsx @@ -1,6 +1,6 @@ 'use client'; import { Button } from '@/components/Button'; -import { ChangeEvent, useContext, useEffect, useState } from 'react'; +import { useContext } from 'react'; import { PetRegisterContext } from '../context/PetRegisterContext'; import { usePetRegisterSteps } from './usePetRegisterSteps'; import { @@ -20,7 +20,7 @@ import { BreadcrumbLink, BreadcrumbSeparator, } from '@/components/Breadcrump'; -import { Home } from 'lucide-react'; +import { SearchInput } from '@/components/Fields/SearchInput'; export function SizeAndBreed() { const { newPet, breeds, sizes } = useContext(PetRegisterContext); @@ -55,7 +55,6 @@ export function SizeAndBreed() { function handleOnChangeBreed(value: string) { setError(false); - setPet((state) => ({ ...state, breedName: value, @@ -107,25 +106,19 @@ export function SizeAndBreed() { - {/* TODO: Adicionar a opção de outros */} )} diff --git a/src/app/(app)/pet-register/components/Specie.tsx b/src/app/(app)/pet-register/components/Specie.tsx index f85a352..d405317 100644 --- a/src/app/(app)/pet-register/components/Specie.tsx +++ b/src/app/(app)/pet-register/components/Specie.tsx @@ -3,7 +3,7 @@ import { Button } from '@/components/Button'; import { ToggleGroup, ToggleGroupItem } from '@/components/ToggleGroup'; import { IconCat } from '@/components/icons/IconCat'; import { IconDog } from '@/components/icons/IconDog'; -import { useContext, useState } from 'react'; +import { useContext } from 'react'; import { PetRegisterContext } from '../context/PetRegisterContext'; import { usePetRegisterSteps } from './usePetRegisterSteps'; @@ -13,7 +13,6 @@ import { BreadcrumbItem, BreadcrumbLink, } from '@/components/Breadcrump'; -import { Home } from 'lucide-react'; import Image from 'next/image'; export function Specie() { @@ -82,17 +81,17 @@ export function Specie() { > - Cachorro + Cachorro - Gato + Gato @@ -110,7 +109,11 @@ export function Specie() { > Voltar - diff --git a/src/app/(auth)/login/components/LoginForm.tsx b/src/app/(auth)/login/components/LoginForm.tsx index 9063bdf..485793e 100644 --- a/src/app/(auth)/login/components/LoginForm.tsx +++ b/src/app/(auth)/login/components/LoginForm.tsx @@ -46,9 +46,9 @@ export function LoginForm() { const { error } = await submitLogin(loginData); if (error) throw new Error(error); - const { session } = await getSession(); - if (!session) { - throw new Error('Usuário não autenticado...'); + const { session, error: errorSession } = await getSession(); + if (errorSession || !session) { + throw new Error(errorSession ?? 'Usuário não autenticado...'); } const { user } = session; diff --git a/src/app/(auth)/register/components/RegisterForm.tsx b/src/app/(auth)/register/components/RegisterForm.tsx index f715711..c63a2c4 100644 --- a/src/app/(auth)/register/components/RegisterForm.tsx +++ b/src/app/(auth)/register/components/RegisterForm.tsx @@ -61,9 +61,9 @@ export function RegisterForm() { }); if (errorLogin) throw errorLogin; - const { session } = await getSession(); - if (!session) { - throw new Error('Usuário não autenticado...'); + const { session, error: errorSession } = await getSession(); + if (errorSession || !session) { + throw new Error(errorSession ?? 'Usuário não autenticado...'); } const { user } = session; diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 5208de3..cf089ac 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -2,7 +2,7 @@ import { cn } from '@/utils/twmerge'; import { ButtonHTMLAttributes, Ref, forwardRef } from 'react'; const buttonStyleBase = - 'flex self-center font-medium items-center justify-center rounded-[45px] px-11 py-3'; + 'flex self-center font-medium items-center justify-center px-11 py-3 rounded-2xl'; const buttonVariants = { variant: { diff --git a/src/components/Fields/SearchInput.tsx b/src/components/Fields/SearchInput.tsx index 440396e..dcd4725 100644 --- a/src/components/Fields/SearchInput.tsx +++ b/src/components/Fields/SearchInput.tsx @@ -22,7 +22,7 @@ interface SearchInputItems { } const searchVariants = { - normal: `w-full h-10 p-2 border border-[#B2B2B2] border-dashed outline-none rounded-2xl bg-white text-[#2E2E2E] focus:outline-none focus:border-solid focus:border-[#B78AF7] focus:shadow-custom-select transition-all`, + normal: `w-full h-10 p-2 text-sm border border-[#B2B2B2] border-dashed outline-none rounded-2xl bg-white focus:outline-none focus:border-solid focus:border-[#B78AF7] focus:shadow-custom-select transition-all`, error: `border-[#FF917A] border-solid`, }; @@ -123,4 +123,4 @@ function SearchInput({ ); } -export { SearchInput }; \ No newline at end of file +export { SearchInput }; diff --git a/src/schemas/PetRegister/NameAndGender.ts b/src/schemas/PetRegister/NameAndGender.ts new file mode 100644 index 0000000..61b70eb --- /dev/null +++ b/src/schemas/PetRegister/NameAndGender.ts @@ -0,0 +1,13 @@ +import { z } from 'zod'; + +export const nameAndGenderSchema = z.object({ + petName: z.string() + .min(2, { message: "*O nome fornecido deve ter entre 2 e 30 caracteres, não são permitidos caracteres especiais, nem números. Por favor, insira um nome válido." }) + .max(30, { message: "*O nome fornecido deve ter entre 2 e 30 caracteres, não são permitidos caracteres especiais, nem números. Por favor, insira um nome válido." }) + .regex(/^[A-Za-zÀ-ÖØ-öø-ÿ\s]+$/, { + message: "*O nome fornecido deve ter entre 2 e 30 caracteres, não são permitidos caracteres especiais, nem números. Por favor, insira um nome válido.", + }), + gender: z.string({message: '* Campo obrigatório.'}) +}); + +export type NameAndGenderProps = z.infer; diff --git a/src/services/getSession.ts b/src/services/getSession.ts index 6e2742a..10f7fb3 100644 --- a/src/services/getSession.ts +++ b/src/services/getSession.ts @@ -7,7 +7,7 @@ export async function getSession() { const accessToken = getToken(); if (!accessToken) { - throw 'Nenhum usuário autenticado...'; + throw new Error('Nenhum usuário autenticado...'); } const { error, user } = await getUser(); diff --git a/src/services/getUser.ts b/src/services/getUser.ts index 61c07d0..385d5fa 100644 --- a/src/services/getUser.ts +++ b/src/services/getUser.ts @@ -9,7 +9,7 @@ export async function getUser() { const { error, firstName, lastName } = await res.json(); if (error) { - throw new Error('Usuário não autenticado...'); + throw new Error(error); } const user: User = { firstName, lastName };