feat: adicionando validação no Newsletter

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>

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>
   );
 };
 

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(),
+});