component > Search

Dockerfile

@@ -11,4 +11,4 @@ COPY . .
 # production
 RUN npm run build
 
-CMD [ "npm", "start"]
+CMD [ "npm", "start", "build"]

components/searchInput/index.js

@@ -0,0 +1,81 @@
+import React, {
+  useState,
+  useContext,
+  useEffect,
+  useRef,
+  useLayoutEffect,
+} from 'react';
+import { useRouter } from 'next/router';
+import { FaSearch } from 'react-icons/fa';
+import { Search, ChevronRight } from 'react-feather';
+import { SearchWrapper, ResultSearch, ModalSearch } from './styled';
+import { ContextSearch } from '../../context/SearchContext';
+import Link from 'next/link';
+
+const Buscador = () => {
+  const [searchON, setSearchOn] = useState(false);
+  const [textSearch, setTextSearch] = useState('');
+  const inputRef = useRef();
+
+  const contextSearch = useContext(ContextSearch);
+  const { results, getResultsSearch } = contextSearch;
+
+  const router = useRouter();
+
+  useLayoutEffect(() => {
+    if (textSearch.length < 1) {
+      getResultsSearch(null);
+    } else {
+      getResultsSearch(textSearch);
+    }
+  }, [textSearch]);
+
+  const handleChange = (e) => {
+    const text = e.target.value;
+    setTextSearch(text);
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter' && textSearch) {
+      router.push(`/search?query=${textSearch}`);
+    }
+  };
+
+  const handleBlur = () => {
+    setSearchOn(false);
+    setTextSearch('');
+  };
+
+  return (
+    <>
+      <SearchWrapper>
+        <label htmlFor="search" onClick={() => setSearchOn(!searchON)}>
+          <Search size={18} />
+        </label>
+        {searchON && (
+          <input
+            ref={inputRef}
+            type="text"
+            id="search"
+            placeholder="Buscar..."
+            value={textSearch}
+            onChange={handleChange}
+            onKeyPress={handleKeyPress}
+            onBlur={handleBlur}
+          />
+        )}
+      </SearchWrapper>
+      {results && (
+        <ResultSearch>
+          {results && results.map(result => (
+            <Link href={`/producto/[id]/`} as={`/producto/${result._id}`} key={result._id}>
+                <a><ChevronRight size={15} />{result.title}</a>
+              </Link>
+          ))}
+        </ResultSearch>
+      )}
+    </>
+  );
+};
+
+export default Buscador;

components/searchInput/styled.js

@@ -0,0 +1,56 @@
+import styled, { keyframes } from 'styled-components';
+
+const animateSearch = keyframes`
+  from {width: 0;}
+  to {width: auto;}
+`;
+const animateSearchResults = keyframes`
+  from {height: 0;}
+  to {height: auto;}
+`;
+
+export const SearchWrapper = styled.div`
+  position: relative;
+
+  input {
+    display: inline-block;
+    width: 250px;
+    padding: 0.2rem 0.5rem;
+    border: none;
+    background: transparent;
+    font-size: 0.7em;
+    border: 2px solid ${({ theme }) => theme.color.default};
+    animation: ${animateSearch} 0.5s ease;
+    border-radius: 50px;
+  }
+
+  label {
+    position: relative;
+    right: 0;
+    top: 0.35rem;
+  }
+`;
+
+export const ResultSearch = styled.section`
+  position: fixed;
+  top: 3rem;
+  left: 0;
+  width: 100%;
+  height: auto;
+  background: ${({ theme }) => theme.color.gray};
+  animation: ${animateSearchResults} .5s ease;
+
+  a {
+    display: block;
+    font-weight: 400;
+    font-size: .8em;
+    text-align: center;
+    text-transform: uppercase;
+    padding: .6rem 0;
+    color: ${({ theme }) => theme.color.dark};
+
+    &:hover {
+      background: ${({ theme }) => theme.color.primary};
+    }
+  }
+`;

containers/navbar/index.js

@@ -1,14 +1,13 @@
 import React, { useState, useEffect, useContext } from 'react';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { FaUser, FaShoppingCart } from 'react-icons/fa';
+import { User, ShoppingCart } from 'react-feather';
 import { Nav, Title, Links, CartItem } from './styled';
 import { Container } from '../../styled/index';
 import MenuMobile from '../../utils/MenuMobile';
 import BurguerMenu from '../../utils/BurguerMenu';
 import { ContextAuth } from '../../context/AuthContext';
 import { ContextMobile } from '../../context/MobileContext';
-import Search from '../../components/search';
+import Search from '../../components/searchInput';
 
 const NavBar = () => {
   const contextMobile = useContext(ContextMobile);
@@ -54,17 +53,17 @@ const NavBar = () => {
             <Items />
             <div>
               <CartItem onClick={() => setItem(item + 1)}>
-                <FaShoppingCart />
+                <ShoppingCart size={18} />
                 <span>{item}</span>
               </CartItem>
               {!auth ? (
                 <Link href="/login" passHref>
-                  <a><FaUser /></a>
+                  <a><User size={18} /></a>
                 </Link>
               ) : (
                 <div>
                   <span className="user">{user && user.user.name}</span>
-                  <span role="button" className="logout" onClick={() => logOut()}> x</span>
+                  <span role="button" className="logout" onClick={() => logOut()}> Cerrar Sesion</span>
                 </div>
               )}
             </div>
@@ -77,17 +76,17 @@ const NavBar = () => {
             <div>
               <Search />
               <CartItem onClick={() => setItem(item + 1)}>
-                <FaShoppingCart />
+                <ShoppingCart size={18} />
                 <span>{item}</span>
               </CartItem>
               {!auth ? (
                 <Link href="/login" passHref>
-                  <a><FaUser /></a>
+                  <a><User size={18} /></a>
                 </Link>
               ) : (
                 <div>
                   <span className="user">{user && user.user.name}</span>
-                  <span role="button" className="logout" onClick={() => logOut()}> x</span>
+                  <span role="button" className="logout" onClick={() => logOut()}> Cerrar Sesion</span>
                 </div>
               )}
             </div>

containers/navbar/styled.js

@@ -37,7 +37,11 @@ export const Nav = styled.nav`
     padding: .2rem .5rem;
   }
   .logout {
-    color: red;
+    color: ${props => props.theme.color.default};
+    background: ${props => props.theme.color.default};
+    font-size: .55em;
+    color: ${props => props.theme.color.primary};
+    padding: .5em .8em;
     cursor: pointer;
   }
 `;
@@ -55,7 +59,7 @@ export const Links = styled.ul`
     a {
       background: transparent;
       color: #000;
-      font-size: 0.6em;
+      font-size: 0.7em;
       font-weight: 500;
       text-transform: uppercase;
       padding: 0.5rem .7rem;

context/SearchContext.js

@@ -3,37 +3,40 @@ import SearchReducer from '../reducers/SearchReducer';
 import { SEARCH } from '../types';
 import { axiosFetch } from '../API/axios';
 
-
 export const ContextSearch = createContext();
-const SearchContext = props => {
+const SearchContext = (props) => {
   const initialState = {
-    results: []
-  }
+    results: [],
+  };
 
   const [state, dispatch] = useReducer(SearchReducer, initialState);
 
-  const getResultsSearch = async query => {
+  const getResultsSearch = async (query) => {
     try {
       const response = await axiosFetch.get('/api/productos');
-      const {products} = await response.data;
-      const filter = products.find(product => product.title === query)
+      const data = await response.data;
+      const filter = data.products.filter(product => ( 
+        product.title.indexOf(query) !== -1
+      ));
       dispatch({
         type: SEARCH,
-        payload: filter
-      }) 
+        payload: filter,
+      });
     } catch (error) {
       console.log(error);
     }
-  }
+  };
 
   return (
-    <ContextSearch.Provider value={{
-      results: state.results,
-      getResultsSearch
-    }}>
+    <ContextSearch.Provider
+      value={{
+        results: state.results,
+        getResultsSearch,
+      }}
+    >
       {props.children}
     </ContextSearch.Provider>
-  )
-}
+  );
+};
 
-export default SearchContext;
+export default SearchContext;