WIP on splitting components

searchlib/components/SearchApp/BasicSearchApp.jsx

@@ -1,3 +1,9 @@
+/**
+ * Bootstraps a search view component
+ *
+ * Provides the search context and the driver
+ */
+
 import React from 'react';
 import { SearchProvider, withSearch } from '@elastic/react-search-ui'; // ErrorBoundary,    WithSearch,
 

searchlib/components/SearchApp/LandingPageApp.jsx

@@ -0,0 +1,3 @@
+export default function LandingPageApp(props) {
+  return <div>Landing page</div>;
+}

searchlib/components/SearchApp/SearchInputApp.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import registry from '@eeacms/search/registry';
+import BasicSearchApp from './BasicSearchApp';
+import { SearchBox } from '@eeacms/search/components';
+
+const SearchInputView = (props) => {
+  const { mode = 'view', appConfig, ...searchContext } = props;
+  return (
+    <SearchBox
+      searchContext={searchContext}
+      isLandingPage={false}
+      autocompleteMinimumCharacters={3}
+      autocompleteResults={appConfig.autocomplete.results}
+      autocompleteSuggestions={appConfig.autocomplete.suggestions}
+      shouldClearFilters={false}
+      useSearchPhrases={appConfig.useSearchPhrases}
+      inputView={
+        appConfig.searchBoxInputComponent
+          ? registry.resolve[appConfig.searchBoxInputComponent].component
+          : undefined
+      }
+      view={
+        appConfig.searchBoxComponent
+          ? registry.resolve[appConfig.searchBoxComponent].component
+          : undefined
+      }
+      mode={mode}
+    />
+  );
+};
+
+export default function SearchApp(props) {
+  return <BasicSearchApp {...props} searchViewComponent={SearchInputView} />;
+}

searchlib/components/SearchView/SearchView.jsx

@@ -1,3 +1,7 @@
+/**
+ * Full search engine view, with landing page, search input and results
+ */
+
 import React from 'react';
 
 import { withAppConfig } from '@eeacms/search/lib/hocs';

searchlib/index.js

@@ -11,6 +11,8 @@ export * from './state';
 
 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 SearchView } from './components/SearchView/SearchView';
 export { default as registry } from './registry';
 

searchlib/lib/hocs/useCompareDebugger.js

@@ -1,6 +1,6 @@
 // A fork of https://github.com/IPWright83/react-use-compare-debugger
 // Solves transpilation problems
-//
+
 import { useEffect, useRef } from 'react';
 
 const styles = {

src/SearchBlock/SearchBlockView.jsx

@@ -1,27 +1,41 @@
 import React from 'react';
 import config from '@plone/volto/registry';
-import { SearchApp } from '@eeacms/search';
 import { SearchBlockSchema } from './schema';
-import { BodyClass } from '@plone/volto/helpers';
+import { withBlockExtensions } from '@plone/volto/helpers';
 import { applyBlockSettings } from './utils';
+import { isEqual } from 'lodash';
 
-// import '@elastic/react-search-ui-views/lib/styles/styles.css';
 import './less/styles.less';
 
-const overlayStyle = {
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  zIndex: '100',
+const useDebouncedStableData = (data, timeout = 100) => {
+  const [stableData, setStableData] = React.useState(data);
+  const timer = React.useRef();
+
+  const isSameData = isEqual(stableData, data);
+
+  React.useEffect(() => {
+    if (timer.current) clearInterval(timer.current);
+
+    timer.current = setTimeout(() => {
+      if (!isSameData) setStableData(data);
+    }, timeout);
+    return () => timer.current && clearTimeout(timer.current);
+  }, [data, isSameData, timeout]);
+
+  return stableData;
 };
 
-export default function SearchBlockView(props) {
-  const { data = {}, mode = 'view' } = props;
+function SearchBlockView(props) {
+  const { data = {}, mode = 'view', variation } = props;
   const schema = React.useMemo(() => SearchBlockSchema({ formData: data }), [
     data,
   ]);
   const { appName = 'default' } = data;
-  const [stableData] = React.useState(data);
+  const stableData = useDebouncedStableData(data);
+  // const [stableData] = React.useState(data);
+
+  // TODO: update stableData if in edit mode
+
   const registry = React.useMemo(() => {
     const reg = applyBlockSettings(
       config.settings.searchlib,
@@ -44,18 +58,9 @@ export default function SearchBlockView(props) {
     return reg;
   }, [appName, stableData, schema]);
 
-  // TODO: this is a hack, please solve it properly
-
-  return (
-    <BodyClass className={`${appName}-view searchlib-page`}>
-      <div className="searchlib-block">
-        {mode !== 'view' ? (
-          <div className="overlay" style={overlayStyle}></div>
-        ) : (
-          ''
-        )}
-        <SearchApp registry={registry} appName={appName} mode={mode} />
-      </div>
-    </BodyClass>
-  );
+  const Variation = variation.view;
+
+  return <Variation registry={registry} appName={appName} mode={mode} />;
 }
+
+export default withBlockExtensions(SearchBlockView);

src/SearchBlock/schema.js

@@ -7,13 +7,7 @@ export const SearchBlockSchema = ({ formData = {} }) => ({
     {
       id: 'default',
       title: 'Default',
-      fields: [
-        'appName',
-        'layoutVariation',
-        'headline',
-        'subheadline',
-        'searchInputPlaceholder',
-      ],
+      fields: ['appName', 'headline', 'subheadline', 'searchInputPlaceholder'],
     },
     {
       id: 'general',
@@ -52,16 +46,6 @@ export const SearchBlockSchema = ({ formData = {} }) => ({
       choices: [],
     },
 
-    layoutVariation: {
-      title: 'Layout variation',
-      choices: [
-        ['full', 'Full (default)'],
-        ['searchInputOnly', 'Only Search input'],
-        ['landingPageOnly', 'Only statistics'],
-      ],
-      default: 'full',
-    },
-
     searchEnginePath: {
       title: 'Search Engine path',
       configPath: 'searchEnginePath',

src/SearchBlock/templates/FullView.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { BodyClass } from '@plone/volto/helpers';
+import { SearchApp } from '@eeacms/search';
+
+const overlayStyle = {
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  zIndex: '100',
+};
+
+function FullView(props) {
+  const { appName, mode } = props;
+
+  // TODO: (about bodyclass) this is a hack, please solve it properly
+
+  return (
+    <BodyClass className={`${appName}-view searchlib-page`}>
+      <div className="searchlib-block">
+        {mode !== 'view' && (
+          <div className="overlay" style={overlayStyle}></div>
+        )}
+        <SearchApp {...props} />
+      </div>
+    </BodyClass>
+  );
+}
+
+export default FullView;

src/SearchBlock/templates/LandingPageView.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function LandingPageView(props) {
+  return null;
+}
+
+export default LandingPageView;

src/SearchBlock/templates/SearchInputView.jsx

@@ -0,0 +1,8 @@
+import { SearchInputApp } from '@eeacms/search';
+import React from 'react';
+
+function SearchInputView(props) {
+  return <SearchInputApp {...props} />;
+}
+
+export default SearchInputView;

src/SearchBlock/templates/index.js

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

src/index.js

@@ -5,6 +5,11 @@ import codeSVG from '@plone/volto/icons/code.svg';
 import SearchBlockView from './SearchBlock/SearchBlockView';
 import SearchBlockEdit from './SearchBlock/SearchBlockEdit';
 import { SearchBlockSchema } from './SearchBlock/schema';
+import {
+  FullView,
+  SearchInputView,
+  LandingPageView,
+} from './SearchBlock/templates';
 // import LeftColumnLayout from './components/Layout/LeftColumnLayout';
 
 import SelectWidget from './SearchBlock/SelectWidget';
@@ -29,6 +34,24 @@ const applyConfig = (config) => {
       addPermission: [],
       view: [],
     },
+    variations: [
+      {
+        id: 'fullView',
+        isDefault: true,
+        title: 'Full (default)',
+        view: FullView,
+      },
+      {
+        id: 'searchInputOnly',
+        title: 'Only Search input',
+        view: SearchInputView,
+      },
+      {
+        id: 'landingPageOnly',
+        title: 'Only statistics',
+        view: LandingPageView,
+      },
+    ],
   };
 
   if (__SERVER__) {