feat(routes): Adiciona navegação do menu com react-routes-dom

package-lock.json

@@ -20,6 +20,7 @@
         "react-dom": "^18.2.0",
         "react-imask": "^6.4.3",
         "react-input-mask": "^2.0.4",
+        "react-router-dom": "^6.6.1",
         "react-scripts": "5.0.1",
         "sass": "^1.57.1",
         "typescript": "^4.9.4",
@@ -3079,6 +3080,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
+      "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -14069,6 +14078,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz",
+      "integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==",
+      "dependencies": {
+        "@remix-run/router": "1.2.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz",
+      "integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==",
+      "dependencies": {
+        "@remix-run/router": "1.2.1",
+        "react-router": "6.6.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -19012,6 +19051,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
+      "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -26854,6 +26898,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz",
+      "integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==",
+      "requires": {
+        "@remix-run/router": "1.2.1"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz",
+      "integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==",
+      "requires": {
+        "@remix-run/router": "1.2.1",
+        "react-router": "6.6.1"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

package.json

@@ -15,6 +15,7 @@
     "react-dom": "^18.2.0",
     "react-imask": "^6.4.3",
     "react-input-mask": "^2.0.4",
+    "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
     "sass": "^1.57.1",
     "typescript": "^4.9.4",

src/components/Header/Header.tsx

@@ -1,11 +1,11 @@
 import { useState } from "react";
 import SearchBar from "./SearchBar";
-import Logo from "../assets/img/logoM3.png";
-import Cart from "../assets/img/Cart.png";
-import iconMenu from "../assets/img/iconMenu.png";
+import Logo from "./assets/img/logoM3.png";
+import Cart from "./assets/img/Cart.png";
+import iconMenu from "./assets/img/iconMenu.png";
 import Link from "./Link";
 import HeaderLinks from "./HeaderLinks";
-import MenuMobile from "./MenuMobile";
+import MenuMobile from "./Menu-Mobile/MenuMobile";
 
 import styles from "./header.module.scss";
 

src/components/Header/Menu-Mobile/MenuMobile.tsx

@@ -1,8 +1,8 @@
 import iconExit from "../assets/img/iconExit.png";
-import Link from "./Link";
-import HeaderLinks from "./HeaderLinks";
+import Link from "../Link";
+import HeaderLinks from "../HeaderLinks";
 
-import styles from "./header.module.scss";
+import styles from "../header.module.scss";
 
 interface MenuMobileProps {
   className: string;

src/components/Header/SearchBar.tsx

@@ -1,4 +1,4 @@
-import iconBusca from "../assets/img/IconBusca.png";
+import iconBusca from "./assets/img/IconBusca.png";
 
 import styles from "./header.module.scss";
 

src/components/Header/header.module.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../variables.scss';
 
 .page-header {
     display: flex;

src/components/Main/Main.tsx

@@ -1,6 +1,6 @@
-import iconHome from "../assets/img/iconHome.png";
-import arrow from "../assets/img/arrow.png";
-import SubjectMain from "./SubjectMain";
+import iconHome from "./assets/iconHome.png";
+import arrow from "./assets/arrow.png";
+import SubjectMain from "./Subject/SubjectMain";
 
 import styles from "./main.module.scss";
 

src/components/Main/Subject/Contato/RegistrationForm.tsx

@@ -2,14 +2,10 @@ import { useCallback, useState } from "react";
 import styles from "./form.module.scss";
 import stylesInput from "./input.module.scss";
 import stylesCheckbox from "./checkbox.module.scss";
-import FormSchema from "../schema/FormSchema";
+import FormSchema from "../../../../schema/FormSchema";
 
 import { Formik, Form, Field, ErrorMessage } from "formik";
 
-interface RegistrationFormProps {
-  active: boolean;
-}
-
 interface FormikValues {
   name: string;
   email: string;
@@ -30,7 +26,7 @@ const initialValues = {
   acceptTerms: false,
 };
 
-const RegistrationForm = (props: RegistrationFormProps) => {
+const RegistrationForm = () => {
   const [isSubmit, setIsSubmit] = useState(false);
   const handleFormSubmit = (values: FormikValues) => {
     values.name = "";
@@ -61,10 +57,16 @@ const RegistrationForm = (props: RegistrationFormProps) => {
     value = value.replace(/^(\d{3})(\d{3})(\d{3})(\d)/, "$1.$2.$3-$4");
     e.currentTarget.value = value;
   }, []);
+  const handleInstagram = useCallback(
+    (e: React.FormEvent<HTMLInputElement>) => {
+      let value = e.currentTarget.value;
+      value = value.replace(/^(\d)/, "@$1");
+      e.currentTarget.value = value;
+    },
+    []
+  );
   return (
-    <div
-      className={props.active ? styles["page-main__form"] : styles["desative"]}
-    >
+    <div className={styles["page-main__form"]}>
       <Formik
         onSubmit={handleFormSubmit}
         initialValues={initialValues}
@@ -166,6 +168,7 @@ const RegistrationForm = (props: RegistrationFormProps) => {
             id="Instagram"
             placeholder="@seuuser"
             name="instagram"
+            onKeyUp={handleInstagram}
           />
 
           <div className={stylesCheckbox["page-main__container"]}>

src/components/Main/Subject/Contato/checkbox.module.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../../variables.scss';
 
 .page-main {
     &__container {

src/components/Main/Subject/Contato/form.module.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../../variables.scss';
 
 .desative {
     display: none;

src/components/Main/Subject/Contato/input.module.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../../../variables.scss';
 
 .page-main {
     &__container {

src/components/Main/Subject/Entrega/Entrega.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import SubjectText from "../SubjectText";
+
+const Entrega = () => {
+  return <SubjectText title="Entrega" />;
+};
+
+export default Entrega;

src/components/Main/Subject/Forma-de-pagamento/FormaDePagamento.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import SubjectText from "../SubjectText";
+
+const FormaDePagamento = () => {
+  return <SubjectText title="Forma de pagamento" />;
+};
+
+export default FormaDePagamento;

src/components/Main/Subject/Nav/Li/Li.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import styles from "../../subject.module.scss";
+import { NavLink, NavLinkProps } from "react-router-dom";
+
+interface LiProps extends NavLinkProps {
+  text: string;
+  to: NavLinkProps["to"];
+}
+
+const LiForm = (props: LiProps) => {
+  return (
+    <li>
+      <NavLink
+        to={props.to}
+        className={({ isActive }) =>
+          isActive
+            ? styles["page-subject__active"]
+            : styles["page-subject__button"]
+        }
+      >
+        {props.text}
+      </NavLink>
+    </li>
+  );
+};
+
+export default LiForm;

src/components/Main/Subject/Nav/Nav.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import Li from "./Li/Li";
+import styles from "../subject.module.scss";
+
+const Nav = () => {
+  const [isOpen, setOpen] = useState(false);
+  const Sobre = () => {
+    setOpen(!isOpen);
+  };
+
+  return (
+    <>
+      <nav className={styles["page-subject__nav"]}>
+        <ul className={styles["page-subject__menu"]}>
+          <Li to="/" text="Sobre" />
+          <Li to="/forma-de-pagamento" text="Forma de Pagamento" />
+          <Li to="/entrega" text="Entrega" />
+          <Li to="/troca-e-devolucao" text="Troca e Devolução" />
+          <Li to="/seguranca-e-privacidade" text="Segurança e Privacidade" />
+          <Li onClick={Sobre} to="/formulario" text="Contato" />
+        </ul>
+      </nav>
+    </>
+  );
+};
+
+export default Nav;

src/components/Main/Subject/Segurança-e-privacidade/SegurancaEPrivacidade.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import SubjectText from "../SubjectText";
+
+const SegurancaEPrivacidade = () => {
+  return <SubjectText title="Segurança e Privacidade" />;
+};
+
+export default SegurancaEPrivacidade;

src/components/Main/Subject/Sobre/Sobre.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import SubjectText from "../SubjectText";
+
+const Sobre = () => {
+  return <SubjectText title="Sobre" />;
+};
+
+export default Sobre;

src/components/Main/Subject/SubjectMain.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import styles from "./subject.module.scss";
+import Nav from "./Nav/Nav";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Sobre from "./Sobre/Sobre";
+import FormaDePagamento from "./Forma-de-pagamento/FormaDePagamento";
+import Entrega from "./Entrega/Entrega";
+import TrocaEDevolucao from "./Troca-e-devolucao/TrocaEDevolucao";
+import SegurancaEPrivacidade from "./Segurança-e-privacidade/SegurancaEPrivacidade";
+import RegistrationForm from "./Contato/RegistrationForm";
+
+const SubjectMain = () => {
+  return (
+    <section className={styles["page-subject"]}>
+      <Router>
+        <Nav />
+        <Routes>
+          <Route path="/" element={<Sobre />} />
+          <Route path="/forma-de-pagamento" element={<FormaDePagamento />} />
+          <Route path="/entrega" element={<Entrega />} />
+          <Route path="/troca-e-devolucao" element={<TrocaEDevolucao />} />
+          <Route
+            path="/seguranca-e-privacidade"
+            element={<SegurancaEPrivacidade />}
+          />
+          <Route path="/formulario" element={<RegistrationForm />} />
+        </Routes>
+      </Router>
+    </section>
+  );
+};
+
+export default SubjectMain;

src/components/Main/Subject/SubjectText.tsx

@@ -2,15 +2,10 @@ import styles from "./subject.module.scss";
 
 interface SubjectTextProps {
   title: string;
-  active: boolean;
 }
 const SubjectText = (props: SubjectTextProps) => {
   return (
-    <article
-      className={
-        props.active ? styles["page-subject__container"] : styles["desative"]
-      }
-    >
+    <article className={styles["page-subject__container"]}>
       <h2 className={styles["page-subject__title"]}>{props.title}</h2>
       <p className={styles["page-subject__paragraph"]}>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

src/components/Main/Subject/Troca-e-devolucao/TrocaEDevolucao.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import SubjectText from "../SubjectText";
+
+const TrocaEDevolucao = () => {
+  return <SubjectText title="Troca e Devolução" />;
+};
+
+export default TrocaEDevolucao;

src/components/Main/Subject/subject.module.scss

@@ -1,4 +1,4 @@
-@import "variables.scss";
+@import "../../variables.scss";
 
 .page-subject {
     display: flex;

src/components/Main/main.module.scss

@@ -1,4 +1,4 @@
-@import "variables.scss";
+@import "../variables.scss";
 
 .page-main {
     padding: 0 100px;

src/components/Nav.tsx

@@ -1,24 +0,0 @@
-import styles from "./subject.module.scss";
-
-interface NavProps {
-  text: string;
-  onClick: React.MouseEventHandler;
-  active: boolean;
-}
-
-const Nav = (props: NavProps) => {
-  return (
-    <li
-      onClick={props.onClick}
-      className={
-        props.active
-          ? styles["page-subject__active"]
-          : styles["page-subject__button"]
-      }
-    >
-      {props.text}
-    </li>
-  );
-};
-
-export default Nav;

src/components/SubjectMain.tsx

@@ -1,157 +0,0 @@
-import Nav from "./Nav";
-import SubjectText from "./SubjectText";
-
-import styles from "./subject.module.scss";
-import Forum from "./RegistrationForm";
-import { useState } from "react";
-
-const SubjectMain = () => {
-  const [isSobre, setIsSobre] = useState(true);
-  const [isPagamento, setIsPagamento] = useState(false);
-  const [isEntrega, setIsEntrega] = useState(false);
-  const [isTroca, setIsTroca] = useState(false);
-  const [isPrivacidade, setIsPrivacidade] = useState(false);
-  const [isForm, setIsForm] = useState(false);
-  const activeSobre = () => {
-    if (
-      isSobre ||
-      isPagamento ||
-      isEntrega ||
-      isTroca ||
-      isPrivacidade ||
-      isForm === true
-    ) {
-      setIsSobre(true);
-      setIsPagamento(false);
-      setIsEntrega(false);
-      setIsTroca(false);
-      setIsPrivacidade(false);
-      setIsForm(false);
-    }
-  };
-  const activePagamento = () => {
-    if (
-      isSobre === true ||
-      isPagamento ||
-      isEntrega ||
-      isTroca ||
-      isPrivacidade ||
-      isForm === false
-    ) {
-      setIsSobre(false);
-      setIsPagamento(true);
-      setIsEntrega(false);
-      setIsTroca(false);
-      setIsPrivacidade(false);
-      setIsForm(false);
-    }
-  };
-  const activeEntrega = () => {
-    if (
-      isSobre ||
-      isPagamento ||
-      isEntrega ||
-      isTroca ||
-      isPrivacidade ||
-      isForm === true
-    ) {
-      setIsSobre(false);
-      setIsPagamento(false);
-      setIsEntrega(true);
-      setIsTroca(false);
-      setIsPrivacidade(false);
-      setIsForm(false);
-    }
-  };
-  const activeTroca = () => {
-    if (
-      isSobre ||
-      isPagamento ||
-      isEntrega ||
-      isTroca ||
-      isPrivacidade ||
-      isForm === true
-    ) {
-      setIsSobre(false);
-      setIsPagamento(false);
-      setIsEntrega(false);
-      setIsTroca(true);
-      setIsPrivacidade(false);
-      setIsForm(false);
-    }
-  };
-  const activePrivacidade = () => {
-    if (
-      isSobre ||
-      isPagamento ||
-      isEntrega ||
-      isTroca ||
-      isPrivacidade ||
-      isForm === true
-    ) {
-      setIsSobre(false);
-      setIsPagamento(false);
-      setIsEntrega(false);
-      setIsTroca(false);
-      setIsPrivacidade(true);
-      setIsForm(false);
-    }
-  };
-  const activeForm = () => {
-    if (
-      isSobre ||
-      isPagamento ||
-      isEntrega ||
-      isTroca ||
-      isPrivacidade ||
-      isForm === true
-    ) {
-      setIsSobre(false);
-      setIsPagamento(false);
-      setIsEntrega(false);
-      setIsTroca(false);
-      setIsPrivacidade(false);
-      setIsForm(true);
-    }
-  };
-  const Subjects = [
-    <SubjectText active={isSobre} title="Sobre" />,
-    <SubjectText active={isPagamento} title="Forma de Pagamento" />,
-    <SubjectText active={isEntrega} title="Entrega" />,
-    <SubjectText active={isTroca} title="Troca e Devolução" />,
-    <SubjectText active={isPrivacidade} title="Segurança e Privacidade" />,
-    <Forum active={isForm} />,
-  ];
-
-  return (
-    <section className={styles["page-subject"]}>
-      <nav className={styles["page-subject__nav"]}>
-        <ul className={styles["page-subject__menu"]}>
-          <Nav active={isSobre} onClick={activeSobre} text="Sobre" />
-          <Nav
-            active={isPagamento}
-            onClick={activePagamento}
-            text="Forma de Pagamento"
-          />
-          <Nav active={isEntrega} onClick={activeEntrega} text="Entrega" />
-          <Nav
-            active={isTroca}
-            onClick={activeTroca}
-            text="Troca e Devolução"
-          />
-          <Nav
-            active={isPrivacidade}
-            onClick={activePrivacidade}
-            text="Segurança e Privacidade"
-          />
-          <Nav active={isForm} onClick={activeForm} text="Contato" />
-        </ul>
-      </nav>
-      <ul className={styles["page-subject__text"]}>
-        <li>{Subjects}</li>
-      </ul>
-    </section>
-  );
-};
-
-export default SubjectMain;

src/pages/Home.tsx

@@ -1,5 +1,5 @@
-import Header from "../components/Header";
-import Main from "../components/Main";
+import Header from "../components/Header/Header";
+import Main from "../components/Main/Main";
 
 const Home = () => {
   return (