feat(react-instantsearch): update routing basic example (#317)

algolia · Nov 3, 2021 · e4d6de6 · e4d6de6
1 parent ecec619
commit e4d6de6
Show file tree

Hide file tree

Showing 4 changed files with 171 additions and 134 deletions.
diff --git a/React InstantSearch/routing-basic/package.json b/React InstantSearch/routing-basic/package.json
@@ -9,7 +9,7 @@
     "lint:fix": "npm run lint -- --fix"
   },
   "dependencies": {
-    "algoliasearch": "3.33.0",
+    "algoliasearch": "4.11.0",
     "qs": "6.7.0",
     "react": "16.8.6",
     "react-dom": "16.8.6",

diff --git a/React InstantSearch/routing-basic/src/App.js b/React InstantSearch/routing-basic/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useRef, useState } from 'react';
 import {
   InstantSearch,
   Hits,
@@ -12,83 +12,65 @@ import qs from 'qs';
 import PropTypes from 'prop-types';
 import './App.css';
 
-const DEBOUNCE_TIME = 700;
+const DEBOUNCE_TIME = 400;
 const searchClient = algoliasearch(
   'latency',
   '6be0576ff61c053d5f9a3225e2a90f76'
 );
 
 const createURL = state => `?${qs.stringify(state)}`;
 
-const searchStateToUrl = (props, searchState) =>
-  searchState ? `${props.location.pathname}${createURL(searchState)}` : '';
+const searchStateToUrl = (location, searchState) =>
+  searchState ? `${location.pathname}${createURL(searchState)}` : '';
 
 const urlToSearchState = location => qs.parse(location.search.slice(1));
 
-class App extends Component {
-  state = {
-    searchState: urlToSearchState(this.props.location),
-    lastLocation: this.props.location,
-  };
+export function App({ location, history }) {
+  const [searchState, setSearchState] = useState(urlToSearchState(location));
+  const debouncedSetStateRef = useRef(null);
 
-  static getDerivedStateFromProps(props, state) {
-    if (props.location !== state.lastLocation) {
-      return {
-        searchState: urlToSearchState(props.location),
-        lastLocation: props.location,
-      };
-    }
+  function onSearchStateChange(updatedSearchState) {
+    clearTimeout(debouncedSetStateRef.current);
 
-    return null;
-  }
-
-  onSearchStateChange = searchState => {
-    clearTimeout(this.debouncedSetState);
-
-    this.debouncedSetState = setTimeout(() => {
-      this.props.history.push(
-        searchStateToUrl(this.props, searchState),
-        searchState
-      );
+    debouncedSetStateRef.current = setTimeout(() => {
+      history.push(searchStateToUrl(location, updatedSearchState));
     }, DEBOUNCE_TIME);
 
-    this.setState({ searchState });
-  };
+    setSearchState(updatedSearchState);
+  }
 
-  render() {
-    return (
-      <div className="container">
-        <InstantSearch
-          searchClient={searchClient}
-          indexName="instant_search"
-          searchState={this.state.searchState}
-          onSearchStateChange={this.onSearchStateChange}
-          createURL={createURL}
-        >
-          <div className="search-panel">
-            <div className="search-panel__filters">
-              <RefinementList attribute="brand" />
-            </div>
+  return (
+    <div className="container">
+      <InstantSearch
+        searchClient={searchClient}
+        indexName="instant_search"
+        searchState={searchState}
+        onSearchStateChange={onSearchStateChange}
+        createURL={createURL}
+      >
+        <div className="search-panel">
+          <div className="search-panel__filters">
+            <RefinementList attribute="brand" />
+          </div>
 
-            <div className="search-panel__results">
-              <SearchBox className="searchbox" placeholder="Search" />
-              <Hits hitComponent={Hit} />
+          <div className="search-panel__results">
+            <SearchBox className="searchbox" placeholder="Search" />
+            <Hits hitComponent={Hit} />
 
-              <div className="pagination">
-                <Pagination />
-              </div>
+            <div className="pagination">
+              <Pagination />
             </div>
           </div>
-        </InstantSearch>
-      </div>
-    );
-  }
+        </div>
+      </InstantSearch>
+    </div>
+  );
 }
 
-function Hit(props) {
+function Hit({ hit }) {
   return (
     <div>
-      <Highlight attribute="name" hit={props.hit} />
+      <Highlight attribute="name" hit={hit} />
     </div>
   );
 }
@@ -103,5 +85,3 @@ App.propTypes = {
   }),
   location: PropTypes.object.isRequired,
 };
-
-export default App;
diff --git a/React InstantSearch/routing-basic/src/index.js b/React InstantSearch/routing-basic/src/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { App } from './App';
+import './index.css';
 
 ReactDOM.render(
   <Router>