@graphcommerce/magento-product 3.0.7 → 3.0.8

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.0.7...@graphcommerce/magento-product@3.0.8) (2021-09-30)
+
+
+### Bug Fixes
+
+* **filter-range-type:** invalid filter value after browser back ([b1e0a78](https://github.com/ho-nl/m2-pwa/commit/b1e0a78bb92719fb0f23eef53053e825e78d7ed1))
+* **filters:** only push first filter to the history ([bbe1ac5](https://github.com/ho-nl/m2-pwa/commit/bbe1ac5b629f8ed7798094d64a413d0c27519854))
+
+
+
+
+
 ## [3.0.7](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.0.6...@graphcommerce/magento-product@3.0.7) (2021-09-30)
 
 

package/components/ProductListFilters/FilterCheckboxType.tsx

@@ -3,7 +3,7 @@ import { useChipMenuStyles, SvgImage, iconCloseCircle } from '@graphcommerce/nex
 import { Chip, ChipProps } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
-import { useProductListLinkPush } from '../../hooks/useProductListLinkPush'
+import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import ProductListLink from '../ProductListLink/ProductListLink'
 import { FilterIn } from './FilterEqualType'
@@ -19,7 +19,7 @@ export default function FilterCheckboxType(props: FilterCheckboxTypeProps) {
   const { params } = useProductListParamsContext()
   const classes = useChipMenuStyles(props)
   const currentFilter = params.filters[attribute_code]
-  const pushRoute = useProductListLinkPush({ scroll: false })
+  const replaceRoute = useProductListLinkReplace({ scroll: false })
 
   if (!options?.[0]) return null
 
@@ -34,7 +34,7 @@ export default function FilterCheckboxType(props: FilterCheckboxTypeProps) {
       filters={{ ...params.filters, [attribute_code]: filter }}
       currentPage={undefined}
       noLink
-      link={{ scroll: false }}
+      link={{ scroll: false, replace: true }}
     >
       <Chip
         variant='outlined'
@@ -47,7 +47,7 @@ export default function FilterCheckboxType(props: FilterCheckboxTypeProps) {
                 delete linkParams.currentPage
                 delete linkParams.filters[attribute_code]
 
-                pushRoute(linkParams)
+                replaceRoute(linkParams)
               }
             : undefined
         }

package/components/ProductListFilters/FilterEqualType.tsx

@@ -11,7 +11,7 @@ import {
 } from '@material-ui/core'
 import React from 'react'
 import { SetRequired } from 'type-fest'
-import { useProductListLinkPush } from '../../hooks/useProductListLinkPush'
+import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import ProductListLink from '../ProductListLink/ProductListLink'
 import { ProductListFiltersFragment } from './ProductListFilters.gql'
@@ -86,12 +86,14 @@ export default function FilterEqualType(props: FilterEqualTypeProps) {
   const { attribute_code, count, label, options, ...chipProps } = props
   const { params } = useProductListParamsContext()
   const classes = useFilterEqualStyles()
-  const pushRoute = useProductListLinkPush({ scroll: false })
+  const replaceRoute = useProductListLinkReplace({ scroll: false })
 
   const currentFilter: FilterEqualTypeInput = cloneDeep(params.filters[attribute_code]) ?? {
     in: [],
   }
 
+  const anyFilterActive = Object.keys(params?.filters ?? {}).length >= 1
+
   const currentLabels =
     options
       ?.filter((option) => option && currentFilter.in?.includes(option.value))
@@ -101,7 +103,8 @@ export default function FilterEqualType(props: FilterEqualTypeProps) {
     const linkParams = cloneDeep(params)
     delete linkParams.filters[attribute_code]
     delete linkParams.currentPage
-    pushRoute(linkParams)
+
+    replaceRoute(linkParams)
   }
 
   return (
@@ -138,6 +141,7 @@ export default function FilterEqualType(props: FilterEqualTypeProps) {
               currentPage={undefined}
               key={option?.value}
               color='inherit'
+              link={{ replace: anyFilterActive }}
             >
               <ListItem dense className={classes.listItem}>
                 <div className={classes.listItemInnerContainer}>

package/components/ProductListFilters/FilterRangeType.tsx

@@ -3,8 +3,8 @@ import { FilterRangeTypeInput } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { ChipMenu, ChipMenuProps } from '@graphcommerce/next-ui'
 import { makeStyles, Mark, Slider, Theme } from '@material-ui/core'
-import React from 'react'
-import { useProductListLinkPush } from '../../hooks/useProductListLinkPush'
+import React, { useEffect } from 'react'
+import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import { ProductListFiltersFragment } from './ProductListFilters.gql'
 
@@ -51,7 +51,7 @@ export default function FilterRangeType(props: FilterRangeTypeProps) {
   const { attribute_code, label, options, ...chipProps } = props
   const classes = useFilterRangeType(props)
   const { params } = useProductListParamsContext()
-  const pushRoute = useProductListLinkPush({ scroll: false })
+  const replaceRoute = useProductListLinkReplace({ scroll: false })
 
   // eslint-disable-next-line no-case-declarations
   const marks: { [index: number]: Mark } = {}
@@ -80,6 +80,10 @@ export default function FilterRangeType(props: FilterRangeTypeProps) {
     paramValues ? [Number(paramValues.from), Number(paramValues.to)] : [min, max],
   )
 
+  useEffect(() => {
+    if (!paramValues) setValue([min, max])
+  }, [max, min, paramValues])
+
   const priceFilterUrl = cloneDeep(params)
   delete priceFilterUrl.currentPage
   priceFilterUrl.filters[attribute_code] = {
@@ -94,7 +98,7 @@ export default function FilterRangeType(props: FilterRangeTypeProps) {
     delete linkParams.filters[attribute_code]
 
     setValue([min, max])
-    pushRoute(linkParams)
+    replaceRoute(linkParams)
   }
 
   const currentFilter = params.filters[attribute_code] as FilterRangeTypeInput | undefined
@@ -156,7 +160,7 @@ export default function FilterRangeType(props: FilterRangeTypeProps) {
           }}
           onChangeCommitted={(e, newValue) => {
             if (newValue[0] > min || newValue[1] < max) {
-              pushRoute({ ...priceFilterUrl })
+              replaceRoute({ ...priceFilterUrl })
             } else {
               resetFilter()
             }

package/components/ProductListLink/ProductListLink.tsx

@@ -7,7 +7,10 @@ import { ProductListParams } from '../ProductListItems/filterTypes'
 
 export type ProductListLinkProps = PropsWithChildren<
   LinkProps &
-    ProductListParams & { noLink?: boolean; link?: Omit<PageLinkProps, 'href' | 'passHref'> }
+    ProductListParams & {
+      noLink?: boolean
+      link?: Omit<PageLinkProps, 'href' | 'passHref'>
+    }
 >
 
 const ProductListLink = React.forwardRef<HTMLAnchorElement, ProductListLinkProps>((props, ref) => {

package/components/ProductListSort/index.tsx

@@ -4,7 +4,7 @@ import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { ChipMenu, ChipMenuProps } from '@graphcommerce/next-ui'
 import { ListItem, ListItemText } from '@material-ui/core'
 import React from 'react'
-import { useProductListLinkPush } from '../../hooks/useProductListLinkPush'
+import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import ProductListLink from '../ProductListLink/ProductListLink'
 import { ProductListSortFragment } from './ProductListSort.gql'
@@ -15,7 +15,7 @@ export type ProductListSortProps = ProductListSortFragment &
 export default function ProductListSort(props: ProductListSortProps) {
   const { sort_fields, total_count, ...filterMenuProps } = props
   const { params } = useProductListParamsContext()
-  const pushRoute = useProductListLinkPush()
+  const replaceRoute = useProductListLinkReplace()
   const { data: storeConfigQuery } = useQuery(StoreConfigDocument)
   const defaultSort = storeConfigQuery?.storeConfig?.catalog_default_sort_by
 
@@ -27,7 +27,7 @@ export default function ProductListSort(props: ProductListSortProps) {
   const removeFilter = () => {
     const linkParams = cloneDeep(params)
     linkParams.sort = {}
-    pushRoute(linkParams)
+    replaceRoute(linkParams)
   }
 
   if (!total_count) return null
@@ -59,7 +59,7 @@ export default function ProductListSort(props: ProductListSortProps) {
                 {...linkParams}
                 color='inherit'
                 underline='none'
-                link={{ scroll: false }}
+                link={{ scroll: false, replace: true }}
               />
             )}
           >

package/hooks/useProductListLinkReplace.ts

@@ -0,0 +1,32 @@
+import { default as Router } from 'next/router'
+import { ProductListParams } from '../components/ProductListItems/filterTypes'
+import { createProductListLink } from './useProductListLink'
+import { useProductListParamsContext } from './useProductListParamsContext'
+
+type UseProductLinkPushProps = {
+  shallow?: boolean
+  locale?: string | false
+  scroll?: boolean
+}
+
+export function useProductListLinkReplace(props?: UseProductLinkPushProps) {
+  const { setParams } = useProductListParamsContext()
+
+  return (params: ProductListParams) => {
+    const queryUrl = Router.query.url ?? []
+    const comingFromURLWithoutFilters = !queryUrl.includes('q')
+
+    setParams(params)
+
+    const path = createProductListLink(params)
+
+    // push the first filter, so the new route (on browser back) will be e.g. /women/fruit instead of /women
+    if (comingFromURLWithoutFilters) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      Router.push(path, path, props)
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      Router.replace(path, path, props)
+    }
+  }
+}

package/index.ts

@@ -4,6 +4,6 @@ export * from './Api/ProductListItem.gql'
 export * from './Api/ProductPageItem.gql'
 
 export * from './hooks/useProductLink'
-export * from './hooks/useProductListLinkPush'
+export * from './hooks/useProductListLinkReplace'
 export * from './hooks/useProductListParamsContext'
 export * from './hooks/ProductLink.gql'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-product",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -24,7 +24,7 @@
     "@graphcommerce/framer-scroller": "^0.2.5",
     "@graphcommerce/graphql": "^2.103.4",
     "@graphcommerce/image": "^2.104.5",
-    "@graphcommerce/magento-cart": "^3.0.7",
+    "@graphcommerce/magento-cart": "^3.0.8",
     "@graphcommerce/magento-store": "^3.0.7",
     "@graphcommerce/next-ui": "^3.0.6",
     "@graphql-typed-document-node/core": "^3.1.0",
@@ -38,5 +38,5 @@
     "schema-dts": "^1.0.0",
     "type-fest": "^2.3.4"
   },
-  "gitHead": "e22e75eb7fb075dece93b268a9b3799c4e1e9cea"
+  "gitHead": "5045f247ba0d84c53b16a1cc924677cfcd53b4b7"
 }

package/hooks/useProductListLinkPush.ts

@@ -1,22 +0,0 @@
-import Router from 'next/router'
-import { ProductListParams } from '../components/ProductListItems/filterTypes'
-import { createProductListLink } from './useProductListLink'
-import { useProductListParamsContext } from './useProductListParamsContext'
-
-type UseProductLinkPushProps = {
-  shallow?: boolean
-  locale?: string | false
-  scroll?: boolean
-}
-
-export function useProductListLinkPush(props?: UseProductLinkPushProps) {
-  const { setParams } = useProductListParamsContext()
-
-  return (params: ProductListParams) => {
-    setParams(params)
-
-    const path = createProductListLink(params)
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    Router.push(path, path, props)
-  }
-}