From 62fda437db79dcc2669e23e1e1b552ecc02eb592 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Thu, 12 Jan 2023 19:42:36 -0300
Subject: [PATCH] fix: Consertando erro handler formik

---
 src/components/FormInput/FormInput.tsx | 25 +++++++++++++++++++++++--
 src/pages/Home.tsx                     |  4 ++--
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/FormInput/FormInput.tsx b/src/components/FormInput/FormInput.tsx
index 037376f..260e22b 100644
--- a/src/components/FormInput/FormInput.tsx
+++ b/src/components/FormInput/FormInput.tsx
@@ -14,7 +14,16 @@ const FormInput = () => {
       instagram: "",
     },
     validationSchema: Yup.object({
-      nome: Yup.string().label("Seu nome completo").required(),
+      nome: Yup.string()
+        .required()
+        .test(
+          "is-full-name",
+          "Please enter both your first and last name",
+          function (value: any) {
+            const nameArr = value.split(" ");
+            return nameArr.length >= 2;
+          }
+        ),
       email: Yup.string().email().required(),
       cpf: Yup.string().required(),
       nascimento: Yup.string().required(),
@@ -35,54 +44,66 @@ const FormInput = () => {
           <li className={styles["form-item"]}>
             <label>Nome</label>
             <input
+              id="nome"
               type="text"
               placeholder="Seu nome completo"
               value={formik.values.nome}
+              onChange={formik.handleChange}
             />
           </li>
           <li className={styles["form-item"]}>
             <label>E-mail</label>
             <input
+              id="email"
               type="text"
               placeholder="Seu email"
               value={formik.values.email}
+              onChange={formik.handleChange}
             />
           </li>
           <li className={styles["form-item"]}>
             <label>CPF</label>
             <input
+              id="cpf"
               type="text"
               placeholder="000.000.000-00"
               value={formik.values.cpf}
+              onChange={formik.handleChange}
             />
           </li>
 
           <li className={styles["form-item"]}>
             <label>Data de Nascimento</label>
             <input
+              id="nascimento"
               type="text"
               placeholder="00.00.00"
               value={formik.values.nascimento}
+              onChange={formik.handleChange}
             />
           </li>
           <li className={styles["form-item"]}>
             <label>Telefone</label>
             <input
+              id="tel"
               type="text"
               placeholder="(00)00000-0000"
               value={formik.values.tel}
+              onChange={formik.handleChange}
             />
           </li>
           <li className={styles["form-item"]}>
             <label>Instagram</label>
             <input
+              id="instagram"
               type="text"
               placeholder="@seuuser"
               value={formik.values.instagram}
+              onChange={formik.handleChange}
             />
           </li>
         </ul>
-        <button>Cadastre-se</button>
+        <button type="submit">Cadastre-se</button>
       </form>
     </div>
   );
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 41d6b3b..8df5d33 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { NavigationBar } from "../components/NavigationBar/NavigationBar";
+import { FormInput } from "../components/FormInput/FormInput";
 
 const Home = () => {
   //const style = { background: "black" };
   return (
     <div /*style={style}*/>
-      <NavigationBar></NavigationBar>
+      <FormInput></FormInput>
     </div>
   );
 };