@graphcommerce/algolia-search 6.2.0-canary.55 → 6.2.0-canary.56

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @graphcommerce/algolia-search
 
+## 6.2.0-canary.56
+
+### Patch Changes
+
+- [#1971](https://github.com/graphcommerce-org/graphcommerce/pull/1971) [`1c77da7f9`](https://github.com/graphcommerce-org/graphcommerce/commit/1c77da7f951e34a28df586fcaedf7a0a2c97ba60) - Bug fixes for Algolia Search. Linking via indexed categories is now possible, Mobile Header wil now render results correctly and server side data hydration will no longer be reliant on the locale provided by Lingui. ([@mikekeehnen](https://github.com/mikekeehnen))
+
 ## 6.2.0-canary.55
 
 ## 6.2.0-canary.54

package/README.md

@@ -79,7 +79,7 @@ return {
       params: productListParams,
       up: { href: '/', title: 'Home' },
       apolloState: await conf.then(() => client.cache.extract()),
-+     serverState: await getServerState(<SearchContext />, {
++     serverState: await getServerState(<SearchContext rendersInsideNextjs={false} />, {
 +      renderToString,
 +     }),
     },

package/components/Chip/SortChip/SortChip.tsx

@@ -1,9 +1,15 @@
-import { ChipMenu, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
+import {
+  ChipMenu,
+  extendableComponent,
+  responsiveVal,
+  useStorefrontConfig,
+} from '@graphcommerce/next-ui'
 import { SxProps, Theme } from '@mui/material'
 import Box from '@mui/material/Box'
 import Checkbox from '@mui/material/Checkbox'
 import ListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
+import { useSortBy } from 'react-instantsearch-hooks-web'
 
 const name = 'SortChip' as const
 const parts = ['menu', 'item'] as const
@@ -22,13 +28,19 @@ export type SortByRenderState = {
   canRefine: boolean
 }
 
-export interface SortChipProps extends SortByRenderState {
+export type SortChipProps = {
   title: string
   sx?: SxProps<Theme>
 }
 
 export function SortChip(props: SortChipProps) {
-  const { initialIndex, currentRefinement, options, refine, canRefine, title, sx } = props
+  const { title, sx } = props
+
+  const { initialIndex, currentRefinement, options, refine, canRefine } = useSortBy({
+    items: useStorefrontConfig().sortOptions ?? [],
+  })
+
+  if (options.length < 1) return null
 
   const selectedOption = options.find((option) => option.value === currentRefinement)
 

package/components/SearchBox/SearchBox.tsx

@@ -1,15 +1,14 @@
+import { SearchFormProps } from '@graphcommerce/magento-search'
 import { Trans } from '@lingui/react'
 import { Box, debounce } from '@mui/material'
 import TextField from '@mui/material/TextField'
 import { ChangeEvent, useCallback, useEffect, useRef } from 'react'
 import { useHits, useSearchBox, UseSearchBoxProps } from 'react-instantsearch-hooks-web'
 
-type SearchBoxProps = {
-  defaultValue?: string
-} & UseSearchBoxProps
+type SearchBoxProps = UseSearchBoxProps & SearchFormProps
 
 export function SearchBox(props: SearchBoxProps) {
-  const { defaultValue } = props
+  const { search, textFieldProps } = props
   const searchInputElement = useRef<HTMLInputElement>(null)
 
   const { refine } = useSearchBox()
@@ -25,8 +24,8 @@ export function SearchBox(props: SearchBoxProps) {
   )
 
   useEffect(() => {
-    if (defaultValue) refine(defaultValue)
-  }, [defaultValue, refine])
+    if (search) refine(search)
+  }, [search, refine])
 
   const totalResults = results?.nbHits ?? 0
 
@@ -52,7 +51,8 @@ export function SearchBox(props: SearchBoxProps) {
       inputRef={searchInputElement}
       onChange={debounceSearch}
       fullWidth
-      sx={{ mt: 1 }}
+      sx={{ mt: 1, mb: 1 }}
+      {...textFieldProps}
     />
   )
 }

package/hooks/useAlgoliaCategoryResults.ts

@@ -1,14 +1,16 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { useHits } from 'react-instantsearch-hooks-web'
 import { AlgoliaCategoryHit } from '../lib/types'
 
-function hitToCategory(hits: AlgoliaCategoryHit[]) {
+function hitToCategory(hits: AlgoliaCategoryHit[], categoryUrlSuffix?: string | null) {
   return hits.map((h) => {
     const urlSplit = h.url.split('/')
     const categoryUrl = urlSplit.reduce((prev, curr, currIndex) => {
       if (currIndex > 2) return `${prev}/${curr}`
       return ''
     })
-    const url_key = categoryUrl.substring(0, categoryUrl.length - 5)
+    const url_key = categoryUrl.substring(1, categoryUrl.length - (categoryUrlSuffix?.length ?? 0))
     return {
       category_uid: h.objectID,
       category_level: h.level,
@@ -20,6 +22,7 @@ function hitToCategory(hits: AlgoliaCategoryHit[]) {
 
 export function useAlgoliaCategoryResults() {
   const { hits, results } = useHits<AlgoliaCategoryHit>()
-  const categories = hitToCategory(hits)
+  const { data } = useQuery(StoreConfigDocument)
+  const categories = hitToCategory(hits, data?.storeConfig?.category_url_suffix)
   return { categories, search: results?.query }
 }

package/hooks/useAlgoliaPageResults.ts

@@ -4,10 +4,11 @@ import { AlgoliaPageHit } from '../lib/types'
 function hitToPage(hits: AlgoliaPageHit[]) {
   return hits.map((h) => {
     const urlSplit = h.url.split('/')
-    const url = urlSplit.reduce((prev, curr, currIndex) => {
+    const prep = urlSplit.reduce((prev, curr, currIndex) => {
       if (currIndex > 2) return `${prev}/${curr}`
       return ''
     })
+    const url = prep.substring(1, prep.length)
     return {
       objectID: h.objectID,
       name: h.name,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/algolia-search",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.2.0-canary.55",
+  "version": "6.2.0-canary.56",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,20 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.55",
-    "@graphcommerce/next-config": "^6.2.0-canary.55",
-    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.55",
-    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.55"
+    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.56",
+    "@graphcommerce/next-config": "^6.2.0-canary.56",
+    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.56",
+    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.56"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "6.2.0-canary.55",
-    "@graphcommerce/ecommerce-ui": "6.2.0-canary.55",
-    "@graphcommerce/magento-search": "6.2.0-canary.55",
-    "@graphcommerce/next-config": "^6.2.0-canary.55",
-    "@graphcommerce/next-ui": "6.2.0-canary.55",
-    "@graphcommerce/magento-product": "6.2.0-canary.55",
-    "@graphcommerce/graphql-mesh": "6.2.0-canary.55",
-    "@graphcommerce/magento-store": "6.2.0-canary.55",
+    "@graphcommerce/graphql": "6.2.0-canary.56",
+    "@graphcommerce/ecommerce-ui": "6.2.0-canary.56",
+    "@graphcommerce/magento-search": "6.2.0-canary.56",
+    "@graphcommerce/next-config": "^6.2.0-canary.56",
+    "@graphcommerce/next-ui": "6.2.0-canary.56",
+    "@graphcommerce/magento-product": "6.2.0-canary.56",
+    "@graphcommerce/graphql-mesh": "6.2.0-canary.56",
+    "@graphcommerce/magento-store": "6.2.0-canary.56",
     "algoliasearch": "^4.15.0",
     "react-instantsearch-hooks-web": "^6.41.0"
   },

package/plugins/AlgoliaPageSearchResults.tsx

@@ -17,6 +17,7 @@ function PageHits() {
     <>
       {pages.map((page) => (
         <CategorySearchResult
+          key={page.objectID}
           breadcrumbs={[
             {
               category_uid: page.objectID,

package/plugins/AlgoliaSearchContextPlugin.tsx

@@ -12,7 +12,7 @@ export const ifConfig: IfConfig = 'algoliaApplicationId'
 const searchClient = algoliasearch(applicationId, searchOnlyApiKey)
 
 function AlgoliaSearchContextPlugin(props: PluginProps<SearchContextProps>) {
-  const { Prev, serverProps, ...rest } = props
+  const { Prev, serverProps, rendersInsideNextjs = true, ...rest } = props
   const searchIndex = useAlgoliaSearchIndexConfig('_products')?.searchIndex
 
   if (!searchIndex)
@@ -23,7 +23,7 @@ function AlgoliaSearchContextPlugin(props: PluginProps<SearchContextProps>) {
   return (
     <InstantSearchSSRProvider {...(typeof serverProps === 'object' ? serverProps : {})}>
       <InstantSearch searchClient={searchClient} indexName={searchIndex}>
-        <Prev {...rest} />
+        {rendersInsideNextjs && <Prev {...rest} />}
       </InstantSearch>
     </InstantSearchSSRProvider>
   )

package/plugins/AlgoliaSearchFieldPlugin.tsx

@@ -7,8 +7,7 @@ export const exported = '@graphcommerce/magento-search'
 export const ifConfig: IfConfig = 'algoliaApplicationId'
 
 function AlgoliaSearchFieldPlugin(props: PluginProps<SearchFormProps>) {
-  const { search } = props
-  return <SearchBox defaultValue={search} />
+  return <SearchBox {...props} />
 }
 
 export const Plugin = AlgoliaSearchFieldPlugin