@graphcommerce/magento-product 8.1.0-canary.9 → 9.0.0-canary.55

package/hooks/useProductList.ts

@@ -0,0 +1,123 @@
+import { debounce } from '@graphcommerce/ecommerce-ui'
+import {
+  ApolloQueryResult,
+  ApolloClient,
+  useQuery,
+  useInContextQuery,
+  getInContextInput,
+} from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { showPageLoadIndicator } from '@graphcommerce/next-ui'
+import { useEventCallback } from '@mui/material'
+import { FilterFormProviderProps, ProductFiltersDocument } from '../components'
+import {
+  ProductListDocument,
+  ProductListQuery,
+  ProductListQueryVariables,
+} from '../components/ProductList/ProductList.gql'
+import { CategoryDefaultFragment } from '../components/ProductListItems/CategoryDefault.gql'
+import { ProductListParams, toProductListParams } from '../components/ProductListItems/filterTypes'
+import { useRouterFilterParams } from '../components/ProductListItems/filteredProductList'
+import {
+  productListApplyCategoryDefaults,
+  useProductListApplyCategoryDefaults,
+} from '../components/ProductListItems/productListApplyCategoryDefaults'
+
+const productListQueries: Array<Promise<any>> = []
+
+type Next = Parameters<NonNullable<FilterFormProviderProps['handleSubmit']>>[1]
+
+export const prefetchProductList = debounce(
+  async (
+    variables: ProductListQueryVariables,
+    next: Next,
+    client: ApolloClient<any>,
+    shallow: boolean,
+  ) => {
+    if (!shallow) return next(shallow)
+
+    showPageLoadIndicator.set(true)
+
+    const context = getInContextInput(client)
+    const productList = client.query({
+      query: ProductListDocument,
+      variables: { ...variables, context },
+    })
+
+    const productFilters = client.query({
+      query: ProductFiltersDocument,
+      variables: {
+        filters: { category_uid: variables.filters?.category_uid },
+        search: variables.search,
+        context,
+      },
+    })
+
+    const both = Promise.all([productList, productFilters])
+
+    // Push the query to the queue array.
+    productListQueries.push(both)
+
+    // Since we're waiting here the form will be submitting for longer.
+    await both
+
+    const includes = productListQueries.includes(both)
+
+    // Remove all requests that are before the current request
+    const index = productListQueries.indexOf(both)
+    if (index > -1) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      productListQueries.splice(0, index + 1)
+    }
+
+    if (productListQueries.length === 0) showPageLoadIndicator.set(false)
+
+    if (includes) {
+      // todo: When navigating a category, it should now be a shallow route
+
+      // If the resolved request  is still in the array, it may be rendered (URL may be updated)
+      await next(shallow)
+    }
+
+    return undefined
+  },
+  200,
+  // the maxWait is now set to a somewhat shorter time than the average query time.
+  { leading: true, maxWait: 700, trailing: true },
+)
+
+/**
+ * - Handles shallow routing requests
+ * - Handles customer specific product list queries
+ */
+export function useProductList<
+  T extends ProductListQuery & {
+    params?: ProductListParams
+    category?: CategoryDefaultFragment | null | undefined
+  },
+>(props: T) {
+  const { category } = props
+  const { params, shallow } = useRouterFilterParams(props)
+  const variables = useProductListApplyCategoryDefaults(params, category)
+
+  const result = useInContextQuery(ProductListDocument, { variables, skip: !shallow }, props)
+  const storeConfig = useQuery(StoreConfigDocument).data
+
+  const handleSubmit: NonNullable<FilterFormProviderProps['handleSubmit']> = useEventCallback(
+    async (formValues, next) => {
+      if (!storeConfig) return
+
+      const vars = await productListApplyCategoryDefaults(
+        toProductListParams(formValues),
+        storeConfig,
+        category,
+      )
+
+      const shallowNow =
+        JSON.stringify(vars.filters?.category_uid) === JSON.stringify(params?.filters.category_uid)
+      await prefetchProductList(vars, next, result.client, shallowNow)
+    },
+  )
+
+  return { ...props, ...result.data, params, mask: result.mask, handleSubmit }
+}

package/hooks/useProductListLink.ts

@@ -8,11 +8,14 @@ import {
 } from '../components/ProductListItems/filterTypes'
 
 export function productListLinkFromFilter(props: ProductFilterParams): string {
-  const { url, sort, dir, currentPage, pageSize, filters: incoming } = props
+  const { url, sort, dir, currentPage, pageSize, filters: incoming, search } = props
   const isSearch = url.startsWith('search')
   const filters = isSearch ? incoming : { ...incoming, category_uid: undefined }
   const uid = incoming?.category_uid?.eq || incoming?.category_uid?.in?.[0]
 
+  let urlBase = url
+  if (isSearch) urlBase = search ? `search/${search}` : 'search'
+
   // base url path generation
   let paginateSort = ``
   let query = ``
@@ -38,9 +41,9 @@ export function productListLinkFromFilter(props: ProductFilterParams): string {
 
   // it's a category with filters, use the /c/ route.
   if (query && !isSearch)
-    return `/c/${url}${paginateSort}/q${uid ? `/category_uid/${uid}` : ''}${query}`
+    return `/c/${urlBase}${paginateSort}/q${uid ? `/category_uid/${uid}` : ''}${query}`
 
-  return query ? `/${url}${paginateSort}/q${query}` : `/${url}${paginateSort}`
+  return query ? `/${urlBase}${paginateSort}/q${query}` : `/${urlBase}${paginateSort}`
 }
 
 export function productListLink(props: ProductListParams): string {

package/index.ts

@@ -5,4 +5,5 @@ export * from './hooks/useProductLink'
 export * from './hooks/useProductListLink'
 export * from './hooks/useProductListLinkReplace'
 export * from './hooks/useProductListParamsContext'
+export * from './hooks/useProductList'
 export * from './hooks/ProductLink.gql'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.9",
+  "version": "9.0.0-canary.55",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,18 +18,19 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.1.0-canary.9",
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.9",
-    "@graphcommerce/framer-next-pages": "^8.1.0-canary.9",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.9",
-    "@graphcommerce/graphql": "^8.1.0-canary.9",
-    "@graphcommerce/graphql-mesh": "^8.1.0-canary.9",
-    "@graphcommerce/image": "^8.1.0-canary.9",
-    "@graphcommerce/magento-cart": "^8.1.0-canary.9",
-    "@graphcommerce/magento-store": "^8.1.0-canary.9",
-    "@graphcommerce/next-ui": "^8.1.0-canary.9",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.9",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.9",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.55",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.55",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.55",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.55",
+    "@graphcommerce/graphql": "^9.0.0-canary.55",
+    "@graphcommerce/graphql-mesh": "^9.0.0-canary.55",
+    "@graphcommerce/image": "^9.0.0-canary.55",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.55",
+    "@graphcommerce/magento-category": "^9.0.0-canary.55",
+    "@graphcommerce/magento-store": "^9.0.0-canary.55",
+    "@graphcommerce/next-ui": "^9.0.0-canary.55",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.55",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.55",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",