state product, store product

MiguelHG2351 · Jan 6, 2021 · 43cd598 · 43cd598
1 parent e97a535
commit 43cd598
Show file tree

Hide file tree

Showing 20 changed files with 395 additions and 308 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -27,7 +27,8 @@
         "react/prop-types": "off",
         "react/react-in-jsx-scope": "off",
         "indent": ["error", 4],
-        "space-before-function-paren": "off"
+        "space-before-function-paren": "off",
+        "comma-dangle": "off"
     },
     "ignorePatterns": ["build/*"]
 }
diff --git a/README.md b/README.md
@@ -19,3 +19,5 @@
 # Linter
 
 **npm run lint**
+
+# El sitio acaba de pasar de CRA a Nextjs, se continua solucionando bugs
diff --git a/components/container/Header/products.js b/components/container/Header/products.js
@@ -1,44 +1,46 @@
 import React, { useState } from 'react'
-import styles from './productsStyle'
+import { useRouter } from 'next/router'
 import Link from 'next/link'
+import styles from './styles/productsStyle'
 // import baseContext from 'context/descriptionContext'
 
-function Producthead () {
+function Producthead() {
     const [active, setActive] = useState(null)
     const [formActive, setFormActive] = useState('search')
+    const { device } = useRouter().query
 
-    function loadSideNav () {
+    function loadSideNav() {
         setActive(null)
     }
 
     // Ordenar por potencia, precio, camara, Más comprado, Marca en especifico,
 
-    function openMenu () {
+    function openMenu() {
         setActive('active')
     }
 
-    function getData () {
+    function getData() {
         console.log('xd')
     }
 
-    function toggleInput () {
+    function toggleInput() {
         console.log('click')
         formActive === 'search'
             ? setFormActive('search active')
             : setFormActive('search')
     }
 
-    function searchDevices (e) {
+    function searchDevices(e) {
         e.preventDefault()
         const formData = new FormData(e.currentTarget)
         getData(formData)
     }
 
-    function blurInput () {
+    function blurInput() {
         setFormActive('search')
     }
 
-    function onkeyDown (e) {
+    function onkeyDown(e) {
         if (e.keyCode === 27) {
             setFormActive('search')
         }
@@ -71,61 +73,87 @@ function Producthead () {
                     <ul className="header-nav">
                         <li>
                             <i className="material-icons">home</i>
-                            <Link to="/">Inicio</Link>
+                            <Link href="/">
+                                <a>Inicio</a>
+                            </Link>
                         </li>
                         <li>
                             <i className="material-icons">smartphone</i>
-                            <Link to="/products">Productos</Link>
+                            <Link href="/products">
+                                <a>Productos</a>
+                            </Link>
                         </li>
                         <li>
                             <i className="material-icons">trending_up</i>
-                            <Link to="/trends">Tendencias</Link>
+                            <Link href="/trends">
+                                <a>Tendencias</a>
+                            </Link>
                         </li>
                         <li>
                             <i className="material-icons">shopping_cart</i>
-                            <Link to="/catalogo">Catalogo</Link>
+                            <Link href="/catalogo">
+                                <a>Catalogo</a>
+                            </Link>
                         </li>
                         <li>
                             <i className="material-icons">contact_phone</i>
-                            <Link to="/contact">Contactanos</Link>
+                            <Link href="/contact">
+                                <a>Contactanos</a>
+                            </Link>
                         </li>
                         <li>
                             <i className="material-icons">support_agent</i>
-                            <Link to="/support">Soporte Técnico</Link>
+                            <Link href="/support">
+                                <a>Soporte Técnico</a>
+                            </Link>
                         </li>
                         <hr />
                         <li>
                             <i className="material-icons">smartphone</i>
-                            <Link to="/catalogo#phone">Telefonos</Link>
+                            <Link href="/catalogo#phone">
+                                <a>Telefonos</a>
+                            </Link>
                         </li>
                         <hr />
                         <li>
-                            <Link to="/catalogo#samsung">Samsung</Link>
+                            <Link href="/catalogo#samsung">
+                                <a>Samsung</a>
+                            </Link>
                         </li>
                         <li>
-                            <Link to="/catalogo#xiaomi">Xiaomi</Link>
+                            <Link href="/catalogo#xiaomi">
+                                <a>Xiaomi</a>
+                            </Link>
                         </li>
                         <li>
-                            <Link to="/catalogo#huawei">Huawei</Link>
+                            <Link href="/catalogo#huawei">
+                                <a>Huawei</a>
+                            </Link>
                         </li>
                         <li>
-                            <Link to="/catalogo#apple">Apple</Link>
+                            <Link href="/catalogo#apple">
+                                <a>Apple</a>
+                            </Link>
                         </li>
                         <hr />
                         <li>
                             <i className="material-icons">coronavirus</i>
-                            <Link to="/support">Coronavirus</Link>
+                            <Link href="/support">
+                                <a>Coronavirus</a>
+                            </Link>
                         </li>
                         <hr />
                         <li>
                             <i className="material-icons">laptop</i>
-                            <Link to="/catalogo#laptop">Laptop</Link>
+                            <Link href="/catalogo#laptop">
+                                <a>Laptop</a>
+                            </Link>
                         </li>
                         <hr />
                         <li>
                             <i className="material-icons">laptop</i>
-                            <Link to="/catalogo#laptop">
-                                Mac MacOS Catalina
+                            <Link href="/catalogo#laptop">
+                                <a>Mac MacOS Catalina</a>
                             </Link>
                         </li>
                     </ul>
@@ -134,7 +162,7 @@ function Producthead () {
                     <button onClick={openMenu}>
                         <i className="material-icons">menu</i>
                     </button>
-                    <h2>Agua xd</h2>
+                    <h2>{device}</h2>
                 </div>
                 <form className="form" onSubmit={searchDevices}>
                     <label htmlFor="search" onClick={toggleInput}>

diff --git a/components/container/Header/productsStyle.js → .../container/Header/styles/productsStyle.js b/components/container/Header/productsStyle.js → .../container/Header/styles/productsStyle.js
@@ -134,6 +134,21 @@ export default css`
         position: relative;
     }
 
+    .profile img {
+        border-radius: 50%;
+        padding: 11px;
+        width: 30%;
+    }
+
+    .profile strong {
+        font-size: 25px;
+        color: #fff;
+    }
+    .profile span {
+        font-size: 14px;
+        color: #fff;
+    }
+
     .background {
         position: absolute;
         z-index: -1;
@@ -152,21 +167,6 @@ export default css`
         margin: 0;
     }
 
-    .profile img {
-        border-radius: 50%;
-        padding: 11px;
-        width: 30%;
-    }
-
-    .profile strong {
-        font-size: 25px;
-        color: #fff;
-    }
-    .profile span {
-        font-size: 14px;
-        color: #fff;
-    }
-
     .header-nav {
         margin: 12px 0 0 0;
         color: #000;
@@ -190,6 +190,10 @@ export default css`
         color: #fff;
     }
 
+    .header-nav li:hover i {
+        color: #fff;
+    }
+
     .header-nav li a {
         padding: 15px;
         color: #000;

diff --git a/components/container/section/catalogo.js b/components/container/section/catalogo.js
@@ -10,7 +10,7 @@ const styles = css`
         grid-template-columns: 35% 65%;
     }
 
-    .comtainer div img {
+    .container div img {
         width: 100%;
         height: auto;
     }

diff --git a/components/device.js b/components/device.js
@@ -30,6 +30,9 @@ const styles = css`
     }
     .info .colors {
         grid-column: 1 / 3;
+        display: flex;
+        margin-top: 20px;
+        justify-content: center;
     }
     .info .colors button {
         border-radius: 12px;
@@ -106,7 +109,7 @@ export default function Device ({ data }) {
                     </div>
                 </div>
             </section>
-            <style jxs>{styles}</style>
+            <style jsx>{styles}</style>
         </>
     )
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,3 +19,5 @@
		# Linter

		npm run lint

		# El sitio acaba de pasar de CRA a Nextjs, se continua solucionando bugs