Checkpoint

eea · Dec 29, 2022 · c185304 · c185304
1 parent 65f8ee8
commit c185304
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 57 deletions.
diff --git a/searchlib/components/SearchApp/BasicSearchApp.jsx b/searchlib/components/SearchApp/BasicSearchApp.jsx
@@ -11,7 +11,7 @@ import useDeepCompareEffect from 'use-deep-compare-effect';
 import { AppConfigContext, SearchContext } from '@eeacms/search/lib/hocs';
 import { bindOnAutocomplete, bindOnSearch } from '@eeacms/search/lib/request';
 import useSearchApp from './useSearchApp';
-import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
+// import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
 
 function applySearchWrappers(SearchViewComponent) {
   function SearchWrapper(props) {
@@ -27,7 +27,7 @@ function applySearchWrappers(SearchViewComponent) {
     } = props;
 
     const [payload, update] = React.useState(appConfigContext);
-    React.useEffect(() => () => console.log('unmount SearchWrappers'), []);
+    // React.useEffect(() => () => console.log('unmount SearchWrappers'), []);
 
     return (
       <AppConfigContext.Provider value={{ payload, update }}>
@@ -91,12 +91,12 @@ export default function BasicSearchApp(props) {
     return mappedWithSearch(applySearchWrappers(searchViewComponent));
   }, [mappedWithSearch, searchViewComponent]);
 
-  useWhyDidYouUpdate('BasicSearchApp', {
-    mapContextToProps,
-    searchViewComponent,
-    WrappedSearchView,
-    registry,
-  });
+  // useWhyDidYouUpdate('BasicSearchApp', {
+  //   mapContextToProps,
+  //   searchViewComponent,
+  //   WrappedSearchView,
+  //   registry,
+  // });
 
   return driverInstance ? (
     <SearchProvider config={elasticConfig} driver={driverInstance}>

diff --git a/searchlib/components/SearchApp/useSearchApp.js b/searchlib/components/SearchApp/useSearchApp.js
@@ -15,7 +15,7 @@ import {
 import { resetFilters, resetSearch } from './request';
 import useFacetsWithAllOptions from './useFacetsWithAllOptions';
 import { loadingFamily, driverFamily } from './state';
-import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
+// import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
 
 export function useSearchDriver({ elasticConfig, appName }) {
   const driverAtom = driverFamily({ elasticConfig, appName });
@@ -115,11 +115,11 @@ export default function useSearchApp({
     [appConfig, driverInstance, facetOptions],
   );
 
-  useWhyDidYouUpdate('useSearchApp', {
-    appConfig,
-    driverInstance,
-    facetOptions,
-  });
+  // useWhyDidYouUpdate('useSearchApp', {
+  //   appConfig,
+  //   driverInstance,
+  //   facetOptions,
+  // });
 
   return {
     facetOptions,

diff --git a/searchlib/components/SearchView/SearchView.jsx b/searchlib/components/SearchView/SearchView.jsx
@@ -48,7 +48,7 @@ export const SearchView = (props) => {
 
   const customClassName = !wasInteracted ? 'landing-page' : 'simple-page';
 
-  React.useEffect(() => () => console.log('unmount SearchView'), []);
+  // React.useEffect(() => () => console.log('unmount SearchView'), []);
   return (
     <div className={`searchapp searchapp-${appName} ${customClassName}`}>
       <Layout

diff --git a/src/SearchBlock/BlockContainer/BlockContainer.jsx b/src/SearchBlock/BlockContainer/BlockContainer.jsx
@@ -51,6 +51,7 @@ export default function BlockContainer(props) {
             onChangeBlock={onChangeSlotfill}
             onSelectBlock={() => {}}
             index={index}
+            disableNewBlocks={true}
           />
         </>
       ) : (

diff --git a/src/SearchBlock/SearchBlockEdit.jsx b/src/SearchBlock/SearchBlockEdit.jsx
@@ -4,10 +4,11 @@ import { BlockDataForm, SidebarPortal } from '@plone/volto/components';
 import SearchBlockView from './SearchBlockView';
 import config from '@plone/volto/registry';
 import { useDebouncedStableData } from './hocs';
-import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
+// import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
 
 const SearchBlockEdit = (props) => {
   const { onChangeBlock, block, data } = props;
+  const [selectedSlotFill, onSelectSlotfill] = React.useState();
 
   const stableData = useDebouncedStableData(
     Object.assign(
@@ -53,8 +54,6 @@ const SearchBlockEdit = (props) => {
     [block, data, onChangeBlock],
   );
 
-  React.useEffect(() => () => console.log('unmount SearchBlockEdit'), []);
-
   const onDeleteSlotfill = React.useCallback(
     (slotId) => {
       onChangeBlock(block, {
@@ -68,7 +67,8 @@ const SearchBlockEdit = (props) => {
     [block, onChangeBlock, data],
   );
 
-  useWhyDidYouUpdate('SearchBlockEdit', { schema });
+  // React.useEffect(() => () => console.log('unmount SearchBlockEdit'), []);
+  // useWhyDidYouUpdate('SearchBlockEdit', { schema });
 
   return (
     <div>
@@ -77,6 +77,8 @@ const SearchBlockEdit = (props) => {
         mode="edit"
         onChangeSlotfill={onChangeSlotfill}
         onDeleteSlotfill={onDeleteSlotfill}
+        onSelectSlotfill={onSelectSlotfill}
+        selectedSlotFill={selectedSlotFill}
       >
         <SidebarPortal selected={props.selected}>
           <BlockDataForm

diff --git a/src/SearchBlock/SearchBlockView.jsx b/src/SearchBlock/SearchBlockView.jsx
@@ -61,7 +61,7 @@ function SearchBlockView(props) {
   }, [appName, stableData, schema, mode]);
 
   const Variation = variation.view;
-  React.useEffect(() => () => console.log('unmount SearchBlockView'), []);
+  // React.useEffect(() => () => console.log('unmount SearchBlockView'), []);
 
   return (
     <div>

diff --git a/src/SearchBlock/templates/FullView.jsx b/src/SearchBlock/templates/FullView.jsx
@@ -10,13 +10,59 @@ const overlayStyle = {
   zIndex: '100',
 };
 
+const slots = [
+  'aboveSearchInput',
+  'belowSearchInput',
+  'aboveResults',
+  'belowResults',
+];
+
+// aboveSearchInput={
+//   <BlockContainer
+//     block="aboveSearchInput"
+//     data={slotFills?.['aboveSearchInput']}
+//     mode={mode}
+//     onChangeSlotfill={onChangeSlotfill}
+//     onDeleteSlotfill={onDeleteSlotfill}
+//   />
+// }
+// belowSearchInput={
+//   <BlockContainer
+//     block="belowSearchInput"
+//     data={slotFills?.['belowSearchInput']}
+//     mode={mode}
+//     onChangeSlotfill={onChangeSlotfill}
+//     onDeleteSlotfill={onDeleteSlotfill}
+//   />
+// }
+// aboveResults={
+//   <BlockContainer
+//     block="aboveResults"
+//     data={slotFills?.['aboveResults']}
+//     mode={mode}
+//     onChangeSlotfill={onChangeSlotfill}
+//     onDeleteSlotfill={onDeleteSlotfill}
+//   />
+// }
+// belowResults={
+//   <BlockContainer
+//     block="belowResults"
+//     data={slotFills?.['belowResults']}
+//     mode={mode}
+//     onChangeSlotfill={onChangeSlotfill}
+//     onDeleteSlotfill={onDeleteSlotfill}
+//   />
+// }
+
 function FullView(props) {
   const {
     appName,
     mode,
     slotFills,
     onChangeSlotfill,
     onDeleteSlotfill,
+    onSelectSlotfill,
+    selectedSlotFill,
   } = props;
 
   // TODO: (about bodyclass) this is a hack, please solve it properly
@@ -29,42 +75,23 @@ function FullView(props) {
         )}
         <SearchApp
           {...props}
-          aboveSearchInput={
-            <BlockContainer
-              block="aboveSearchInput"
-              data={slotFills?.['aboveSearchInput']}
-              mode={mode}
-              onChangeSlotfill={onChangeSlotfill}
-              onDeleteSlotfill={onDeleteSlotfill}
-            />
-          }
-          belowSearchInput={
-            <BlockContainer
-              block="belowSearchInput"
-              data={slotFills?.['belowSearchInput']}
-              mode={mode}
-              onChangeSlotfill={onChangeSlotfill}
-              onDeleteSlotfill={onDeleteSlotfill}
-            />
-          }
-          aboveResults={
-            <BlockContainer
-              block="aboveResults"
-              data={slotFills?.['aboveResults']}
-              mode={mode}
-              onChangeSlotfill={onChangeSlotfill}
-              onDeleteSlotfill={onDeleteSlotfill}
-            />
-          }
-          belowResults={
-            <BlockContainer
-              block="belowResults"
-              data={slotFills?.['belowResults']}
-              mode={mode}
-              onChangeSlotfill={onChangeSlotfill}
-              onDeleteSlotfill={onDeleteSlotfill}
-            />
-          }
+          {...Object.assign(
+            {},
+            ...slots.map((name) => ({
+              [name]: (
+                <BlockContainer
+                  key={name}
+                  block={name}
+                  data={slotFills?.[name]}
+                  mode={mode}
+                  onChangeSlotfill={onChangeSlotfill}
+                  onDeleteSlotfill={onDeleteSlotfill}
+                  onSelectSlotfill={onSelectSlotfill}
+                  selected={selectedSlotFill === name}
+                />
+              ),
+            })),
+          )}
         />
         {props.children}
       </div>

diff --git a/src/SearchBlock/utils.js b/src/SearchBlock/utils.js
@@ -51,10 +51,13 @@ const _applyBlockSettings = (config, appName, data, schema) => {
 let _params, _cachedResult;
 
 const cacheOnce = (func) => (config, appName, data, schema) => {
+  // Because React uses object identity to recreate components, we try to
+  // create a stable version of the "registry" by only producing it again if
+  // the data has changed
   if (!_params || !isEqual(_params, { appName, data })) {
     _cachedResult = _applyBlockSettings(config, appName, data, schema);
     _params = { appName, data };
-    console.log('recomputed');
+    // console.log('recomputed');
   }
   return _cachedResult;
 };