Merge pull request #1480 from GravityPDF/upgrade-js

Update JS libraries
GravityPDF · Nov 16, 2023 · 42833c2 · 42833c2
2 parents 81db0c4 + ebabf7d
commit 42833c2
Show file tree

Hide file tree

Showing 3 changed files with 782 additions and 810 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-dropzone": "^14.2.2",
-    "react-instantsearch-dom": "^6.29.0",
+    "react-instantsearch": "^7.0.0",
     "react-redux": "^8.0.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
@@ -20,8 +20,7 @@
     "redux-watch": "^1.2.0",
     "reselect": "^4.1.6",
     "sprintf-js": "^1.1.2",
-    "superagent": "^8.0.0",
-    "wait-on": "^7.0.1"
+    "superagent": "^8.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.18.6",
@@ -72,7 +71,6 @@
   "scripts": {
     "lint:js": "eslint \"src/assets/js/**/*.js\"",
     "lint:js:fix": "eslint \"src/assets/js/**/*.js\" --fix",
-
     "test:e2e": "cross-env NODE_ENV=test testcafe chrome tests/e2e --screenshots takeOnFails=true,fullPage=true --disable-multiple-windows --skip-js-errors",
     "test:e2e:headless": "cross-env NODE_ENV=test testcafe chrome:headless tests/e2e --screenshots takeOnFails=true,fullPage=true --disable-multiple-windows --skip-js-errors",
     "test:e2e:watch": "cross-env NODE_ENV=test testcafe chrome tests/e2e -L fullPage=true --disable-multiple-windows --skip-js-errors",
@@ -81,11 +79,9 @@
     "test:js": "jest --verbose",
     "test:js:coverage": "jest --coverage --verbose",
     "test:js:watch": "jest --watchAll",
-
     "prebuild:core-fonts": "bash bin/json-payload.sh https://api.github.com/repos/GravityPDF/mpdf-core-fonts/contents/ core-fonts.json",
     "build:dev": "cross-env NODE_ENV=development webpack --watch",
     "build:production": "cross-env NODE_ENV=production webpack",
-
     "wp-env": "wp-env",
     "env:install": "bash bin/install.sh"
   }

diff --git a/src/assets/js/react/components/Help/HelpContainer.js b/src/assets/js/react/components/Help/HelpContainer.js
@@ -1,7 +1,7 @@
 /* Dependencies */
-import React, { Component } from 'react'
+import React from 'react'
 import algoliasearch from 'algoliasearch/lite'
-import { InstantSearch, SearchBox, Configure, connectHits } from 'react-instantsearch-dom'
+import { Configure, InstantSearch, SearchBox, useHits, useInstantSearch } from 'react-instantsearch'
 /* Components */
 import DisplayResultContainer from './DisplayResultContainer'
 
@@ -17,67 +17,63 @@ import DisplayResultContainer from './DisplayResultContainer'
  *
  * @since 5.2
  */
-export class HelpContainer extends Component {
-  /**
-   * Render and group search result and then call the <DisplayResultContainer /> component
-   *
-   * @param hierarchy (object)
-   *
-   * @since 5.2
-   */
-  onHandleHit = ({ hits }) => {
-    /* Group into categories */
-    const groups = hits.reduce((groups, item) => ({
-      ...groups,
-      [item.hierarchy.lvl0]: [...(groups[item.hierarchy.lvl0] || []), [item.hierarchy, item.url, item.content]]
-    }), {})
+export const HelpContainer = () => {
+  const algoliaClient = algoliasearch('NKKEAC9I6I', '8c7d9c872c821829fac8251da2c9151c')
 
-    return <DisplayResultContainer groups={groups} />
-  }
+  return (
+    <InstantSearch
+      searchClient={algoliaClient}
+      indexName='gravitypdf'
+      future={{
+        preserveSharedStateOnUnmount: true
+      }}
+    >
+      <Configure
+        facetFilters={['version:v6']}
+        highlightPreTag='<mark>'
+        highlightPostTag='</mark>'
+        attributesToRetrieve={['hierarchy.lvl0', 'hierarchy.lvl1', 'hierarchy.lvl2', 'hierarchy.lvl3', 'hierarchy.lvl4', 'hierarchy.lvl5', 'hierarchy.lvl6', 'content', 'type', 'url']}
+        attributesToSnippet={['hierarchy.lvl1:5', 'hierarchy.lvl2:5', 'hierarchy.lvl3:5', 'hierarchy.lvl4:5', 'hierarchy.lvl5:5', 'hierarchy.lvl6:5', 'content:5']}
+        snippetEllipsisText='…'
+        distinct={1}
+      />
 
-  /**
-   * Renders search box component UI
-   *
-   * @since 5.2
-   */
-  render () {
-    const algoliaClient = algoliasearch('NKKEAC9I6I', '8c7d9c872c821829fac8251da2c9151c')
-    /* Prevent search for initial load */
-    const searchClient = {
-      search (requests) {
-        /* Don't display any results if the query is empty */
-        if (requests[0].params.query === '') {
-          return
-        }
-        return algoliaClient.search(requests)
-      }
-    }
-    const CustomHits = connectHits(this.onHandleHit)
+      <SearchBox
+        placeholder={GFPDF.searchBoxPlaceHolderText}
+        translations={{
+          submitButtonTitle: GFPDF.searchBoxSubmitTitle,
+          resetButtonTitle: GFPDF.searchBoxResetTitle
+        }}
+        autoFocus
+      />
 
-    return (
-      <InstantSearch searchClient={searchClient} indexName='gravitypdf'>
-        <Configure
-          facetFilters={['version:v6']}
-          highlightPreTag='<mark>'
-          highlightPostTag='</mark>'
-          attributesToRetrieve={['hierarchy.lvl0', 'hierarchy.lvl1', 'hierarchy.lvl2', 'hierarchy.lvl3', 'hierarchy.lvl4', 'hierarchy.lvl5', 'hierarchy.lvl6', 'content', 'type', 'url']}
-          attributesToSnippet={['hierarchy.lvl1:5', 'hierarchy.lvl2:5', 'hierarchy.lvl3:5', 'hierarchy.lvl4:5', 'hierarchy.lvl5:5', 'hierarchy.lvl6:5', 'content:5']}
-          snippetEllipsisText='…'
-        />
+      <EmptyQueryBoundary fallback={null}>
+        <Hits />
+      </EmptyQueryBoundary>
+    </InstantSearch>
+  )
+}
 
-        <SearchBox
-          translations={{
-            submitTitle: GFPDF.searchBoxSubmitTitle,
-            resetTitle: GFPDF.searchBoxResetTitle,
-            placeholder: GFPDF.searchBoxPlaceHolderText
-          }}
-          autofocus
-        />
+function EmptyQueryBoundary ({ children, fallback }) {
+  const { indexUiState } = useInstantSearch()
 
-        <CustomHits />
-      </InstantSearch>
-    )
+  if (!indexUiState.query) {
+    return fallback
   }
+
+  return children
+}
+
+function Hits (props) {
+  const { hits } = useHits(props)
+
+  /* Group into categories */
+  const groups = hits.reduce((groups, item) => ({
+    ...groups,
+    [item.hierarchy.lvl0]: [...(groups[item.hierarchy.lvl0] || []), [item.hierarchy, item.url, item.content]]
+  }), {})
+
+  return <DisplayResultContainer groups={groups} />
 }
 
 export default HelpContainer