Merge pull request #2492 from graphcommerce-org/fix/various

Fix/variousSolve issue where the category and search page would rerender on pageload because the mask value would flip from true to false
graphcommerce-org · Jan 27, 2025 · 0c81989 · 0c81989
2 parents c03b4f7 + ebd6a84
commit 0c81989
Show file tree

Hide file tree

Showing 15 changed files with 44 additions and 27 deletions.
diff --git a/.changeset/tough-steaks-jump.md b/.changeset/tough-steaks-jump.md
@@ -0,0 +1,7 @@
+---
+'@graphcommerce/magento-graphcms': patch
+'@graphcommerce/magento-open-source': patch
+'@graphcommerce/misc': patch
+---
+
+Solve issue where the category and search page would rerender on pageload because the mask value would flip from true to false
diff --git a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx
@@ -16,7 +16,9 @@ import { ProductListItems } from '../ProductListItems'
 import { ProductListLayoutProps } from './types'
 import { Trans } from '@lingui/macro'
 
-export const ProductListLayoutClassic = memoDeep((props: ProductListLayoutProps) => {
+export const ProductListLayoutClassic = memoDeep(function ProductListLayoutClassic(
+  props: ProductListLayoutProps,
+) {
   const { filters, filterTypes, params, products, title, category } = props
 
   if (!(params && products?.items && filterTypes)) return null

diff --git a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutDefault.tsx b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutDefault.tsx
@@ -23,14 +23,15 @@ import { Typography } from '@mui/material'
 import { ProductListItems } from '../ProductListItems'
 import { ProductListLayoutProps, useLayoutConfiguration } from './types'
 
-export const ProductListLayoutDefault = memoDeep((props: ProductListLayoutProps) => {
+export const ProductListLayoutDefault = memoDeep(function ProductListLayoutDefault(
+  props: ProductListLayoutProps,
+) {
   const { id, filters, filterTypes, params, products, title, category, handleSubmit } = props
+  const configuration = useLayoutConfiguration(false)
 
   if (!(params && products?.items && filterTypes)) return null
   const { total_count, sort_fields, page_info } = products
 
-  const configuration = useLayoutConfiguration(false)
-
   return (
     <ProductFiltersPro
       key={id}

diff --git a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx
@@ -31,14 +31,15 @@ import { Box, Typography } from '@mui/material'
 import { ProductListItems } from '../ProductListItems'
 import { ProductListLayoutProps, useLayoutConfiguration } from './types'
 
-export const ProductListLayoutSidebar = memoDeep((props: ProductListLayoutProps) => {
+export const ProductListLayoutSidebar = memoDeep(function ProductListLayoutSidebar(
+  props: ProductListLayoutProps,
+) {
   const { filters, filterTypes, params, products, handleSubmit, category, title, menu } = props
+  const configuration = useLayoutConfiguration(true)
 
   if (!params || !products?.items || !filterTypes) return null
   const { total_count, sort_fields, page_info } = products
 
-  const configuration = useLayoutConfiguration(true)
-
   return (
     <ProductFiltersPro
       params={params}

diff --git a/examples/magento-graphcms/components/ProductListLayout/types.tsx b/examples/magento-graphcms/components/ProductListLayout/types.tsx
@@ -33,7 +33,7 @@ type CategoryLayoutProps = {
     NonNullable<NonNullable<CategoryPageQuery['categories']>['items']>[number]
 }
 
-type ProductListProps = ReturnType<typeof useProductList<BaseProps>>
+type ProductListProps = Omit<ReturnType<typeof useProductList<BaseProps>>, 'mask'>
 
 export type ProductListLayoutProps = ProductListProps & (SearchLayoutProps | CategoryLayoutProps)
 

diff --git a/examples/magento-graphcms/pages/[...url].tsx b/examples/magento-graphcms/pages/[...url].tsx
@@ -59,7 +59,7 @@ type GetPageStaticProps = GetStaticProps<LayoutNavigationProps, CategoryProps, C
 
 function CategoryPage(props: CategoryProps) {
   const { categories, pages, ...rest } = props
-  const productList = useProductList({
+  const { mask, ...productList } = useProductList({
     ...rest,
     category: categories?.items?.[0],
   })
@@ -70,7 +70,7 @@ function CategoryPage(props: CategoryProps) {
   const isCategory = params && category && products?.items
 
   return (
-    <PrivateQueryMaskProvider mask={productList.mask}>
+    <PrivateQueryMaskProvider mask={mask}>
       <CategoryMeta
         params={params}
         title={page?.metaTitle}

diff --git a/examples/magento-graphcms/pages/search/[[...url]].tsx b/examples/magento-graphcms/pages/search/[[...url]].tsx
@@ -42,7 +42,7 @@ export type GetPageStaticProps = GetStaticProps<
 >
 
 function SearchResultPage(props: SearchResultProps) {
-  const productList = useProductList(props)
+  const { mask, ...productList } = useProductList(props)
   const { params, menu } = productList
   const search = params.url.split('/')[1]
 
@@ -61,7 +61,7 @@ function SearchResultPage(props: SearchResultProps) {
         <SearchField size='small' formControl={{ sx: { width: '81vw' } }} />
       </LayoutHeader>
 
-      <PrivateQueryMaskProvider mask={productList.mask}>
+      <PrivateQueryMaskProvider mask={mask}>
         {import.meta.graphCommerce.productFiltersPro &&
           import.meta.graphCommerce.productFiltersLayout === 'SIDEBAR' && (
             <ProductListLayoutSidebar {...productList} menu={menu} />

diff --git a/examples/magento-open-source/components/ProductListLayout/ProductListLayoutClassic.tsx b/examples/magento-open-source/components/ProductListLayout/ProductListLayoutClassic.tsx
@@ -15,7 +15,9 @@ import { Container, LayoutTitle, memoDeep, StickyBelowHeader } from '@graphcomme
 import { ProductListItems } from '../ProductListItems'
 import type { ProductListLayoutProps } from './types'
 
-export const ProductListLayoutClassic = memoDeep((props: ProductListLayoutProps) => {
+export const ProductListLayoutClassic = memoDeep(function ProductListLayoutClassic(
+  props: ProductListLayoutProps,
+) {
   const { filters, filterTypes, params, products, title, category } = props
 
   if (!(params && products?.items && filterTypes)) return null

diff --git a/examples/magento-open-source/components/ProductListLayout/ProductListLayoutDefault.tsx b/examples/magento-open-source/components/ProductListLayout/ProductListLayoutDefault.tsx
@@ -24,14 +24,15 @@ import { ProductListItems } from '../ProductListItems'
 import type { ProductListLayoutProps } from './types'
 import { useLayoutConfiguration } from './types'
 
-export const ProductListLayoutDefault = memoDeep((props: ProductListLayoutProps) => {
+export const ProductListLayoutDefault = memoDeep(function ProductListLayoutDefault(
+  props: ProductListLayoutProps,
+) {
   const { id, filters, filterTypes, params, products, title, category, handleSubmit } = props
+  const configuration = useLayoutConfiguration(false)
 
   if (!(params && products?.items && filterTypes)) return null
   const { total_count, sort_fields, page_info } = products
 
-  const configuration = useLayoutConfiguration(false)
-
   return (
     <ProductFiltersPro
       key={id}

diff --git a/examples/magento-open-source/components/ProductListLayout/ProductListLayoutSidebar.tsx b/examples/magento-open-source/components/ProductListLayout/ProductListLayoutSidebar.tsx
@@ -32,14 +32,15 @@ import { ProductListItems } from '../ProductListItems'
 import type { ProductListLayoutProps } from './types'
 import { useLayoutConfiguration } from './types'
 
-export const ProductListLayoutSidebar = memoDeep((props: ProductListLayoutProps) => {
+export const ProductListLayoutSidebar = memoDeep(function ProductListLayoutSidebar(
+  props: ProductListLayoutProps,
+) {
   const { filters, filterTypes, params, products, handleSubmit, category, title, menu } = props
+  const configuration = useLayoutConfiguration(true)
 
   if (!params || !products?.items || !filterTypes) return null
   const { total_count, sort_fields, page_info } = products
 
-  const configuration = useLayoutConfiguration(true)
-
   return (
     <ProductFiltersPro
       params={params}

diff --git a/examples/magento-open-source/components/ProductListLayout/types.tsx b/examples/magento-open-source/components/ProductListLayout/types.tsx
@@ -33,7 +33,7 @@ type CategoryLayoutProps = {
     NonNullable<NonNullable<CategoryPageQuery['categories']>['items']>[number]
 }
 
-type ProductListProps = ReturnType<typeof useProductList<BaseProps>>
+type ProductListProps = Omit<ReturnType<typeof useProductList<BaseProps>>, 'mask'>
 
 export type ProductListLayoutProps = ProductListProps & (SearchLayoutProps | CategoryLayoutProps)
 

diff --git a/examples/magento-open-source/pages/[...url].tsx b/examples/magento-open-source/pages/[...url].tsx
@@ -53,7 +53,7 @@ type GetPageStaticProps = GetStaticProps<LayoutNavigationProps, CategoryProps, C
 
 function CategoryPage(props: CategoryProps) {
   const { categories, ...rest } = props
-  const productList = useProductList({
+  const { mask, ...productList } = useProductList({
     ...rest,
     category: categories?.items?.[0],
   })
@@ -63,7 +63,7 @@ function CategoryPage(props: CategoryProps) {
   const isCategory = params && category && products?.items
 
   return (
-    <PrivateQueryMaskProvider mask={productList.mask}>
+    <PrivateQueryMaskProvider mask={mask}>
       <CategoryMeta params={params} {...category} />
       <LayoutHeader floatingMd hideMd={import.meta.graphCommerce.breadcrumbs}>
         <LayoutTitle size='small' component='span'>

diff --git a/examples/magento-open-source/pages/search/[[...url]].tsx b/examples/magento-open-source/pages/search/[[...url]].tsx
@@ -48,7 +48,7 @@ export type GetPageStaticProps = GetStaticProps<
 >
 
 function SearchResultPage(props: SearchResultProps) {
-  const productList = useProductList(props)
+  const { mask, ...productList } = useProductList(props)
   const { params, menu } = productList
   const search = params.url.split('/')[1]
 
@@ -67,7 +67,7 @@ function SearchResultPage(props: SearchResultProps) {
         <SearchField size='small' formControl={{ sx: { width: '81vw' } }} />
       </LayoutHeader>
 
-      <PrivateQueryMaskProvider mask={productList.mask}>
+      <PrivateQueryMaskProvider mask={mask}>
         {import.meta.graphCommerce.productFiltersPro &&
           import.meta.graphCommerce.productFiltersLayout === 'SIDEBAR' && (
             <ProductListLayoutSidebar {...productList} menu={menu} />

diff --git a/packages/next-ui/hooks/memoDeep.ts b/packages/next-ui/hooks/memoDeep.ts
@@ -1,4 +1,6 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
+import diff from '@graphcommerce/react-hook-form/src/diff'
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { equal } from '@wry/equality'
 import type { FunctionComponent, NamedExoticComponent } from 'react'
 import { memo } from 'react'
@@ -23,11 +25,10 @@ export function memoDeep<P extends object>(
           const result = equal(prevProps, nextProps)
           const ms = performance.now() - start
 
-          if (ms < 0.2) return result
+          if (!result && ms < 0.2) return result
 
-          console.warn('memoDeep took more than 0.2ms', {
+          console.warn(`memoDeep took ${ms.toFixed(2)}ms`, {
             result,
-            ms,
             Component,
             prevProps,
             nextProps,

diff --git a/packagesDev/eslint-config/index.js b/packagesDev/eslint-config/index.js
@@ -98,6 +98,7 @@ module.exports = {
         unnamedComponents: 'arrow-function',
       },
     ],
+    'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
   },
   overrides: [
     // TypeScript files