Component > Product

components/product/index.js

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react';
+import { WrapperProduct, Images, Detail, Section } from './styled';
+import Button from '../../utils/Button';
+import { ContextMobile } from '../../context/MobileContext';
+import Title from '../../utils/Title';
+
+const Product = ({ data }) => {
+  const contextMobile = useContext(ContextMobile);
+  const { modeMobile } = contextMobile;
+
+  return (
+    <WrapperProduct modeMobile={modeMobile}>
+      <Images>
+        <img src={data.images[0]} alt="img" />
+      </Images>
+      <Detail>
+        <h2>{data.title}</h2>
+        <Section>
+          <h4 className="price">${data.price}.00</h4>
+        </Section>
+        <hr/>
+        <Section>
+          <h4>Colores: </h4>
+          <p>
+            {data.colors.map((color, index) => (
+              <span key={index} className="color" style={{ background: color }}></span>
+            ))}
+          </p>
+        </Section>
+        <Section>
+          <h4>Talle: </h4>
+          <p>{data.talles}</p>
+        </Section>
+        <Section>
+          <h4>Cantidad:</h4>
+          <input type="number" placeholder="1" />
+        </Section>
+        <Button text="Agregar al carrito" color="default" />
+        <Section>
+          <span>
+            <h4>Descripcion: </h4>
+            <p className="description">{data.description}</p>
+          </span>
+        </Section>
+      </Detail>
+    </WrapperProduct>
+  );
+};
+
+export default Product;

components/product/styled.js

@@ -0,0 +1,84 @@
+import styled from 'styled-components';
+
+export const WrapperProduct = styled.main`
+  display: flex;
+  flex-direction: ${props => props.modeMobile ? 'column' : 'row' };
+  justify-content: space-evenly;
+  align-items: center;
+  margin: ${props => props.modeMobile ? '2rem 0' : '2rem' };
+  font-size: 18px;
+
+  @media (max-width: 920px) {
+    font-size: 16px;
+  }
+`;
+
+export const Images = styled.section`
+  width: 100%;
+  height: 100%;
+
+  img {
+    border: 2px solid ${({theme}) => theme.color.default};
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export const Detail = styled.section`
+  width: 100%;
+  height: 100%;
+  padding: 1.5rem;
+
+  h2 {
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    font-size: 1.5em;
+  }
+
+  button {
+    display: block;
+    width: 80%;
+    margin: 1.5rem auto;
+  }
+`;
+
+export const Section = styled.section`
+  margin: 1rem 0;
+  display: flex;
+  justify-content: space-between;
+
+  h4 {
+    color: ${({theme}) => theme.color.tercero};
+    font-weight: 400;
+    font-size: .7em;
+  }
+
+  p {
+    color: ${({theme}) => theme.color.deafult};
+    font-size: .8em;
+    opacity: .8;
+    font-weight: 400;
+    text-transform: uppercase;
+    line-height: 1.5rem;
+  }
+
+  .price {
+    font-size: 1.2rem;
+    color: ${({theme}) => theme.color.default};
+    font-weight: 600;
+  }
+
+  .color {
+    display: inline-block;
+    width: 1.2em;
+    height: 1.2em;
+    background: red;
+    border-radius: 50%;
+    margin: 0 .5rem;
+  }
+
+  .description {
+    text-transform: initial;
+    float: right;
+  }
+`;

containers/contact/styled.js

@@ -2,8 +2,7 @@ import styled from 'styled-components';
 
 export const WrapperContact = styled.main`
   width: 100%;
-  background: url('./cap-girl-9.jpg') no-repeat center center/cover;
-  min-height: 90vh;
+  /* min-height: 90vh; */
   padding: 2em 0;
   @media (max-width: 900px) {
     font-size: 14px;

containers/formLogin/logIn.js

@@ -51,7 +51,7 @@ export default function Login({ logIn, messageAlert}) {
       <Inputs>
         <small>Forgot my password</small>
       </Inputs>
-      <Button text="Iniciar Sesion" color="primary" type="submit" />
+      <Button text="Iniciar Sesion" color="tercero" type="submit" />
       {messageAlert && <p>{messageAlert}</p>}
     </Forms>
   );

containers/formLogin/styled.js

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 
 export const FormWrapper = styled.main`
-  background: url('./cap-girl-7.jpeg') no-repeat center center/cover;
   min-height: 90vh;
   padding: 2rem 0;
 
@@ -27,10 +26,10 @@ export const Forms = styled.form`
   }
 
   &:first-child {
-    background: ${(props) => props.theme.color.dark};
+    /* background: ${(props) => props.theme.color.dark}; */
 
     label {
-      color: ${(props) => props.theme.color.gray};
+      color: ${(props) => props.theme.color.default};
     }
     input {
       width: 100%;

context/AuthContext.js

@@ -1,4 +1,4 @@
-import React, { createContext, useReducer} from 'react';
+import React, { createContext, useReducer } from 'react';
 import {
   REGISTER_OK,
   REGISTER_BAD,
@@ -50,7 +50,7 @@ const AuthContext = (props) => {
 
   const authUser = async () => {
     const token = localStorage.getItem('token');
-    if (token) authToken(token)
+    if (token) authToken(token);
     else return;
     try {
       const response = await axiosFetch.get('/api/auth');

pages/productos/[id].js

@@ -1,17 +1,25 @@
 import React from 'react';
-import { useRouter } from 'next/router';
 import Layout from '../../containers/layout';
 import { Container } from '../../styled/';
+import { axiosFetch } from '../../API/axios';
+import Product from '../../components/product';
 
-export default () => {
-  const router = useRouter();
-  const { id } = router.query;
-
+const Producto = ({ data }) => {
   return (
     <Layout>
       <Container>
-        <h1>producto {id}</h1>
+        <Product data={data} />
       </Container>
     </Layout>
-  )
-}
+  );
+};
+
+export async function getServerSideProps(ctx) {
+  const { id } = ctx.params;
+  const response = await axiosFetch(`/api/producto/${id}`);
+  const data = response.data.product;
+
+  return { props: { data } };
+}
+
+export default Producto;

server.js

@@ -32,6 +32,19 @@ app.prepare().then(() => {
   server.use('/api/auth', require('./server/routes/auth'));
   server.use('/api/login', require('./server/routes/users'));
   server.use('/api/productos', require('./server/routes/products'));
+  server.use('/api/producto', require('./server/routes/products'));
+
+  /** Config Cors */
+  server.use((req, res, next) => {
+    res.header("Access-Control-Allow-Origin", "*");
+    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, PATCH, DELETE, OPTIONS");
+    res.header("Access-Control-Allow-Headers", "rigin, Accept, Content-Type, Authorization");
+
+    if(req.method === 'OPTIONS') {
+      return res.status(200).end();
+    }
+    next();
+  })
 
   server.use(handler);
 

server/controllers/productsController.js

@@ -15,14 +15,27 @@ exports.addProduct = async (req, res) => {
 exports.getProducts = async (req, res) => {
   try {
     const products = await Products.find();
-    console.log({products});
     if(!products) {
       return res.status(404).json({ message: 'No se encontro ningun producto'});
     }
 
-    return res.status(200).json({products});
+    res.status(200).json({products});
   } catch (error) {
     console.log(error);
     res.status(500).json({ message: 'Error en el servidor'});
   }
 };
+
+exports.getProductById = async (req, res) => {
+  try {
+    const product = await Products.findById(req.params.id);
+    if(!product) {
+      return res.status(404).json({ message: 'Producto no encontrado' });
+    }
+
+    res.status(200).json({ product });
+  } catch (error) {
+    console.log(error);
+    res.status(500).json({ message: 'Error en el servidor!' })
+  }
+}

server/routes/products.js

@@ -3,6 +3,8 @@ const productsController = require('../controllers/productsController');
 
 router.get('/', productsController.getProducts);
 
+router.get('/:id', productsController.getProductById);
+
 router.post('/', productsController.addProduct);
 
 module.exports = router;

utils/MenuMobile.js

@@ -23,18 +23,18 @@ const WrapperMenu = styled.div`
   animation: ${toBottom} 0.5s ease-in;
 
   ul {
-    width: 80%;
-    margin: auto;
+    width: 100%;
 
     li {
       margin-bottom: 1.5rem;
       padding: 0.55rem 0;
+      border-bottom: 2px solid gray;
       width: 100%;
 
       a {
         color: ${({ theme }) => theme.color.primary};
         text-transform: uppercase;
-        font-size: 0.9em;
+        font-size: em;
         display: inline-block;
         width: inherit;
         animation: ${toBottom} 1s ease;