From 2d414456a827c778db390306a7c174a0b8f16ba1 Mon Sep 17 00:00:00 2001 From: Paul Hachmang Date: Sun, 26 Jan 2025 12:25:10 +0100 Subject: [PATCH 1/4] Solve issue where the category and search page would rerender on pageload because the mask value would flip from true to false --- .changeset/tough-steaks-jump.md | 7 +++++++ .../ProductListLayout/ProductListLayoutClassic.tsx | 4 +++- .../ProductListLayout/ProductListLayoutDefault.tsx | 7 ++++--- .../ProductListLayout/ProductListLayoutSidebar.tsx | 7 ++++--- examples/magento-graphcms/pages/[...url].tsx | 4 ++-- examples/magento-graphcms/pages/search/[[...url]].tsx | 2 +- .../ProductListLayout/ProductListLayoutClassic.tsx | 4 +++- .../ProductListLayout/ProductListLayoutDefault.tsx | 7 ++++--- .../ProductListLayout/ProductListLayoutSidebar.tsx | 7 ++++--- examples/magento-open-source/pages/[...url].tsx | 4 ++-- examples/magento-open-source/pages/search/[[...url]].tsx | 2 +- packages/next-ui/hooks/memoDeep.ts | 7 ++++--- 12 files changed, 39 insertions(+), 23 deletions(-) create mode 100644 .changeset/tough-steaks-jump.md diff --git a/.changeset/tough-steaks-jump.md b/.changeset/tough-steaks-jump.md new file mode 100644 index 0000000000..7b8f946ee3 --- /dev/null +++ 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 index 046155e6e0..5b333a965b 100644 --- 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 index d0844acad3..ae0d7f82c9 100644 --- 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 ( { +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 ( + function SearchResultPage(props: SearchResultProps) { - const productList = useProductList(props) + const { mask, ...productList } = useProductList(props) const { params, menu } = productList const search = params.url.split('/')[1] diff --git a/examples/magento-open-source/components/ProductListLayout/ProductListLayoutClassic.tsx b/examples/magento-open-source/components/ProductListLayout/ProductListLayoutClassic.tsx index 995b147552..0109606f78 100644 --- 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 index d2125a466c..0382b30ead 100644 --- 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 ( { +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 ( + diff --git a/examples/magento-open-source/pages/search/[[...url]].tsx b/examples/magento-open-source/pages/search/[[...url]].tsx index db95e456da..9c11d92121 100644 --- 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] diff --git a/packages/next-ui/hooks/memoDeep.ts b/packages/next-ui/hooks/memoDeep.ts index 23e9abb22b..6e0f751544 100644 --- 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

( 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, From adffabb62b34053e7571e602a7396354a4b4f1a6 Mon Sep 17 00:00:00 2001 From: Paul Hachmang Date: Sun, 26 Jan 2025 12:25:27 +0100 Subject: [PATCH 2/4] Eslint prefer-arrow-callback should allow functionNames as that works better with memo, etc. --- packagesDev/eslint-config/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packagesDev/eslint-config/index.js b/packagesDev/eslint-config/index.js index 33ea93cffa..413ecdd275 100644 --- 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 From 47e8ba7198ef7cdbd7e5f1690c23005d3c2b1368 Mon Sep 17 00:00:00 2001 From: Paul Hachmang Date: Sun, 26 Jan 2025 12:44:32 +0100 Subject: [PATCH 3/4] Solve build issue --- .../magento-graphcms/components/ProductListLayout/types.tsx | 2 +- .../magento-open-source/components/ProductListLayout/types.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/magento-graphcms/components/ProductListLayout/types.tsx b/examples/magento-graphcms/components/ProductListLayout/types.tsx index d44562ec2b..ade01f6269 100644 --- a/examples/magento-graphcms/components/ProductListLayout/types.tsx +++ b/examples/magento-graphcms/components/ProductListLayout/types.tsx @@ -33,7 +33,7 @@ type CategoryLayoutProps = { NonNullable['items']>[number] } -type ProductListProps = ReturnType> +type ProductListProps = Omit>, 'mask'> export type ProductListLayoutProps = ProductListProps & (SearchLayoutProps | CategoryLayoutProps) diff --git a/examples/magento-open-source/components/ProductListLayout/types.tsx b/examples/magento-open-source/components/ProductListLayout/types.tsx index d44562ec2b..ade01f6269 100644 --- 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['items']>[number] } -type ProductListProps = ReturnType> +type ProductListProps = Omit>, 'mask'> export type ProductListLayoutProps = ProductListProps & (SearchLayoutProps | CategoryLayoutProps) From ebd6a84d8e7b9eb5d3a0852b144ef936108cfd4c Mon Sep 17 00:00:00 2001 From: Paul Hachmang Date: Sun, 26 Jan 2025 12:54:41 +0100 Subject: [PATCH 4/4] Solve build issue --- examples/magento-graphcms/pages/search/[[...url]].tsx | 2 +- examples/magento-open-source/pages/search/[[...url]].tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/magento-graphcms/pages/search/[[...url]].tsx b/examples/magento-graphcms/pages/search/[[...url]].tsx index 5f7ee49abc..6df3121355 100644 --- a/examples/magento-graphcms/pages/search/[[...url]].tsx +++ b/examples/magento-graphcms/pages/search/[[...url]].tsx @@ -61,7 +61,7 @@ function SearchResultPage(props: SearchResultProps) { - + {import.meta.graphCommerce.productFiltersPro && import.meta.graphCommerce.productFiltersLayout === 'SIDEBAR' && ( diff --git a/examples/magento-open-source/pages/search/[[...url]].tsx b/examples/magento-open-source/pages/search/[[...url]].tsx index 9c11d92121..720304ebbd 100644 --- a/examples/magento-open-source/pages/search/[[...url]].tsx +++ b/examples/magento-open-source/pages/search/[[...url]].tsx @@ -67,7 +67,7 @@ function SearchResultPage(props: SearchResultProps) { - + {import.meta.graphCommerce.productFiltersPro && import.meta.graphCommerce.productFiltersLayout === 'SIDEBAR' && (