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] 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>
           )}