From ec8c15ef50d3651fc1164e41fc62a9afac40eb69 Mon Sep 17 00:00:00 2001
From: Samuel <samuelcondackxz@gmail.com>
Date: Mon, 9 Jan 2023 16:39:09 -0300
Subject: [PATCH] Feat: Adiciona reset do form

---
 my-app/src/pages/Contact.modules.scss | 19 +++++++++
 my-app/src/pages/contact.tsx          | 58 ++++++++++++++++++++-------
 my-app/src/schemas/Schema.tsx         | 12 +++---
 3 files changed, 70 insertions(+), 19 deletions(-)

diff --git a/my-app/src/pages/Contact.modules.scss b/my-app/src/pages/Contact.modules.scss
index df2efdb..1f02634 100644
--- a/my-app/src/pages/Contact.modules.scss
+++ b/my-app/src/pages/Contact.modules.scss
@@ -22,4 +22,23 @@ select.input-error{
     font-size: 12px;
     line-height: 14px;
     color: #FF0000;
+}
+.errorDiv{
+    display: flex;
+    position: relative;
+    justify-content: right;
+    float: right;
+    top: 30px;
+}
+.errorP{
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    color: #FF0000;
+}
+
+button:disabled {
+    opacity: 0.35;
 }
\ No newline at end of file
diff --git a/my-app/src/pages/contact.tsx b/my-app/src/pages/contact.tsx
index 71502fc..9acef68 100644
--- a/my-app/src/pages/contact.tsx
+++ b/my-app/src/pages/contact.tsx
@@ -2,12 +2,13 @@ import { useFormik } from 'formik';
 import './Contact.modules.scss'
 import { Schema } from '../schemas/Schema'
 
-const onSubmit = () => {
-    console.log("submitted")
-}
+const onSubmit = async (actions:any) => {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    actions.resetForm()
+};
 
 const Contact = () => {
-    const {values, errors, touched, handleBlur, handleChange, handleSubmit} = useFormik({
+    const {values, errors, touched, isSubmitting, handleBlur, handleChange, handleSubmit} = useFormik({
         initialValues: {
             nome: '',
             email: '',
@@ -19,14 +20,17 @@ const Contact = () => {
         validationSchema: Schema ,
         onSubmit
     })
-    console.log(values)
-    console.log(errors);
     
     return (
     <>
     <h1>Preencha o formulário</h1>
     <div className='formWrapper'>
         <form onSubmit={handleSubmit} className='form' autoComplete='off'>
+            
+            {errors.nome && touched.nome && 
+            <div className='errorDiv'>
+                <p className='errorP'>{errors.nome}</p>
+            </div>}
             <label htmlFor="nome">Nome</label>
             <input value={values.nome} 
             onChange={handleChange} 
@@ -35,7 +39,11 @@ const Contact = () => {
             placeholder='Seu nome completo' 
             onBlur={handleBlur}
             className={errors.nome && touched.nome ? "input-error" : ""}/>
-
+            
+            {errors.email && touched.email && 
+            <div className='errorDiv'>
+                <p className='errorP'>{errors.email}</p>
+            </div>}
             <label htmlFor="email">E-mail</label>
             <input value={values.email} 
             onChange={handleChange} 
@@ -44,46 +52,68 @@ const Contact = () => {
             placeholder='Seu e-mail' 
             onBlur={handleBlur}
             className={errors.email && touched.email ? "input-error" : ""}/>
-
+            
+            {errors.cpf && touched.cpf && 
+            <div className='errorDiv'>
+                <p className='errorP'>{errors.cpf}</p>
+            </div>}
             <label htmlFor="cpf">CPF</label>
             <input value={values.cpf} 
             onChange={handleChange} 
             id='cpf' 
             type="number" 
             placeholder='000.000.000-00' 
-            onBlur={handleBlur}/>
+            onBlur={handleBlur}
+            className={errors.cpf && touched.cpf ? "input-error" : ""}/>
 
+            {errors.nascimento && touched.nascimento && 
+            <div className='errorDiv'>
+                <p className='errorP'>{errors.nascimento}</p>
+            </div>}
             <label htmlFor="nascimento">Data de Nascimento</label>
             <input value={values.nascimento} 
             onChange={handleChange} 
             id='nascimento' 
             type="number"
             placeholder='00.00.0000' 
-            onBlur={handleBlur}/>
+            onBlur={handleBlur}
+            className={errors.nascimento && touched.nascimento ? "input-error" : ""}/>
 
+           {errors.telefone && touched.telefone && 
+            <div className='errorDiv'>
+                <p className='errorP'>{errors.telefone}</p>
+            </div>}
             <label htmlFor="telefone">telefone</label>
             <input value={values.telefone} 
             onChange={handleChange}
             id='telefone' 
             type="tel" 
             placeholder='(00) 00000-0000' 
-            onBlur={handleBlur}/>
+            onBlur={handleBlur}
+            className={errors.telefone && touched.telefone ? "input-error" : ""}/>
 
+
+            {errors.instagram && touched.instagram && 
+            <div className='errorDiv'>
+                <p className='errorP'>{errors.instagram}</p>
+            </div>}
             <label htmlFor="instagram">Instagram</label>
             <input value={values.instagram} 
             onChange={handleChange} 
             id='instagram' 
             type="text" 
             placeholder='@seuuser' 
-            onBlur={handleBlur}/>
+            onBlur={handleBlur}
+            className={errors.instagram && touched.instagram ? "input-error" : ""}/>
+
         <div className='checkbox'>
             <label htmlFor="check">
                 <a href="">Declaro que li e aceito</a>
             </label>
-            <input id='check' type="checkbox" />
+            <input id='check' type="checkbox" required/>
         </div>
         <div className='signupButton'>
-            <button type='submit'>CADASTRE-SE</button>
+            <button disabled={isSubmitting} type='submit'>CADASTRE-SE</button>
         </div>
         </form>
     </div>
diff --git a/my-app/src/schemas/Schema.tsx b/my-app/src/schemas/Schema.tsx
index 1488dfb..1ed4c47 100644
--- a/my-app/src/schemas/Schema.tsx
+++ b/my-app/src/schemas/Schema.tsx
@@ -1,11 +1,13 @@
 import * as yup from 'yup';
 
+const cpfRegex = /^\d{3}\.\d{3}\.\d{3}\-\d{2}$/
+
 const Schema = yup.object().shape({
-    nome: yup.string().matches(/^[aA-zZ\s]+$/).required("*Campo Obrigatório"),
-    email: yup.string().email().required("*Campo Obrigatório"),
-    cpf: yup.number().min(11).max(11).required("*Campo Obrigatório"),
-    nascimento: yup.number().min(8).max(8).required("*Campo Obrigatório"),
-    telefone: yup.number().min(11).max(11).required("*Campo Obrigatório"),
+    nome: yup.string().matches(/^[aA-zZ\s]+$/, {message: "*Nome Inválido"}).required("*Campo Obrigatório"),
+    email: yup.string().email("*Email inválido").required("*Campo Obrigatório"),
+    cpf: yup.string().length(11, "*CPF Inválido").required("*Campo Obrigatório"),
+    nascimento: yup.string().length(8, "*Data Inválida").required("*Campo Obrigatório"),
+    telefone: yup.string().length(11, "*Telefone Inválido").required("*Campo Obrigatório"),
     instagram: yup.string().required("*Campo Obrigatório")
 });