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

Callams branch

site/components/common/Navbar/Navbar.tsx

@@ -133,7 +133,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
               >
                 <Link
                   href={l.href}
-                  className={`${s.link} ${activeMenu === l.href ? s.linkActive : ''} ${l.href === '/collections/clearance' ? 'bg-rose-500 px-5 text-white !important font-bold' : ''}`}
+                  className={`${s.link} ${activeMenu === l.href ? s.linkActive : ''} ${l.href === '/collections/clearance' ? 'bg-rose-400 px-5 text-white !important font-bold' : ''}`}
                 >
                   {l.label}
                 </Link>

site/components/product/ProductCard/ProductCard.tsx

@@ -38,7 +38,7 @@ const ProductCard: FC<ProductCardProps> = ({
       className={`${rootClassName} rounded-xl`}
       aria-label={product.name}
       onClick={() => {
-        // trackProductViewed(product);
+        trackProductViewed(product)
       }}
     >
       {variant === 'slim' && <SlimCard product={product} imgProps={imgProps} />}

site/components/search.tsx

@@ -1,24 +1,21 @@
 import { Layout } from '@components/common'
 import {
   ConnectedPagination,
-  ConnectedRefinementList,
   ConnectedSortBy,
   Container,
   CustomHierarchicalMenu,
 } from '@components/ui'
 import type { SearchPropsType } from '@lib/search-props'
-import { useRouter } from 'next/router'
-import React from 'react'
-import { SearchBox } from 'react-instantsearch-hooks-web'
+import React, {useState}  from 'react'
+import { SearchBox, Configure } from 'react-instantsearch-hooks-web'
 
 import { Button } from '@components/ui'
 import { Menu as HeadlessMenu } from '@headlessui/react'
-import { Configure } from 'react-instantsearch-hooks-web'
 import { ConnectedProducts } from './search/ConnectedProducts'
 
-export default function Search({ }: SearchPropsType) {
-  const router = useRouter()
-  const initial = router.asPath.split('collections/')[1]
+export default function Search({}: SearchPropsType) {
+
+  const [useProducts, setProducts] = useState(null);
 
   return (
     <Container>
@@ -36,16 +33,14 @@ export default function Search({ }: SearchPropsType) {
             <CustomHierarchicalMenu
               attributes={['categories.lvl0', 'categories.lvl1']}
               limit={40}
+              products={useProducts}
             />
 
-            <div>
-              <h3 className="mt-2 mb-2 text-lg font-medium">Brands</h3>
-              <ConnectedRefinementList
-                attribute="brandName"
-                limit={100}
-                initial={initial}
-              />
-            </div>
+            <h3 className="mt-2 mb-2 text-lg font-medium">Brands</h3>
+            <CustomHierarchicalMenu attributes={['brandName']} 
+            limit={40} 
+            products={useProducts}
+            />
           </div>
         </div>
         {/* Mobile Filter */}
@@ -61,12 +56,13 @@ export default function Search({ }: SearchPropsType) {
                   <CustomHierarchicalMenu
                     attributes={['categories.lvl0', 'categories.lvl1']}
                     limit={40}
+                    products={useProducts}
                   />
                   <h3 className="mt-2 mb-2 text-lg font-medium">Brands</h3>
-                  <ConnectedRefinementList
-                    attribute="brandName"
+                  <CustomHierarchicalMenu
+                    attributes={['brandName']}
                     limit={100}
-                    initial={initial}
+                    products={useProducts}
                   />
                 </div>
                 <div className="col-span-1 col-start-3">
@@ -93,7 +89,7 @@ export default function Search({ }: SearchPropsType) {
 
         {/* Products */}
 
-        <ConnectedProducts />
+        <ConnectedProducts setProducts={setProducts} />
 
         {/* Sort */}
         <div className="sticky top-0 order-2 max-h-screen col-span-8 overflow-auto lg:top-32 lg:col-span-2 lg:order-none">

site/components/search/ConnectedProducts/connnectProducts.tsx

@@ -8,9 +8,18 @@ import { Skeleton } from '@components/ui'
 import rangeMap from '@lib/range-map'
 
 import { useHits } from 'react-instantsearch-hooks-web'
+import { useEffect, useRef, useState } from 'react'
 
-const ConnectedProducts = () => {
-  const { hits } = useHits()
+
+const ConnectedProducts = ({setProducts}) => {
+
+  const { hits } = useHits();
+
+  //Pass the products via the setProducts State Hook. 
+  useEffect(() => {
+      const products: CommerceProduct[] = hits.map((hit: any) =>algoliaHitToProduct(hit));
+      setProducts(products); 
+  }, [hits]);
 
   const algoliaHitToProduct = (hit: any): CommerceProduct => {
     return {

site/components/ui/CustomHierarchicalMenu/CustomHierarchicalMenu.tsx

@@ -1,6 +1,7 @@
 import { useHierarchicalMenu } from 'react-instantsearch-hooks-web'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
+import { trackProductListViewed } from '@Segment/segmentAnalytics'
 
 type HierarchicalMenuItem = {
   /**
@@ -44,13 +45,11 @@ const getCategoryItemFromRouteName = (
   return null
 }
 
-const CustomHierarchicalMenu = ({ attributes, limit }) => {
+const CustomHierarchicalMenu = ({ attributes, limit, products }) => {
   const { items, refine } = useHierarchicalMenu({ attributes, limit })
   const router = useRouter()
-
   const [isItemsLoaded, setIsItemsLoaded] = useState(false);
 
-
   // This effect runs when the "items" value changes. And will tell the other to run when the category items are loaded and can be refined. 
 useEffect(() => {
   if (items) {
@@ -60,6 +59,10 @@ useEffect(() => {
   }
 }, [items]);
 
+useEffect(() => {
+
+})
+
 useEffect(() => {
   if (!isItemsLoaded) {
     return;
@@ -75,13 +78,14 @@ useEffect(() => {
     // If the category item is found, refine the results using the category item's value.
     if (categoryItem) {
       refine(categoryItem.value);
+      trackProductListViewed(products, categoryItem.value)
     }
   }
 }, [router.asPath, isItemsLoaded]);
 
   const handleItemClick = (item) => {
     const formattedCategory = routeFormatter(item.value)
-    console.log(router.asPath)
+
     if (item.isRefined) {
       // Deselect the item by navigating to the base collections path
       refine(item.value)
@@ -94,6 +98,12 @@ useEffect(() => {
         shallow: true,
       })
     }
+
+
+
+
+
+
   }
 
   return (

site/components/ui/index.ts

@@ -1,9 +1,5 @@
 export { default as Button } from './Button'
 export { default as Collapse } from './Collapse'
-export {
-  default as ConnectedRefinementList,
-  default as Custom,
-} from './ConnectedRefinementList'
 export { default as ConnectedSortBy } from './ConnectedSortBy'
 export { default as Container } from './Container'
 export { default as Grid } from './Grid'