Merge branch 'master' of github.com:okbel/e-comm-example

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>

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(
@@ -76,7 +79,7 @@ export default function Search({
               >
                 <Link
                   href={{
-                    pathname: getCategoryPath(getSlug(cat.path), brand),
+                    pathname: getCategoryPath(cat.path, brand),
                     query,
                   }}
                 >
@@ -100,7 +103,7 @@ export default function Search({
               >
                 <Link
                   href={{
-                    pathname: getDesignerPath(getSlug(node.path), category),
+                    pathname: getDesignerPath(node.path, category),
                     query,
                   }}
                 >
@@ -111,33 +114,50 @@ export default function Search({
           </ul>
         </div>
         <div className="col-span-8">
-          <div className="mb-12 transition ease-in duration-75">
+          {(q || activeCategory || activeBrand) && (
-            {data ? (
+            <div className="mb-12 transition ease-in duration-75">
-              <>
+              {data ? (
-                <span
+                <>
-                  className={cn('animated', {
+                  <span
-                    fadeIn: data.found,
+                    className={cn('animated', {
-                    hidden: !data.found,
+                      fadeIn: data.found,
-                  })}
+                      hidden: !data.found,
-                >
+                    })}
-                  Showing {data.products.length} results for "
+                  >
-                  <strong>{q}</strong>"
+                    Showing {data.products.length} results{' '}
-                </span>
+                    {q && (
-                <span
+                      <>
-                  className={cn('animated', {
+                        for "<strong>{q}</strong>"
-                    fadeIn: !data.found,
+                      </>
-                    hidden: data.found,
+                    )}
-                  })}
+                  </span>
-                >
+                  <span
-                  There are no products that match "<strong>{q}</strong>"
+                    className={cn('animated', {
-                </span>
+                      fadeIn: !data.found,
-              </>
+                      hidden: data.found,
-            ) : (
+                    })}
-              <>
+                  >
-                Searching for: "<strong>{q}</strong>"
+                    {q ? (
-              </>
+                      <>
-            )}
+                        There are no products that match "<strong>{q}</strong>"
-          </div>
+                      </>
+                    ) : (
+                      <>
+                        There are no products that match the selected category &
+                        designer
+                      </>
+                    )}
+                  </span>
+                </>
+              ) : q ? (
+                <>
+                  Searching for: "<strong>{q}</strong>"
+                </>
+              ) : (
+                <>Searching...</>
+              )}
+            </div>
+          )}
 
           {data ? (
             <Grid layout="normal">

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) =>
+export const getCategoryPath = (path: string, brand?: string) => {
-  `/search${brand ? `/designers/${brand}` : ''}${slug ? `/${slug}` : ''}`
+  const category = getSlug(path)
 
-export const getDesignerPath = (slug: string, category?: string) => {
+  return `/search${brand ? `/designers/${brand}` : ''}${
-  const designer = slug.replace(/^brands/, 'designers')
+    category ? `/${category}` : ''
+  }`
+}
+
+export const getDesignerPath = (path: string, category?: string) => {
+  const designer = getSlug(path).replace(/^brands/, 'designers')
 
   return `/search${designer ? `/${designer}` : ''}${
     category ? `/${category}` : ''