From 830c22b91a2b7e53edbacba0f45bbf861a5dbc93 Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Fri, 13 Jan 2023 10:31:07 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20adicionando=20valida=C3=A7=C3=A3o=20no?=
 =?UTF-8?q?=20Newsletter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Footer/Footer.tsx     |  4 +--
 src/components/Footer/Newsletter.tsx | 43 +++++++++++++++++++---------
 src/components/Footer/schema.tsx     |  8 ++++++
 3 files changed, 39 insertions(+), 16 deletions(-)
 create mode 100644 src/components/Footer/schema.tsx

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 1a71f99..d4c25f8 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -6,9 +6,7 @@ import { Newsletter } from "./Newsletter";
 const Footer = () => {
   return (
     <footer>
-      <div className={styles["Newsletter"]}>
-        <Newsletter/>
-      </div>
+      <Newsletter />
       <div className={styles["Footer__Top"]}>
         <FooterTop />
       </div>
diff --git a/src/components/Footer/Newsletter.tsx b/src/components/Footer/Newsletter.tsx
index 8390738..228dfc6 100644
--- a/src/components/Footer/Newsletter.tsx
+++ b/src/components/Footer/Newsletter.tsx
@@ -1,20 +1,37 @@
 import styles from "./styles/Footer.module.scss";
-import React from "react";
+import { Formik, Field, Form } from "formik";
+import schema from "./schema";
+
+interface NewsletterArea {
+  email: string;
+}
+
+const initialValues = {
+  email: "",
+};
 
 const Newsletter = () => {
-  const [result, setResult] = React.useState('');
+  function onSubmit(_values: NewsletterArea, { resetForm }:any) {
+    resetForm({ values: "" });
+  }
   return (
-    <div className={styles["Newsletter__Content"]}>
-      <div className={styles["Newsletter__Content__Block"]}>
-        <h3 className={styles["Newsletter__Content__Block__Message"]}>
-          assine nossa newsletter
-        </h3>
-        <div className={styles["Newsletter__Content__Block__Register"]}>
-          <input type="text" placeholder="E-mail" onChange={(e) => setResult(e.target.value)} value={result} />
-          <button onClick={() => setResult('')}>Enviar</button>
-        </div>
-      </div>
-    </div>
+    <Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={schema}>
+      {({isValid}) => (
+        <Form className={styles["Newsletter"]}>
+          <div className={styles["Newsletter__Content"]}>
+            <div className={styles["Newsletter__Content__Block"]}>
+              <h3 className={styles["Newsletter__Content__Block__Message"]}>
+                assine nossa newsletter
+              </h3>
+              <div className={styles["Newsletter__Content__Block__Register"]}>
+                <Field type="text" placeholder="E-mail" name="email" />
+                <button type="submit" disabled={!isValid}>Enviar</button>
+              </div>
+            </div>
+          </div>
+        </Form>
+      )}
+    </Formik>
   );
 };
 
diff --git a/src/components/Footer/schema.tsx b/src/components/Footer/schema.tsx
new file mode 100644
index 0000000..39d985a
--- /dev/null
+++ b/src/components/Footer/schema.tsx
@@ -0,0 +1,8 @@
+import * as Yup from 'yup';
+
+const email =
+  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+export default Yup.object().shape({
+    email: Yup.string().email().matches(email).required(),
+});
\ No newline at end of file