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

package/src/components/SearchContent/SearchContent.js

@@ -0,0 +1,136 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useRouter } from 'next/router';
+import { useDebounceSearch } from '@blaze-cms/plugin-search-ui';
+import SearchContentResults from './SearchContentResults';
+import SearchContentToggleIcon from './SearchContentToggleIcon';
+
+const SearchContent = ({
+  entities,
+  searchInputAlignment,
+  searchInputWrapperMobile,
+  searchInputWrapperDesktop,
+  collapsible,
+  isMobile,
+  placeholder,
+  modifier
+}) => {
+  const [collapsed, setCollapsed] = useState(collapsible);
+  const router = useRouter();
+
+  const { results, searchTerm, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({
+    entities,
+    initialSearchTerm: '',
+    resultKeys: 'id, name, image { url }, url'
+  });
+
+  useEffect(
+    () => {
+      const handleRouteChange = () => setSearchTerm('');
+      router.events.on('routeChangeStart', handleRouteChange);
+
+      return () => {
+        router.events.off('routeChangeStart', handleRouteChange);
+      };
+    },
+    [router.events, setSearchTerm]
+  );
+
+  const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
+
+  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 handleOnBlur = () => {
+    if (!collapsible) return;
+    if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);
+  };
+
+  const handleClearSearchResults = () => {
+    setSearchTerm('');
+  };
+
+  const className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');
+  return collapsed ? (
+    <div className={className}>
+      <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"
+            className="search-content--collapse__input"
+          />
+        </label>
+      </div>
+    </div>
+  ) : (
+    <>
+      <div className={className}>
+        <div className="search-content--expanded__wrapper">
+          <label className="search-content--expanded__label">
+            <span className="search-content--expanded__icon_wrapper">
+              <SearchContentToggleIcon results={results} onClear={handleClearSearchResults} />
+            </span>
+            <input
+              type="text"
+              name="search"
+              onChange={e => setSearchTerm(e.target.value)}
+              onKeyPress={handleKeyPress}
+              className="search-content--expanded__input"
+              placeholder={placeholder}
+              value={searchTerm}
+              onBlur={handleOnBlur}
+            />
+          </label>
+        </div>
+        <SearchContentResults
+          results={results}
+          debouncedSearchTerm={debouncedSearchTerm}
+          handleClick={handleClick}
+        />
+      </div>
+    </>
+  );
+};
+
+SearchContent.propTypes = {
+  searchInputAlignment: PropTypes.string,
+  searchInputWrapperMobile: PropTypes.string,
+  searchInputWrapperDesktop: PropTypes.string,
+  placeholder: PropTypes.string,
+  isMobile: PropTypes.bool,
+  collapsible: PropTypes.bool,
+  entities: PropTypes.array.isRequired,
+  modifier: PropTypes.string
+};
+
+SearchContent.defaultProps = {
+  searchInputAlignment: '',
+  searchInputWrapperMobile: '',
+  searchInputWrapperDesktop: '',
+  placeholder: '',
+  isMobile: false,
+  collapsible: false,
+  modifier: ''
+};
+
+export default SearchContent;

package/src/components/SearchContent/SearchContentItems.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import BlazeLink from '../BlazeLink';
+import LazyImage from '../LazyImage';
+
+const SearchContentItems = ({ results = [], onClick }) =>
+  results.map(item => {
+    if (!item.url) return null;
+
+    const { id, name, image, url } = item;
+
+    return (
+      <BlazeLink href={url} onClick={onClick} key={id}>
+        <div className="search-content--results__wrapper">
+          {image?.url ? (
+            <LazyImage
+              src={image.url}
+              alt={name}
+              className="search-content--results__image"
+              sizeKey="search-result"
+            />
+          ) : null}
+          <span className="search-content--results__title">{name}</span>
+        </div>
+      </BlazeLink>
+    );
+  });
+
+export default SearchContentItems;

package/src/components/SearchContent/SearchContentResults.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import BlazeLink from '../BlazeLink';
+import SearchContentItems from './SearchContentItems';
+
+const SearchContentResults = ({ results, debouncedSearchTerm, onClick }) => {
+  if (debouncedSearchTerm !== '') {
+    return (
+      <div className="search-content--results__wrapper">
+        <div className="search-content--results__wrapper--message">
+          <div className="search-content--results__content">
+            {results.length === 0 && (
+              <div className="search-content--results__message">
+                <BlazeLink href={`/search?search_term=${debouncedSearchTerm}`}>
+                  {`Search all results for: ${debouncedSearchTerm}`}
+                </BlazeLink>
+              </div>
+            )}
+            {results.length > 0 && <SearchContentItems results={results} onClick={onClick} />}
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return null;
+};
+
+export default SearchContentResults;

package/src/components/SearchContent/SearchContentToggleIcon.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const SearchContentToggleIcon = ({ results, onClear }) => {
+  if (results && results.length > 0) {
+    return (
+      <svg className="search-content--expanded__icon" viewBox="0 0 20 20" onClick={onClear}>
+        <path
+          fillRule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clipRule="evenodd"
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <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>
+  );
+};
+
+export default SearchContentToggleIcon;

package/src/components/SearchContent/index.js

@@ -1,219 +1,3 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { gql, useApolloClient } from '@apollo/client';
-
-import { useRouter } from 'next/router';
-import { getPublishedContent } from '../../application/query';
-import BlazeLink from '../BlazeLink';
-
-const logError = error => error;
-
-const SearchContent = ({
-  entities,
-  searchInputAlignment,
-  searchInputWrapperMobile,
-  searchInputWrapperDesktop,
-  collapsible,
-  isMobile,
-  placeholder
-}) => {
-  const [collapsed, setCollapsed] = useState(collapsible);
-  const [searchTerm, setSearchTerm] = useState(null);
-  const [data, setData] = useState([]);
-
-  const router = useRouter();
-  const client = useApolloClient();
-
-  const capitalize = s => {
-    if (typeof s !== 'string') return '';
-    return s.charAt(0).toUpperCase() + s.slice(1);
-  };
-
-  React.useEffect(() => {
-    if (data && data.length !== 0) return;
-
-    const promises = entities.map(entity => {
-      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)}
-      `;
-
-      try {
-        return client.query({
-          query,
-          variables: {
-            rawQueryStringified,
-            offset: 0,
-            limit: 5
-          }
-        });
-      } catch (e) {
-        return [];
-      }
-    });
-
-    try {
-      (async () => {
-        try {
-          const fetchResults = await Promise.all(promises);
-          const searchResults = fetchResults
-            .map(result => {
-              const { data: resultData } = result;
-              return resultData.searchPublishedContent.results;
-            })
-            .flat();
-
-          setData(searchResults);
-        } catch (e) {
-          logError(e);
-        }
-      })();
-    } catch (e) {
-      logError(e);
-    }
-  });
-
-  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
-    data?.map(dataItem => {
-      const { name, image, url } = dataItem;
-
-      if (searchTerm && searchTerm !== '') {
-        if (name.includes(searchTerm)) {
-          return (
-            <BlazeLink href={url} onClick={e => handleClick(e, url)}>
-              <div className="mt-2 mb-1">
-                <div className="flex justify-start items-center">
-                  {image.url ? <img src={image.url} alt={name} className="w-20 h-14" /> : null}
-                  <span className="ml-2">{name}</span>
-                </div>
-              </div>
-            </BlazeLink>
-          );
-        }
-
-        return null;
-      }
-    });
-
-  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,
-  entities: PropTypes.array.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,11 @@ 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' });
+    setAppliedFilters({ newValues, shouldSearch: shouldSubmit, type: 'update' });
   };
 
   const shouldGroup = !!(groupAfterDesktop || groupAfterMobile);
@@ -99,8 +89,7 @@ const SearchFilter = ({
         id={formId}
         onSubmit={e => {
           e.preventDefault();
-          const newQuery = buildQuery(filterValues, filters);
-          handleSearch(newQuery);
+          doSubmit();
         }}>
         {displaySearchFilter && (
           <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />
@@ -136,6 +125,7 @@ const SearchFilter = ({
 
                 {!!groupAfterMobile && (
                   <button
+                    data-testId="search-filter-mobile-toggler"
                     className={moreFiltersMobileTogglerClass}
                     type="button"
                     onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>
@@ -160,6 +150,7 @@ const SearchFilter = ({
 
                     {!!groupAfterDesktop && (
                       <button
+                        data-testId="search-filter-desktop-toggler"
                         className={moreFiltersDesktopTogglerClass}
                         type="button"
                         onClick={() =>
@@ -241,7 +232,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;