Refractor

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