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

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useReducer } 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';
@@ -25,7 +25,7 @@ const reducer = (state, action) => {
     case 'resetSearch':
       return { ...state, shouldSearch: false };
     case 'reset':
-      return { ...newValues, shouldSearch };
+      return { ...newValues, shouldSearch: false };
     default:
       throw new Error();
   }
@@ -48,15 +48,24 @@ const SearchFilterContainer = ({
   const searchFilterRef = useRef(null);
   const [key, setKey] = useState(`filter-${name}`);
   const [displaySearchFilter, setDisplaySearchFilter] = useState(false);
+  const [urlPath, setUrlPath] = useState(asPath); // used as asPath can take too long to update
   const {
     url: currentUrl,
     query: { sort, sortby },
     query
-  } = parseUrl(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 }) : '';
@@ -77,7 +86,13 @@ const SearchFilterContainer = ({
   const { docType } = getEntityData(entity);
 
   const filtersQuery = shouldAddFilters
-    ? buildFiltersQuery(filterValues || query, filterBy, filterByProperty)
+    ? buildFiltersQuery({
+        query: filterValues,
+        filterBy,
+        filterByProperty,
+        rangeValues,
+        queryKeys: Object.keys(query)
+      })
     : [];
 
   const rawQueryStringified = buildRawQueryStringified(
@@ -108,12 +123,14 @@ const SearchFilterContainer = ({
 
     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 });
   };
 

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,11 @@ const Range = ({
   if (loading || !rangeOption || !rangeValue) return '';
 
   const options = getSelectOptions(getEntitySchema, propsToDisplay);
-  const { min, max } = rangeValue;
-  const shouldShowRange = rangeOption && min !== max;
+  // get range from aggregations so it updates
+  const { min, max } = calculateMinMax(dataAggregations[rangeOption], rangeInterval);
+  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);
@@ -67,18 +71,16 @@ const Range = ({
           />
         </>
       )}
-      {shouldShowRange && (
-        <RangeFilter
-          key={rangeOption}
-          name={rangeOption}
-          label={hasMultipleOptions ? '' : label}
-          value={rangeValue}
-          id={rangeOption}
-          onChange={({ value }) => {
-            handleChange(rangeOption, value);
-          }}
-        />
-      )}
+      <RangeFilter
+        key={`${rangeOption}-${minValue}-${maxValue}`}
+        name={rangeOption}
+        label={hasMultipleOptions ? '' : label}
+        value={valueToUse}
+        id={rangeOption}
+        onChange={({ value }) => {
+          handleChange(rangeOption, value);
+        }}
+      />
     </>
   );
 };
@@ -90,7 +92,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/helpers/build-filters-query.js

@@ -1,4 +1,23 @@
-const builFilterObject = (key, value, filters) => {
+const QUERY_KEYS_TO_IGNORE = ['dataNotSet', 'shouldSearch', 'search_term'];
+
+const builFilterObject = ({ queryKey, value, filters, isRange, isInQuery }) => {
+  if (isRange) {
+    // don't add to query if value matches range values
+    if (isInQuery || (value.min !== value.minValue && value.max !== value.maxValue)) {
+      filters.push({
+        range: {
+          [queryKey]: {
+            gte: Number(value.minValue),
+            lte: Number(value.maxValue)
+          }
+        }
+      });
+    }
+    return;
+  }
+
+  const key = isRange ? queryKey : `${queryKey}.keyword`;
+
   const isArray = Array.isArray(value);
   if (!isArray) {
     const singleFilterObj = { match: { [key]: value } };
@@ -10,14 +29,16 @@ const builFilterObject = (key, value, filters) => {
     filters.push({ match: { [key]: filterValue } });
   });
 };
-const buildFiltersQuery = (query, filterBy, filterByProperty) => {
+const buildFiltersQuery = ({ query, filterBy, filterByProperty, rangeValues, queryKeys }) => {
   const mustFilters = [];
   Object.keys(query).forEach(queryKey => {
-    if (queryKey === 'search_term' || queryKey === 'shouldSearch') return;
+    if (QUERY_KEYS_TO_IGNORE.includes(queryKey)) return;
     if (!queryKey || !query[queryKey]) return;
     const queryValue = query[queryKey];
-    const queryKeyword = `${queryKey}.keyword`;
-    builFilterObject(queryKeyword, queryValue, mustFilters);
+
+    const isRange = rangeValues.includes(queryKey);
+    const isInQuery = queryKeys.includes(queryKey);
+    builFilterObject({ queryKey, value: queryValue, filters: mustFilters, isRange, isInQuery });
   });
 
   if (filterByProperty && filterByProperty.length) {

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

@@ -1,6 +1,6 @@
 import { KEYWORD, SIZE } from '../constants';
 
-const buildRawQueryStringified = (checkboxSelectValues, rangeValues, entity, mustFilters) => {
+const buildRawQueryStringified = (checkboxSelectValues, rangeValues, entity, mustFilters = []) => {
   if (!checkboxSelectValues.length && !rangeValues.length) return '';
 
   const aggs = {};
@@ -22,23 +22,28 @@ const buildRawQueryStringified = (checkboxSelectValues, rangeValues, entity, mus
     };
   });
 
+  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
-                }
-              }
-            ],
-            must: mustFilters,
-            minimum_should_match: 1
-          }
+          bool: boolFilter
         }
       }
     }

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

@@ -6,8 +6,11 @@ const getInitialFilterValues = (filterData, filters, query) => {
   filterValues[SEARCH_TERM] = query[SEARCH_TERM] || '';
 
   if (!filterData) {
-    filters.forEach(({ propsToDisplay: [key] }) => {
-      filterValues[key] = null;
+    filters.forEach(filterProps => {
+      const {
+        propsToDisplay: [key]
+      } = filterProps;
+      filterValues[key] = query[key] ? getFilterValueFromQuery(key, filterProps, {}, query) : null;
     });
     filterValues.dataNotSet = true;
     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/tests/unit/src/components/SearchFilter/components/Range.test.js

@@ -9,6 +9,12 @@ jest.mock('next/router', () => ({
 const getMockedProps = overrides => ({
   rangeInterval: 100,
   label: 'GLabel',
+  dataAggregations: {
+    name: {
+      min: 0,
+      max: 6600
+    }
+  },
   filterValues: {
     name: {
       max: 6600,
@@ -41,6 +47,12 @@ describe('Range component', () => {
 
   it('should match snapshot large values formatted correctly', async () => {
     const mockedProps = getMockedProps({
+      dataAggregations: {
+        name: {
+          min: 9995,
+          max: 10000
+        }
+      },
       filterValues: {
         name: {
           min: 9999,
@@ -59,6 +71,12 @@ describe('Range component', () => {
 
   it('should match snapshot with interval and rounded min & max values', async () => {
     const mockedProps = getMockedProps({
+      dataAggregations: {
+        name: {
+          min: 15.5,
+          max: 49.5
+        }
+      },
       filterValues: {
         name: {
           min: 15.5,
@@ -77,6 +95,12 @@ describe('Range component', () => {
 
   it('should match snapshot with adjusted min & max values based on interval', async () => {
     const mockedProps = getMockedProps({
+      dataAggregations: {
+        name: {
+          min: 6,
+          max: 8
+        }
+      },
       filterValues: {
         name: {
           min: 6,

package/tests/unit/src/components/SearchFilter/components/__snapshots__/Range.test.js.snap

@@ -76,7 +76,7 @@ Array [
       id="nameRange"
       max={10000}
       max-value={10000}
-      min={9999}
+      min={9995}
       min-value={9999}
       step={1}
     >
@@ -224,9 +224,9 @@ Array [
     <div
       className="range__filter name"
       id="nameRange"
-      max={49.5}
+      max={50}
       max-value={49.5}
-      min={15.5}
+      min={15}
       min-value={15.5}
       step={1}
     >

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

@@ -36,8 +36,14 @@ describe('getInitialFilterValues helper function', () => {
     expect(withNoData).toEqual({
       dataNotSet: true,
       search_term: query[SEARCH_TERM],
-      rangeFilter: null,
-      checkboxFilter: null,
+      rangeFilter: {
+        max: 8,
+        maxValue: 8,
+        min: 7,
+        minValue: 7,
+        step: 1
+      },
+      checkboxFilter: query.checkboxFilter,
       emptySelect: null
     });
   });