From 2a087905a7ab881853050de32af7ab291e1b4d25 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 12 Oct 2020 11:10:20 -0300
Subject: [PATCH] Search functionality

---
 components/core/Searchbar/Searchbar.tsx | 11 ++++++++---
 pages/search.tsx                        |  4 +++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/components/core/Searchbar/Searchbar.tsx b/components/core/Searchbar/Searchbar.tsx
index 5f9d52ed6..c29bbe581 100644
--- a/components/core/Searchbar/Searchbar.tsx
+++ b/components/core/Searchbar/Searchbar.tsx
@@ -19,10 +19,15 @@ const Searchbar: FC<Props> = ({ className }) => {
       <input
         className={s.input}
         placeholder="Search for products..."
-        onChange={(e) => {
+        onKeyUp={(e) => {
           e.preventDefault()
-          router.push('/search')
-          console.log('changing')
+
+          if (e.key === 'Enter') {
+            router.push({
+              pathname: `/search`,
+              query: { q: e.currentTarget.value },
+            })
+          }
         }}
       />
       <div className={s.iconContainer}>
diff --git a/pages/search.tsx b/pages/search.tsx
index 72135d88a..bc560d6f8 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -4,6 +4,7 @@ import { Layout } from '@components/core'
 import { Grid, Marquee, Hero } from '@components/ui'
 import { ProductCard } from '@components/product'
 import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
+import { useRouter } from 'next/router'
 
 export async function getStaticProps({ preview }: GetStaticPropsContext) {
   const { products } = await getAllProducts()
@@ -19,6 +20,7 @@ export default function Home({
   categories,
   brands,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
+  const router = useRouter()
   return (
     <div className="grid grid-cols-12 gap-8 mt-3 mb-20">
       <div className="col-span-2">
@@ -45,7 +47,7 @@ export default function Home({
       </div>
       <div className="col-span-8">
         <div className="mb-12">
-          Showing 8 results for "<strong>Jacket</strong>"
+          Showing 8 results for "<strong>{router.query.q}</strong>"
         </div>
         <Grid
           items={[