feat(footer): cria validação do input de newsletter

src/components/Footer/Newsletter/Newsletter.tsx

@@ -1,19 +1,51 @@
+import { Formik, FormikHelpers } from "formik";
 import React from "react";
+import { Form } from "react-router-dom";
+import NewsletterSchema from "../../../schema/NewsletterSchema";
 
 import styles from "./Newsletter.module.scss";
 
+interface FormValues {
+  email: string;
+}
+
+const initialValues = {
+  email: "",
+};
+
+const newsletterList: Array<any> = [];
+
 const Newsletter = () => {
+  const handleSubmit = (
+    values: FormValues,
+    { resetForm }: FormikHelpers<FormValues>
+  ) => {
+    newsletterList.push(values);
+    console.log(newsletterList);
+    resetForm();
+  };
+
   return (
-    <div className={styles["container"]}>
-      <h3 className={styles["title"]}>
-        {/* ASSINE NOSSA NEWSLETTER */}
-        assine nossa newsletter
-      </h3>
-      <form className={styles["form-wrapper"]}>
-        <input type="email" placeholder="E-mail" />
-        <button>ENVIAR</button>
-      </form>
-    </div>
+    <>
+      <Formik
+        onSubmit={handleSubmit}
+        initialValues={initialValues}
+        validationSchema={NewsletterSchema}
+      >
+        {({ resetForm }) => (
+          <div className={styles["container"]}>
+            <h3 className={styles["title"]}>
+              {/* ASSINE NOSSA NEWSLETTER */}
+              assine nossa newsletter
+            </h3>
+            <Form className={styles["form-wrapper"]}>
+              <input type="email" placeholder="E-mail" />
+              <button>ENVIAR</button>
+            </Form>
+          </div>
+        )}
+      </Formik>
+    </>
   );
 };
 

src/components/Header/Searchbox/Searchbox.tsx

@@ -1,10 +1,10 @@
-import { Field, Form, Formik } from "formik";
-import FormSchema from "../../../schema/FormSchema";
+import { Field, Form, Formik, FormikHelpers } from "formik";
+import SearchboxSchema from "../../../schema/SearchboxSchema";
 import searchIcon from "../assets/search-icon.svg";
 
 import styles from "./Searchbox.module.scss";
 
-interface IFormikValues {
+interface FormValues {
   searchInput: string;
 }
 
@@ -13,8 +13,9 @@ const initialValues = {
 };
 
 const Searchbox = () => {
-  const handleSubmit = (values: IFormikValues) => {
+  const handleSubmit = (values: FormValues, { resetForm }: FormikHelpers<FormValues>) => {
     console.log(values);
+    resetForm();
   };
 
   return (
@@ -22,15 +23,14 @@ const Searchbox = () => {
       <Formik
         onSubmit={handleSubmit}
         initialValues={initialValues}
-        validationSchema={FormSchema}
+        validationSchema={SearchboxSchema}
       >
-        {({ errors, touched, resetForm }) => (
+        {({ resetForm }) => (
           <Form className={styles["searchbox-wrapper"]}>
             <Field
               id="searchInput"
               name="searchInput"
               placeholder="Buscar..."
-              // className={errors.name && touched.name && "invalid"}
             />
             <button className={styles["submit-button"]} type="submit">
               <img src={searchIcon} alt="Ícone de busca" />

src/schema/NewsletterSchema.ts

@@ -0,0 +1,5 @@
+import * as Yup from "yup";
+
+export default Yup.object().shape({
+    email: Yup.string().email().required(),
+});

src/schema/SearchboxSchema.ts

@@ -0,0 +1,5 @@
+import * as Yup from "yup";
+
+export default Yup.object().shape({
+  searchInput: Yup.string().required(),
+});