Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

This PR creates context for onboarding steps and states. #38

Merged
merged 2 commits into from
Jul 10, 2023
Merged

This PR creates context for onboarding steps and states. #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
49c3871
fea: Create useOnboardingFormState
vitorschelb Jul 7, 2023
fd7a1ec
ref: Refactor form validation
vitorschelb Jul 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 22 additions & 27 deletions src/components/forms/OnboardingAbout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,64 +2,59 @@

import { aboutSchema } from "@/shared/onboarding";
import { AboutSchema } from "@/shared/onboarding";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Label, Form, Textarea } from "@/shared/components";
import { useOnboardingContext } from "@/contexts/OnboardingFormProvider";
import { useOnboardingFormSchema } from "@/hooks/onboarding-form-schema";

export default function OnboardingAbout() {
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm<AboutSchema>({
resolver: zodResolver(aboutSchema),
});
const { moveNextStep } = useOnboardingContext();
const values = watch(["qOne", "qTwo"]);

function onSubmit(data: AboutSchema) {
const isValid = aboutSchema.safeParse(data);
isValid.success
? moveNextStep()
: console.log("Dados inválidos:", isValid.error);
console.log(data);
}
const { onboarding } = useOnboardingContext();
const { errors, formState, onSubmit, register } =
useOnboardingFormSchema<AboutSchema>({
schema: aboutSchema,
selector: ({ about }) => about,
onSubmitValidData(data) {
onboarding.actions.setAbout(data);
},
});

return (
<div className="bg-slate-800 grid">
<Form onSubmit={handleSubmit(onSubmit)}>
<Form onSubmit={onSubmit}>
<div className="sm:col-span-2">
<Label className="text-lg mb-8" htmlFor="q-one">
Estamos ansiosos para conhecê-lo melhor! Por favor, compartilhe um
pouco da sua experiência e nos conte quais são as áreas da
tecnologia que mais despertam o seu interesse.
</Label>
<div className="mt-2">
<Textarea rows={5} {...register("qOne")} />
<Textarea
defaultValue={formState?.qOne}
rows={5}
{...register("qOne")}
/>
{errors.qOne && <span>{errors.qOne.message}</span>}
</div>
</div>
<button type="submit"> Enviar </button>
</Form>

<Form onSubmit={handleSubmit(onSubmit)}>
<div className="sm:col-span-2">
<Label className="text-lg mb-8" htmlFor="q-two">
Por favor, compartilhe conosco o motivo pelo qual você deseja
ingressar na PodCodar, o que espera aprender ou vivenciar
participando da comunidade?
</Label>
<div className="mt-2">
<Textarea rows={5} {...register("qTwo")} />
<Textarea
defaultValue={formState?.qTwo}
rows={5}
{...register("qTwo")}
/>
{errors.qTwo && <span>{errors.qTwo.message}</span>}
</div>
</div>
<button type="submit">TESTE ENVIAR</button>
</Form>
<pre>
<code>{JSON.stringify(values, null, 2)}</code>
<code>{JSON.stringify(onboarding.formState, null, 2)}</code>
</pre>
</div>
);
Expand Down
61 changes: 28 additions & 33 deletions src/components/forms/OnboardingContact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,54 +2,44 @@

import { contactSchema } from "@/shared/onboarding";
import { ContactSchema } from "@/shared/onboarding";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Input, Label, Form } from "@/shared/components";
import { useOnboardingContext } from "@/contexts/OnboardingFormProvider";
import { useOnboardingFormSchema } from "@/hooks/onboarding-form-schema";

export default function OnboardingContact() {
// TODO: Recebe onSubmit, que vai ser uma função.
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm<ContactSchema>({
resolver: zodResolver(contactSchema),
});
const { moveNextStep } = useOnboardingContext();
const values = watch([
"telefone",
"cidadeEstado",
"pais",
"email"
]);

function onSubmit(data: ContactSchema) {
const isValid = contactSchema.safeParse(data);
isValid.success
? moveNextStep()
: console.log("Dados inválidos:", isValid.error);
console.log(data);
// TODO: enviar o dado para o store global.(proxima pr) "props.onSubmit();"
// TODO: Após o envio, seguir para a proxima etapa, chamar o next
}
const { onboarding } = useOnboardingContext();
const { errors, formState, onSubmit, register } =
useOnboardingFormSchema<ContactSchema>({
schema: contactSchema,
selector: ({ contact }) => contact,
onSubmitValidData(data) {
onboarding.actions.setContact(data);
},
});

return (
<div className="bg-slate-800 grid">
<Form onSubmit={handleSubmit(onSubmit)}>
<Form onSubmit={onSubmit}>
<div className="sm:col-span-22">
<Label htmlFor="pais">País</Label>
<div className="mt-2">
<Input type="text" {...register("pais")} />
<Input
defaultValue={formState?.pais}
type="text"
{...register("pais")}
/>
</div>
{errors.pais && <span>{errors.pais.message}</span>}
</div>

<div className="sm:col-span-2">
<Label htmlFor="cidade-estado">Cidade/Estado</Label>
<div className="mt-2">
<Input type="text" {...register("cidadeEstado")} />
<Input
defaultValue={formState?.cidadeEstado}
type="text"
{...register("cidadeEstado")}
/>
</div>
{errors.cidadeEstado && <span>{errors.cidadeEstado.message}</span>}
</div>
Expand All @@ -59,6 +49,7 @@ export default function OnboardingContact() {
<div className="mt-2">
<Input
className="placeholder-gray-400"
defaultValue={formState?.telefone}
placeholder="00 00000 0000"
type="number"
{...register("telefone")}
Expand All @@ -70,15 +61,19 @@ export default function OnboardingContact() {
<div className="sm:col-span-2">
<Label htmlFor="email">Email</Label>
<div className="mt-2">
<Input type="email" {...register("email")} />
<Input
defaultValue={formState?.email}
type="email"
{...register("email")}
/>
</div>
{errors.email && <span>{errors.email.message}</span>}
</div>
<button type="submit">TESTE ENVIAR</button>
</Form>

<pre>
<code>{JSON.stringify(values, null, 2)}</code>
<code>{JSON.stringify(onboarding.formState, null, 2)}</code>
</pre>
</div>
);
Expand Down
49 changes: 20 additions & 29 deletions src/components/forms/OnboardingProfessional.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,45 +2,32 @@
import { educationLevels } from "@/shared/onboarding";
import { professionalSchema } from "@/shared/onboarding";
import { ProfessionalSchema } from "@/shared/onboarding";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Input, Label, Select, Form } from "@/shared/components";
import { useOnboardingContext } from "@/contexts/OnboardingFormProvider";
import { useOnboardingFormSchema } from "@/hooks/onboarding-form-schema";

export default function OnboardingProfessional() {
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm<ProfessionalSchema>({
resolver: zodResolver(professionalSchema),
});
const { moveNextStep } = useOnboardingContext();
const values = watch([
"educationLevel",
"profissao",
"empresaOrganizacao",
"githubPortifolio",
"linkedin",
]);

function onSubmit(data: ProfessionalSchema) {
const isValid = professionalSchema.safeParse(data);
isValid.success
? moveNextStep()
: console.log("Dados inválidos:", isValid.error);
console.log(data);
}
const { onboarding } = useOnboardingContext();
const { errors, formState, onSubmit, register } =
useOnboardingFormSchema<ProfessionalSchema>({
schema: professionalSchema,
selector: ({ professional }) => professional,
onSubmitValidData(data) {
onboarding.actions.setProfessional(data);
},
});

return (
<div className="bg-slate-800 grid">
<Form onSubmit={handleSubmit(onSubmit)}>
<Form onSubmit={onSubmit}>
<div className="grid gap-4 border-gray-900/10">
<div className="sm:col-span-2">
<Label htmlFor="education-level">Formação</Label>
<div className="mt-2">
<Select defaultValue="" {...register("educationLevel")}>
<Select
defaultValue={formState?.educationLevel}
{...register("educationLevel")}
>
{educationLevels.map((level) => (
<option key={level} value={level}>
{level}
Expand All @@ -58,6 +45,7 @@ export default function OnboardingProfessional() {
<Label htmlFor="profissao">Profissão</Label>
<div className="mt-2">
<Input
defaultValue={formState?.profissao}
placeholder="Opcional"
type="text"
{...register("profissao")}
Expand All @@ -69,6 +57,7 @@ export default function OnboardingProfessional() {
<Label htmlFor="empresa-organizacao">Empresa/Organização</Label>
<div className="mt-2">
<Input
defaultValue={formState?.empresaOrganizacao}
placeholder="Opcional"
type="text"
{...register("empresaOrganizacao")}
Expand All @@ -80,6 +69,7 @@ export default function OnboardingProfessional() {
<Label htmlFor="github-portifolio">GitHub/Portifólio</Label>
<div className="mt-2">
<Input
defaultValue={formState?.githubPortifolio}
placeholder="Opcional"
type="text"
{...register("githubPortifolio")}
Expand All @@ -91,6 +81,7 @@ export default function OnboardingProfessional() {
<Label htmlFor="linkedin">LinkedIn</Label>
<div className="mt-2">
<Input
defaultValue={formState?.linkedin}
placeholder="Opcional"
type="text"
{...register("linkedin")}
Expand All @@ -101,7 +92,7 @@ export default function OnboardingProfessional() {
<button type="submit"> TESTE ENVIAR </button>
</Form>
<pre>
<code>{JSON.stringify(values, null, 2)}</code>
<code>{JSON.stringify(onboarding.formState, null, 2)}</code>
</pre>
</div>
);
Expand Down
63 changes: 31 additions & 32 deletions src/components/forms/OnboardingRegistration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,50 @@
"use client";
import { genders } from "@/shared/onboarding";
import { registrationSchema } from "@/shared/onboarding";
import { RegistrationSchema } from "@/shared/onboarding";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
RegistrationSchema,
genders,
registrationSchema,
} from "@/shared/onboarding";
import { Input, Label, Select, Form, Title } from "@/shared/components";
import { useOnboardingContext } from "@/contexts/OnboardingFormProvider";
import { useOnboardingFormSchema } from "@/hooks/onboarding-form-schema";

export default function OnboardingRegistration() {
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm<RegistrationSchema>({
resolver: zodResolver(registrationSchema),
});
const { moveNextStep } = useOnboardingContext();
const values = watch([
"nomeSocial",
"gender",
"idade"
]);

function onSubmit(data: RegistrationSchema) {
const isValid = registrationSchema.safeParse(data);
isValid.success
? moveNextStep()
: console.log("Dados inválidos:", isValid.error);
console.log(data);
}
const { onboarding } = useOnboardingContext();
const { errors, formState, onSubmit, register } =
useOnboardingFormSchema<RegistrationSchema>({
schema: registrationSchema,
selector: ({ registration }) => registration,
onSubmitValidData(data) {
onboarding.actions.setRegistration(data);
},
});

return (
<div className="bg-slate-800 grid">
<Form onSubmit={handleSubmit(onSubmit)}>
<Form onSubmit={onSubmit}>
<div className="grid gap-4 border-gray-900/10">
<Title> Formulário de Inscrição</Title>

<div className="grid gap-6">
<div className="">
<Label htmlFor="nome-social">Nome Social</Label>
<div className="mt-2">
<Input type="text" {...register("nomeSocial")} />
<Input
defaultValue={formState?.nomeSocial}
type="text"
{...register("nomeSocial")}
/>
{errors.nomeSocial && <span>{errors.nomeSocial.message}</span>}
</div>
</div>

<div className="">
<Label htmlFor="gender">Gênero</Label>
<div className="mt-2">
<Select defaultValue={""} {...register("gender")}>
<Select
defaultValue={formState?.gender}
{...register("gender")}
>
{genders.map((gender) => (
<option key={gender} value={gender}>
{gender}
Expand All @@ -63,7 +58,11 @@ export default function OnboardingRegistration() {
<div className="">
<Label htmlFor="idade">Idade</Label>
<div className="mt-2">
<Input type="number" {...register("idade")} />
<Input
defaultValue={formState?.idade}
type="number"
{...register("idade")}
/>
{errors.idade && <span>{errors.idade.message}</span>}
</div>
</div>
Expand All @@ -73,7 +72,7 @@ export default function OnboardingRegistration() {
</Form>

<pre>
<code>{JSON.stringify(values, null, 2)}</code>
<code>{JSON.stringify(onboarding.formState, null, 2)}</code>
</pre>
</div>
);
Expand Down
Loading