WIP on splitting components

searchlib/components/SearchApp/BasicSearchApp.jsx

@@ -29,6 +29,7 @@ function SearchWrappers(SearchViewComponent) {
           <SearchViewComponent
             {...searchContext}
             appName={appName}
+            registry={appConfigContext.registry}
             appConfig={appConfig}
             mode={mode}
           />

searchlib/components/SearchApp/LandingPageApp.jsx

@@ -1,3 +1,15 @@
+import BasicSearchApp from './BasicSearchApp';
+
+function LandingPageView(props) {
+  const { appConfig, registry } = props;
+
+  const InitialViewComponent =
+    appConfig.initialView?.factory &&
+    registry.resolve[appConfig.initialView.factory].component;
+
+  return <InitialViewComponent {...props} />;
+}
+
 export default function LandingPageApp(props) {
-  return <div>Landing page</div>;
+  return <BasicSearchApp {...props} searchViewComponent={LandingPageView} />;
 }

searchlib/components/SearchApp/SearchResultsApp.jsx

@@ -0,0 +1,47 @@
+import { useViews, useSearchContext } from '@eeacms/search/lib/hocs';
+
+import BasicSearchApp from './BasicSearchApp';
+
+function SearchResultsView(props) {
+  const { appConfig, registry } = props;
+
+  const searchContext = useSearchContext();
+  const { results = [] } = searchContext;
+  const { resultViews } = appConfig;
+  const { activeViewId } = useViews();
+
+  const itemViewProps = appConfig[`${activeViewId}ViewParams`];
+  const listingViewDef = resultViews.filter((v) => v.id === activeViewId)[0];
+
+  const Item = registry.resolve[listingViewDef?.factories?.item]?.component;
+
+  const NoResultsComponent =
+    appConfig.noResultsView?.factory &&
+    registry.resolve[appConfig.noResultsView?.factory]?.component;
+
+  const ContentBodyView =
+    registry.resolve[appConfig['contentBodyComponent'] || 'DefaultContentView']
+      .component;
+
+  return NoResultsComponent ? (
+    results.length ? (
+      <ContentBodyView {...props}>
+        {results.map((result, i) => (
+          <Item key={`${i}-${result.id}`} result={result} {...itemViewProps} />
+        ))}
+      </ContentBodyView>
+    ) : (
+      <NoResultsComponent {...props} />
+    )
+  ) : (
+    <ContentBodyView {...props}>
+      {results.map((result, i) => (
+        <Item key={`${i}-${result.id}`} result={result} {...itemViewProps} />
+      ))}
+    </ContentBodyView>
+  );
+}
+
+export default function LandingPageApp(props) {
+  return <BasicSearchApp {...props} searchViewComponent={SearchResultsView} />;
+}

searchlib/components/SearchView/DefaultContentView.jsx

@@ -8,8 +8,6 @@ import {
   SortingDropdownWithLabel,
   AnswerBox,
   DownloadButton,
-  // ViewSelector,
-  // SortingDropdown,
 } from '@eeacms/search/components';
 import { useAppConfig } from '@eeacms/search/lib/hocs';
 import { useViews } from '@eeacms/search/lib/hocs';

searchlib/index.js

@@ -13,6 +13,7 @@ export { default as runRequest } from './lib/runRequest';
 export { default as SearchApp } from './components/SearchApp/SearchApp';
 export { default as SearchInputApp } from './components/SearchApp/SearchInputApp';
 export { default as LandingPageApp } from './components/SearchApp/LandingPageApp';
+export { default as SearchResultsApp } from './components/SearchApp/SearchResultsApp';
 export { default as SearchView } from './components/SearchView/SearchView';
 export { default as registry } from './registry';
 

src/SearchBlock/SearchBlockView.jsx

@@ -32,9 +32,6 @@ function SearchBlockView(props) {
   ]);
   const { appName = 'default' } = data;
   const stableData = useDebouncedStableData(data);
-  // const [stableData] = React.useState(data);
-
-  // TODO: update stableData if in edit mode
 
   const registry = React.useMemo(() => {
     const reg = applyBlockSettings(

src/SearchBlock/templates/LandingPageView.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import { LandingPageApp } from '@eeacms/search';
 
 function LandingPageView(props) {
-  return null;
+  return <LandingPageApp {...props} />;
 }
 
 export default LandingPageView;

src/SearchBlock/templates/SearchResultsView.jsx

@@ -0,0 +1,24 @@
+import { BodyClass } from '@plone/volto/helpers';
+import { SearchResultsApp } from '@eeacms/search';
+
+const overlayStyle = {
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  zIndex: '100',
+};
+
+export default function SearchResultsView(props) {
+  const { appName, mode } = props;
+
+  return (
+    <BodyClass className={`${appName}-view searchlib-page`}>
+      <div className="searchlib-block">
+        {mode !== 'view' && (
+          <div className="overlay" style={overlayStyle}></div>
+        )}
+        <SearchResultsApp {...props} />
+      </div>
+    </BodyClass>
+  );
+}

src/SearchBlock/templates/index.js

@@ -1,3 +1,4 @@
 export FullView from './FullView';
 export LandingPageView from './LandingPageView';
 export SearchInputView from './SearchInputView';
+export SearchResultsView from './SearchResultsView';

src/index.js

@@ -9,8 +9,8 @@ import {
   FullView,
   SearchInputView,
   LandingPageView,
+  SearchResultsView,
 } from './SearchBlock/templates';
-// import LeftColumnLayout from './components/Layout/LeftColumnLayout';
 
 import SelectWidget from './SearchBlock/SelectWidget';
 
@@ -51,6 +51,11 @@ const applyConfig = (config) => {
         title: 'Only statistics',
         view: LandingPageView,
       },
+      {
+        id: 'searchResultsOnly',
+        title: 'Only search results',
+        view: SearchResultsView,
+      },
     ],
   };