Merge pull request #38 from podcodar/vitorschelb/provider-globalstate

This PR creates context for onboarding steps and states.
podcodar · Jul 10, 2023 · ddb6710 · ddb6710 · vercel · Jul 10, 2023
2 parents 6cd9c99 + fd7a1ec
commit ddb6710
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 121 deletions.
diff --git a/src/components/forms/OnboardingAbout.tsx b/src/components/forms/OnboardingAbout.tsx
@@ -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>
   );

diff --git a/src/components/forms/OnboardingContact.tsx b/src/components/forms/OnboardingContact.tsx
@@ -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>
@@ -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")}
@@ -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>
   );

diff --git a/src/components/forms/OnboardingProfessional.tsx b/src/components/forms/OnboardingProfessional.tsx
@@ -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}
@@ -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")}
@@ -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")}
@@ -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")}
@@ -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")}
@@ -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>
   );

diff --git a/src/components/forms/OnboardingRegistration.tsx b/src/components/forms/OnboardingRegistration.tsx
@@ -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}
@@ -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>
@@ -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>
   );