@blaze-cms/react-page-builder 0.124.0-alpha.9 → 0.124.1-alpha.2

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useReducer, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { useQuery } from '@apollo/client';
 import PropTypes from 'prop-types';
@@ -6,11 +6,31 @@ import { parseUrl, stringify } from 'query-string';
 import SearchFilter from './SearchFilter';
 import { withTitle } from '../../HOC';
 import { getSearchPublishedContent } from '../../application/query';
-import { buildNewQuery, buildRawQueryStringified, getInitialFilterValues } from './helpers';
+import {
+  buildNewQuery,
+  buildRawQueryStringified,
+  getInitialFilterValues,
+  buildFiltersQuery
+} from './helpers';
 import { getEntityData } from '../../helpers';
 import { RAW_RESULTS, RANGE, CHECKBOX_SELECT } from './constants';
 import { SCROLL_OFFSET } from '../../constants';
 
+const reducer = (state, action) => {
+  const { newValues, type, shouldSearch = true } = action;
+
+  switch (type) {
+    case 'update':
+      return { ...state, ...newValues, shouldSearch };
+    case 'resetSearch':
+      return { ...state, shouldSearch: false };
+    case 'reset':
+      return { ...newValues, shouldSearch: false };
+    default:
+      throw new Error();
+  }
+};
+
 const SearchFilterContainer = ({
   entity,
   url,
@@ -18,25 +38,40 @@ const SearchFilterContainer = ({
   name,
   isCollapsedOnResponsive,
   groupAfterMobile,
-  groupAfterDesktop
+  groupAfterDesktop,
+  filterBy,
+  filterByProperty,
+  shouldAddFilters
 }) => {
   const router = useRouter();
+  const { asPath } = router;
   const searchFilterRef = useRef(null);
   const [key, setKey] = useState(`filter-${name}`);
   const [displaySearchFilter, setDisplaySearchFilter] = useState(false);
-  const hasUrl = !!url;
+  const [urlPath, setUrlPath] = useState(asPath); // used as asPath can take too long to update
   const {
     url: currentUrl,
     query: { sort, sortby },
     query
-  } = parseUrl(router.asPath);
+  } = parseUrl(urlPath);
+  const [filterValues, dispatch] = useReducer(
+    reducer,
+    getInitialFilterValues(null, filters, query)
+  );
+
+  useEffect(
+    () => {
+      if (asPath) setUrlPath(asPath);
+    },
+    [asPath]
+  );
+
+  const hasUrl = !!url;
+
   const sortValues = sort && sortby ? stringify({ sort, sortby }) : '';
   const baseQuery = sortValues ? `${currentUrl}?${sortValues}` : currentUrl;
 
   const action = getSearchPublishedContent(RAW_RESULTS);
-
-  let rawQueryStringified = '';
-
   const checkboxSelectValues = [];
   const rangeValues = [];
 
@@ -50,33 +85,46 @@ const SearchFilterContainer = ({
 
   const { docType } = getEntityData(entity);
 
-  rawQueryStringified = buildRawQueryStringified(checkboxSelectValues, rangeValues, docType);
+  const filtersQuery = shouldAddFilters
+    ? buildFiltersQuery(filterValues || query, filterBy, filterByProperty, rangeValues)
+    : [];
+
+  const rawQueryStringified = buildRawQueryStringified(
+    checkboxSelectValues,
+    rangeValues,
+    docType,
+    filtersQuery
+  );
 
-  const { data, error, loading } = useQuery(action, {
+  const { data, error } = useQuery(action, {
     variables: { rawQueryStringified, limit: 0 }, // we only want aggs so limit=0 for no search results
     skip: !rawQueryStringified
   });
 
-  if (loading) return null;
   if (error) return error.message;
   if (!filters.length) return null;
 
-  const { searchPublishedContent: { rawResults: { aggregations: filterData = {} } = {} } = {} } =
+  const { searchPublishedContent: { rawResults: { aggregations: filterData } = {} } = {} } =
     data || {};
 
-  const initialFilterValues = getInitialFilterValues(filterData, filters, query);
+  if (filterValues.dataNotSet && filterData) {
+    const initialFilterValues = getInitialFilterValues(filterData, filters, query);
+    dispatch({ newValues: initialFilterValues, shouldSearch: false, type: 'update' });
+  }
 
   const handleSearch = newQuery => {
     setDisplaySearchFilter(false);
 
     if (!newQuery) {
       scrollToFirstList();
+      setUrlPath(baseQuery);
       return router.push('/Resolver', baseQuery, { shallow: !hasUrl, scroll: false }).then(() => {
         setKey(`filter-${name}:${Date.now()}`); // remove after range component update
       });
     }
     const newUrl = buildNewQuery(url, currentUrl, newQuery, sortValues);
     scrollToFirstList();
+    setUrlPath(newUrl);
     return router.push('/Resolver', newUrl, { shallow: !hasUrl, scroll: false });
   };
 
@@ -93,17 +141,19 @@ const SearchFilterContainer = ({
       window.scrollTo(0, 0);
     }
   };
+  if (!filterValues) return '';
 
   return (
     <SearchFilter
       key={key}
+      setAppliedFilters={dispatch}
       searchFilterRef={searchFilterRef}
       data={filterData}
       filters={filters}
       hasUrl={hasUrl}
       entity={entity}
       handleSearch={handleSearch}
-      initialFilterValues={initialFilterValues}
+      filterValues={filterValues}
       name={name}
       isCollapsedOnResponsive={isCollapsedOnResponsive}
       displaySearchFilter={displaySearchFilter}
@@ -121,7 +171,10 @@ SearchFilterContainer.propTypes = {
   name: PropTypes.string.isRequired,
   isCollapsedOnResponsive: PropTypes.bool,
   groupAfterMobile: PropTypes.number,
-  groupAfterDesktop: PropTypes.number
+  groupAfterDesktop: PropTypes.number,
+  filterBy: PropTypes.array,
+  filterByProperty: PropTypes.array,
+  shouldAddFilters: PropTypes.bool
 };
 
 SearchFilterContainer.defaultProps = {
@@ -130,7 +183,10 @@ SearchFilterContainer.defaultProps = {
   entity: '',
   isCollapsedOnResponsive: true,
   groupAfterMobile: 0,
-  groupAfterDesktop: 0
+  groupAfterDesktop: 0,
+  filterBy: [],
+  filterByProperty: [],
+  shouldAddFilters: false
 };
 
 export default withTitle(SearchFilterContainer);

package/src/components/SearchFilter/components/Checkbox.js

@@ -7,8 +7,17 @@ import { withTitle } from '../../../HOC';
 import { decodeValue } from '../helpers';
 import { LIMIT_MIN, LIMIT_MAX, MORE, LESS } from '../constants';
 
-const Checkbox = ({ data, prop, updateFilterValues, filterValues, label, shouldSearch }) => {
+const Checkbox = ({
+  data,
+  prop,
+  updateFilterValues,
+  filterValues,
+  label,
+  shouldSearch,
+  displayFilterCount
+}) => {
   const [checkboxLimit, setCheckboxLimit] = useState(null);
+  if (!data[prop]) return null;
 
   const handleCheckboxOptions = () => {
     if (checkboxLimit[prop] === LIMIT_MIN) {
@@ -35,7 +44,10 @@ const Checkbox = ({ data, prop, updateFilterValues, filterValues, label, shouldS
   const multiple = [];
 
   const sortedValues = data[prop].buckets
-    .map(({ key }) => key)
+    .map(({ key, doc_count: count }) => {
+      const optionLabel = displayFilterCount ? `${key} (${count})` : key;
+      return [key, optionLabel, !count];
+    })
     .filter(Boolean)
     .sort();
 
@@ -43,11 +55,12 @@ const Checkbox = ({ data, prop, updateFilterValues, filterValues, label, shouldS
     (value, i) =>
       i < checkboxLimit[prop] &&
       multiple.push({
-        label: upperFirst(value),
-        value,
+        label: upperFirst(value[1]),
+        value: value[0],
         name: prop,
-        checked: checkboxQueryParams.includes(value),
-        id: value
+        checked: checkboxQueryParams.includes(value[0]),
+        id: value[0],
+        disabled: value[2]
       })
   );
 
@@ -95,12 +108,14 @@ Checkbox.propTypes = {
   filterValues: PropTypes.object.isRequired,
   updateFilterValues: PropTypes.func.isRequired,
   shouldSearch: PropTypes.bool,
-  label: PropTypes.string
+  label: PropTypes.string,
+  displayFilterCount: PropTypes.bool
 };
 
 Checkbox.defaultProps = {
   shouldSearch: false,
-  label: ''
+  label: '',
+  displayFilterCount: false
 };
 
 export default withTitle(Checkbox);

package/src/components/SearchFilter/components/Range.js

@@ -7,7 +7,7 @@ import Select from '@blaze-react/select';
 import { parseUrl } from 'query-string';
 import { useGetSingleEntitySchema } from '../../../hooks';
 import { withTitle } from '../../../HOC';
-import { getSelectOptions, getIntersectedProp, getRangeValue } from '../helpers';
+import { getSelectOptions, getIntersectedProp, getRangeValue, calculateMinMax } from '../helpers';
 import { decodeValue } from '../helpers/decode-encode';
 
 const Range = ({
@@ -15,6 +15,7 @@ const Range = ({
   label,
   entity,
   propsToDisplay,
+  dataAggregations,
   updateFilterValues,
   filterValues,
   shouldSearch
@@ -37,8 +38,12 @@ const Range = ({
   if (loading || !rangeOption || !rangeValue) return '';
 
   const options = getSelectOptions(getEntitySchema, propsToDisplay);
-  const { min, max } = rangeValue;
+  // get range from aggregations so it updates
+  const { min, max } = calculateMinMax(dataAggregations[rangeOption], rangeInterval);
   const shouldShowRange = rangeOption && min !== max;
+  const minValue = rangeValue.minValue < min ? min : rangeValue.minValue;
+  const maxValue = rangeValue.maxValue > max ? max : rangeValue.maxValue;
+  const valueToUse = { ...rangeValue, min, max, minValue, maxValue };
 
   const handleChange = debounce((option, value) => {
     updateFilterValues({ [option]: { ...value, selectedOption: rangeOption } }, shouldSearch);
@@ -69,10 +74,10 @@ const Range = ({
       )}
       {shouldShowRange && (
         <RangeFilter
-          key={rangeOption}
+          key={`${rangeOption}-${minValue}-${maxValue}`}
           name={rangeOption}
           label={hasMultipleOptions ? '' : label}
-          value={rangeValue}
+          value={valueToUse}
           id={rangeOption}
           onChange={({ value }) => {
             handleChange(rangeOption, value);
@@ -90,7 +95,8 @@ Range.propTypes = {
   updateFilterValues: PropTypes.func.isRequired,
   shouldSearch: PropTypes.bool,
   rangeInterval: PropTypes.number,
-  label: PropTypes.string
+  label: PropTypes.string,
+  dataAggregations: PropTypes.object.isRequired
 };
 
 Range.defaultProps = {

package/src/components/SearchFilter/components/Select.js

@@ -11,17 +11,21 @@ const SelectFilter = ({
   updateFilterValues,
   filterValues,
   shouldSearch,
-  displayLabelAsPlaceholder
+  displayLabelAsPlaceholder,
+  displayFilterCount
 }) => {
   const filterValue = filterValues[prop] || '';
-
-  const options = data[prop].buckets
-    .map(bucket => bucket.key)
+  const disabledOptions = [];
+  const { buckets = [] } = data[prop] || {};
+  const options = buckets
+    .map(({ key, doc_count: count }) => {
+      if (!count) disabledOptions.push(key);
+      const optionLabel = displayFilterCount ? `${key} (${count})` : key;
+      return [key, optionLabel];
+    })
     .filter(Boolean)
     .sort();
 
-  const optionsJoined = options;
-
   const labelText = label || prop;
   let labelToUse = labelText;
   let defaultTextValue = DEFAULT_OPTION;
@@ -36,14 +40,14 @@ const SelectFilter = ({
       value={filterValue}
       id={prop}
       data-testid={`filter-${prop}`}
-      options={optionsJoined}
+      options={options}
       defaultTextValue={defaultTextValue}
       onChange={({ value }) => {
         let valueToUse = value;
         if (value === defaultTextValue) valueToUse = '';
-
         updateFilterValues({ [prop]: valueToUse }, shouldSearch);
       }}
+      disabled={disabledOptions}
     />
   );
 };
@@ -51,17 +55,20 @@ const SelectFilter = ({
 SelectFilter.propTypes = {
   data: PropTypes.object.isRequired,
   prop: PropTypes.string.isRequired,
-  filterValues: PropTypes.object.isRequired,
+  filterValues: PropTypes.object,
   updateFilterValues: PropTypes.func.isRequired,
   shouldSearch: PropTypes.bool,
   label: PropTypes.string,
-  displayLabelAsPlaceholder: PropTypes.bool
+  displayLabelAsPlaceholder: PropTypes.bool,
+  displayFilterCount: PropTypes.bool
 };
 
 SelectFilter.defaultProps = {
+  filterValues: {},
   shouldSearch: false,
   label: '',
-  displayLabelAsPlaceholder: false
+  displayLabelAsPlaceholder: false,
+  displayFilterCount: false
 };
 
 export default withTitle(SelectFilter);

package/src/components/SearchFilter/components/TextSearch.js

@@ -5,7 +5,7 @@ import { MdSearch } from 'react-icons/md';
 import { withTitle } from '../../../HOC';
 import { SEARCH_TERM } from '../constants';
 
-const TextSearch = ({ label, searchValue, updateFilterValues, handleSubmit, filterValues }) => (
+const TextSearch = ({ label, searchValue, updateFilterValues }) => (
   <div className="search">
     <div className="search__wrapper">
       <div className="form-field form-field--input form-field--search">
@@ -34,10 +34,8 @@ const TextSearch = ({ label, searchValue, updateFilterValues, handleSubmit, filt
 );
 
 TextSearch.propTypes = {
-  filterValues: PropTypes.object.isRequired,
   searchValue: PropTypes.string.isRequired,
   updateFilterValues: PropTypes.func.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
   label: PropTypes.string
 };
 

package/src/components/SearchFilter/helpers/build-filters-query.js

@@ -0,0 +1,60 @@
+const QUERY_KEYS_TO_IGNORE = ['dataNotSet', 'shouldSearch', 'search_term'];
+
+const builFilterObject = (queryKey, value, filters, isRange) => {
+  if (isRange) {
+    // don't add to query if value matches range values
+    if (value.min !== value.minValue && value.max !== value.maxValue) {
+      filters.push({
+        range: {
+          [queryKey]: {
+            gte: Number(value.min),
+            lte: Number(value.max)
+          }
+        }
+      });
+    }
+    return;
+  }
+
+  const key = isRange ? queryKey : `${queryKey}.keyword`;
+
+  const isArray = Array.isArray(value);
+  if (!isArray) {
+    const singleFilterObj = { match: { [key]: value } };
+    filters.push(singleFilterObj);
+    return;
+  }
+
+  value.forEach(filterValue => {
+    filters.push({ match: { [key]: filterValue } });
+  });
+};
+const buildFiltersQuery = (query, filterBy, filterByProperty, rangeValues) => {
+  const mustFilters = [];
+  Object.keys(query).forEach(queryKey => {
+    if (QUERY_KEYS_TO_IGNORE.includes(queryKey)) return;
+    if (!queryKey || !query[queryKey]) return;
+    const queryValue = query[queryKey];
+
+    const isRange = rangeValues.includes(queryKey);
+    builFilterObject(queryKey, queryValue, mustFilters, isRange);
+  });
+
+  if (filterByProperty && filterByProperty.length) {
+    filterByProperty &&
+      filterByProperty.forEach(filterByPropOption => {
+        const [filterByPropKey] = filterByPropOption.split('/');
+        filterBy.forEach(filterByOption => {
+          if (filterByOption.indexOf(filterByPropKey) === -1) return;
+          const [, filteryByValue] = filterByOption.split('/');
+          const filterByKeyword = `${filterByPropKey}.keyword`;
+          if (!filteryByValue) return;
+          mustFilters.push({ match: { [filterByKeyword]: filteryByValue } });
+        });
+      });
+  }
+
+  return mustFilters;
+};
+
+export default buildFiltersQuery;

package/src/components/SearchFilter/helpers/build-query.js

@@ -3,7 +3,9 @@ import parseFilterValue from './parse-filter-value';
 
 const buildQuery = (filterValues, filters) => {
   const newQuery = [];
-  const searchValue = filterValues[SEARCH_TERM];
+  const searchValue = filterValues[SEARCH_TERM]
+    ? encodeURIComponent(filterValues[SEARCH_TERM])
+    : '';
   if (searchValue) newQuery.push(`${SEARCH_TERM}=${searchValue}`);
 
   filters.forEach(({ propsToDisplay, type }) => {

package/src/components/SearchFilter/helpers/build-raw-query-stringified.js

@@ -1,6 +1,6 @@
 import { KEYWORD, SIZE } from '../constants';
 
-const buildRawQueryStringified = (checkboxSelectValues, rangeValues, entity) => {
+const buildRawQueryStringified = (checkboxSelectValues, rangeValues, entity, mustFilters = []) => {
   if (!checkboxSelectValues.length && !rangeValues.length) return '';
 
   const aggs = {};
@@ -22,22 +22,28 @@ const buildRawQueryStringified = (checkboxSelectValues, rangeValues, entity) =>
     };
   });
 
+  const boolFilter = {
+    should: [
+      {
+        match: {
+          docType: entity
+        }
+      }
+    ],
+    minimum_should_match: 1
+  };
+
+  if (mustFilters.length) {
+    boolFilter.must = mustFilters;
+  }
+
   return JSON.stringify({
     aggs,
     size: 0,
     query: {
       bool: {
         filter: {
-          bool: {
-            should: [
-              {
-                match: {
-                  docType: entity
-                }
-              }
-            ],
-            minimum_should_match: 1
-          }
+          bool: boolFilter
         }
       }
     }

package/src/components/SearchFilter/helpers/get-initial-filter-values.js

@@ -3,12 +3,26 @@ import getFilterValueFromQuery from './get-filter-value-from-query';
 
 const getInitialFilterValues = (filterData, filters, query) => {
   const filterValues = {};
+  filterValues[SEARCH_TERM] = query[SEARCH_TERM] || '';
+
+  if (!filterData) {
+    filters.forEach(filterProps => {
+      const {
+        propsToDisplay: [key]
+      } = filterProps;
+      filterValues[key] = query[key] ? getFilterValueFromQuery(key, filterProps, {}, query) : null;
+    });
+    filterValues.dataNotSet = true;
+    return filterValues;
+  }
+
   Object.keys(filterData).forEach(key => {
     const filterProps =
       filters.find(({ propsToDisplay }) => propsToDisplay.find(prop => key === prop)) || {};
     filterValues[key] = getFilterValueFromQuery(key, filterProps, filterData[key], query);
   });
-  filterValues[SEARCH_TERM] = query[SEARCH_TERM] || '';
+
+  filterValues.dataNotSet = false;
 
   return filterValues;
 };

package/src/components/SearchFilter/helpers/get-range-value.js

@@ -11,8 +11,8 @@ const getRangeValue = (rawQueryProp, rangeInterval, _min, _max) => {
     const updatedMaxValue = Number(queryParamMax);
 
     return {
-      min,
-      max,
+      min: Number.isNaN(min) ? updatedMinValue : min,
+      max: Number.isNaN(max) ? updatedMaxValue : max,
       step: rangeInterval,
       maxValue: updatedMaxValue,
       minValue: updatedMinValue

package/src/components/SearchFilter/helpers/index.js

@@ -13,6 +13,7 @@ import isDeviceDesktop from './is-device-desktop';
 import getInitialFilterValues from './get-initial-filter-values';
 import getFilterValueFromQuery from './get-filter-value-from-query';
 import buildQuery from './build-query';
+import buildFiltersQuery from './build-filters-query';
 
 export {
   buildQuery,
@@ -30,5 +31,6 @@ export {
   getSelectOptions,
   isDeviceDesktop,
   getInitialFilterValues,
-  getFilterValueFromQuery
+  getFilterValueFromQuery,
+  buildFiltersQuery
 };

package/src/components/SearchFilter/helpers/parse-filter-value.js

@@ -8,10 +8,10 @@ const parseFilterValue = (key, type, value) => {
       if (value.minValue === value.min && value.maxValue === value.max) return null;
       return `${key}=${value.minValue}-${value.maxValue}`;
     case CHECKBOX:
-      if (typeof value === 'string') return `${key}=${value}`;
-      return value.map(val => `${key}=${val}`).join('&');
+      if (typeof value === 'string') return `${key}=${encodeURIComponent(value)}`;
+      return value.map(val => `${key}=${encodeURIComponent(val)}`).join('&');
     case SELECT: {
-      const parsedValue = value.replace(/&/g, '%26');
+      const parsedValue = encodeURIComponent(value);
       return `${key}=${parsedValue}`;
     }
 

package/src/components/index.js

@@ -18,7 +18,7 @@ export default {
   video: dynamic(() => import(/* webpackChunkName: "blazePbVideo" */ './Video')),
   wrapper: dynamic(() => import(/* webpackChunkName: "blazePbWrapper" */ './Wrapper')),
   searchcontent: dynamic(() =>
-    import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchContent')
+    import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchContent/SearchContent')
   ),
   searchfilter: dynamic(() =>
     import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchFilter')
@@ -42,5 +42,14 @@ export default {
     import(/* webpackChunkName: "blazePbPasswordResetRequest" */ './PasswordResetRequest')
   ),
   breadcrumb: dynamic(() => import(/* webpackChunkName: "blazePbBreadcrumb" */ './Breadcrumb')),
+  itemlistbutton: dynamic(() =>
+    import(/* webpackChunkName: "blazePbItemListButton" */ './ItemList/ItemListButton')
+  ),
+  itemlistcounter: dynamic(() =>
+    import(/* webpackChunkName: "blazePbItemListCounter" */ './ItemList/ItemListCounter')
+  ),
+  itemlistnew: dynamic(() =>
+    import(/* webpackChunkName: "blazePbItemListNew" */ './ItemList/ItemListNew')
+  ),
   backtotop: dynamic(() => import(/* webpackChunkName: "blazePbBackToTop" */ './BackToTop'))
 };

package/src/constants/index.js

@@ -17,6 +17,7 @@ const RANGE = 'range';
 const CHECKBOX = 'checkbox';
 const ELEMENT = 'element';
 const MENU_ITEM = 'menuitem';
+const SUB_MENU = 'submenu';
 const SELECT = 'select';
 const ON_CLICK = 'onClick';
 const KEYWORD = 'keyword';
@@ -303,6 +304,7 @@ export {
   MOBILE_WIDTH,
   HIDDEN,
   MENU_ITEM,
+  SUB_MENU,
   LOGIN_FORM,
   PASSWORD_REGEX,
   PASSWORD_VALIDATION_MESSAGE,

package/src/helpers/build-raw-query.js

@@ -62,6 +62,7 @@ const buildRawQuery = (
 
   if (itemsToDisplay && itemsToDisplay.length) {
     const itemsToDisplayIds = getItemsToDisplayIds(itemsToDisplay);
+
     query.bool.must.push({ ids: { values: itemsToDisplayIds } });
     if (shouldApplySort) {
       return {

package/src/hooks/helpers/append-gtm-classname.js

@@ -7,6 +7,9 @@ const appendGtmClassName = (settings, childComponents) => {
       children: [, compChildren]
     }
   } = childComponents;
+
+  if (!compChildren || !Array.isArray(compChildren)) return settings;
+
   const gtmClassNames = compChildren
     .filter(
       ({