From 0de8af70af331b9e73d02f88cfca74b3e3d954b1 Mon Sep 17 00:00:00 2001
From: Nicolly Vieira <nicollyvscosta@gmail.com>
Date: Tue, 10 Jan 2023 17:57:36 -0300
Subject: [PATCH] feat: Valida input do  Newsletter e adiciona a url no
 FooterTop

---
 .../FooterTop.tsx/FooterTop.module.scss       |  2 -
 .../components/InfoLinks.module.scss          | 16 ++++++--
 .../components/RedesSociais.module.scss       |  4 --
 .../components/Newsletter/Newsletter.tsx      | 40 ++++++++++++++-----
 .../src/schema/NewsletterSchema.ts            |  5 +++
 5 files changed, 46 insertions(+), 21 deletions(-)
 create mode 100644 desafio-react-typescript/src/schema/NewsletterSchema.ts

diff --git a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.module.scss b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.module.scss
index 55edad0..caf0950 100644
--- a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.module.scss
+++ b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.module.scss
@@ -24,7 +24,6 @@
     @include mq($lg, max) {
       flex-direction: column;
       width: 100%;
-      gap: 12px;
     }
 
     @include mq($xl, min) {
@@ -33,7 +32,6 @@
   }
 
   &__redes-sociais-wrapper {
-    width: 19.9075%;
 
     @include mq($xl, min) {
       width: 16.956521739%;
diff --git a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.module.scss b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.module.scss
index bd7f075..ea1d021 100644
--- a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.module.scss
+++ b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.module.scss
@@ -14,13 +14,16 @@
   &__title-wrapper {
     @include display(flex, row, center, space-between);
 
-    img {
-      display: none;
-
-      @include mq($lg, max) {
+    @include mq($lg, max) {
+      margin-bottom: 12px;
+      img {
         display: block;
       }
     }
+
+    img {
+      display: none;
+    }
   }
 
   &__title {
@@ -49,6 +52,11 @@
     margin-bottom: 12px;
     &:last-child {
       margin-bottom: 0;
+
+      @include mq($lg, max) {
+        margin-bottom: 12px;
+      }
+
       a {
         text-decoration: underline;
       }
diff --git a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/RedesSociais.module.scss b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/RedesSociais.module.scss
index 3091880..2492a78 100644
--- a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/RedesSociais.module.scss
+++ b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/RedesSociais.module.scss
@@ -19,10 +19,6 @@
     margin-top: 12px;
     @include fontStyle(400, 14px, 16px, $primary-200);
 
-    @include mq($lg, max) {
-      display: none;
-    }
-
     @include mq($xl, min) {
       @include fontStyleResponsive(28px, 33px);
     }
diff --git a/desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.tsx b/desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.tsx
index bb4715c..9f5ee11 100644
--- a/desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.tsx
+++ b/desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.tsx
@@ -1,22 +1,40 @@
-import React, { useState } from "react";
-
+import React from "react";
+import { Formik, Form, Field } from "formik";
+import FormikSchema from "../../../../schema/NewsletterSchema";
 import styles from "./Newsletter.module.scss";
 
+interface INewsletterForm {
+  email: string;
+}
+
+const initialValues = {
+  email: "",
+};
+
 export const Newsletter = () => {
-  const [value, setValue] = useState("");
   return (
     <div className={styles["newsletter"]}>
       <div className={styles["newsletter__wrapper"]}>
         <h3 className={styles["newsletter__title"]}>Assine Nossa Newsletter</h3>
         <div className={styles["newsletter__input-container"]}>
-          <input
-            value={value}
-            className={styles["newsletter__input"]}
-            type="email"
-            placeholder="E-mail"
-            onChange={(e) => setValue(e.target.value)}
-          />
-          <button className={styles["newsletter__button"]} onClick={() => setValue("")}>Enviar</button>
+          <Formik
+            onSubmit={(values: INewsletterForm, actions) => {
+              actions.resetForm();
+            }}
+            initialValues={initialValues}
+            validationSchema={FormikSchema}
+          >
+            <Form>
+              <Field
+                className={styles["newsletter__input"]}
+                type="email"
+                placeholder="E-mail"
+                id="email"
+                name="email"
+              />
+              <button className={styles["newsletter__button"]}>Enviar</button>
+            </Form>
+          </Formik>
         </div>
       </div>
     </div>
diff --git a/desafio-react-typescript/src/schema/NewsletterSchema.ts b/desafio-react-typescript/src/schema/NewsletterSchema.ts
new file mode 100644
index 0000000..8c25194
--- /dev/null
+++ b/desafio-react-typescript/src/schema/NewsletterSchema.ts
@@ -0,0 +1,5 @@
+import * as yup from "yup";
+
+export default yup.object().shape({
+    email: yup.string().required("*Campo obrigatório").email("*E-mail Inválido")
+})
\ No newline at end of file
-- 
2.34.1