More debugging

searchlib/components/SearchApp/BasicSearchApp.jsx

@@ -1,51 +1,14 @@
 import React from 'react';
-import { useAtom } from 'jotai';
-
 import { SearchProvider, withSearch } from '@elastic/react-search-ui'; // ErrorBoundary,    WithSearch,
+
 import { AppConfigContext, SearchContext } from '@eeacms/search/lib/hocs';
-import { rebind, applyConfigurationSchema } from '@eeacms/search/lib/utils';
 import {
   onResultClick,
   onAutocompleteResultClick,
   bindOnAutocomplete,
   bindOnSearch,
 } from '@eeacms/search/lib/request';
-import { getDefaultFilters } from '@eeacms/search/lib/utils';
-import { resetFilters, resetSearch } from './request';
-import useFacetsWithAllOptions from './useFacetsWithAllOptions';
-import { SearchDriver } from '@elastic/search-ui';
-import { loadingFamily } from './state';
-
-function useWhyDidYouUpdate(name, props) {
-  // Get a mutable ref object where we can store props ...
-  // ... for comparison next time this hook runs.
-  const previousProps = React.useRef();
-  React.useEffect(() => {
-    if (previousProps.current) {
-      // Get all keys from previous and current props
-      const allKeys = Object.keys({ ...previousProps.current, ...props });
-      // Use this object to keep track of changed props
-      const changesObj = {};
-      // Iterate through keys
-      allKeys.forEach((key) => {
-        // If previous is different from current
-        if (previousProps.current[key] !== props[key]) {
-          // Add to changesObj
-          changesObj[key] = {
-            from: previousProps.current[key],
-            to: props[key],
-          };
-        }
-      });
-      // If changesObj not empty then output to console
-      if (Object.keys(changesObj).length) {
-        console.log('[why-did-you-update]', name, changesObj);
-      }
-    }
-    // Finally update previousProps with current props for next hook call
-    previousProps.current = props;
-  });
-}
+import useSearchApp from './useSearchApp';
 
 function SearchWrappers(SearchViewComponent) {
   function Wrapper(props) {
@@ -75,7 +38,7 @@ function SearchWrappers(SearchViewComponent) {
   return Wrapper;
 }
 
-function BasicSearchApp(props) {
+export default function BasicSearchApp(props) {
   const {
     appName,
     registry,
@@ -85,127 +48,45 @@ function BasicSearchApp(props) {
     searchViewComponent,
   } = props;
 
-  const appConfig = React.useMemo(
-    () => ({
-      ...applyConfigurationSchema(rebind(registry.searchui[appName])),
-      appName,
-    }),
-    [appName, registry],
-  );
-
-  const appConfigContext = React.useMemo(() => ({ appConfig, registry }), [
+  const {
+    mapContextToProps,
     appConfig,
+    driverInstance,
+    elasticConfig,
+    facetOptions,
+  } = useSearchApp({
+    appName,
     registry,
-  ]);
-
-  const loadingAtom = loadingFamily(appName);
-  const [isLoading, setIsLoading] = useAtom(loadingAtom);
-  // const [isLoading, setIsLoading] = React.useState(false);
-
-  const onSearch = React.useCallback(
-    async (state) => {
-      setIsLoading(true);
-      console.log('searching');
-      const res = await paramOnSearch(appConfig)(state);
-      console.log('search done', res);
-      setIsLoading(false);
-      return res;
-    },
-    [appConfig, paramOnSearch, setIsLoading],
-  );
-
-  const onAutocomplete = React.useMemo(() => paramOnAutocomplete(appConfig), [
-    appConfig,
+    paramOnSearch,
     paramOnAutocomplete,
-  ]);
-
-  const locationSearchTerm = React.useMemo(
-    () =>
-      typeof window !== 'undefined'
-        ? new URLSearchParams(window.location.search).get('q')
-        : null,
-    [],
-  );
-
-  const config = React.useMemo(
-    () => ({
-      ...appConfig,
-      onResultClick,
-      onAutocompleteResultClick,
-      onAutocomplete,
-      onSearch,
-      initialState: {
-        resultsPerPage: appConfig.resultsPerPage || 20,
-        ...(locationSearchTerm
-          ? { filters: getDefaultFilters(appConfig) }
-          : {}),
-      },
-    }),
-    [appConfig, onAutocomplete, onSearch, locationSearchTerm],
-  );
-
-  const { facetOptions } = useFacetsWithAllOptions(appConfig);
-
-  const [driverInstance] = React.useState(
-    __CLIENT__ ? new SearchDriver(config) : null,
-  );
-
-  const mapContextToProps = React.useCallback(
-    (params) => {
-      const driver = driverInstance;
-      const searchContext = {
-        ...params,
-        driver,
-        facetOptions,
-      };
-      searchContext.resetFilters = resetFilters.bind({
-        appConfig,
-        searchContext,
-      });
-      searchContext.resetSearch = resetSearch.bind({
-        appConfig,
-        searchContext,
-        driver,
-      });
-      return searchContext;
-    },
-    [appConfig, driverInstance, facetOptions],
-  );
+  });
 
-  useWhyDidYouUpdate('BasicSearchApp', {
+  const appConfigContext = React.useMemo(() => ({ appConfig, registry }), [
     appConfig,
-    driverInstance,
-    facetOptions,
-    searchViewComponent,
-  });
+    registry,
+  ]);
 
   const WrappedSearchView = React.useMemo(() => {
-    console.log('WrappedSearchView redo');
     return withSearch(mapContextToProps)(SearchWrappers(searchViewComponent));
   }, [mapContextToProps, searchViewComponent]);
 
-  React.useEffect(() => () => console.log(''), []);
-
   React.useEffect(() => {
     console.log('mount basicsearchapp');
     return () => console.log('unmount basicsearchapp');
   }, []);
 
-  console.log('redraw basicsearchapp');
+  // console.log('redraw basicsearchapp', isLoading);
 
   return driverInstance ? (
-    <SearchProvider config={config} driver={driverInstance}>
+    <SearchProvider config={elasticConfig} driver={driverInstance}>
       <WrappedSearchView
         appConfig={appConfig}
         appConfigContext={appConfigContext}
         appName={appName}
         driver={driverInstance}
         facetOptions={facetOptions}
-        isLoading={isLoading}
         mode={mode}
       />
     </SearchProvider>
   ) : null;
 }
-
-export default React.memo(BasicSearchApp, () => true);

searchlib/components/SearchApp/SearchApp.jsx

@@ -8,6 +8,5 @@ export default function SearchApp(props) {
     console.log('mount searchapp');
     return () => console.log('unmount searchapp');
   }, []);
-  console.log('redraw searchapp');
   return <BasicSearchApp {...props} searchViewComponent={SearchView} />;
 }

searchlib/components/SearchApp/useSearchApp.js

@@ -0,0 +1,129 @@
+import React from 'react';
+
+import { useAtom } from 'jotai';
+import { SearchDriver } from '@elastic/search-ui';
+
+import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
+import {
+  getDefaultFilters,
+  rebind,
+  applyConfigurationSchema,
+} from '@eeacms/search/lib/utils';
+import {
+  onResultClick,
+  onAutocompleteResultClick,
+} from '@eeacms/search/lib/request';
+
+import { resetFilters, resetSearch } from './request';
+import useFacetsWithAllOptions from './useFacetsWithAllOptions';
+import { loadingFamily } from './state';
+
+function useSearchApp({
+  appName,
+  registry,
+  paramOnSearch,
+  paramOnAutocomplete,
+}) {
+  const appConfig = React.useMemo(
+    () => ({
+      ...applyConfigurationSchema(rebind(registry.searchui[appName])),
+      appName,
+    }),
+    [appName, registry],
+  );
+
+  const loadingAtom = loadingFamily(appName);
+  const [, setIsLoading] = useAtom(loadingAtom);
+
+  const onSearch = React.useCallback(
+    async (state) => {
+      setIsLoading(true);
+      console.log('searching', state);
+      const res = await paramOnSearch(appConfig)(state);
+      console.log('search done', res);
+      setIsLoading(false);
+      return res;
+    },
+    [appConfig, paramOnSearch, setIsLoading],
+  );
+
+  const onAutocomplete = React.useMemo(() => paramOnAutocomplete(appConfig), [
+    appConfig,
+    paramOnAutocomplete,
+  ]);
+
+  const locationSearchTerm = React.useMemo(
+    () =>
+      typeof window !== 'undefined'
+        ? new URLSearchParams(window.location.search).get('q')
+        : null,
+    [],
+  );
+
+  const elasticConfig = React.useMemo(
+    () => ({
+      ...appConfig,
+      onResultClick,
+      onAutocompleteResultClick,
+      onAutocomplete,
+      onSearch,
+      initialState: {
+        resultsPerPage: appConfig.resultsPerPage || 20,
+        ...(locationSearchTerm
+          ? { filters: getDefaultFilters(appConfig) }
+          : {}),
+      },
+      // debug: true,
+    }),
+    [appConfig, onAutocomplete, onSearch, locationSearchTerm],
+  );
+
+  const { facetOptions } = React.useState(useFacetsWithAllOptions(appConfig));
+
+  const [driverInstance] = React.useState(
+    __CLIENT__ ? new SearchDriver(elasticConfig) : null,
+  );
+
+  const mapContextToProps = React.useCallback(
+    (params) => {
+      const driver = driverInstance;
+      const searchContext = {
+        ...params,
+        driver,
+        facetOptions,
+      };
+      searchContext.resetFilters = resetFilters.bind({
+        appConfig,
+        searchContext,
+      });
+      searchContext.resetSearch = resetSearch.bind({
+        appConfig,
+        searchContext,
+        driver,
+      });
+      return searchContext;
+    },
+    [appConfig, driverInstance, facetOptions],
+  );
+
+  useWhyDidYouUpdate('BasicSearchApp', {
+    appName,
+    registry,
+    appConfig,
+    driverInstance,
+    facetOptions,
+    onAutocomplete,
+    onSearch,
+    locationSearchTerm,
+  });
+
+  return {
+    facetOptions,
+    mapContextToProps,
+    appConfig,
+    driverInstance,
+    elasticConfig,
+  };
+}
+
+export default useSearchApp;

searchlib/lib/hocs/useWhyDidYouUpdate.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export default function useWhyDidYouUpdate(name, props) {
+  // Get a mutable ref object where we can store props ...
+  // ... for comparison next time this hook runs.
+  const previousProps = React.useRef();
+  React.useEffect(() => {
+    if (previousProps.current) {
+      // Get all keys from previous and current props
+      const allKeys = Object.keys({ ...previousProps.current, ...props });
+      // Use this object to keep track of changed props
+      const changesObj = {};
+      // Iterate through keys
+      allKeys.forEach((key) => {
+        // If previous is different from current
+        if (previousProps.current[key] !== props[key]) {
+          // Add to changesObj
+          changesObj[key] = {
+            from: previousProps.current[key],
+            to: props[key],
+          };
+        }
+      });
+      // If changesObj not empty then output to console
+      if (Object.keys(changesObj).length) {
+        console.log('[why-did-you-update]', name, changesObj);
+      }
+    }
+    // Finally update previousProps with current props for next hook call
+    previousProps.current = props;
+  });
+}

searchlib/lib/request.js

@@ -45,5 +45,5 @@ export const bindOnSearch = (config) =>
       config,
     );
 
-    return { filters: state.filters, ...newState }; //{ ...state, ...newState };
+    return { filters: state.filters, ...newState };
   };