WIP

searchlib/components/Facets/Facet.jsx

@@ -22,6 +22,9 @@ const FacetContainer = (props) => {
     label,
     view,
     isFilterable = false,
+    onSelect,
+    onChange,
+    onRemove,
     ...rest
   } = props;
   const searchContext = useSearchContext();
@@ -66,12 +69,15 @@ const FacetContainer = (props) => {
       label={label}
       onRemove={(value) => {
         removeFilter(field, value, filterType);
+        onRemove && onRemove(field, value, filterType);
       }}
       onChange={(value) => {
         setFilter(field, value, filterType);
+        onChange && onChange(field, value, filterType);
       }}
       onSelect={(value) => {
         addFilter(field, value, filterType);
+        onSelect && onSelect(field, value, filterType);
       }}
       options={facetValues}
       values={selectedValues}

searchlib/components/Result/HorizontalCardItem.jsx

@@ -61,6 +61,7 @@ const HorizontalCardItem = (props) => {
   const UniversalCard = registry.resolve['UniversalCard'].component;
 
   const item = {
+    '@id': result.href,
     title: (
       <>
         <ExternalLink href={result.href} title={result.title}>

searchlib/components/SearchApp/BasicSearchApp.jsx

@@ -89,6 +89,7 @@ export default function BasicSearchApp(props) {
     paramOnAutocomplete,
     initialState,
     uniqueId,
+    mode,
   });
   // console.log('driver', driverInstance);
 

searchlib/components/SearchApp/FacetApp.jsx

@@ -1,12 +1,15 @@
 /**
  * A Search app that wraps and provides access to a single facet
+ *
+ * Note, unlike BasicSearchApp, this is not a standalone search app,
+ * it needs to be executed in the context of a search app
  */
 import React from 'react';
-import { isEqual } from 'lodash';
-import useDeepCompareEffect from 'use-deep-compare-effect';
+// import { isEqual } from 'lodash';
+// import useDeepCompareEffect from 'use-deep-compare-effect';
 
 import { Facet as SUIFacet } from '@eeacms/search/components';
-import { useSearchContext } from '@eeacms/search/lib/hocs'; // , useSearchDriver
+import { useSearchContext, useSearchDriver } from '@eeacms/search/lib/hocs'; // , useSearchDriver
 
 // const sorter = (fa, fb) =>
 //   fa.field === fb.field ? 0 : fa.field < fb.field ? -1 : 0;
@@ -15,7 +18,7 @@ export default function FacetApp(props) {
   const searchContext = useSearchContext();
   const { appConfig, registry, field, onChange, value } = props;
   // const { field, onChange, value } = props;
-  // const driver = useSearchDriver();
+  const driver = useSearchDriver();
   // console.log({ searchContext, props, driver });
   const { filters, removeFilter, addFilter } = searchContext; // driver.state
 
@@ -63,15 +66,15 @@ export default function FacetApp(props) {
 
   // const sortedFilters = [...filters].sort(sorter);
 
-  useDeepCompareEffect(() => {
-    timerRef.current && clearTimeout(timerRef.current);
-    timerRef.current = setTimeout(() => {
-      if (!isEqual(activeValue, value)) {
-        // console.log('onchange', { activeValue, value });
-        onChange(activeValue);
-      }
-    }, 200);
-  }, [removeFilter, field, activeValue, value, onChange]);
+  // useDeepCompareEffect(() => {
+  //   timerRef.current && clearTimeout(timerRef.current);
+  //   timerRef.current = setTimeout(() => {
+  //     if (!isEqual(activeValue, value)) {
+  //       console.log('onchange', { activeValue, value });
+  //       onChange(activeValue);
+  //     }
+  //   }, 200);
+  // }, [removeFilter, field, activeValue, value, onChange]);
 
   React.useEffect(
     () => () => {
@@ -125,6 +128,21 @@ export default function FacetApp(props) {
       view={FacetComponent}
       filterType={localFilterType}
       onChangeFilterType={onChangeFilterType}
+      onRemove={() => {
+        const filter = driver.state.filters.find((f) => f.field === field);
+        onChange(filter);
+        console.log('onRemove', JSON.stringify(driver.state.filters));
+      }}
+      onChange={() => {
+        const filter = driver.state.filters.find((f) => f.field === field);
+        onChange(filter);
+        console.log('onChange', JSON.stringify(driver.state.filters));
+      }}
+      onSelect={() => {
+        const filter = driver.state.filters.find((f) => f.field === field);
+        onChange(filter);
+        console.log('onSelect', JSON.stringify(driver.state.filters));
+      }}
     />
   );
 }

searchlib/components/SearchApp/useSearchApp.js

@@ -46,6 +46,7 @@ export default function useSearchApp(props) {
     paramOnSearch,
     paramOnAutocomplete,
     initialState,
+    mode = 'view',
   } = props;
   // useWhyDidYouUpdate('sss', props);
 
@@ -100,9 +101,21 @@ export default function useSearchApp(props) {
       // we don't want to track the URL if our search app is configured as
       // a simple separate app (for ex. search input or landing page that
       // trampolines to another instance)
-      trackUrlState: appConfig.url ? false : appConfig.trackUrlState,
+      trackUrlState:
+        mode === 'edit'
+          ? false
+          : appConfig.url
+          ? false
+          : appConfig.trackUrlState,
     }),
-    [appConfig, onAutocomplete, onSearch, locationSearchTerm, initialState],
+    [
+      appConfig,
+      onAutocomplete,
+      onSearch,
+      locationSearchTerm,
+      initialState,
+      mode,
+    ],
   );
 
   const { facetOptions } = React.useState(useFacetsWithAllOptions(appConfig));

src/SearchBlock/SearchBlockView.jsx

@@ -24,7 +24,19 @@ function SearchBlockView(props) {
     path,
   } = props;
   const { appName = 'default' } = data;
-  const blacklist = ['slotFills', 'defaultFilters', 'defaultSort'];
+
+  const schemaFields = [
+    'availableFacets',
+    'defaultFacets',
+    'defaultFilters',
+    'showClusters',
+    'defaultSort',
+    'showFacets',
+    'showFilters',
+    'showSorting',
+  ]; // mutating data in these fields makes the search engine to lose facets
+
+  const blacklist = ['slotFills', ...(mode === 'edit' ? schemaFields : [])];
 
   const stableData = useDebouncedStableData(
     Object.assign(

src/SearchBlock/hocs.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { isEqual } from 'lodash';
 
-export const useDebouncedStableData = (data, timeout = 100) => {
+export const useDebouncedStableData = (data, timeout = 1000) => {
   const [stableData, setStableData] = React.useState(data);
   const timer = React.useRef();
 

src/SearchBlock/utils.js

@@ -64,6 +64,18 @@ const _applyBlockSettings = (config, appName, data, schema) => {
     });
   }
 
+  if (data.defaultFilters) {
+    const filters = data.defaultFilters
+      .map((f) => ({ [f.name]: f.value }))
+      .reduce((acc, cur) => ({ ...acc, ...cur }));
+    settings.facets.forEach((f) => {
+      if (filters[f.field]) {
+        f.default = filters[f.field];
+      }
+    });
+  }
+  // console.log(data, settings);
+
   return config;
 };