Skip to content

Commit

Permalink
Checkpoint
Browse files Browse the repository at this point in the history
  • Loading branch information
@tiberiuichim
tiberiuichim committed Jan 5, 2023
1 parent c5bc62a commit 9e0bea6
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 82 deletions.
16 changes: 8 additions & 8 deletions searchlib/components/SearchApp/BasicSearchApp.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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 }}>
Expand Down Expand Up @@ -93,12 +93,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}>
Expand Down
135 changes: 82 additions & 53 deletions searchlib/components/SearchApp/FacetApp.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,22 @@
* A Search app that wraps and provides access to a single facet
*/
import React from 'react';
import { Facet as SUIFacet } from '@eeacms/search/components';
import { useAppConfig, useSearchDriver } from '@eeacms/search/lib/hocs';
import BasicSearchApp from './BasicSearchApp';
import { isEqual } from 'lodash';
import useDeepCompareEffect from 'use-deep-compare-effect';

import { Facet as SUIFacet } from '@eeacms/search/components';
import { useSearchContext, useSearchDriver } from '@eeacms/search/lib/hocs';

const sorter = (fa, fb) =>
fa.field === fb.field ? 0 : fa.field < fb.field ? -1 : 0;

function BoostrapFacetView(props) {
const { field, onChange, value } = props;
const { appConfig, registry } = useAppConfig();
export default function FacetApp(props) {
const searchContext = useSearchContext();
const { appConfig, registry, field, onChange, value } = props;
// const { field, onChange, value } = props;
const driver = useSearchDriver();
const { filters, setFilter } = driver.state;
// console.log({ searchContext, props, driver });
const { filters, setFilter, removeFilter, addFilter } = searchContext; // driver.state

const facet = appConfig.facets?.find((f) => f.field === field);
const FacetComponent = registry.resolve[facet.factory].component;
Expand All @@ -31,61 +33,92 @@ function BoostrapFacetView(props) {

const onChangeFilterType = React.useCallback(
(_type) => {
driver.removeFilter(field);
removeFilter(field);
const { values = [] } = value || {};
values.forEach((v) => {
driver.addFilter(field, v, _type);
addFilter(field, v, _type);
});

setLocalFilterType(_type);
},
[driver, field, value],
[field, value, addFilter, removeFilter],
);

// useDeepCompareEffect(() => {
// // on initializing the form, set the active value as filters
// const activeFilter = filters?.find((filter) => filter.field === field);
// console.log('useDeep', activeFilter);
// if (value && !activeFilter) {
// const sortedFilters = [...filters, value].sort(sorter);
// driver._setState({ filters: sortedFilters });
// }
// }, [value, filters, field, setFilter, driver]); // searchContext

const activeValue = filters.find((f) => f.field === field);

const dirty = !isEqual(activeValue, value);
// console.log('redraw facet', { value, activeValue, dirty });

const timerRef = React.useRef();

// const sortedFilters = [...filters].sort(sorter);

useDeepCompareEffect(() => {
// on initializing the form, set the active value as filters
const activeFilter = filters?.find((filter) => filter.field === field);
if (value && !activeFilter) {
const sortedFilters = [...filters, value].sort(sorter);
driver._setState({ filters: sortedFilters });
}
}, [value, filters, field, setFilter, driver]); // searchContext

React.useEffect(() => {
const { plugins } = driver.events;
const plugId = `trackFilters-${field}`;

if (!plugins.find((plug) => plug.id === plugId)) {
function subscribe(payload) {
const { filters } = driver.state;
const activeValue = filters.find((f) => f.field === field);
if (!activeValue) {
onChange(null);
return;
}
if (!isEqual(activeValue, value)) {
onChange(activeValue);
}
timerRef.current && clearTimeout(timerRef.current);
timerRef.current = setTimeout(() => {
if (!isEqual(activeValue, value)) {
console.log('onchange', { activeValue, value });
onChange(activeValue);
}
plugins.push({
id: plugId,
subscribe,
});
}
}, 200);

return () => {
driver.events.plugins = driver.events.plugins.filter(
(plug) => plug.id !== plugId,
);

// handles deleting the facet
driver._setState({
filters: [
...driver.state.filters.filter((f) => f.field !== field),
].sort(sorter),
});
timerRef.current && clearTimeout(timerRef.current);
};
}, [driver, field, onChange, value]);

// return () => {
// console.log('removing filter', field);
// // removeFilter(field); // when the Facet is removed, we remove the filter
// };
}, [removeFilter, field, activeValue, value, onChange]);

React.useEffect(() => () => console.log('unmount', field), [field]);

// React.useEffect(() => {
// const { plugins } = driver.events;
// const plugId = `trackFilters-${field}`;
//
// if (!plugins.find((plug) => plug.id === plugId)) {
// function subscribe(payload) {
// const { filters } = driver.state;
// const activeValue = filters.find((f) => f.field === field);
// if (!activeValue) {
// onChange(null);
// return;
// }
// if (!isEqual(activeValue, value)) {
// onChange(activeValue);
// }
// }
// plugins.push({
// id: plugId,
// subscribe,
// });
// }
//
// return () => {
// driver.events.plugins = driver.events.plugins.filter(
// (plug) => plug.id !== plugId,
// );
//
// // handles deleting the facet
// driver._setState({
// filters: [
// ...driver.state.filters.filter((f) => f.field !== field),
// ].sort(sorter),
// });
// };
// }, [driver, field, onChange, value]);

return (
<SUIFacet
Expand All @@ -97,7 +130,3 @@ function BoostrapFacetView(props) {
/>
);
}

export default function FacetApp(props) {
return <BasicSearchApp {...props} searchViewComponent={BoostrapFacetView} />;
}
58 changes: 39 additions & 19 deletions searchlib/components/SearchApp/SearchResultsApp.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useViews, useSearchContext } from '@eeacms/search/lib/hocs';
import BasicSearchApp from './BasicSearchApp';

function BootstrapSearchResultsView(props) {
const { appConfig, registry } = props;
const { appConfig, registry, children } = props;

const searchContext = useSearchContext();
const { results = [] } = searchContext;
Expand All @@ -24,24 +24,42 @@ function BootstrapSearchResultsView(props) {
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} />
)
) : results.length ? (
<ContentBodyView {...props}>
{results.map((result, i) => (
<Item key={`${i}-${result.id}`} result={result} {...itemViewProps} />
))}
</ContentBodyView>
) : (
<div className="noResults"></div>
React.useEffect(
() => () => console.log('unmount BootstrapSearchResultsView'),
[],
);

return (
<>
{children}
{NoResultsComponent ? (
results.length ? (
<ContentBodyView {...props}>
{results.map((result, i) => (
<Item
key={`${i}-${result.id}`}
result={result}
{...itemViewProps}
/>
))}
</ContentBodyView>
) : (
<NoResultsComponent {...props} />
)
) : results.length ? (
<ContentBodyView {...props}>
{results.map((result, i) => (
<Item
key={`${i}-${result.id}`}
result={result}
{...itemViewProps}
/>
))}
</ContentBodyView>
) : (
<div className="noResults"></div>
)}
</>
);
}

Expand All @@ -53,6 +71,8 @@ export default function SearchResultsApp(props) {
...(defaultSort ? { sortField, sortDirection } : {}),
}); // this makes the prop stable

React.useEffect(() => () => console.log('unmount SearchResultsApp'), []);

return (
<BasicSearchApp
{...props}
Expand Down
4 changes: 3 additions & 1 deletion src/SearchBlock/SearchBlockView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,13 @@ function SearchBlockView(props) {
metadata,
} = props;
const { appName = 'default' } = data;
const blacklist = ['slotFills', 'defaultFilters', 'defaultSort'];

const stableData = useDebouncedStableData(
Object.assign(
{},
...Object.keys(data)
.filter((k) => k !== 'slotFills')
.filter((k) => blacklist.indexOf(k) === -1)
.map((k) => ({ [k]: data[k] })),
),
);
Expand Down Expand Up @@ -68,6 +69,7 @@ function SearchBlockView(props) {
return (
<div>
{mode !== 'view' && 'EEA Semantic Search block'}
{JSON.stringify(data.defaultFilters)}
<Variation
slotFills={data.slotFills}
registry={registry}
Expand Down
1 change: 0 additions & 1 deletion src/SearchBlock/templates/SearchResultsView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ export default function SearchResultsView(props) {
<div className="searchlib-block">
{mode !== 'view' && <div className="searchlib-edit-overlay"></div>}
<SearchResultsApp {...props} />
{props.children}
</div>
</BodyClass>
);
Expand Down

0 comments on commit 9e0bea6

Please sign in to comment.