From 8905089fd7cc390f5bbfa1d2b10b9dde25763fed Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Wed, 14 Oct 2020 13:12:34 -0500
Subject: [PATCH] bug fixes

---
 lib/bigcommerce/api/catalog/handlers/get-products.ts |  2 +-
 pages/search.tsx                                     |  3 +--
 utils/search.tsx                                     | 10 ++++++++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/lib/bigcommerce/api/catalog/handlers/get-products.ts b/lib/bigcommerce/api/catalog/handlers/get-products.ts
index 4ae1f4f6e..c334dd97b 100644
--- a/lib/bigcommerce/api/catalog/handlers/get-products.ts
+++ b/lib/bigcommerce/api/catalog/handlers/get-products.ts
@@ -58,7 +58,7 @@ const getProducts: ProductsHandlers['getProducts'] = async ({
     },
     {}
   )
-  const products: Products = []
+  const products: Products = found ? [] : graphqlData.products
 
   // Populate the products array with the graphql products, in the order
   // assigned by the list of entity ids
diff --git a/pages/search.tsx b/pages/search.tsx
index 6fa720288..3a0bdea67 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -31,9 +31,8 @@ export default function Search({
   const { asPath } = router
   const { q, sort } = router.query
   const query = filterQuery({ q, sort })
-  const pathname = asPath.split('?')[0]
 
-  const { category, brand } = useSearchMeta(asPath)
+  const { pathname, category, brand } = useSearchMeta(asPath)
   const activeCategory = categories.find(
     (cat) => getSlug(cat.path) === category
   )
diff --git a/utils/search.tsx b/utils/search.tsx
index 192c1e0b6..6ef54e9e4 100644
--- a/utils/search.tsx
+++ b/utils/search.tsx
@@ -1,11 +1,16 @@
 import { useEffect, useState } from 'react'
 
 export function useSearchMeta(asPath: string) {
+  const [pathname, setPathname] = useState<string>('/search')
   const [category, setCategory] = useState<string | undefined>()
   const [brand, setBrand] = useState<string | undefined>()
 
   useEffect(() => {
-    const parts = asPath.split('/')
+    // Only access asPath after hydration to avoid a server mismatch
+    const path = asPath.split('?')[0]
+    const parts = path.split('/')
+
+    console.log('P', parts)
 
     let c = parts[2]
     let b = parts[3]
@@ -14,11 +19,12 @@ export function useSearchMeta(asPath: string) {
       c = parts[4]
     }
 
+    setPathname(path)
     if (c !== category) setCategory(c)
     if (b !== brand) setBrand(b)
   }, [asPath])
 
-  return { category, brand }
+  return { pathname, category, brand }
 }
 
 // Removes empty query parameters from the query object