Refractor

components/auth/LoginView.tsx

@@ -38,7 +38,6 @@ const LoginView: FC<Props> = () => {
     } catch ({ errors }) {
       setMessage(errors[0].message)
       setLoading(false)
-      setDisabled(false)
     }
   }
 

components/cart/CartItem/CartItem.tsx

@@ -70,9 +70,6 @@ const CartItem = ({
     if (item.quantity !== Number(quantity)) {
       setQuantity(item.quantity)
     }
-    // TODO: currently not including quantity in deps is intended, but we should
-    // do this differently as it could break easily
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [item.quantity])
 
   return (

components/common/Footer/Footer.tsx

@@ -73,7 +73,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
           <div className="flex items-center text-primary text-sm">
             <span className="text-primary">Created by</span>
             <a
-              rel="noopener noreferrer"
+              rel="noopener"
               href="https://vercel.com"
               aria-label="Vercel.com Link"
               target="_blank"

components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css

@@ -1,23 +1,7 @@
 .root {
-  @apply py-12 flex flex-col w-full px-6;
+  @apply flex flex-col w-full;
 
   @screen md {
     @apply flex-row;
   }
-
-  & .asideWrapper {
-    @apply pr-3 w-full relative;
-
-    @screen md {
-      @apply w-48;
-    }
-  }
-
-  & .aside {
-    @apply flex flex-row w-full justify-around mb-12;
-
-    @screen md {
-      @apply mb-0 block sticky top-32;
-    }
-  }
 }

components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx

@@ -5,66 +5,40 @@ import { Grid } from '@components/ui'
 import { ProductCard } from '@components/product'
 import s from './HomeAllProductsGrid.module.css'
 import { getCategoryPath, getDesignerPath } from '@lib/search'
+import { Category } from '@commerce/types/site'
 
 interface Props {
-  categories?: any
+  categories?: Category[]
   brands?: any
   products?: Product[]
 }
 
 const HomeAllProductsGrid: FC<Props> = ({
-  categories,
+  categories = [],
   brands,
   products = [],
 }) => {
   return (
     <div className={s.root}>
-      <div className={s.asideWrapper}>
-        <div className={s.aside}>
-          <ul className="mb-10">
-            <li className="py-1 text-base font-bold tracking-wide">
-              <Link href={getCategoryPath('')}>
-                <a>All Categories</a>
-              </Link>
-            </li>
-            {categories.map((cat: any) => (
-              <li key={cat.path} className="py-1 text-accent-8 text-base">
-                <Link href={getCategoryPath(cat.path)}>
-                  <a>{cat.name}</a>
-                </Link>
-              </li>
-            ))}
-          </ul>
-          <ul className="">
-            <li className="py-1 text-base font-bold tracking-wide">
-              <Link href={getDesignerPath('')}>
-                <a>All Designers</a>
-              </Link>
-            </li>
-            {brands.flatMap(({ node }: any) => (
-              <li key={node.path} className="py-1 text-accent-8 text-base">
-                <Link href={getDesignerPath(node.path)}>
-                  <a>{node.name}</a>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
       <div className="flex-1">
-        <Grid layout="normal">
-          {products.map((product) => (
-            <ProductCard
-              key={product.path}
-              product={product}
-              variant="simple"
-              imgProps={{
-                width: 480,
-                height: 480,
-              }}
-            />
-          ))}
-        </Grid>
+        {categories.map((category) => (
+          <div>
+            <div className="text-primary font-bold">{category.name}</div>
+            <div className="flex">
+              {products.slice(0, 4).map((product) => (
+                <ProductCard
+                  key={product.path}
+                  product={product}
+                  variant="simple"
+                  imgProps={{
+                    width: 300,
+                    height: 300,
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
       </div>
     </div>
   )

components/common/Layout/Layout.tsx

@@ -24,7 +24,7 @@ const Loading = () => (
 )
 
 const dynamicProps = {
-  loading: Loading,
+  loading: () => <Loading />,
 }
 
 const SignUpView = dynamic(

components/common/Searchbar/Searchbar.tsx

@@ -1,4 +1,4 @@
-import { FC, memo, useEffect } from 'react'
+import { FC, InputHTMLAttributes, useEffect, useMemo } from 'react'
 import cn from 'classnames'
 import s from './Searchbar.module.css'
 import { useRouter } from 'next/router'
@@ -13,7 +13,7 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
 
   useEffect(() => {
     router.prefetch('/search')
-  }, [router])
+  }, [])
 
   const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
     e.preventDefault()
@@ -32,29 +32,32 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
     }
   }
 
-  return (
-    <div className={cn(s.root, className)}>
-      <label className="hidden" htmlFor={id}>
-        Search
-      </label>
-      <input
-        id={id}
-        className={s.input}
-        placeholder="Search for products..."
-        defaultValue={router.query.q}
-        onKeyUp={handleKeyUp}
-      />
-      <div className={s.iconContainer}>
-        <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-          />
-        </svg>
+  return useMemo(
+    () => (
+      <div className={cn(s.root, className)}>
+        <label className="hidden" htmlFor={id}>
+          Search
+        </label>
+        <input
+          id={id}
+          className={s.input}
+          placeholder="Search for products..."
+          defaultValue={router.query.q}
+          onKeyUp={handleKeyUp}
+        />
+        <div className={s.iconContainer}>
+          <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+            />
+          </svg>
+        </div>
       </div>
-    </div>
+    ),
+    []
   )
 }
 
-export default memo(Searchbar)
+export default Searchbar

components/product/ProductCard/ProductCard.tsx

@@ -7,7 +7,6 @@ import Image, { ImageProps } from 'next/image'
 import WishlistButton from '@components/wishlist/WishlistButton'
 import usePrice from '@framework/product/use-price'
 import ProductTag from '../ProductTag'
-
 interface Props {
   className?: string
   product: Product
@@ -24,6 +23,7 @@ const ProductCard: FC<Props> = ({
   className,
   noNameTag = false,
   variant = 'default',
+  ...props
 }) => {
   const { price } = usePrice({
     amount: product.price.value,
@@ -38,7 +38,7 @@ const ProductCard: FC<Props> = ({
   )
 
   return (
-    <Link href={`/product/${product.slug}`}>
+    <Link href={`/product/${product.slug}`} {...props}>
       <a className={rootClassName}>
         {variant === 'slim' && (
           <>

components/product/ProductOptions/ProductOptions.tsx

@@ -1,52 +1,50 @@
-import { memo } from 'react'
 import { Swatch } from '@components/product'
 import type { ProductOption } from '@commerce/types/product'
 import { SelectedOptions } from '../helpers'
-
+import React from 'react'
 interface ProductOptionsProps {
   options: ProductOption[]
   selectedOptions: SelectedOptions
   setSelectedOptions: React.Dispatch<React.SetStateAction<SelectedOptions>>
 }
 
-const ProductOptions: React.FC<ProductOptionsProps> = ({
-  options,
-  selectedOptions,
-  setSelectedOptions,
-}) => {
-  return (
-    <div>
-      {options.map((opt) => (
-        <div className="pb-4" key={opt.displayName}>
-          <h2 className="uppercase font-medium text-sm tracking-wide">
-            {opt.displayName}
-          </h2>
-          <div className="flex flex-row py-4">
-            {opt.values.map((v, i: number) => {
-              const active = selectedOptions[opt.displayName.toLowerCase()]
-              return (
-                <Swatch
-                  key={`${opt.id}-${i}`}
-                  active={v.label.toLowerCase() === active}
-                  variant={opt.displayName}
-                  color={v.hexColors ? v.hexColors[0] : ''}
-                  label={v.label}
-                  onClick={() => {
-                    setSelectedOptions((selectedOptions) => {
-                      return {
-                        ...selectedOptions,
-                        [opt.displayName.toLowerCase()]: v.label.toLowerCase(),
-                      }
-                    })
-                  }}
-                />
-              )
-            })}
+const ProductOptions: React.FC<ProductOptionsProps> = React.memo(
+  ({ options, selectedOptions, setSelectedOptions }) => {
+    return (
+      <div>
+        {options.map((opt) => (
+          <div className="pb-4" key={opt.displayName}>
+            <h2 className="uppercase font-medium text-sm tracking-wide">
+              {opt.displayName}
+            </h2>
+            <div className="flex flex-row py-4">
+              {opt.values.map((v, i: number) => {
+                const active = selectedOptions[opt.displayName.toLowerCase()]
+                return (
+                  <Swatch
+                    key={`${opt.id}-${i}`}
+                    active={v.label.toLowerCase() === active}
+                    variant={opt.displayName}
+                    color={v.hexColors ? v.hexColors[0] : ''}
+                    label={v.label}
+                    onClick={() => {
+                      setSelectedOptions((selectedOptions) => {
+                        return {
+                          ...selectedOptions,
+                          [opt.displayName.toLowerCase()]:
+                            v.label.toLowerCase(),
+                        }
+                      })
+                    }}
+                  />
+                )
+              })}
+            </div>
           </div>
-        </div>
-      ))}
-    </div>
-  )
-}
+        ))}
+      </div>
+    )
+  }
+)
 
-export default memo(ProductOptions)
+export default ProductOptions

components/product/ProductSidebar/ProductSidebar.tsx

@@ -23,7 +23,7 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
 
   useEffect(() => {
     selectDefaultOptionFromProduct(product, setSelectedOptions)
-  }, [product])
+  }, [])
 
   const variant = getProductVariant(product, selectedOptions)
   const addToCart = async () => {

components/product/ProductSlider/ProductSlider.tsx

@@ -66,13 +66,17 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
         event.preventDefault()
     }
 
-    const slider = sliderContainerRef.current!
-
-    slider.addEventListener('touchstart', preventNavigation)
+    sliderContainerRef.current!.addEventListener(
+      'touchstart',
+      preventNavigation
+    )
 
     return () => {
-      if (slider) {
-        slider.removeEventListener('touchstart', preventNavigation)
+      if (sliderContainerRef.current) {
+        sliderContainerRef.current!.removeEventListener(
+          'touchstart',
+          preventNavigation
+        )
       }
     }
   }, [])

components/product/ProductSliderControl/ProductSliderControl.tsx

@@ -1,30 +1,31 @@
-import { FC, MouseEventHandler, memo } from 'react'
 import cn from 'classnames'
+import React from 'react'
 import s from './ProductSliderControl.module.css'
 import { ArrowLeft, ArrowRight } from '@components/icons'
 
 interface ProductSliderControl {
-  onPrev: MouseEventHandler<HTMLButtonElement>
-  onNext: MouseEventHandler<HTMLButtonElement>
+  onPrev: React.MouseEventHandler<HTMLButtonElement>
+  onNext: React.MouseEventHandler<HTMLButtonElement>
 }
 
-const ProductSliderControl: FC<ProductSliderControl> = ({ onPrev, onNext }) => (
-  <div className={s.control}>
-    <button
-      className={cn(s.leftControl)}
-      onClick={onPrev}
-      aria-label="Previous Product Image"
-    >
-      <ArrowLeft />
-    </button>
-    <button
-      className={cn(s.rightControl)}
-      onClick={onNext}
-      aria-label="Next Product Image"
-    >
-      <ArrowRight />
-    </button>
-  </div>
+const ProductSliderControl: React.FC<ProductSliderControl> = React.memo(
+  ({ onPrev, onNext }) => (
+    <div className={s.control}>
+      <button
+        className={cn(s.leftControl)}
+        onClick={onPrev}
+        aria-label="Previous Product Image"
+      >
+        <ArrowLeft />
+      </button>
+      <button
+        className={cn(s.rightControl)}
+        onClick={onNext}
+        aria-label="Next Product Image"
+      >
+        <ArrowRight />
+      </button>
+    </div>
+  )
 )
-
-export default memo(ProductSliderControl)
+export default ProductSliderControl

components/product/ProductView/ProductView.tsx

@@ -5,11 +5,11 @@ import s from './ProductView.module.css'
 import { FC } from 'react'
 import type { Product } from '@commerce/types/product'
 import usePrice from '@framework/product/use-price'
-import { WishlistButton } from '@components/wishlist'
 import { ProductSlider, ProductCard } from '@components/product'
 import { Container, Text } from '@components/ui'
 import ProductSidebar from '../ProductSidebar'
 import ProductTag from '../ProductTag'
+import { WishlistButton } from '@components/wishlist'
 interface ProductViewProps {
   product: Product
   relatedProducts: Product[]

components/search.tsx

@@ -1,439 +0,0 @@
-import cn from 'classnames'
-import type { SearchPropsType } from '@lib/search-props'
-import Link from 'next/link'
-import { useState } from 'react'
-import { useRouter } from 'next/router'
-
-import { Layout } from '@components/common'
-import { ProductCard } from '@components/product'
-import type { Product } from '@commerce/types/product'
-import { Container, Skeleton } from '@components/ui'
-
-import useSearch from '@framework/product/use-search'
-
-import getSlug from '@lib/get-slug'
-import rangeMap from '@lib/range-map'
-
-const SORT = {
-  'trending-desc': 'Trending',
-  'latest-desc': 'Latest arrivals',
-  'price-asc': 'Price: Low to high',
-  'price-desc': 'Price: High to low',
-}
-
-import {
-  filterQuery,
-  getCategoryPath,
-  getDesignerPath,
-  useSearchMeta,
-} from '@lib/search'
-
-export default function Search({ categories, brands }: SearchPropsType) {
-  const [activeFilter, setActiveFilter] = useState('')
-  const [toggleFilter, setToggleFilter] = useState(false)
-
-  const router = useRouter()
-  const { asPath, locale } = router
-  const { q, sort } = router.query
-  // `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((cat: any) => cat.slug === category)
-  const activeBrand = brands.find(
-    (b: any) => getSlug(b.node.path) === `brands/${brand}`
-  )?.node
-
-  const { data } = useSearch({
-    search: typeof q === 'string' ? q : '',
-    categoryId: activeCategory?.id,
-    brandId: (activeBrand as any)?.entityId,
-    sort: typeof sort === 'string' ? sort : '',
-    locale,
-  })
-
-  const handleClick = (event: any, filter: string) => {
-    if (filter !== activeFilter) {
-      setToggleFilter(true)
-    } else {
-      setToggleFilter(!toggleFilter)
-    }
-    setActiveFilter(filter)
-  }
-
-  return (
-    <Container>
-      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mt-3 mb-20">
-        <div className="col-span-8 lg:col-span-2 order-1 lg:order-none">
-          {/* Categories */}
-          <div className="relative inline-block w-full">
-            <div className="lg:hidden">
-              <span className="rounded-md shadow-sm">
-                <button
-                  type="button"
-                  onClick={(e) => handleClick(e, 'categories')}
-                  className="flex justify-between w-full rounded-sm border border-accent-3 px-4 py-3 bg-accent-0 text-sm leading-5 font-medium text-accent-4 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8 transition ease-in-out duration-150"
-                  id="options-menu"
-                  aria-haspopup="true"
-                  aria-expanded="true"
-                >
-                  {activeCategory?.name
-                    ? `Category: ${activeCategory?.name}`
-                    : 'All Categories'}
-                  <svg
-                    className="-mr-1 ml-2 h-5 w-5"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-            <div
-              className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
-                activeFilter !== 'categories' || toggleFilter !== true
-                  ? 'hidden'
-                  : ''
-              }`}
-            >
-              <div className="rounded-sm bg-accent-0 shadow-xs lg:bg-none lg:shadow-none">
-                <div
-                  role="menu"
-                  aria-orientation="vertical"
-                  aria-labelledby="options-menu"
-                >
-                  <ul>
-                    <li
-                      className={cn(
-                        'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
-                        {
-                          underline: !activeCategory?.name,
-                        }
-                      )}
-                    >
-                      <Link
-                        href={{ pathname: getCategoryPath('', brand), query }}
-                      >
-                        <a
-                          onClick={(e) => handleClick(e, 'categories')}
-                          className={
-                            'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-                          }
-                        >
-                          All Categories
-                        </a>
-                      </Link>
-                    </li>
-                    {categories.map((cat: any) => (
-                      <li
-                        key={cat.path}
-                        className={cn(
-                          'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
-                          {
-                            underline: activeCategory?.id === cat.id,
-                          }
-                        )}
-                      >
-                        <Link
-                          href={{
-                            pathname: getCategoryPath(cat.path, brand),
-                            query,
-                          }}
-                        >
-                          <a
-                            onClick={(e) => handleClick(e, 'categories')}
-                            className={
-                              'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-                            }
-                          >
-                            {cat.name}
-                          </a>
-                        </Link>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Designs */}
-          <div className="relative inline-block w-full">
-            <div className="lg:hidden mt-3">
-              <span className="rounded-md shadow-sm">
-                <button
-                  type="button"
-                  onClick={(e) => handleClick(e, 'brands')}
-                  className="flex justify-between w-full rounded-sm border border-accent-3 px-4 py-3 bg-accent-0 text-sm leading-5 font-medium text-accent-8 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8 transition ease-in-out duration-150"
-                  id="options-menu"
-                  aria-haspopup="true"
-                  aria-expanded="true"
-                >
-                  {activeBrand?.name
-                    ? `Design: ${activeBrand?.name}`
-                    : 'All Designs'}
-                  <svg
-                    className="-mr-1 ml-2 h-5 w-5"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-            <div
-              className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
-                activeFilter !== 'brands' || toggleFilter !== true
-                  ? 'hidden'
-                  : ''
-              }`}
-            >
-              <div className="rounded-sm bg-accent-0 shadow-xs lg:bg-none lg:shadow-none">
-                <div
-                  role="menu"
-                  aria-orientation="vertical"
-                  aria-labelledby="options-menu"
-                >
-                  <ul>
-                    <li
-                      className={cn(
-                        'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
-                        {
-                          underline: !activeBrand?.name,
-                        }
-                      )}
-                    >
-                      <Link
-                        href={{
-                          pathname: getDesignerPath('', category),
-                          query,
-                        }}
-                      >
-                        <a
-                          onClick={(e) => handleClick(e, 'brands')}
-                          className={
-                            'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-                          }
-                        >
-                          All Designers
-                        </a>
-                      </Link>
-                    </li>
-                    {brands.flatMap(({ node }: { node: any }) => (
-                      <li
-                        key={node.path}
-                        className={cn(
-                          'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
-                          {
-                            // @ts-ignore Shopify - Fix this types
-                            underline: activeBrand?.entityId === node.entityId,
-                          }
-                        )}
-                      >
-                        <Link
-                          href={{
-                            pathname: getDesignerPath(node.path, category),
-                            query,
-                          }}
-                        >
-                          <a
-                            onClick={(e) => handleClick(e, 'brands')}
-                            className={
-                              'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-                            }
-                          >
-                            {node.name}
-                          </a>
-                        </Link>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        {/* Products */}
-        <div className="col-span-8 order-3 lg:order-none">
-          {(q || activeCategory || activeBrand) && (
-            <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{' '}
-                    {q && (
-                      <>
-                        for "<strong>{q}</strong>"
-                      </>
-                    )}
-                  </span>
-                  <span
-                    className={cn('animated', {
-                      fadeIn: !data.found,
-                      hidden: data.found,
-                    })}
-                  >
-                    {q ? (
-                      <>
-                        There are no products that match "<strong>{q}</strong>"
-                      </>
-                    ) : (
-                      <>
-                        There are no products that match the selected category.
-                      </>
-                    )}
-                  </span>
-                </>
-              ) : q ? (
-                <>
-                  Searching for: "<strong>{q}</strong>"
-                </>
-              ) : (
-                <>Searching...</>
-              )}
-            </div>
-          )}
-          {data ? (
-            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-              {data.products.map((product: Product) => (
-                <ProductCard
-                  variant="simple"
-                  key={product.path}
-                  className="animated fadeIn"
-                  product={product}
-                  imgProps={{
-                    width: 480,
-                    height: 480,
-                  }}
-                />
-              ))}
-            </div>
-          ) : (
-            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-              {rangeMap(12, (i) => (
-                <Skeleton key={i}>
-                  <div className="w-60 h-60" />
-                </Skeleton>
-              ))}
-            </div>
-          )}{' '}
-        </div>
-
-        {/* Sort */}
-        <div className="col-span-8 lg:col-span-2 order-2 lg:order-none">
-          <div className="relative inline-block w-full">
-            <div className="lg:hidden">
-              <span className="rounded-md shadow-sm">
-                <button
-                  type="button"
-                  onClick={(e) => handleClick(e, 'sort')}
-                  className="flex justify-between w-full rounded-sm border border-accent-3 px-4 py-3 bg-accent-0 text-sm leading-5 font-medium text-accent-4 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8 transition ease-in-out duration-150"
-                  id="options-menu"
-                  aria-haspopup="true"
-                  aria-expanded="true"
-                >
-                  {sort ? SORT[sort as keyof typeof SORT] : 'Relevance'}
-                  <svg
-                    className="-mr-1 ml-2 h-5 w-5"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-            <div
-              className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
-                activeFilter !== 'sort' || toggleFilter !== true ? 'hidden' : ''
-              }`}
-            >
-              <div className="rounded-sm bg-accent-0 shadow-xs lg:bg-none lg:shadow-none">
-                <div
-                  role="menu"
-                  aria-orientation="vertical"
-                  aria-labelledby="options-menu"
-                >
-                  <ul>
-                    <li
-                      className={cn(
-                        'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
-                        {
-                          underline: !sort,
-                        }
-                      )}
-                    >
-                      <Link href={{ pathname, query: filterQuery({ q }) }}>
-                        <a
-                          onClick={(e) => handleClick(e, 'sort')}
-                          className={
-                            'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-                          }
-                        >
-                          Relevance
-                        </a>
-                      </Link>
-                    </li>
-                    {Object.entries(SORT).map(([key, text]) => (
-                      <li
-                        key={key}
-                        className={cn(
-                          'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
-                          {
-                            underline: sort === key,
-                          }
-                        )}
-                      >
-                        <Link
-                          href={{
-                            pathname,
-                            query: filterQuery({ q, sort: key }),
-                          }}
-                        >
-                          <a
-                            onClick={(e) => handleClick(e, 'sort')}
-                            className={
-                              'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-                            }
-                          >
-                            {text}
-                          </a>
-                        </Link>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Container>
-  )
-}
-
-Search.Layout = Layout

components/ui/Modal/Modal.tsx

@@ -27,15 +27,13 @@ const Modal: FC<ModalProps> = ({ children, onClose }) => {
   )
 
   useEffect(() => {
-    const modal = ref.current
-
-    if (modal) {
-      disableBodyScroll(modal, { reserveScrollBarGap: true })
+    if (ref.current) {
+      disableBodyScroll(ref.current, { reserveScrollBarGap: true })
       window.addEventListener('keydown', handleKey)
     }
     return () => {
-      if (modal) {
-        enableBodyScroll(modal)
+      if (ref && ref.current) {
+        enableBodyScroll(ref.current)
       }
       clearAllBodyScrollLocks()
       window.removeEventListener('keydown', handleKey)

components/ui/Rating/Rating.tsx

@@ -1,4 +1,4 @@
-import { FC, memo } from 'react'
+import React, { FC } from 'react'
 import rangeMap from '@lib/range-map'
 import { Star } from '@components/icons'
 import cn from 'classnames'
@@ -7,19 +7,21 @@ export interface RatingProps {
   value: number
 }
 
-const Quantity: FC<RatingProps> = ({ value = 5 }) => (
-  <div className="flex flex-row py-6 text-accent-9">
-    {rangeMap(5, (i) => (
-      <span
-        key={`star_${i}`}
-        className={cn('inline-block ml-1 ', {
-          'text-accent-5': i >= Math.floor(value),
-        })}
-      >
-        <Star />
-      </span>
-    ))}
-  </div>
-)
+const Quantity: React.FC<RatingProps> = React.memo(({ value = 5 }) => {
+  return (
+    <div className="flex flex-row py-6 text-accent-9">
+      {rangeMap(5, (i) => (
+        <span
+          key={`star_${i}`}
+          className={cn('inline-block ml-1 ', {
+            'text-accent-5': i >= Math.floor(value),
+          })}
+        >
+          <Star />
+        </span>
+      ))}
+    </div>
+  )
+})
 
-export default memo(Quantity)
+export default Quantity

components/ui/Sidebar/Sidebar.tsx

@@ -16,14 +16,13 @@ const Sidebar: FC<SidebarProps> = ({ children, onClose }) => {
   const ref = useRef() as React.MutableRefObject<HTMLDivElement>
 
   useEffect(() => {
-    const sidebar = ref.current
-
-    if (sidebar) {
-      disableBodyScroll(sidebar, { reserveScrollBarGap: true })
+    if (ref.current) {
+      disableBodyScroll(ref.current, { reserveScrollBarGap: true })
     }
-
     return () => {
-      if (sidebar) enableBodyScroll(sidebar)
+      if (ref && ref.current) {
+        enableBodyScroll(ref.current)
+      }
       clearAllBodyScrollLocks()
     }
   }, [])

components/ui/context.tsx

@@ -15,7 +15,7 @@ const initialState = {
   displayDropdown: false,
   displayModal: false,
   modalView: 'LOGIN_VIEW',
-  sidebarView: 'CART_VIEW',
+  sidebarView: 'CHECKOUT_VIEW',
   userAvatar: '',
 }
 

components/wishlist/WishlistCard/WishlistCard.module.css

@@ -1,21 +0,0 @@
-.root {
-  @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accent-2 transition duration-100 ease-in-out;
-
-  &:nth-child(3n + 1) {
-    & .productBg {
-      @apply bg-violet;
-    }
-  }
-
-  &:nth-child(3n + 2) {
-    & .productBg {
-      @apply bg-pink;
-    }
-  }
-
-  &:nth-child(3n + 3) {
-    & .productBg {
-      @apply bg-blue;
-    }
-  }
-}

components/wishlist/WishlistCard/WishlistCard.tsx

@@ -1,106 +0,0 @@
-import { FC, useState } from 'react'
-import cn from 'classnames'
-import Link from 'next/link'
-import Image from 'next/image'
-import s from './WishlistCard.module.css'
-import { Trash } from '@components/icons'
-import { Button, Text } from '@components/ui'
-
-import { useUI } from '@components/ui/context'
-import type { Product } from '@commerce/types/product'
-import usePrice from '@framework/product/use-price'
-import useAddItem from '@framework/cart/use-add-item'
-import useRemoveItem from '@framework/wishlist/use-remove-item'
-
-interface Props {
-  product: Product
-}
-
-const placeholderImg = '/product-img-placeholder.svg'
-
-const WishlistCard: FC<Props> = ({ product }) => {
-  const { price } = usePrice({
-    amount: product.price?.value,
-    baseAmount: product.price?.retailPrice,
-    currencyCode: product.price?.currencyCode!,
-  })
-  // @ts-ignore Wishlist is not always enabled
-  const removeItem = useRemoveItem({ wishlist: { includeProducts: true } })
-  const [loading, setLoading] = useState(false)
-  const [removing, setRemoving] = useState(false)
-
-  // TODO: fix this missing argument issue
-  /* @ts-ignore */
-  const addItem = useAddItem()
-  const { openSidebar } = useUI()
-
-  const handleRemove = async () => {
-    setRemoving(true)
-
-    try {
-      // If this action succeeds then there's no need to do `setRemoving(true)`
-      // because the component will be removed from the view
-      await removeItem({ id: product.id! })
-    } catch (error) {
-      setRemoving(false)
-    }
-  }
-  const addToCart = async () => {
-    setLoading(true)
-    try {
-      await addItem({
-        productId: String(product.id),
-        variantId: String(product.variants[0].id),
-      })
-      openSidebar()
-      setLoading(false)
-    } catch (err) {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <div className={cn(s.root, { 'opacity-75 pointer-events-none': removing })}>
-      <div className={`col-span-3 ${s.productBg}`}>
-        <Image
-          src={product.images[0]?.url || placeholderImg}
-          width={400}
-          height={400}
-          alt={product.images[0]?.alt || 'Product Image'}
-        />
-      </div>
-
-      <div className="col-span-7">
-        <h3 className="text-2xl mb-2">
-          <Link href={`/product${product.path}`}>
-            <a>{product.name}</a>
-          </Link>
-        </h3>
-        <div className="mb-4">
-          <Text html={product.description} />
-        </div>
-        <Button
-          aria-label="Add to Cart"
-          type="button"
-          className={
-            'py-1 px-3 border border-secondary rounded-md shadow-sm hover:bg-primary-hover'
-          }
-          onClick={addToCart}
-          loading={loading}
-        >
-          Add to Cart
-        </Button>
-      </div>
-      <div className="col-span-2 flex flex-col justify-between">
-        <div className="flex justify-end font-bold">{price}</div>
-        <div className="flex justify-end">
-          <button onClick={handleRemove}>
-            <Trash />
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default WishlistCard

components/wishlist/WishlistCard/index.ts

@@ -1 +0,0 @@
-export { default } from './WishlistCard'

components/wishlist/index.ts

@@ -1,2 +1 @@
-export { default as WishlistCard } from './WishlistCard'
 export { default as WishlistButton } from './WishlistButton'