feat: Adjust rerender for some components

Signed-off-by: Arthur Andrade <arthurfelandrade@gmail.com>

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/ProductDetails/ProductDetails.tsx

@@ -1,5 +1,5 @@
 import { graphql } from 'gatsby'
-import React, { useEffect, useState } from 'react'
+import React, { memo, useEffect, useState } from 'react'
 import BuyButton from 'src/components/ui/BuyButton'
 import { Image } from 'src/components/ui/Image'
 import AspectRatio from 'src/components/ui/AspectRatio'
@@ -295,4 +295,4 @@ export const fragment = graphql`
   }
 `
 
-export default ProductDetails
+export default memo(ProductDetails)

src/components/sections/ProductShelf/ProductShelf.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 
 import ProductCard from '../../product/ProductCard'
@@ -14,11 +14,11 @@ 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>
   )
 }
 
-export default memo(ProductShelf)
+export default ProductShelf

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/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/pages/{StoreProduct.slug}/p.tsx

@@ -5,7 +5,7 @@ import {
   GatsbySeo,
   ProductJsonLd,
 } from 'gatsby-plugin-next-seo'
-import React, { useMemo } from 'react'
+import React from 'react'
 import ProductDetails from 'src/components/sections/ProductDetails'
 import type { PageProps } from 'gatsby'
 import type {
@@ -22,7 +22,11 @@ export type Props = PageProps<
 function Page(props: Props) {
   const { locale, currency } = useSession()
   const {
-    data: { product, site, allStoreProduct },
+    data: {
+      product,
+      site,
+      allStoreProduct: { nodes: youMightAlsoLikeProducts },
+    },
     location: { host },
     params: { slug },
   } = props
@@ -38,14 +42,6 @@ function Page(props: Props) {
   const canonical =
     host !== undefined ? `https://${host}/${slug}/p` : `/${slug}/p`
 
-  const youMightAlsoLikeProducts = useMemo(
-    () => allStoreProduct?.nodes,
-    [allStoreProduct]
-  )
-
-  const haveYouMightAlsoLikeProducts =
-    youMightAlsoLikeProducts && youMightAlsoLikeProducts?.length > 0
-
   return (
     <>
       {/* SEO */}
@@ -99,7 +95,7 @@ function Page(props: Props) {
 
       <ProductDetails product={product} />
 
-      {haveYouMightAlsoLikeProducts && (
+      {youMightAlsoLikeProducts?.length > 0 && (
         <section className="page__section page__section-shelf page__section-divisor / grid-section">
           <h2 className="title-section / grid-content">You might also like</h2>
           <div className="page__section-content">