From d70132734bc9eff2bb741e9ae0abd73994a6962c Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Sun, 25 Oct 2020 21:43:13 -0500
Subject: [PATCH 1/3] Add links to the categories & brands in the landing

---
 pages/index.tsx  | 18 ++++++++++++++----
 pages/search.tsx |  4 ++--
 utils/search.tsx | 14 ++++++++++----
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 2065bacc9..44a93c1d7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,9 +5,11 @@ import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
 import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
 import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
 import rangeMap from '@lib/range-map'
+import { getCategoryPath, getDesignerPath } from '@utils/search'
 import { Layout } from '@components/core'
 import { Grid, Marquee, Hero } from '@components/ui'
 import { ProductCard } from '@components/product'
+import Link from 'next/link'
 
 export async function getStaticProps({
   preview,
@@ -132,21 +134,29 @@ export default function Home({
           <div className="sticky top-32">
             <ul className="mb-10">
               <li className="py-1 text-base font-bold tracking-wide">
-                All Categories
+                <Link href={getCategoryPath('')}>
+                  <a>All Categories</a>
+                </Link>
               </li>
               {categories.map((cat) => (
                 <li key={cat.path} className="py-1 text-accents-8">
-                  <a href="#">{cat.name}</a>
+                  <Link href={getCategoryPath(cat.path)}>
+                    <a>{cat.name}</a>
+                  </Link>
                 </li>
               ))}
             </ul>
             <ul className="">
               <li className="py-1 text-base font-bold tracking-wide">
-                All Designers
+                <Link href={getDesignerPath('')}>
+                  <a>All Designers</a>
+                </Link>
               </li>
               {brands.flatMap(({ node }) => (
                 <li key={node.path} className="py-1 text-accents-8">
-                  <a href="#">{node.name}</a>
+                  <Link href={getDesignerPath(node.path)}>
+                    <a>{node.name}</a>
+                  </Link>
                 </li>
               ))}
             </ul>
diff --git a/pages/search.tsx b/pages/search.tsx
index 2c03ba1fb..db131c873 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -76,7 +76,7 @@ export default function Search({
               >
                 <Link
                   href={{
-                    pathname: getCategoryPath(getSlug(cat.path), brand),
+                    pathname: getCategoryPath(cat.path, brand),
                     query,
                   }}
                 >
@@ -100,7 +100,7 @@ export default function Search({
               >
                 <Link
                   href={{
-                    pathname: getDesignerPath(getSlug(node.path), category),
+                    pathname: getDesignerPath(node.path, category),
                     query,
                   }}
                 >
diff --git a/utils/search.tsx b/utils/search.tsx
index ae7a2ed7e..87b42db36 100644
--- a/utils/search.tsx
+++ b/utils/search.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import getSlug from './get-slug'
 
 export function useSearchMeta(asPath: string) {
   const [pathname, setPathname] = useState<string>('/search')
@@ -34,11 +35,16 @@ export const filterQuery = (query: any) =>
     return obj
   }, {})
 
-export const getCategoryPath = (slug: string, brand?: string) =>
-  `/search${brand ? `/designers/${brand}` : ''}${slug ? `/${slug}` : ''}`
+export const getCategoryPath = (path: string, brand?: string) => {
+  const category = getSlug(path)
 
-export const getDesignerPath = (slug: string, category?: string) => {
-  const designer = slug.replace(/^brands/, 'designers')
+  return `/search${brand ? `/designers/${brand}` : ''}${
+    category ? `/${category}` : ''
+  }`
+}
+
+export const getDesignerPath = (path: string, category?: string) => {
+  const designer = getSlug(path).replace(/^brands/, 'designers')
 
   return `/search${designer ? `/${designer}` : ''}${
     category ? `/${category}` : ''

From 5706e7afa25b73c478f215936be1707bb19e512d Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Sun, 25 Oct 2020 21:47:19 -0500
Subject: [PATCH 2/3] Search results fix

---
 pages/search.tsx | 56 +++++++++++++++++++++++++-----------------------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/pages/search.tsx b/pages/search.tsx
index db131c873..17b1fa425 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -111,33 +111,35 @@ export default function Search({
           </ul>
         </div>
         <div className="col-span-8">
-          <div className="mb-12 transition ease-in duration-75">
-            {data ? (
-              <>
-                <span
-                  className={cn('animated', {
-                    fadeIn: data.found,
-                    hidden: !data.found,
-                  })}
-                >
-                  Showing {data.products.length} results for "
-                  <strong>{q}</strong>"
-                </span>
-                <span
-                  className={cn('animated', {
-                    fadeIn: !data.found,
-                    hidden: data.found,
-                  })}
-                >
-                  There are no products that match "<strong>{q}</strong>"
-                </span>
-              </>
-            ) : (
-              <>
-                Searching for: "<strong>{q}</strong>"
-              </>
-            )}
-          </div>
+          {q && (
+            <div className="mb-12 transition ease-in duration-75">
+              {data ? (
+                <>
+                  <span
+                    className={cn('animated', {
+                      fadeIn: data.found,
+                      hidden: !data.found,
+                    })}
+                  >
+                    Showing {data.products.length} results for "
+                    <strong>{q}</strong>"
+                  </span>
+                  <span
+                    className={cn('animated', {
+                      fadeIn: !data.found,
+                      hidden: data.found,
+                    })}
+                  >
+                    There are no products that match "<strong>{q}</strong>"
+                  </span>
+                </>
+              ) : (
+                <>
+                  Searching for: "<strong>{q}</strong>"
+                </>
+              )}
+            </div>
+          )}
 
           {data ? (
             <Grid layout="normal">

From 7c677afd17e50de63bfaa83ce50fafe1fc5dd561 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Sun, 25 Oct 2020 22:33:32 -0500
Subject: [PATCH 3/3] UX improvements for the search page

---
 pages/search.tsx | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/pages/search.tsx b/pages/search.tsx
index 17b1fa425..3d18adb66 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -40,7 +40,10 @@ export default function Search({
   const router = useRouter()
   const { asPath } = router
   const { q, sort } = router.query
-  const query = filterQuery({ q, sort })
+  // `q` can be included but because categories and designers can't be searched
+  // in the same way of products, it's better to ignore the search input if one
+  // of those is selected
+  const query = filterQuery({ sort })
 
   const { pathname, category, brand } = useSearchMeta(asPath)
   const activeCategory = categories.find(
@@ -111,7 +114,7 @@ export default function Search({
           </ul>
         </div>
         <div className="col-span-8">
-          {q && (
+          {(q || activeCategory || activeBrand) && (
             <div className="mb-12 transition ease-in duration-75">
               {data ? (
                 <>
@@ -121,8 +124,12 @@ export default function Search({
                       hidden: !data.found,
                     })}
                   >
-                    Showing {data.products.length} results for "
-                    <strong>{q}</strong>"
+                    Showing {data.products.length} results{' '}
+                    {q && (
+                      <>
+                        for "<strong>{q}</strong>"
+                      </>
+                    )}
                   </span>
                   <span
                     className={cn('animated', {
@@ -130,13 +137,24 @@ export default function Search({
                       hidden: data.found,
                     })}
                   >
-                    There are no products that match "<strong>{q}</strong>"
+                    {q ? (
+                      <>
+                        There are no products that match "<strong>{q}</strong>"
+                      </>
+                    ) : (
+                      <>
+                        There are no products that match the selected category &
+                        designer
+                      </>
+                    )}
                   </span>
                 </>
-              ) : (
+              ) : q ? (
                 <>
                   Searching for: "<strong>{q}</strong>"
                 </>
+              ) : (
+                <>Searching...</>
               )}
             </div>
           )}