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

package/src/components/SearchContent/index.js

@@ -1,179 +1,3 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { gql, useQuery } from '@apollo/client';
-import { useRouter } from 'next/router';
-import { getPublishedContent } from '../../application/query';
-import BlazeLink from '../BlazeLink';
-
-const SearchContent = ({
-  entity,
-  searchInputAlignment,
-  searchInputWrapperMobile,
-  searchInputWrapperDesktop,
-  collapsible,
-  isMobile,
-  placeholder
-}) => {
-  const [collapsed, setCollapsed] = useState(collapsible);
-  const [searchTerm, setSearchTerm] = useState(null);
-  const router = useRouter();
-
-  const capitalize = s => {
-    if (typeof s !== 'string') return '';
-    return s.charAt(0).toUpperCase() + s.slice(1);
-  };
-
-  const [a, b] = entity.split('_');
-
-  const entityName = capitalize(a) + capitalize(b);
-
-  const rawQueryStringified = JSON.stringify({
-    size: 0,
-    query: {
-      bool: {
-        should: [
-          {
-            match: {
-              docType: entity
-            }
-          }
-        ],
-        minimum_should_match: 1
-      }
-    }
-  });
-
-  const query = gql`
-    ${getPublishedContent(entityName)}
-  `;
-
-  const { loading, error, data } = useQuery(query, {
-    variables: { rawQueryStringified, offset: 0, limit: 5 }
-  });
-
-  if (loading) return null;
-  if (error) return null;
-
-  const handleClick = (e, url) => {
-    e.preventDefault();
-    router.push(url);
-  };
-
-  const handleKeyPress = e => {
-    if (e.key === 'Enter' && e.target.value !== '') {
-      router.push(`/search?search_term=${e.target.value}`);
-    }
-  };
-
-  const renderResults = () => {
-    // eslint-disable-next-line no-undef
-    const { results } = data?.searchPublishedContent;
-
-    if (results && searchTerm && searchTerm !== '') {
-      return results.map(({ name, url }) => {
-        if (name.includes(searchTerm)) {
-          return (
-            <BlazeLink href={url} onClick={e => handleClick(e, url)}>
-              {name}
-            </BlazeLink>
-          );
-        }
-
-        return null;
-      });
-    }
-
-    return [];
-  };
-
-  const searchResultsMessage = searchTerm ? `Search results for: ${searchTerm}` : '';
-
-  return collapsed ? (
-    <div className={isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop}>
-      <div className="search-content--collapse__wrapper">
-        <label className="search-content--collapse__label">
-          <span className="search-content--collapse__icon_wrapper">
-            <svg className="search-content--collapse__icon" viewBox="0 0 20 20">
-              <path
-                fillRule="evenodd"
-                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-                clipRule="evenodd"
-              />
-            </svg>
-          </span>
-          <input
-            onFocus={() => setCollapsed(false)}
-            onChange={e => setSearchTerm(e.target.value)}
-            type="text"
-            name="search"
-            value=""
-            className="search-content--collapse__input"
-          />
-        </label>
-      </div>
-    </div>
-  ) : (
-    <>
-      <div className={`${isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop}`}>
-        <div className="search-content--expanded__wrapper">
-          <label className="search-content--expanded__label">
-            <span className="search-content--expanded__icon_wrapper">
-              <svg className="search-content--expanded__icon" viewBox="0 0 20 20">
-                <path
-                  fillRule="evenodd"
-                  d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </span>
-            <input
-              type="text"
-              name="search"
-              onChange={e => setSearchTerm(e.target.value)}
-              onKeyPress={handleKeyPress}
-              className="search-content--expanded__input"
-              placeholder={placeholder}
-              onBlur={() => {
-                if (!collapsible) return;
-                if (!searchTerm || searchTerm === '') setCollapsed(true);
-              }}
-            />
-          </label>
-        </div>
-        {data &&
-          searchResultsMessage !== '' && (
-            <div className="search-content--results__wrapper">
-              <div className="search-content--results__wrapper--message">
-                <div className="text-sm pt-2">{searchResultsMessage}</div>
-
-                <div className="search-content--results__message">
-                  <div className="search-content--results__content">{renderResults()}</div>
-                </div>
-              </div>
-            </div>
-          )}
-      </div>
-    </>
-  );
-};
-
-SearchContent.propTypes = {
-  searchInputAlignment: PropTypes.string,
-  searchInputWrapperMobile: PropTypes.string,
-  searchInputWrapperDesktop: PropTypes.string,
-  placeholder: PropTypes.string,
-  isMobile: PropTypes.bool,
-  collapsible: PropTypes.bool,
-  entity: PropTypes.string.isRequired
-};
-
-SearchContent.defaultProps = {
-  searchInputAlignment: '',
-  searchInputWrapperMobile: '',
-  searchInputWrapperDesktop: '',
-  placeholder: '',
-  isMobile: false,
-  collapsible: false
-};
+import SearchContent from './SearchContent';
 
 export default SearchContent;

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

@@ -17,13 +17,10 @@ const FiltersList = ({
 
   return filters.map(({ type, label, propsToDisplay, elementTitle, ...otherProps }, index) => {
     if (!propsToDisplay && !propsToDisplay.length) return null;
-
     const dynamicKey = [itemId, index].join('-');
     const isDataAvailable = !!data && Object.keys(data).length;
     const dataAggregations = isDataAvailable ? data : null;
     const areAggregationsAvailable = isDataAvailable && !!dataAggregations;
-    const results = areAggregationsAvailable && dataAggregations[propsToDisplay[0]];
-    const shouldDisplayFilter = results && results.buckets && results.buckets.length;
 
     switch (type) {
       case TEXT_SEARCH:
@@ -43,43 +40,39 @@ const FiltersList = ({
         );
       case CHECKBOX:
         return (
-          !!shouldDisplayFilter && (
-            <div
-              key={dynamicKey}
-              className="filter__section filter__section--search-refine filter__section--checkboxes">
-              <Checkbox
-                {...otherProps}
-                data={data}
-                prop={propsToDisplay[0]}
-                label={label}
-                elementTitle={elementTitle}
-                hasUrl={hasUrl}
-                filterValues={filterValues}
-                updateFilterValues={updateFilterValues}
-                shouldSearch={shouldSearch}
-              />
-            </div>
-          )
+          <div
+            key={dynamicKey}
+            className="filter__section filter__section--search-refine filter__section--checkboxes">
+            <Checkbox
+              {...otherProps}
+              data={data}
+              prop={propsToDisplay[0]}
+              label={label}
+              elementTitle={elementTitle}
+              hasUrl={hasUrl}
+              filterValues={filterValues}
+              updateFilterValues={updateFilterValues}
+              shouldSearch={shouldSearch}
+            />
+          </div>
         );
       case SELECT:
         return (
-          !!shouldDisplayFilter && (
-            <div
-              key={dynamicKey}
-              className="filter__section filter__section--search-refine filter__section--selects">
-              <SelectFilter
-                {...otherProps}
-                data={data}
-                prop={propsToDisplay[0]}
-                label={label}
-                elementTitle={elementTitle}
-                hasUrl={hasUrl}
-                filterValues={filterValues}
-                updateFilterValues={updateFilterValues}
-                shouldSearch={shouldSearch}
-              />
-            </div>
-          )
+          <div
+            key={dynamicKey}
+            className="filter__section filter__section--search-refine filter__section--selects">
+            <SelectFilter
+              {...otherProps}
+              data={data}
+              prop={propsToDisplay[0]}
+              label={label}
+              elementTitle={elementTitle}
+              hasUrl={hasUrl}
+              filterValues={filterValues}
+              updateFilterValues={updateFilterValues}
+              shouldSearch={shouldSearch}
+            />
+          </div>
         );
       case RANGE:
         return (

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useReducer } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import debounce from 'lodash.debounce';
@@ -14,21 +14,6 @@ import ResetDesktopForm from './ResetDesktopForm';
 import MobileFormToolbar from './MobileFormToolbar';
 import { SEARCH, REFINE, MORE_FILTERS_CLASSES } 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 };
-    default:
-      throw new Error();
-  }
-};
-
 const SearchFilter = ({
   searchFilterRef,
   data,
@@ -40,27 +25,33 @@ const SearchFilter = ({
   isCollapsedOnResponsive,
   displaySearchFilter,
   setDisplaySearchFilter,
-  initialFilterValues,
   groupAfterDesktop,
-  groupAfterMobile
+  groupAfterMobile,
+  filterValues,
+  setAppliedFilters
 }) => {
   const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);
   const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);
-  const [filterValues, dispatch] = useReducer(reducer, initialFilterValues);
 
-  const handleSubmit = debounce(newValues => {
+  const doSubmit = (newValues = filterValues) => {
     const newQuery = buildQuery(newValues, filters);
     handleSearch(newQuery);
+    setMoreFiltersDesktopCollapsed(true);
+    setMoreFiltersMobileCollapsed(true);
+  };
+
+  const handleSubmit = debounce(newValues => {
+    doSubmit(newValues);
   }, 200);
 
   useEffect(
     () => {
       if (filterValues.shouldSearch) {
         handleSubmit(filterValues);
-        dispatch({ type: 'resetSearch' });
+        setAppliedFilters({ type: 'resetSearch' });
       }
     },
-    [filterValues, handleSubmit]
+    [filterValues, handleSubmit, setAppliedFilters]
   );
 
   const formClass = classnames('filter__form filter__form--initial', {
@@ -79,12 +70,12 @@ const SearchFilter = ({
 
   const handleReset = () => {
     const newValues = getInitialFilterValues(data, filters, {});
-
-    dispatch({ newValues, type: 'reset' });
+    setAppliedFilters({ newValues, type: 'reset' });
   };
 
   const updateFilterValues = (newValues, shouldSubmit) => {
-    dispatch({ newValues, shouldSearch: shouldSubmit, type: 'update' });
+    const newAppliedFilters = { ...filterValues, ...newValues };
+    setAppliedFilters({ newValues: newAppliedFilters, shouldSearch: shouldSubmit, type: 'update' });
   };
 
   const shouldGroup = !!(groupAfterDesktop || groupAfterMobile);
@@ -99,8 +90,7 @@ const SearchFilter = ({
         id={formId}
         onSubmit={e => {
           e.preventDefault();
-          const newQuery = buildQuery(filterValues, filters);
-          handleSearch(newQuery);
+          doSubmit();
         }}>
         {displaySearchFilter && (
           <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />
@@ -136,6 +126,7 @@ const SearchFilter = ({
 
                 {!!groupAfterMobile && (
                   <button
+                    data-testId="search-filter-mobile-toggler"
                     className={moreFiltersMobileTogglerClass}
                     type="button"
                     onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>
@@ -160,6 +151,7 @@ const SearchFilter = ({
 
                     {!!groupAfterDesktop && (
                       <button
+                        data-testId="search-filter-desktop-toggler"
                         className={moreFiltersDesktopTogglerClass}
                         type="button"
                         onClick={() =>
@@ -241,7 +233,8 @@ SearchFilter.propTypes = {
   isCollapsedOnResponsive: PropTypes.bool.isRequired,
   groupAfterDesktop: PropTypes.number.isRequired,
   groupAfterMobile: PropTypes.number.isRequired,
-  initialFilterValues: PropTypes.object.isRequired
+  filterValues: PropTypes.object.isRequired,
+  setAppliedFilters: PropTypes.func.isRequired
 };
 
 export default SearchFilter;

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useReducer } 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 };
+    default:
+      throw new Error();
+  }
+};
+
 const SearchFilterContainer = ({
   entity,
   url,
@@ -18,25 +38,27 @@ 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 [filterValues, dispatch] = useReducer(reducer, null);
   const hasUrl = !!url;
   const {
     url: currentUrl,
     query: { sort, sortby },
     query
-  } = parseUrl(router.asPath);
+  } = parseUrl(asPath);
   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,21 +72,32 @@ const SearchFilterContainer = ({
 
   const { docType } = getEntityData(entity);
 
-  rawQueryStringified = buildRawQueryStringified(checkboxSelectValues, rangeValues, docType);
+  const filtersQuery = shouldAddFilters
+    ? buildFiltersQuery(filterValues || query, filterBy, filterByProperty)
+    : [];
+
+  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 && filterData) {
+    const initialFilterValues = getInitialFilterValues(filterData, filters, query);
+    dispatch({ newValues: initialFilterValues, shouldSearch: false, type: 'update' });
+  }
 
   const handleSearch = newQuery => {
     setDisplaySearchFilter(false);
@@ -93,17 +126,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 +156,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 +168,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,7 +7,15 @@ 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);
 
   const handleCheckboxOptions = () => {
@@ -35,7 +43,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 +54,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 +107,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/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
 };