Checkpoint

searchlib/components/Facets/Unconnected/MultiTermFacet.jsx

@@ -91,7 +91,7 @@ const MultiTermFacetViewComponent = (props) => {
     filterType = 'any',
   } = props;
 
-  console.log('optiosn', options);
+  // console.log('optiosn', options);
 
   const filterTypes = [
     { key: 2, text: 'Match any', value: 'any' },

searchlib/components/SearchApp/FacetApp.jsx

@@ -1,6 +1,11 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { Facet as SUIFacet } from '@eeacms/search/components';
-import { useSearchContext, useAppConfig } from '@eeacms/search/lib/hocs';
+import {
+  useSearchContext,
+  useAppConfig,
+  useSearchDriver,
+} from '@eeacms/search/lib/hocs';
 import BasicSearchApp from './BasicSearchApp';
 import { atom, useAtom } from 'jotai';
 import { atomFamily } from 'jotai/utils';
@@ -17,7 +22,7 @@ function BoostrapFacetView(props) {
   // const { appConfig, registry } = props;
   const { appConfig, registry } = useAppConfig();
   const searchContext = useSearchContext();
-  console.log('searchContext', searchContext);
+  // console.log('searchContext', searchContext);
 
   const { filters } = searchContext;
 
@@ -37,43 +42,56 @@ function BoostrapFacetView(props) {
 
   const filterAtom = filterFamily(field);
   const [savedFilters, setSavedFilters] = useAtom(filterAtom);
+  // const driver = useSearchDriver();
+  // console.log('driver', driver);
 
-  useDeepCompareEffect(() => {
-    const activeFilter = filters?.find((filter) => filter.field === field);
-    if (value && !activeFilter) {
-      console.log('setting filter', value);
-      searchContext.setFilter(value.field, value.values, value.type);
-    }
-  }, [value, filters, field, searchContext]);
+  // useDeepCompareEffect(() => {
+  //   const activeFilter = filters?.find((filter) => filter.field === field);
+  //   if (value && !activeFilter) {
+  //     console.log('setting filter', {
+  //       value,
+  //       filters,
+  //       activeFilter,
+  //       field,
+  //       searchContext,
+  //     });
+  //
+  //     ReactDOM.unstable_batchedUpdates(() =>
+  //       value.values.forEach((v) =>
+  //         searchContext.setFilter(value.field, v, value.type),
+  //       ),
+  //     );
+  //   }
+  // }, [value, filters, field, searchContext]);
 
-  React.useEffect(() => {
-    if (!isEqual(filters, savedFilters)) {
-      setSavedFilters(filters);
-      const newValue = filters?.find((filter) => filter.field === field);
-
-      if (newValue && !isEqual(value, newValue)) {
-        console.log('onchange useeffect', {
-          value,
-          newValue,
-          filters,
-          savedFilters,
-        });
-        onChange(newValue);
-        // facetSearchContext.setFilter(value.field, value.values, value.type);
-        // facetSearchContext.applySearch();
-      } else {
-        searchContext.removeFilter(field);
-      }
-    }
-  }, [
-    field,
-    filters,
-    onChange,
-    savedFilters,
-    setSavedFilters,
-    value,
-    searchContext,
-  ]);
+  // React.useEffect(() => {
+  //   if (!isEqual(filters, savedFilters)) {
+  //     setSavedFilters(filters);
+  //     const newValue = filters?.find((filter) => filter.field === field);
+  //
+  //     if (newValue && !isEqual(value, newValue)) {
+  //       // console.log('onchange useeffect', {
+  //       //   value,
+  //       //   newValue,
+  //       //   filters,
+  //       //   savedFilters,
+  //       // });
+  //       onChange(newValue);
+  //       // facetSearchContext.setFilter(value.field, value.values, value.type);
+  //       // facetSearchContext.applySearch();
+  //     } else {
+  //       searchContext.removeFilter(field);
+  //     }
+  //   }
+  // }, [
+  //   field,
+  //   filters,
+  //   onChange,
+  //   savedFilters,
+  //   setSavedFilters,
+  //   value,
+  //   searchContext,
+  // ]);
 
   return (
     <SUIFacet

searchlib/lib/hocs/index.js

@@ -9,3 +9,4 @@ export { default as useWindowDimensions } from './useWindowDimensions';
 export { default as useOutsideClick } from './useOutsideClick';
 export { default as usePrevious } from './usePrevious';
 export { default as useProxiedSearchContext } from './useProxiedSearchContext';
+export { default as useSearchDriver } from './useSearchDriver';

searchlib/lib/hocs/useSearchDriver.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SearchContext } from '@elastic/react-search-ui';
+
+export default function useSearchDriver() {
+  const context = React.useContext(SearchContext);
+  return context ? context.driver : null;
+}

searchlib/lib/search/helpers.js

@@ -70,7 +70,7 @@ export function markSelectedFacetValuesFromFilters(
   const facetValues = facet.data;
   const filterValuesForField =
     findFilterValues(filters, fieldName, filterType) || [];
-  console.log({ facetValues, filterValuesForField });
+  // console.log({ facetValues, filterValuesForField });
   return {
     ...facet,
     data: facetValues.map((facetValue) => {
@@ -99,7 +99,7 @@ function getFilterValueDisplay(filterValue) {
  * @param {FilterValue} filterValue2
  */
 export function doFilterValuesMatch(filterValue1, filterValue2) {
-  console.log({ filterValue1, filterValue2 });
+  // console.log({ filterValue1, filterValue2 });
   if (filterValue1?.name || filterValue2?.name)
     // If two filters have matching names, then they are the same filter, there
     // is no need to do a more expensive deep equal comparison.

src/SearchBlock/SearchBlockView.jsx

@@ -47,6 +47,8 @@ function SearchBlockView(props) {
 
   useWhyDidYouUpdate('Variation', { Variation });
 
+  // TODO: why the double rendering?
+
   return (
     <div>
       {mode !== 'view' && 'EEA Semantic Search block'}

src/SearchBlock/templates/FullView.jsx

@@ -11,7 +11,6 @@ const overlayStyle = {
 
 function FullView(props) {
   const { appName, mode } = props;
-  console.log('children', props.children);
 
   // TODO: (about bodyclass) this is a hack, please solve it properly
 

src/SearchBlock/templates/SearchResultsView.jsx

@@ -101,7 +101,7 @@ SearchResultsView.schemaEnhancer = ({ schema, formData }) => {
   };
   schema.properties.defaultFilters = {
     title: 'Default filters',
-    widget: 'object_list',
+    widget: 'searchlib_facets',
     schema: FilterSchema({ formData }),
     schemaExtender: (schema) => schema,
   };

src/SearchBlock/widgets/FacetsWidget.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ObjectListWidget } from '@plone/volto/components';
+import { isEqual } from 'lodash';
+import { useSearchDriver } from '@eeacms/search/lib/hocs';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+
+const sorter = (fa, fb) =>
+  fa.field === fb.field ? 0 : fa.field < fb.field ? -1 : 0;
+
+export default function FacetsWidget(props) {
+  const { value } = props; // , onChange, id
+  const driver = useSearchDriver();
+  let filters, sortedFilters, sortedFilterValue;
+
+  if (driver) {
+    filters = driver.state.filters;
+    sortedFilters = [...filters].sort(sorter);
+    sortedFilterValue = value.map(({ value }) => value).sort(sorter);
+    console.log({ sortedFilterValue, sortedFilters, filters });
+  }
+
+  const filtersAreEqual = isEqual(sortedFilterValue, sortedFilters);
+
+  React.useEffect(() => {
+    if (driver && !filtersAreEqual) {
+      driver._setState({ filters: sortedFilterValue });
+      console.log(
+        'settingvalue FacetsWidget',
+        sortedFilterValue,
+        sortedFilters,
+      );
+    }
+  }, [sortedFilters, sortedFilterValue, driver, filtersAreEqual]);
+
+  return <ObjectListWidget {...props} />;
+}

src/index.js

@@ -11,13 +11,15 @@ import {
   LandingPageView,
   SearchResultsView,
 } from './SearchBlock/templates';
-import FacetValueWidget from './SearchBlock/FacetValueWidget';
 
-import SelectWidget from './SearchBlock/SelectWidget';
+import FacetValueWidget from './SearchBlock/widgets/FacetValueWidget';
+import FacetsWidget from './SearchBlock/widgets/FacetsWidget';
+import SelectWidget from './SearchBlock/widgets/SelectWidget';
 
 const applyConfig = (config) => {
   config.widgets.id.qa_queryTypes = SelectWidget;
   config.widgets.widget.facet_value = FacetValueWidget;
+  config.widgets.widget.searchlib_facets = FacetsWidget;
   config.settings.searchlib = registry;
 
   config.blocks.blocksConfig.searchlib = {