[FSSS-172] Fix/Adjust inappropriate rerenders (#304)

src/components/common/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import {
   List as UIList,
   Icon as UIIcon,
@@ -137,4 +137,4 @@ function Footer() {
   )
 }
 
-export default Footer
+export default memo(Footer)

src/components/common/Navbar/Navbar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { memo, useState } from 'react'
 import { Link as LinkGatsby } from 'gatsby'
 import { List as UIList } from '@faststore/ui'
 import CartToggle from 'src/components/cart/CartToggle'
@@ -117,4 +117,4 @@ function Navbar() {
   )
 }
 
-export default Navbar
+export default memo(Navbar)

src/components/product/ProductCard/ProductCard.tsx

@@ -1,16 +1,14 @@
 import { graphql, Link } from 'gatsby'
+import type { ReactNode } from 'react'
 import React, { useMemo, memo } from 'react'
-import Button from 'src/components/ui/Button'
 import { DiscountBadge, Badge } from 'src/components/ui/Badge'
 import Price from 'src/components/ui/Price'
 import AspectRatio from 'src/components/ui/AspectRatio'
 import type { AspectRatioProps } from 'src/components/ui/AspectRatio'
 import { Image } from 'src/components/ui/Image'
-import { useBuyButton } from 'src/sdk/cart/useBuyButton'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import { useProductLink } from 'src/sdk/product/useProductLink'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
-import { ShoppingCart as ShoppingCartIcon } from 'phosphor-react'
 import {
   Card as UICard,
   CardImage as UICardImage,
@@ -28,27 +26,21 @@ interface Props {
   bordered?: boolean
   outOfStock?: boolean
   variant?: Variant
-  showActions?: boolean
   ratio?: AspectRatioProps['ratio']
+  buyButton?: ReactNode
 }
 
 function ProductCard({
   product,
   index,
   variant = 'vertical',
-  showActions = true,
   ratio = '1',
   bordered = false,
   outOfStock = false,
+  buyButton,
   ...otherProps
 }: Props) {
   const {
-    id,
-    sku,
-    gtin,
-    name: variantName,
-    brand,
-    isVariantOf,
     isVariantOf: { name },
     image: [img],
     offers: { lowPrice: spotPrice, offers },
@@ -68,32 +60,16 @@ function ProductCard({
     return lowestPriceOffer
   }, [spotPrice, offers])
 
-  const { listPrice, seller } = offers[selectedOffer]
+  const { listPrice } = offers[selectedOffer]
 
   const linkProps = useProductLink({ product, selectedOffer, index })
-  const buyProps = useBuyButton({
-    id,
-    brand,
-    price: spotPrice,
-    listPrice,
-    seller,
-    quantity: 1,
-    isVariantOf,
-    gtin,
-    itemOffered: {
-      name: variantName,
-      image: [img],
-      sku,
-    },
-  })
 
   return (
     <UICard
       className="product-card"
       data-card-variant={variant}
       data-card-bordered={bordered}
       data-card-out-of-stock={outOfStock}
-      data-sku={buyProps['data-sku']}
       {...otherProps}
     >
       <UICardImage>
@@ -152,20 +128,7 @@ function ProductCard({
           <DiscountBadge small listPrice={listPrice} spotPrice={spotPrice} />
         )}
       </UICardContent>
-      {showActions && (
-        <UICardActions>
-          <Button
-            {...buyProps}
-            variant="primary"
-            icon={<ShoppingCartIcon size={18} weight="bold" />}
-            iconPosition="left"
-            aria-label="Add to cart"
-            title="Add to cart"
-          >
-            Add
-          </Button>
-        </UICardActions>
-      )}
+      {!!buyButton && <UICardActions>{buyButton}</UICardActions>}
     </UICard>
   )
 }

src/components/product/ProductGrid/ProductGrid.tsx

@@ -18,7 +18,6 @@ function ProductGrid({ products, page, pageSize }: Props) {
           <ProductCard
             product={product}
             index={pageSize * page + idx + 1}
-            showActions={false}
             bordered
             outOfStock={
               product.offers.offers?.[0].availability !==

src/components/sections/Hero/Hero.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import type { ReactNode } from 'react'
 import UIHero, {
   HeroContent,
@@ -75,4 +75,4 @@ const Hero = ({
   )
 }
 
-export default Hero
+export default memo(Hero)

src/components/sections/ProductShelf/ProductShelf.tsx

@@ -14,7 +14,7 @@ function ProductShelf({ products }: ProductShelfProps) {
     <ul data-product-shelf className="grid-content">
       {products.map((product, idx) => (
         <li key={`${product.id}`}>
-          <ProductCard product={product} index={idx + 1} showActions={false} />
+          <ProductCard product={product} index={idx + 1} />
         </li>
       ))}
     </ul>

src/components/sections/ProductTiles/ProductTiles.tsx

@@ -35,7 +35,6 @@ const ProductTiles = ({ products }: TilesProps) => {
             product={product}
             index={idx + 1}
             variant="horizontal"
-            showActions={false}
             ratio={getRatio(idx)}
           />
         </Tile>

src/components/ui/Alert/Alert.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode, MouseEvent } from 'react'
-import React from 'react'
+import React, { memo } from 'react'
 import { Alert as UIAlert, Icon as UIIcon } from '@faststore/ui'
 import type { AlertProps } from '@faststore/ui'
 import Button from 'src/components/ui/Button'
@@ -56,4 +56,4 @@ function Alert({
   )
 }
 
-export default Alert
+export default memo(Alert)

src/components/ui/Badge/DiscountBadge.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { useDiscountPercent } from 'src/sdk/product/useDiscountPercent'
 
 import Badge from './Badge'
@@ -44,4 +44,4 @@ const DiscountBadge = ({
   )
 }
 
-export default DiscountBadge
+export default memo(DiscountBadge)

src/components/ui/Breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { Breadcrumb as UIBreadcrumb } from '@faststore/ui'
 import Link from 'src/components/ui/Link'
 import type { BreadcrumbProps as UIBreadcrumbProps } from '@faststore/ui'
@@ -41,4 +41,4 @@ function Breadcrumb({ breadcrumbList }: BreadcrumbProps) {
   )
 }
 
-export default Breadcrumb
+export default memo(Breadcrumb)

src/components/ui/Breadcrumb/BreadcrumbWrapper.tsx

@@ -0,0 +1,21 @@
+import React, { memo } from 'react'
+
+import type { BreadcrumbProps } from '.'
+import Breadcrumb from '.'
+
+interface BreadcrumbWrapperProps
+  extends Partial<Pick<BreadcrumbProps, 'breadcrumbList'>> {
+  name: string
+}
+
+const BreadcrumbWrapper = ({
+  breadcrumbList,
+  name,
+}: BreadcrumbWrapperProps) => {
+  const fallback = [{ item: '/', name, position: 1 }]
+  const list = breadcrumbList ?? fallback
+
+  return <Breadcrumb breadcrumbList={list} />
+}
+
+export default memo(BreadcrumbWrapper)

src/components/ui/Breadcrumb/index.tsx

@@ -1,2 +1,3 @@
 export { default } from './Breadcrumb'
+export { default as BreadcrumbWrapper } from './BreadcrumbWrapper'
 export type { BreadcrumbProps } from './Breadcrumb'

src/components/ui/Price/Price.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { Price as UIPrice } from '@faststore/ui'
 import type { PriceProps } from '@faststore/ui'
 
@@ -26,4 +26,4 @@ function Price({ classes, SRText, ...props }: Props) {
   )
 }
 
-export default Price
+export default memo(Price)

src/components/ui/ProductTitle/ProductTitle.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import React from 'react'
+import React, { memo } from 'react'
 
 import './product-title.scss'
 
@@ -35,4 +35,4 @@ function ProductTitle({ title, label, refNumber }: ProductTitleProp) {
   )
 }
 
-export default ProductTitle
+export default memo(ProductTitle)

src/components/ui/QuantitySelector/QuantitySelector.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { memo, useEffect, useState } from 'react'
 import { QuantitySelector as UIQuantitySelector } from '@faststore/ui'
 import { Plus as PlusIcon, Minus as MinusIcon } from 'phosphor-react'
 
@@ -81,4 +81,4 @@ export function QuantitySelector({
   )
 }
 
-export default QuantitySelector
+export default memo(QuantitySelector)

src/hooks/useSearchParams.ts

@@ -0,0 +1,37 @@
+import type { SearchState } from '@faststore/sdk'
+import { parseSearchState } from '@faststore/sdk'
+import type {
+  CollectionPageQueryQuery,
+  CollectionPageQueryQueryVariables,
+} from '@generated/graphql'
+import type { PageProps } from 'gatsby'
+import { useMemo } from 'react'
+
+export type Props = PageProps<
+  CollectionPageQueryQuery,
+  CollectionPageQueryQueryVariables
+> & { slug: string }
+
+export const useSearchParams = (props: Props): SearchState => {
+  const {
+    location: { href, pathname },
+    data,
+  } = props
+
+  const selectedFacets = data?.collection?.meta.selectedFacets
+
+  return useMemo(() => {
+    const maybeState = href ? parseSearchState(new URL(href)) : null
+
+    return {
+      page: maybeState?.page ?? 0,
+      base: maybeState?.base ?? pathname,
+      selectedFacets:
+        maybeState && maybeState.selectedFacets.length > 0
+          ? maybeState.selectedFacets
+          : selectedFacets ?? [],
+      term: maybeState?.term ?? null,
+      sort: maybeState?.sort ?? 'score_desc',
+    }
+  }, [href, pathname, selectedFacets])
+}