Merge pull request #448 from performant-software/feature/cdp68_bounding_box

CDP #68 - Bounding box

Author: dleadbetter

packages/core-data/src/components/PersistentSearchStateContextProvider.js

@@ -13,7 +13,12 @@ type Props = {
 
 const PersistentSearchStateContextProvider = (props: Props) => {
   const { geoSearch, infiniteHits, searchBox } = props;
-  const { cachedHits, observe, unobserve } = useProgressiveSearch(infiniteHits);
+  const {
+    cachedHits,
+    observe,
+    unobserve,
+    searching
+  } = useProgressiveSearch(infiniteHits);
 
   /**
    * Memoizes the context value.
@@ -31,8 +36,9 @@ const PersistentSearchStateContextProvider = (props: Props) => {
     geoSearch,
     searchBox,
     observe,
-    unobserve
-  }), [cachedHits, geoSearch, searchBox, observe, unobserve]);
+    unobserve,
+    searching
+  }), [cachedHits, geoSearch, searchBox, observe, unobserve, searching]);
 
   return (
     <PersistentSearchStateContext.Provider

packages/core-data/src/components/SearchResultsLayer.js

@@ -5,7 +5,7 @@ import { useMap } from '@peripleo/maplibre';
 import React, { useEffect, useMemo, useState } from 'react';
 import _ from 'underscore';
 import TypesenseUtils from '../utils/Typesense';
-import { useCachedHits, useSearchCompleted } from '../hooks/Typesense';
+import { useCachedHits, useSearching } from '../hooks/Typesense';
 
 type Props = {
   /**
@@ -32,17 +32,17 @@ type Props = {
    * Path to the geometry attribute for each result.
    */
   geometry: string,
-}
+};
 
 /**
  * This component renders a map layer for the search results from a Typesense search index.
  */
 const SearchResultsLayer = (props: Props) => {
   const [mapLoaded, setMapLoaded] = useState(false);
-  const [searchCompleted, setSearchCompleted] = useState(false);
 
   const hits = useCachedHits();
   const map = useMap();
+  const isSearching = useSearching();
 
   /**
    * Memo-ize the Typesense hits as a feature collection.
@@ -60,24 +60,21 @@ const SearchResultsLayer = (props: Props) => {
   const boundingBoxDependencies = [
     data,
     mapLoaded,
-    searchCompleted,
+    isSearching,
     props.boundingBoxData,
     props.boundingBoxOptions,
     props.buffer,
     props.fitBoundingBox
   ];
 
   useEffect(() => {
-    if (props.fitBoundingBox && data && mapLoaded && searchCompleted) {
+    if (props.fitBoundingBox && data && mapLoaded && !isSearching) {
       // Set the bounding box on the map
       const bbox = MapUtils.getBoundingBox(data, props.buffer);
 
       if (bbox) {
         map.fitBounds(bbox, props.boundingBoxOptions, props.boundingBoxData);
       }
-
-      // Reset search completed
-      setSearchCompleted(false);
     }
   }, boundingBoxDependencies);
 
@@ -97,11 +94,6 @@ const SearchResultsLayer = (props: Props) => {
     };
   }, [map]);
 
-  /**
-   * Sets the search completed state to true.
-   */
-  useSearchCompleted(() => setSearchCompleted(true), []);
-
   if (!data) {
     return null;
   }

packages/core-data/src/hooks/ProgressiveSearch.js

@@ -14,6 +14,7 @@ type OnCompleteCallback = (results: Array<SearchResult>) => void;
 
 const useProgressiveSearch = (infiniteHits, transformResults = null) => {
   const [cachedHits, setCachedHits] = useState(TypesenseUtils.createCachedHits([]));
+  const [searching, setSearching] = useState(false);
 
   const lastSearchState = useRef<any>();
   const callbacks = useRef<Array<OnCompleteCallback>>([]);
@@ -77,11 +78,13 @@ const useProgressiveSearch = (infiniteHits, transformResults = null) => {
   };
 
   useEffect(() => {
-    const { results } = infiniteHits;
-
-    const isFirstPage = results.page === 0;
+    const { isFirstPage, results } = infiniteHits;
     const hits = getHits(results);
 
+    if (isFirstPage) {
+      setSearching(true);
+    }
+
     // Add to cache and load next page
     if (isFirstPage && hasStateChanged(results._state, lastSearchState.current, true)) {
       setCachedHits(() => TypesenseUtils.createCachedHits(hits));
@@ -91,11 +94,9 @@ const useProgressiveSearch = (infiniteHits, transformResults = null) => {
   }, [infiniteHits.results]);
 
   useEffect(() => {
-    const { results } = infiniteHits;
+    const { isLastPage, results } = infiniteHits;
     const hits = getHits(results);
 
-    const isLastPage = results.page + 1 >= results.nbPages;
-
     if (!isLastPage && infiniteHits.showMore) {
       setTimeout(() => infiniteHits.showMore(), 25);
     } else if (hasStateChanged(results._state, lastSearchState.current)) {
@@ -105,10 +106,19 @@ const useProgressiveSearch = (infiniteHits, transformResults = null) => {
       });
     }
 
+    if (isLastPage) {
+      setSearching(false);
+    }
+
     lastSearchState.current = results._state;
   }, [cachedHits]);
 
-  return { cachedHits: cachedHits.hits, observe, unobserve };
+  return {
+    cachedHits: cachedHits.hits,
+    observe,
+    unobserve,
+    searching
+  };
 };
 
 export default useProgressiveSearch;

packages/core-data/src/hooks/Typesense.js

@@ -36,6 +36,11 @@ export const useSearchCompleted = (callback: ((hits: TypesenseSearchResult[]) =>
   }, deps);
 };
 
+export const useSearching = () => {
+  const { searching } = useContext(PersistentSearchStateContext);
+  return searching;
+};
+
 export const useGeoSearchToggle = () => {
   const { clearMapRefinement, isRefinedWithMap, refine } = useGeoSearch();
 

packages/core-data/src/index.js

@@ -77,7 +77,8 @@ export {
   useGeoSearch,
   useGeoSearchToggle,
   useSearchBox,
-  useSearchCompleted
+  useSearchCompleted,
+  useSearching
 } from './hooks/Typesense';
 
 // Services