Update react-instantsearch-core dependency to react-instantsearch

package.json

@@ -12,7 +12,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-instantsearch-dom": "^6.40.4",
+    "react-instantsearch": "^7.13.3",
     "react-json-view": "^1.21.3",
     "react-lazy-load-image-component": "^1.6.0",
     "react-scripts": "5.0.1",

src/components/Body.js

@@ -1,6 +1,5 @@
 import React from 'react'
-import { InstantSearch } from 'react-instantsearch-dom'
-
+import { InstantSearch } from 'react-instantsearch'
 import { useMeilisearchClientContext } from 'context/MeilisearchClientContext'
 import Box from 'components/Box'
 import Header from 'components/Header/index'

src/components/Results/Highlight.js

@@ -1,27 +1,11 @@
 import React from 'react'
-import { connectHighlight } from 'react-instantsearch-dom'
+import { Highlight as InstantSearchHighLight } from 'react-instantsearch'
 import Typography from 'components/Typography'
 
-const Highlight = connectHighlight(
-  ({ highlight, attribute, hit, indexContextValue, ...props }) => {
-    const parsedHit = highlight({
-      highlightProperty: '_highlightResult',
-      attribute,
-      hit,
-    })
-
-    return (
-      <Typography {...props}>
-        {parsedHit.map((part, index) =>
-          part.isHighlighted ? (
-            <mark key={index}>{part.value}</mark>
-          ) : (
-            <span key={index}>{part.value}</span>
-          )
-        )}
-      </Typography>
-    )
-  }
+const Highlight = ({ attribute, hit, ...props }) => (
+  <Typography {...props}>
+    <InstantSearchHighLight hit={hit} attribute={attribute} />
+  </Typography>
 )
 
 export default Highlight

src/components/Results/InfiniteHits.js

@@ -1,11 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
-import { connectInfiniteHits } from 'react-instantsearch-dom'
-// import ReactJson from 'react-json-view'
-
-// import { jsonTheme } from 'theme'
+import { useInfiniteHits } from 'react-instantsearch'
 import Button from 'components/Button'
-// import Card from 'components/Card'
 import ScrollToTop from 'components/ScrollToTop'
 
 import Hit from './Hit'
@@ -46,7 +42,7 @@ const findImageKey = async (array) => {
   return imageField?.[0]
 }
 
-const InfiniteHits = connectInfiniteHits(({ hits, hasMore, refineNext }) => {
+const InfiniteHitsList = ({ hits, isLastPage, showMore }) => {
   const [imageKey, setImageKey] = React.useState(false)
 
   React.useEffect(() => {
@@ -55,33 +51,18 @@ const InfiniteHits = connectInfiniteHits(({ hits, hasMore, refineNext }) => {
     }
     getImageKey()
   }, [hits[0]])
-  // ({ hits, hasMore, refineNext, mode }) => {
   return (
     <div>
-      {/* {mode === 'fancy' ? ( */}
       <HitsList>
         {hits.map((hit, index) => (
           <Hit key={index} hit={hit} imageKey={imageKey} />
         ))}
       </HitsList>
-      {/* ) : (
-        <Card style={{ fontSize: 14, minHeight: 320 }}>
-          <ReactJson
-            src={hits}
-            name={null}
-            collapsed={2}
-            enableClipboard={false}
-            displayObjectSize={false}
-            displayDataTypes={false}
-            theme={jsonTheme}
-          />
-        </Card>
-      )} */}
-      {hasMore && (
+      {!isLastPage && (
         <Button
           size="small"
           variant="bordered"
-          onClick={refineNext}
+          onClick={showMore}
           style={{ margin: '0 auto', marginTop: 32 }}
         >
           Load more
@@ -90,6 +71,12 @@ const InfiniteHits = connectInfiniteHits(({ hits, hasMore, refineNext }) => {
       <ScrollToTop />
     </div>
   )
-})
+}
+
+const InfiniteHits = (props) => {
+  const inifiniteHitsApi = useInfiniteHits(props)
+
+  return <InfiniteHitsList {...inifiniteHitsApi} />
+}
 
 export default InfiniteHits

src/components/Results/index.js

@@ -1,33 +1,19 @@
 /* eslint-disable no-unused-vars */
 import React from 'react'
-import { connectStateResults, connectStats } from 'react-instantsearch-dom'
-
-// import { DocumentMedium, Picture } from 'components/icons'
+import { useStats, useInstantSearch } from 'react-instantsearch'
 import Box from 'components/Box'
 import Stats from 'components/Stats'
-// import Toggle from 'components/Toggle'
-// import useLocalStorage from 'hooks/useLocalStorage'
 import InfiniteHits from './InfiniteHits'
 import NoResultForRequest from './NoResultForRequest'
 
-// const Label1 = () => (
-//   <>
-//     <Picture style={{ marginRight: 8, height: 18 }} />
-//     Fancy
-//   </>
-// )
-
-// const Label2 = () => (
-//   <>
-//     <DocumentMedium style={{ marginRight: 8, height: 20 }} />
-//     Json
-//   </>
-// )
-
-const ConnectedStats = connectStats((props) => <Stats {...props} />)
+const ConnectedStats = (props) => {
+  const statsApi = useStats(props)
+  return <Stats {...statsApi} />
+}
 
-const Results = connectStateResults(({ searchResults }) => {
-  const hasResults = !!searchResults && searchResults?.nbHits !== 0
+const Results = () => {
+  const { results } = useInstantSearch()
+  const hasResults = !!results && results?.nbHits !== 0
 
   return (
     <>
@@ -38,20 +24,12 @@ const Results = connectStateResults(({ searchResults }) => {
         mb={56}
       >
         <div>
-          <ConnectedStats nbResults={searchResults?.hits.length} />
+          <ConnectedStats nbResults={results?.hits.length} />
         </div>
-        {/* <Toggle
-          onLabel={<Label1 />}
-          offLabel={<Label2 />}
-          ariaLabel="toggleMode"
-          initialValue={mode === 'fancy'}
-          onChange={(e) => setMode(e.target.checked ? 'fancy' : 'json')}
-        /> */}
       </Box>
-      {/* {hasResults ? <InfiniteHits mode={mode} /> : <NoResultForRequest />} */}
       {hasResults ? <InfiniteHits /> : <NoResultForRequest />}
     </>
   )
-})
+}
 
 export default Results

src/components/SearchBox.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { connectSearchBox } from 'react-instantsearch-dom'
+import { useSearchBox } from 'react-instantsearch'
 
 import Input from 'components/Input'
 import { SearchMedium } from 'components/icons'
@@ -10,29 +10,33 @@ const SearchIcon = styled(SearchMedium)`
   color: ${(p) => p.theme.colors.gray[2]};
 `
 
-const SearchBox = connectSearchBox(
-  ({ currentRefinement, refine, refreshIndexes, currentIndex }) => {
-    const [value, setValue] = React.useState(currentRefinement)
-
-    React.useEffect(() => {
-      if (currentIndex?.stats?.numberOfDocuments === 0) {
-        refreshIndexes()
-      }
-      refine(value)
-    }, [value])
-
-    return (
-      <Input
-        type="search"
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        clear={() => setValue('')}
-        placeholder="Search something"
-        icon={<SearchIcon />}
-        style={{ width: 520 }}
-      />
-    )
-  }
-)
+const SearchInput = ({ query, refine, refreshIndexes, currentIndex }) => {
+  const [value, setValue] = React.useState(query)
+
+  React.useEffect(() => {
+    if (currentIndex?.stats?.numberOfDocuments === 0) {
+      refreshIndexes()
+    }
+    refine(value)
+  }, [value])
+
+  return (
+    <Input
+      type="search"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      clear={() => setValue('')}
+      placeholder="Search something"
+      icon={<SearchIcon />}
+      style={{ width: 520 }}
+    />
+  )
+}
+
+const SearchBox = (props) => {
+  const searchBoxApi = useSearchBox(props)
+
+  return <SearchInput {...searchBoxApi} />
+}
 
 export default SearchBox