Checkpoint

searchlib/components/RenderSlot/RenderSlot.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { SEARCH_STATES } from '@eeacms/search/constants';
+
+export default function RenderSlot(props) {
+  const { slotName, searchState } = props;
+  return props[slotName] ? props[slotName] : null;
+}

searchlib/components/SearchView/SearchView.jsx

@@ -9,24 +9,20 @@ import {
   SearchBox,
   AppInfo,
   SampleQueryPrompt,
+  RenderSlot,
 } from '@eeacms/search/components';
 import registry from '@eeacms/search/registry';
 import { SearchContext as SUISearchContext } from '@elastic/react-search-ui';
 
 import { checkInteracted } from '@eeacms/search/lib/search/helpers';
 import { BodyContent } from './BodyContent';
 import { useSearchContext } from '@eeacms/search/lib/hocs';
+import { SEARCH_STATE_IDS } from '@eeacms/search/constants';
 import { useAtom } from 'jotai';
 import { isLandingPageAtom } from './state';
 
 export const SearchView = (props) => {
-  const {
-    appConfig,
-    appName,
-    mode = 'view',
-    aboveSearchInput,
-    belowSearchInput,
-  } = props;
+  const { appConfig, appName, mode = 'view' } = props;
 
   const searchContext = useSearchContext();
   const { driver } = React.useContext(SUISearchContext);
@@ -53,6 +49,13 @@ export const SearchView = (props) => {
   }, [setIsLandingPageAtom, wasInteracted]);
 
   const customClassName = !wasInteracted ? 'landing-page' : 'simple-page';
+  const { wasSearched, results = [] } = searchContext;
+
+  const searchState = !wasInteracted
+    ? SEARCH_STATE_IDS.isLandingPage
+    : wasSearched && results?.length > 0
+    ? SEARCH_STATE_IDS.hasResults
+    : SEARCH_STATE_IDS.hasNoResults;
 
   // React.useEffect(() => () => console.log('unmount SearchView'), []);
   return (
@@ -61,7 +64,11 @@ export const SearchView = (props) => {
         appConfig={appConfig}
         header={
           <>
-            {aboveSearchInput}
+            <RenderSlot
+              {...props}
+              searchState={searchState}
+              slotName="aboveSearchInput"
+            />
             <SearchBox
               searchContext={searchContext}
               isLandingPage={!wasInteracted}
@@ -83,7 +90,11 @@ export const SearchView = (props) => {
               }
               mode={mode}
             />
-            {belowSearchInput}
+            <RenderSlot
+              {...props}
+              searchState={searchState}
+              slotName="belowSearchInput"
+            />
           </>
         }
         sideContent={null}

searchlib/components/index.js

@@ -45,6 +45,7 @@ import DefaultContentView from './SearchView/DefaultContentView';
 import SegmentedBreadcrumb from './SegmentedBreadcrumb/Breadcrumb';
 import DropdownFacetsList from './Facets/DropdownFacetsList';
 import DropdownFacetWrapper from './Facets/Wrappers/DropdownFacetWrapper';
+import RenderSlot from './RenderSlot/RenderSlot';
 
 export {
   Component,
@@ -64,6 +65,7 @@ export {
   InlineFilterList,
   LeftColumnLayout,
   RightColumnLayout,
+  RenderSlot,
   StringList,
   TagsList,
   TableRowItem,

searchlib/constants.js

@@ -8,9 +8,16 @@ export const SLOTS = [
   'belowResults',
 ];
 
+export const SEARCH_STATE_IDS = {
+  any: 'any',
+  isLandingPage: 'isLandingPage',
+  hasResults: 'hasResults',
+  hasNoResults: 'hasNoResults',
+};
+
 export const SEARCH_STATES = [
-  ['any', 'Always'],
-  ['isLandingPage', 'Landing page'],
-  ['hasResults', 'Has results'],
-  ['hasNoResults', 'Has no results'],
+  [SEARCH_STATE_IDS.any, 'Always'],
+  [SEARCH_STATE_IDS.isLandingPage, 'Landing page'],
+  [SEARCH_STATE_IDS.hasResults, 'Has results'],
+  [SEARCH_STATE_IDS.hasNoResults, 'Has no results'],
 ];