Checkpoint

eea · Jan 5, 2023 · 22c1b44 · 22c1b44
1 parent 9e0bea6
commit 22c1b44
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 63 deletions.
diff --git a/searchlib/components/SearchApp/BasicSearchApp.jsx b/searchlib/components/SearchApp/BasicSearchApp.jsx
@@ -27,6 +27,7 @@ function applySearchWrappers(SearchViewComponent) {
     } = props;
 
     const [payload, update] = React.useState(appConfigContext);
+
     React.useEffect(() => () => console.log('unmount SearchWrappers'), []);
 
     return (
@@ -61,6 +62,26 @@ export default function BasicSearchApp(props) {
     ...rest
   } = props;
 
+  const ref = React.useRef();
+
+  React.useEffect(() => {
+    return () => console.log('Unmount BasicSearchApp');
+  }, []);
+
+  React.useEffect(() => {
+    ref.current = registry;
+  });
+
+  if (!(registry === ref.current))
+    console.log('BasicSearchApp not isSame', {
+      current: ref.current,
+      new: registry,
+    });
+
+  const [stableRegistry] = React.useState(registry);
+
+  useWhyDidYouUpdate('BasicSearchApp registry', registry.searchui.minimal);
+
   const {
     mapContextToProps,
     appConfig,
@@ -69,25 +90,26 @@ export default function BasicSearchApp(props) {
     facetOptions,
   } = useSearchApp({
     appName,
-    registry,
+    registry: stableRegistry,
     paramOnSearch,
     paramOnAutocomplete,
     initialState,
     uniqueId,
   });
+  // console.log('driver', driverInstance);
 
   const mappedWithSearch = React.useMemo(() => withSearch(mapContextToProps), [
     mapContextToProps,
   ]);
 
   const [stableContext, setStableContext] = React.useState({
     appConfig,
-    registry,
+    registry: stableRegistry,
   });
 
-  useDeepCompareEffect(() => {
-    setStableContext({ appConfig, registry });
-  }, [appConfig, registry]);
+  // useDeepCompareEffect(() => {
+  //   setStableContext({ appConfig, registry });
+  // }, [appConfig, registry]);
 
   const WrappedSearchView = React.useMemo(() => {
     return mappedWithSearch(applySearchWrappers(searchViewComponent));
@@ -97,7 +119,7 @@ export default function BasicSearchApp(props) {
     mapContextToProps,
     searchViewComponent,
     WrappedSearchView,
-    registry,
+    stableRegistry,
   });
 
   return driverInstance ? (

diff --git a/searchlib/components/SearchApp/FacetApp.jsx b/searchlib/components/SearchApp/FacetApp.jsx
@@ -47,8 +47,8 @@ export default function FacetApp(props) {
   // useDeepCompareEffect(() => {
   //   // on initializing the form, set the active value as filters
   //   const activeFilter = filters?.find((filter) => filter.field === field);
-  //   console.log('useDeep', activeFilter);
   //   if (value && !activeFilter) {
+  //     console.log('useDeep', activeFilter);
   //     const sortedFilters = [...filters, value].sort(sorter);
   //     driver._setState({ filters: sortedFilters });
   //   }
@@ -71,18 +71,16 @@ export default function FacetApp(props) {
         onChange(activeValue);
       }
     }, 200);
-
-    return () => {
-      timerRef.current && clearTimeout(timerRef.current);
-    };
-
-    // return () => {
-    //   console.log('removing filter', field);
-    //   // removeFilter(field); // when the Facet is removed, we remove the filter
-    // };
   }, [removeFilter, field, activeValue, value, onChange]);
 
-  React.useEffect(() => () => console.log('unmount', field), [field]);
+  React.useEffect(
+    () => () => {
+      removeFilter(field); // when the Facet is removed, we remove the filter
+      timerRef.current && clearTimeout(timerRef.current);
+      console.log('unmount', field);
+    },
+    [field, removeFilter],
+  );
 
   // React.useEffect(() => {
   //   const { plugins } = driver.events;

diff --git a/searchlib/components/SearchApp/SearchResultsApp.jsx b/searchlib/components/SearchApp/SearchResultsApp.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useViews, useSearchContext } from '@eeacms/search/lib/hocs';
 
 import BasicSearchApp from './BasicSearchApp';
+// import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
 
 function BootstrapSearchResultsView(props) {
   const { appConfig, registry, children } = props;
@@ -67,15 +68,38 @@ export default function SearchResultsApp(props) {
   const { defaultFilters, defaultSort = '' } = props;
   const [sortField, sortDirection] = defaultSort.split('|');
   const [initialState] = React.useState({
-    ...(defaultFilters?.length ? { filters: defaultFilters } : {}),
+    ...(defaultFilters?.length
+      ? {
+          filters: defaultFilters
+
+            ?.map((f) => (f.value ? f.value : undefined))
+            .filter((f) => !!f),
+        }
+      : {}),
     ...(defaultSort ? { sortField, sortDirection } : {}),
   }); // this makes the prop stable
 
-  React.useEffect(() => () => console.log('unmount SearchResultsApp'), []);
+  React.useEffect(() => {
+    return () => console.log('unmount SearchResultsApp');
+  }, []);
+
+  const ref = React.useRef();
+  const { registry } = props;
+
+  React.useEffect(() => {
+    ref.current = registry;
+  });
+
+  if (!(registry === ref.current))
+    console.log('SearchResultsApp isSame', ref.current, registry);
+
+  // useWhyDidYouUpdate('SearchResultsApp', { registry });
+  // console.log('redraw SearchResultsApp');
 
   return (
     <BasicSearchApp
       {...props}
+      registry={registry}
       wasInteracted={true}
       searchViewComponent={BootstrapSearchResultsView}
       initialState={initialState}

diff --git a/searchlib/components/SearchApp/useSearchApp.js b/searchlib/components/SearchApp/useSearchApp.js
@@ -1,7 +1,9 @@
 import React from 'react';
 
 import { useAtom } from 'jotai';
-import useDeepCompareEffect from 'use-deep-compare-effect';
+import useDeepCompareEffect, {
+  useDeepCompareEffectNoCheck,
+} from 'use-deep-compare-effect';
 
 import {
   getDefaultFilters,
@@ -17,7 +19,7 @@ import { resetFilters, resetSearch } from './request';
 import useFacetsWithAllOptions from './useFacetsWithAllOptions';
 import { loadingFamily } from './state';
 import { SearchDriver } from '@elastic/search-ui';
-// import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
+import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
 
 export function useStoredSearchDriver({ elasticConfig, appName, uniqueId }) {
   const [driver, setDriver] = React.useState(null);
@@ -26,28 +28,35 @@ export function useStoredSearchDriver({ elasticConfig, appName, uniqueId }) {
     setDriver(new SearchDriver(elasticConfig));
   }, [elasticConfig, appName]);
 
+  useWhyDidYouUpdate('setStoredSearchDriver', { elasticConfig, appName });
+
   React.useEffect(() => {
-    return () => driver && driver.tearDown();
+    return () => {
+      console.log('unmount useStoredSearchDriver');
+      driver && driver.tearDown();
+    };
   }, [driver]);
 
   return driver;
 }
 
-export default function useSearchApp({
-  appName,
-  registry,
-  paramOnSearch,
-  paramOnAutocomplete,
-  initialState,
-  uniqueId,
-}) {
-  const appConfig = React.useMemo(
-    () => ({
+export default function useSearchApp(props) {
+  const {
+    appName,
+    registry,
+    paramOnSearch,
+    paramOnAutocomplete,
+    initialState,
+  } = props;
+  useWhyDidYouUpdate('sss', props);
+
+  const appConfig = React.useMemo(() => {
+    console.log('redo appConfig');
+    return {
       ...applyConfigurationSchema(rebind(registry.searchui[appName])),
       appName,
-    }),
-    [appName, registry],
-  );
+    };
+  }, [appName, registry]);
 
   const loadingAtom = loadingFamily(appName);
   const [, setIsLoading] = useAtom(loadingAtom);
@@ -101,11 +110,21 @@ export default function useSearchApp({
 
   const { facetOptions } = React.useState(useFacetsWithAllOptions(appConfig));
 
-  const driverInstance = useStoredSearchDriver({
-    elasticConfig,
-    appName,
-    uniqueId,
-  });
+  const [driverInstance, setDriver] = React.useState(null);
+
+  useDeepCompareEffectNoCheck(() => {
+    if (!driverInstance) {
+      const driver = new SearchDriver(elasticConfig);
+      console.log('set driver', driver);
+      setDriver(driver);
+    }
+  }, [appName]);
+
+  // const driverInstance = useStoredSearchDriver({
+  //   elasticConfig,
+  //   appName,
+  //   uniqueId,
+  // });
 
   const mapContextToProps = React.useCallback(
     (params) => {
@@ -129,15 +148,26 @@ export default function useSearchApp({
     [appConfig, driverInstance, facetOptions],
   );
 
-  // useWhyDidYouUpdate('useSearchApp', {
-  //   appConfig,
-  //   driverInstance,
-  //   facetOptions,
-  // });
+  useWhyDidYouUpdate('useSearchApp', {
+    appConfig,
+    driverInstance,
+    facetOptions,
+    registry,
+    onAutocomplete,
+    onSearch,
+    locationSearchTerm,
+    initialState,
+  });
 
-  // React.useEffect(() => () => console.log('unmount useSearchApp', appName), [
-  //   appName,
-  // ]);
+  React.useEffect(() => {
+    return () => {
+      driverInstance && driverInstance.tearDown();
+    };
+  }, [driverInstance]);
+
+  React.useEffect(() => {
+    return () => console.log('unmount useSearchApp');
+  }, []);
 
   return {
     facetOptions,

diff --git a/src/SearchBlock/SearchBlockView.jsx b/src/SearchBlock/SearchBlockView.jsx
@@ -4,6 +4,7 @@ import { SearchBlockSchema } from './schema';
 import { applySchemaEnhancer, withBlockExtensions } from '@plone/volto/helpers';
 import { applyBlockSettings } from './utils';
 import { useDebouncedStableData } from './hocs';
+import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
 
 import './less/styles.less';
 
@@ -41,6 +42,7 @@ function SearchBlockView(props) {
   const registry = React.useMemo(() => {
     // TODO: this has the effect that the appConfig is never stable if the
     // schema changes, even if it's unrelated.
+    console.log('redo registry');
     const reg = applyBlockSettings(
       config.settings.searchlib,
       appName,
@@ -63,6 +65,14 @@ function SearchBlockView(props) {
     return reg;
   }, [appName, stableData, schema, mode]);
 
+  useWhyDidYouUpdate('SearchBlockView', {
+    registry,
+    stableData,
+    schema,
+    mode,
+    appName,
+  });
+
   const Variation = variation.view;
   // React.useEffect(() => () => console.log('unmount SearchBlockView'), []);
 
@@ -76,9 +86,7 @@ function SearchBlockView(props) {
         appName={appName}
         mode={mode}
         defaultSort={data.defaultSort}
-        defaultFilters={data.defaultFilters
-          ?.map((f) => (f.value ? f.value : undefined))
-          .filter((f) => !!f)}
+        defaultFilters={data.defaultFilters}
         onChangeSlotfill={onChangeSlotfill}
         onDeleteSlotfill={onDeleteSlotfill}
         onSelectSlotfill={onSelectSlotfill}

diff --git a/src/SearchBlock/templates/SearchResultsView.jsx b/src/SearchBlock/templates/SearchResultsView.jsx
@@ -5,6 +5,18 @@ import { SearchResultsApp } from '@eeacms/search';
 export default function SearchResultsView(props) {
   const { appName, mode } = props;
 
+  const ref = React.useRef();
+  const { registry } = props;
+
+  React.useEffect(() => {
+    ref.current = registry;
+  });
+
+  if (!(registry === ref.current))
+    console.log('SearchResultsView not isSame', ref.current, registry);
+
+  React.useEffect(() => () => console.log('unmount SearchResultsView'), []);
+
   return (
     <BodyClass className={`${appName}-view searchlib-page`}>
       <div className="searchlib-block">

diff --git a/src/SearchBlock/widgets/SortWidget.jsx b/src/SearchBlock/widgets/SortWidget.jsx
@@ -1,26 +1,20 @@
 import React from 'react';
 import { SelectWidget } from '@plone/volto/components';
-import { useSearchDriver } from '@eeacms/search/lib/hocs';
-import BasicSearchApp from '@eeacms/search/components/SearchApp/BasicSearchApp';
+import { useSearchContext } from '@eeacms/search/lib/hocs';
 
-function SortWidgetView(props) {
+export default function SortWidget(props) {
   const { onChange } = props;
-  const driver = useSearchDriver();
+  const searchContext = useSearchContext();
+  const { setSort } = searchContext;
 
   const handleOnChange = React.useCallback(
     (id, value) => {
       onChange(id, value);
       const [sortField, direction] = value.split('|');
-      if (driver) driver.setSort(sortField, direction);
+      setSort(sortField, direction);
     },
-    [onChange, driver],
+    [onChange, setSort],
   );
 
   return <SelectWidget {...props} onChange={handleOnChange} />;
 }
-
-function SortWidget(props) {
-  return <BasicSearchApp {...props} searchViewComponent={SortWidgetView} />;
-}
-
-export default SortWidget;