WIP on splitting components

eea · Dec 19, 2022 · a890e6c · a890e6c
1 parent 341bb5e
commit a890e6c
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 19 deletions.
diff --git a/searchlib/components/SearchApp/BasicSearchApp.jsx b/searchlib/components/SearchApp/BasicSearchApp.jsx
@@ -23,8 +23,10 @@ function SearchWrappers(SearchViewComponent) {
       ...searchContext
     } = props;
 
+    const [payload, update] = React.useState(appConfigContext);
+
     return (
-      <AppConfigContext.Provider value={appConfigContext}>
+      <AppConfigContext.Provider value={{ payload, update }}>
         <SearchContext.Provider value={searchContext}>
           <SearchViewComponent
             {...searchContext}
@@ -63,10 +65,9 @@ export default function BasicSearchApp(props) {
     paramOnAutocomplete,
   });
 
-  const appConfigContext = React.useMemo(() => ({ appConfig, registry }), [
-    appConfig,
-    registry,
-  ]);
+  const appConfigContext = React.useMemo(() => {
+    return { appConfig, registry };
+  }, [appConfig, registry]);
 
   const WrappedSearchView = React.useMemo(() => {
     return withSearch(mapContextToProps)(SearchWrappers(searchViewComponent));

diff --git a/searchlib/components/SearchApp/SearchInputApp.jsx b/searchlib/components/SearchApp/SearchInputApp.jsx
@@ -1,11 +1,32 @@
 import React from 'react';
 
 import registry from '@eeacms/search/registry';
+import { AppConfigContext } from '@eeacms/search/lib/hocs';
+
 import BasicSearchApp from './BasicSearchApp';
 import { SearchBox } from '@eeacms/search/components';
 
 const SearchInputView = (props) => {
-  const { mode = 'view', appConfig, ...searchContext } = props;
+  const {
+    mode = 'view',
+    appConfigContext,
+    appConfig,
+    ...searchContext
+  } = props;
+
+  const onSubmit = appConfig.url
+    ? (searchTerm) => {
+        console.log('submit', searchTerm);
+      }
+    : undefined;
+
+  const onSelectAutocomplete = appConfig.url
+    ? (selection, options) => {
+        console.log('onselect', selection, options, searchContext);
+        searchContext.setSearchTerm(selection.suggestion);
+      }
+    : undefined;
+
   return (
     <SearchBox
       searchContext={searchContext}
@@ -26,10 +47,22 @@ const SearchInputView = (props) => {
           : undefined
       }
       mode={mode}
+      onSubmit={onSubmit}
+      onSelectAutocomplete={onSelectAutocomplete}
     />
   );
 };
 
+const SearchInputViewWrapper = (props) => {
+  return (
+    <AppConfigContext.Consumer>
+      {(context) => <SearchInputView appConfigContext={context} {...props} />}
+    </AppConfigContext.Consumer>
+  );
+};
+
 export default function SearchApp(props) {
-  return <BasicSearchApp {...props} searchViewComponent={SearchInputView} />;
+  return (
+    <BasicSearchApp {...props} searchViewComponent={SearchInputViewWrapper} />
+  );
 }
diff --git a/searchlib/components/SearchApp/SearchResultsApp.jsx b/searchlib/components/SearchApp/SearchResultsApp.jsx
@@ -33,12 +33,14 @@ function SearchResultsView(props) {
     ) : (
       <NoResultsComponent {...props} />
     )
-  ) : (
+  ) : results.length ? (
     <ContentBodyView {...props}>
       {results.map((result, i) => (
         <Item key={`${i}-${result.id}`} result={result} {...itemViewProps} />
       ))}
     </ContentBodyView>
+  ) : (
+    <div className="noResults"></div>
   );
 }
 

diff --git a/searchlib/lib/hocs/appConfig.js b/searchlib/lib/hocs/appConfig.js
@@ -1,6 +1,9 @@
 import React from 'react';
 
-export const AppConfigContext = React.createContext(null);
+export const AppConfigContext = React.createContext({
+  payload: {},
+  update: () => {},
+});
 
 export const useAppConfig = () => {
   const context = React.useContext(AppConfigContext);
@@ -12,7 +15,7 @@ export const useAppConfig = () => {
     );
   }
 
-  return context;
+  return context.payload;
 };
 
 export const withAppConfig = (WrappedComponent) => {

diff --git a/searchlib/registry.js b/searchlib/registry.js
@@ -461,6 +461,4 @@ if (typeof window !== 'undefined') {
   window.searchUiConfig = config;
 }
 
-console.log('whole config', config);
-
 export default config;
diff --git a/src/SearchBlock/SearchBlockView.jsx b/src/SearchBlock/SearchBlockView.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import config from '@plone/volto/registry';
 import { SearchBlockSchema } from './schema';
-import { withBlockExtensions } from '@plone/volto/helpers';
+import { applySchemaEnhancer, withBlockExtensions } from '@plone/volto/helpers';
 import { applyBlockSettings } from './utils';
 import { isEqual } from 'lodash';
 
@@ -27,12 +27,15 @@ const useDebouncedStableData = (data, timeout = 100) => {
 
 function SearchBlockView(props) {
   const { data = {}, mode = 'view', variation } = props;
-  const schema = React.useMemo(() => SearchBlockSchema({ formData: data }), [
-    data,
-  ]);
   const { appName = 'default' } = data;
   const stableData = useDebouncedStableData(data);
 
+  const schema = React.useMemo(() => {
+    let schema = SearchBlockSchema({ formData: stableData });
+    schema = applySchemaEnhancer({ schema, formData: stableData });
+    return schema;
+  }, [stableData]);
+
   const registry = React.useMemo(() => {
     const reg = applyBlockSettings(
       config.settings.searchlib,

diff --git a/src/SearchBlock/templates/LandingPageView.jsx b/src/SearchBlock/templates/LandingPageView.jsx
@@ -5,4 +5,14 @@ function LandingPageView(props) {
   return <LandingPageApp {...props} />;
 }
 
+LandingPageView.schemaEnhancer = ({ schema }) => {
+  schema.fieldsets[0].fields.push('url');
+  schema.properties.url = {
+    title: 'Results page',
+    widget: 'url',
+  };
+
+  return schema;
+};
+
 export default LandingPageView;
diff --git a/src/SearchBlock/templates/SearchInputView.jsx b/src/SearchBlock/templates/SearchInputView.jsx
@@ -5,4 +5,15 @@ function SearchInputView(props) {
   return <SearchInputApp {...props} />;
 }
 
+SearchInputView.schemaEnhancer = ({ schema }) => {
+  schema.fieldsets[0].fields.push('url');
+  schema.properties.url = {
+    title: 'Results page',
+    widget: 'url',
+    configPath: 'url',
+  };
+
+  return schema;
+};
+
 export default SearchInputView;
diff --git a/src/index.js b/src/index.js
@@ -43,17 +43,19 @@ const applyConfig = (config) => {
       },
       {
         id: 'searchInputOnly',
-        title: 'Only Search input',
+        title: 'Search input',
         view: SearchInputView,
+        schemaEnhancer: SearchInputView.schemaEnhancer,
       },
       {
         id: 'landingPageOnly',
-        title: 'Only statistics',
+        title: 'Statistics',
         view: LandingPageView,
+        schemaEnhancer: LandingPageView.schemaEnhancer,
       },
       {
         id: 'searchResultsOnly',
-        title: 'Only search results',
+        title: 'Search results',
         view: SearchResultsView,
       },
     ],