Merge pull request vercel#13 from DSCO-Co/callamsBranch

Callams branch

packages/bigcommerce/src/lib/normalize.ts

@@ -121,9 +121,9 @@ function normalizeLineItem(item: any): LineItem {
 }
 
 export function normalizeCategory(category: BCCategory): Category {
-  console.log('------------------ DEBUG ------------------');
-  console.log(category);
-  console.log('------------------ DEBUG ------------------');
+  // console.log('------------------ DEBUG ------------------');
+  // console.log(category);
+  // console.log('------------------ DEBUG ------------------');
   return {
     id: `${category.entityId}`,
     name: category.name,

site/components/common/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef, useEffect } from 'react'
+import { FC, useRef } from 'react'
 import { useUserAvatar } from '@lib/hooks/useUserAvatar'
 
 interface Props {
@@ -13,12 +13,17 @@ const Avatar: FC<Props> = ({}) => {
   return (
     <div
       ref={ref}
-      style={{ backgroundImage: userAvatar }}
       className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition-colors ease-linear"
     >
+      <img
+        src={userAvatar}
+        alt="User Avatar"
+        className="rounded-full h-full w-full object-cover"
+      />
       {/* Add an image - We're generating a gradient as placeholder  <img></img> */}
     </div>
   )
 }
 
 export default Avatar
+

site/components/common/Navbar/Navbar.module.css

@@ -26,7 +26,7 @@
 }
 
 .logo {
-  @apply cursor-pointer rounded-full border transform duration-100 ease-in-out;
+  @apply cursor-pointer rounded-full transform duration-100 ease-in-out;
 
   &:hover {
     @apply shadow-md;

site/components/product/ProductView/ProductView.tsx

@@ -62,7 +62,7 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
                   noNameTag
                   product={p}
                   key={p.path}
-                  variant="simple"
+                  variant="simple-stylized"
                   className="animated fadeIn"
                   imgProps={{
                     alt: p.name,

site/components/search.tsx

@@ -1,5 +1,8 @@
 import cn from 'clsx'
-import type { SearchPropsType } from '@lib/search-props'
+import type { SearchPropsType } from '@lib/search-props' 
+import commerce from '@lib/api/commerce'
+import ErrorMessage from './ui/ErrorMessage'
+import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 
 import Link from 'next/link'
 import { useState } from 'react'
@@ -34,10 +37,10 @@ import {
   getDesignerPath,
   useSearchMeta,
 } from '@lib/search'
-import ErrorMessage from './ui/ErrorMessage'
-import commerce from '@lib/api/commerce'
 
-export default function Search({ categories, brands }: SearchPropsType) {
+
+
+export default function Search({categories, brands, products }: SearchPropsType) {
   const [currentPage, setCurrentPage] = useState(1)
   const itemsPerPage = 9
 
@@ -61,11 +64,13 @@ export default function Search({ categories, brands }: SearchPropsType) {
   // 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: Brand) => b.slug === brand)
 
+
   const { data, error } = useSearch({
     search: typeof q === 'string' ? q : '',
     categoryId: activeCategory?.id,
@@ -80,6 +85,11 @@ export default function Search({ categories, brands }: SearchPropsType) {
     return <ErrorMessage error={error} />
   }
 
+
+  console.log("all products", products)
+  console.log("all categories", categories)
+
+
   const handleClick = (event: any, filter: string) => {
     if (filter !== activeFilter) {
       setToggleFilter(true)
@@ -304,6 +314,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
         <Products
           categories={categories}
           brands={brands}
+          products={products}
           currentPage={currentPage}
           itemsPerPage={itemsPerPage}
         />
@@ -407,7 +418,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
         </div>
       </div>
       <Pagination
-        totalItems={data ? data.products.length : 0}
+        totalItems={products ? products.length : 0}
         itemsPerPage={itemsPerPage}
         currentPage={currentPage}
         onPageChange={handlePageChange}

site/components/search/Products/products.tsx

@@ -24,11 +24,13 @@ import ErrorMessage from '../../ui/ErrorMessage'
 interface ProductsProps extends ProductsPropsType {
   currentPage: number
   itemsPerPage: number
+  products: any 
 }
 
 export default function Products({
   categories,
   brands,
+  products, 
   currentPage,
   itemsPerPage,
 }: ProductsProps) {
@@ -60,7 +62,7 @@ export default function Products({
     return <ErrorMessage error={error} />
   }
 
-  const paginatedProducts = data?.products.slice(
+  const paginatedProducts = products.slice(
     (currentPage - 1) * itemsPerPage,
     currentPage * itemsPerPage
   )

site/components/ui/Pagination/Pagination.tsx

@@ -47,7 +47,7 @@ function Pagination({
   }
 
   return (
-    <nav className="flex items-center justify-between border-t border-gray-200 px-4 sm:px-0 mb-8">
+    <nav className="flex items-center justify-between border-t border-gray-200 px-4 sm:px-0 mb-8 mx-auto max-w-4xl">
       <div className="-mt-px flex">
         <a
           href="#"

site/components/wishlist/WishlistButton/WishlistButton.module.css

@@ -16,14 +16,17 @@
   transition-timing-function: ease;
   transition-property: transform, fill;
   color: currentColor;
+
 }
 
 .icon.loading {
   fill: var(--pink-light);
+  color: transparent; /* Add this line */
 }
 
 .icon.inWishlist {
   fill: var(--pink);
+  color: transparent; /* Add this line */
 }
 
 @screen lg {

site/lib/hooks/useUserAvatar.ts

@@ -6,14 +6,15 @@ export const useUserAvatar = (name = 'userAvatar') => {
   const { userAvatar, setUserAvatar } = useUI()
 
   useEffect(() => {
-    if (!userAvatar && localStorage.getItem(name)) {
+    if (!userAvatar && localStorage.getItem(name) && localStorage.getItem(name)?.endsWith('.png')) {
       // Get bg from localStorage and push it to the context.
       setUserAvatar(localStorage.getItem(name))
     }
-    if (!localStorage.getItem(name)) {
-      // bg not set locally, generating one, setting localStorage and context to persist.
-      const bg = getRandomPairOfColors()
-      const value = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`
+    // In useUserAvatar hookc
+    if (localStorage.getItem(name)) {
+      // Avatar not set locally, using the image and setting localStorage and context to persist.
+      const randomPuppy = Math.floor(Math.random() * 5) + 1 // Generates a random number between 1 and 5
+      const value = `/puppies/puppy_icon_${randomPuppy}.png`
       localStorage.setItem(name, value)
       setUserAvatar(value)
     }

site/lib/search-props.tsx

@@ -8,13 +8,22 @@ export async function getSearchStaticProps({
   locales,
 }: GetStaticPropsContext) {
   const config = { locale, locales }
+  const productsPromise = commerce.getAllProducts({
+    variables: { first: 50},
+    config,
+    preview,
+    // Saleor provider only
+    ...({ featured: true } as any),
+  })
   const pagesPromise = commerce.getAllPages({ config, preview })
   const siteInfoPromise = commerce.getSiteInfo({ config, preview })
   const { pages } = await pagesPromise
+  const { products } = await productsPromise
   const { categories, brands } = await siteInfoPromise
   return {
     props: {
       pages,
+      products,
       categories,
       brands,
     },