Fix loading landing page data

searchlib/components/LandingPage/TilesLandingPage.jsx

@@ -7,7 +7,7 @@ import { showFacetsAsideAtom } from '@eeacms/search/state';
 import { getFacetCounts } from './request';
 import buildStateFacets from '@eeacms/search/lib/search/state/facets';
 import { customOrder } from '@eeacms/search/lib/utils';
-import { landingPageDataAtom, isRequestedAtom } from './state';
+import { useLandingPageData, useLandingPageRequest } from './state';
 import { Icon, Term } from '@eeacms/search/components';
 
 const getFacetConfig = (sections, name) => {
@@ -37,6 +37,7 @@ const sortedTiles = (tiles, sectionConfig, appConfig) => {
 
 const LandingPage = (props) => {
   const { appConfig, children, setFilter, setSort } = props;
+  const { appName } = appConfig;
   // const facetsConfig = appConfig.facets;
 
   const {
@@ -53,8 +54,8 @@ const LandingPage = (props) => {
 
   const [, setShowFacets] = useAtom(showFacetsAsideAtom);
 
-  const [landingPageData, setLandingPageData] = useAtom(landingPageDataAtom);
-  const [isRequested, setIsRequested] = useAtom(isRequestedAtom);
+  const [landingPageData, setLandingPageData] = useLandingPageData(appName);
+  const [isRequested, setIsRequested] = useLandingPageRequest(appName);
 
   const getTiles = (maxPerSection) => {
     let result = landingPageData?.[activeSection]?.[0]?.data || [];

searchlib/components/LandingPage/state.js

@@ -1,5 +1,17 @@
-import { atom } from 'jotai';
+import { atom, useAtom } from 'jotai';
+import { atomFamily } from 'jotai/utils';
 
 // TODO: use a request family
-export const landingPageDataAtom = atom(null);
-export const isRequestedAtom = atom(null);
+export const landingPageRequestFamily = atomFamily(() => atom());
+
+export const useLandingPageRequest = (appName) => {
+  const loadingAtom = landingPageRequestFamily(appName);
+  return useAtom(loadingAtom);
+};
+
+export const landingPageDataFamily = atomFamily(() => atom());
+
+export const useLandingPageData = (appName) => {
+  const loadingAtom = landingPageDataFamily(appName);
+  return useAtom(loadingAtom);
+};

searchlib/components/SearchApp/state.js

@@ -1,7 +1,9 @@
-import { atom } from 'jotai';
+import { atom, useAtom } from 'jotai';
 import { atomFamily } from 'jotai/utils';
 
-export const loadingFamily = atomFamily(
-  () => atom(),
-  (a, b) => a.appName === b.appName,
-);
+export const loadingFamily = atomFamily(() => atom());
+
+export const useLoadingState = (appName) => {
+  const loadingAtom = loadingFamily(appName);
+  return useAtom(loadingAtom);
+};

searchlib/components/SearchApp/useSearchApp.js

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { useAtom } from 'jotai';
 import useDeepCompareEffect, {
   useDeepCompareEffectNoCheck,
 } from 'use-deep-compare-effect';
@@ -17,7 +16,7 @@ import {
 
 import { clearFilters, resetFilters, resetSearch } from './request';
 import useFacetsWithAllOptions from './useFacetsWithAllOptions';
-import { loadingFamily } from './state';
+import { useLoadingState } from './state';
 import { SearchDriver } from '@elastic/search-ui';
 // import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
 
@@ -58,8 +57,7 @@ export default function useSearchApp(props) {
     };
   }, [appName, registry]);
 
-  const loadingAtom = loadingFamily(appName);
-  const [, setIsLoading] = useAtom(loadingAtom);
+  const [, setIsLoading] = useLoadingState(appName);
 
   const onSearch = React.useCallback(
     async (state) => {
@@ -115,17 +113,11 @@ export default function useSearchApp(props) {
   useDeepCompareEffectNoCheck(() => {
     if (!driverInstance) {
       const driver = new SearchDriver(elasticConfig);
-      // console.log('set driver', driver);
+      // console.log('set driver', driver, appName);
       setDriver(driver);
     }
   }, [appName]);
 
-  // const driverInstance = useStoredSearchDriver({
-  //   elasticConfig,
-  //   appName,
-  //   uniqueId,
-  // });
-
   const mapContextToProps = React.useCallback(
     (params) => {
       const driver = driverInstance;

searchlib/components/SearchView/SearchView.jsx

@@ -86,12 +86,12 @@ export const SearchView = (props) => {
         appConfig={appConfig}
         header={
           <>
-            {/* {wasInteracted && ( */}
-            {/*   <a href={appConfig.landingPageURL} className="back-link"> */}
-            {/*     <Icon className="arrow left" /> */}
-            {/*     Back to search home */}
-            {/*   </a> */}
-            {/* )} */}
+            {wasInteracted && (
+              <a href={appConfig.landingPageURL} className="back-link">
+                <Icon className="arrow left" />
+                Back to search home
+              </a>
+            )}
             <RenderSlot
               {...props}
               searchState={searchState}

searchlib/index.js

@@ -22,7 +22,7 @@ export { default as SearchView } from './components/SearchView/SearchView';
 export { default as registry } from './registry';
 
 export {
-  isRequestedAtom,
-  landingPageDataAtom,
+  useLandingPageRequest,
+  useLandingPageData,
 } from './components/LandingPage/state';
 export { getFacetCounts } from './components/LandingPage/request';

src/SearchBlock/SearchBlockView.jsx

@@ -20,6 +20,8 @@ function SearchBlockView(props) {
     selectedSlotFill,
     properties,
     metadata,
+    location,
+    path,
   } = props;
   const { appName = 'default' } = data;
   const blacklist = ['slotFills', 'defaultFilters', 'defaultSort'];
@@ -73,6 +75,8 @@ function SearchBlockView(props) {
     appName,
   });
 
+  const key = `${location?.pathname || path}-${props.data?.appName}`;
+  // console.log('render searchblockview', key);
   const Variation = variation.view;
   // React.useEffect(() => () => console.log('unmount SearchBlockView'), []);
 
@@ -81,6 +85,7 @@ function SearchBlockView(props) {
       {mode !== 'view' && 'EEA Semantic Search block'}
       {/* {JSON.stringify(data.defaultFilters)} */}
       <Variation
+        key={key}
         slotFills={data.slotFills}
         registry={registry}
         appName={appName}

src/SearchBlock/templates/FullView.jsx

@@ -26,6 +26,7 @@ function FullView(props) {
 
   // TODO: (about bodyclass) this is a hack, please solve it properly
 
+  // React.useEffect(() => () => console.log('unmount Fullview', appName), []);
   return (
     <BodyClass className={`${appName}-view searchlib-page`}>
       <div className="searchlib-block">