Checkpoint

searchlib/components/SearchApp/BasicSearchApp.jsx

@@ -57,6 +57,7 @@ export default function BasicSearchApp(props) {
     paramOnAutocomplete = bindOnAutocomplete,
     searchViewComponent,
     initialState,
+    uniqueId,
     ...rest
   } = props;
 
@@ -72,6 +73,7 @@ export default function BasicSearchApp(props) {
     paramOnSearch,
     paramOnAutocomplete,
     initialState,
+    uniqueId,
   });
 
   const mappedWithSearch = React.useMemo(() => withSearch(mapContextToProps), [

searchlib/components/SearchApp/LandingPageApp.jsx

@@ -33,6 +33,10 @@ function BoostrapLandingPageView(props) {
 
 export default function LandingPageApp(props) {
   return (
-    <BasicSearchApp {...props} searchViewComponent={BoostrapLandingPageView} />
+    <BasicSearchApp
+      {...props}
+      uniqueId="landingPage"
+      searchViewComponent={BoostrapLandingPageView}
+    />
   );
 }

searchlib/components/SearchApp/state.js

@@ -8,9 +8,10 @@ export const loadingFamily = atomFamily(
 );
 
 export const driverFamily = atomFamily(
-  ({ elasticConfig, appName }) => {
+  ({ elasticConfig, appName, uniqueId }) => {
     const driver = __CLIENT__ ? new SearchDriver(elasticConfig) : null;
+    // console.log('new driver', elasticConfig, appName, uniqueId);
     return atom(driver);
   },
-  (a, b) => a.appName === b.appName,
+  (a, b) => `${a.appName}-${a.uniqueId}` === `${b.appName}-${b.uniqueId}`,
 );

searchlib/components/SearchApp/useSearchApp.js

@@ -17,8 +17,8 @@ import useFacetsWithAllOptions from './useFacetsWithAllOptions';
 import { loadingFamily, driverFamily } from './state';
 // import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
 
-export function useSearchDriver({ elasticConfig, appName }) {
-  const driverAtom = driverFamily({ elasticConfig, appName });
+export function useStoredSearchDriver({ elasticConfig, appName, uniqueId }) {
+  const driverAtom = driverFamily({ elasticConfig, appName, uniqueId });
   const driver = useAtomValue(driverAtom);
 
   React.useEffect(() => {
@@ -34,6 +34,7 @@ export default function useSearchApp({
   paramOnSearch,
   paramOnAutocomplete,
   initialState,
+  uniqueId,
 }) {
   const appConfig = React.useMemo(
     () => ({
@@ -95,7 +96,11 @@ export default function useSearchApp({
 
   const { facetOptions } = React.useState(useFacetsWithAllOptions(appConfig));
 
-  const driverInstance = useSearchDriver({ elasticConfig, appName });
+  const driverInstance = useStoredSearchDriver({
+    elasticConfig,
+    appName,
+    uniqueId,
+  });
 
   const mapContextToProps = React.useCallback(
     (params) => {

searchlib/components/SearchView/FilterAsideContentView.jsx

@@ -103,7 +103,7 @@ export const FilterAsideContentView = (props) => {
 
         {children.length === 0 && !isLoading && wasSearched && <NoResults />}
 
-        {current === 1 ? <AnswerBox /> : ''}
+        {/* {current === 1 ? <AnswerBox /> : ''} */}
 
         {<ResultViewComponent>{children}</ResultViewComponent>}
 

searchlib/components/SearchView/SearchView.jsx

@@ -30,7 +30,9 @@ export const SearchView = (props) => {
 
   const Layout = registry.resolve[appConfig.layoutComponent].component;
 
-  const searchedTerm = driver.URLManager.getStateFromURL().searchTerm;
+  const searchedTerm = driver.URLManager // URLManager doesn't exist if not trackStateURL
+    ? driver.URLManager.getStateFromURL().searchTerm
+    : null;
 
   const wasInteracted = !!(
     searchedTerm ||

searchlib/lib/serialize.js

@@ -0,0 +1,85 @@
+// copied from @elastic/search-ui, as it's not exported
+
+import queryString from 'qs';
+
+function isTypeNumber(value) {
+  return value !== undefined && value !== null && typeof value === 'number';
+}
+function isTypeBoolean(value) {
+  return value && typeof value === 'boolean';
+}
+function toBoolean(value) {
+  if (value === 'true') return true;
+  if (value === 'false') return false;
+  throw new Error('Invalid type parsed as Boolean value');
+}
+
+/* Encoder for qs library which preserve number types on the URL. Numbers
+are padded with "n_{number}_n", and booleans with "b_{boolean}_b"*/
+const preserveTypesEncoder = {
+  encode(value, encode) {
+    if (isTypeNumber(value)) {
+      return `n_${value}_n`;
+    }
+    if (isTypeBoolean(value)) {
+      return `b_${value}_b`;
+    }
+    return encode(value);
+  },
+  decode(value, decode) {
+    //eslint-disable-next-line
+        if (/n_-?[\d\.]*_n/.test(value)) {
+      const numericValueString = value.substring(2, value.length - 2);
+      return Number(numericValueString);
+    }
+    if (/^b_(true|false)*_b$/.test(value)) {
+      const booleanValueString = value.substring(2, value.length - 2);
+      return toBoolean(booleanValueString);
+    }
+    return decode(value);
+  },
+};
+
+const qs = {
+  parse(string) {
+    return queryString.parse(string, {
+      ignoreQueryPrefix: true,
+      decoder: preserveTypesEncoder.decode,
+      arrayLimit: 1000,
+    });
+  },
+  stringify(object) {
+    return queryString.stringify(object, {
+      encoder: preserveTypesEncoder.encode,
+    });
+  },
+};
+
+function stateToParams({
+  searchTerm,
+  current,
+  filters,
+  resultsPerPage,
+  sortDirection,
+  sortField,
+  sortList,
+}) {
+  const params = {};
+  if (current > 1) params.current = current;
+  if (searchTerm) params.q = searchTerm;
+  if (resultsPerPage) params.size = resultsPerPage;
+  if (filters && filters.length > 0) {
+    params['filters'] = filters;
+  }
+  if (sortList && sortList.length > 0) {
+    params['sort'] = sortList;
+  } else if (sortField) {
+    params['sort-field'] = sortField;
+    params['sort-direction'] = sortDirection;
+  }
+  return params;
+}
+
+export function stateToQueryString(state) {
+  return qs.stringify(stateToParams(state));
+}

src/SearchBlock/templates/LandingPageView.jsx

@@ -4,10 +4,10 @@ import { useHistory } from 'react-router-dom';
 import { flattenToAppURL } from '@plone/volto/helpers';
 
 function LandingPageView(props) {
-  const history = useHistory();
   const { registry, appName } = props;
   const appConfig = registry.searchui[appName];
   const url = flattenToAppURL(appConfig.url || '');
+  const history = useHistory();
 
   return (
     <>
@@ -16,6 +16,7 @@ function LandingPageView(props) {
         onSubmitSearch={
           url
             ? (qs) => {
+                // window.location = `${url}?${qs}`;
                 history.push(`${url}?${qs}`);
               }
             : null