@blaze-cms/react-page-builder 0.124.1-alpha.1 → 0.124.1-alpha.5

package/src/components/Button.js

@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from 'react';
+import React, { useState, Fragment, useEffect } from 'react';
 import { useCookies } from 'react-cookie';
 import { useRouter } from 'next/router';
 import classnames from 'classnames';
@@ -39,6 +39,13 @@ const Button = props => {
   const { blaze_auth: blazeCookie } = cookies;
   const [showChildren, setShowChildren] = useState(false);
 
+  useEffect(
+    () => {
+      setShowChildren(false);
+    },
+    [router.asPath]
+  );
+
   const checkIfButtonShouldRender = () => {
     if (isLogoutButton) return !!blazeCookie;
     if (!text && !icon) return false;

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

@@ -69,8 +69,9 @@ const SearchFilter = ({
   const formId = `filter-${name}-form`;
 
   const handleReset = () => {
-    const newValues = getInitialFilterValues(data, filters, {});
+    const newValues = getInitialFilterValues(null, filters, {});
     setAppliedFilters({ newValues, type: 'reset' });
+    doSubmit(newValues);
   };
 
   const updateFilterValues = (newValues, shouldSubmit) => {

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, rangeValues)
+    ? 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

@@ -21,7 +21,7 @@ const Range = ({
   shouldSearch
 }) => {
   const router = useRouter();
-  const debounceAmount = shouldSearch ? 1200 : 100;
+  const debounceAmount = shouldSearch ? 1200 : 400;
   const { query } = parseUrl(decodeValue(router.asPath));
   const hasMultipleOptions = propsToDisplay.length > 1;
   const initialRangeOption = getIntersectedProp(query, propsToDisplay) || propsToDisplay[0];
@@ -40,7 +40,6 @@ const Range = ({
   const options = getSelectOptions(getEntitySchema, propsToDisplay);
   // 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 };
@@ -72,18 +71,16 @@ const Range = ({
           />
         </>
       )}
-      {shouldShowRange && (
-        <RangeFilter
-          key={`${rangeOption}-${minValue}-${maxValue}`}
-          name={rangeOption}
-          label={hasMultipleOptions ? '' : label}
-          value={valueToUse}
-          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);
+        }}
+      />
     </>
   );
 };

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

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

package/tests/unit/src/components/Banner/helpers.test.js

@@ -166,7 +166,7 @@ describe('buildContextualTargeting helper', () => {
       { getPages: [{ tags: [{ name: 'tag1' }, { name: 'tag2' }] }] },
       [{ label: 'tagKey', propertiesToDisplay: ['tags.name'] }]
     );
-    expect(contextualTargeting).toEqual({ tagKey: 'tag1, tag2' });
+    expect(contextualTargeting).toEqual({ tagKey: ['tag1', 'tag2'] });
   });
 });
 

package/tests/unit/src/components/Button.test.js

@@ -8,6 +8,10 @@ jest.mock('@apollo/client', () => ({
   useApolloClient: jest.fn(() => ({ resetStore: () => null }))
 }));
 
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(() => ({ asPath: '' }))
+}));
+
 const componentProps = {
   type: 'icon',
   text: 'test',