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

package/src/components/Card/CardFactory.js

@@ -1,34 +1,17 @@
 import React from 'react';
 import { useQuery } from '@apollo/client';
-import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
-import { parseUrl } from 'query-string';
-import { getSingleEntitySchema, getItemList } from '../../application/query';
+import { getSingleEntitySchema } from '../../application/query';
 import CardRender from './CardRender';
-import {
-  buildPropsQuery,
-  getGenericProps,
-  checkPropsToUse,
-  getItemListId,
-  getItemListIds
-} from '../../helpers';
+import { buildPropsQuery, getGenericProps, checkPropsToUse } from '../../helpers';
 import { WITH_BANNER } from '../../constants';
 
 const CardFactory = ({ entity, propsToDisplay, itemsToDisplay, itemListName, ...cardProps }) => {
-  const router = useRouter();
-  const { asPath } = router;
-  const parsedQuery = asPath.replace(/%5D/g, ']').replace(/%5B/g, '[');
-  const { query: { itemListId: queryItemListId } = {} } = parseUrl(parsedQuery);
-  const itemListId = getItemListId(itemListName, queryItemListId);
   const { data, error, loading } = useQuery(getSingleEntitySchema, {
     variables: { id: entity }
   });
-  const { data: itemListData = {}, loading: itemListLoading } = useQuery(getItemList, {
-    variables: { id: itemListId },
-    skip: !itemListId
-  });
 
-  if (loading || itemListLoading) return '';
+  if (loading) return '';
   if (error) return error.message;
   if (!data) return null;
 
@@ -36,14 +19,13 @@ const CardFactory = ({ entity, propsToDisplay, itemsToDisplay, itemListName, ...
   const extraProps = buildPropsQuery(data, propsToDisplayValues, cardProps) || '';
   const { gridModifier, ...cardRenderProps } = getGenericProps(cardProps);
   const extraModifierForBanner = cardRenderProps.banner ? WITH_BANNER : '';
-  const itemListIds = getItemListIds(itemListData);
 
   return (
     <CardRender
       gridModifier={`${gridModifier}${extraModifierForBanner}`}
       bannerModifier={extraModifierForBanner}
       entity={entity}
-      itemsToDisplay={itemListIds || itemsToDisplay}
+      itemsToDisplay={itemsToDisplay}
       propsToDisplay={propsToDisplay}
       entityFields={extraProps}
       {...cardRenderProps}

package/src/components/ItemListButton/ItemListButton.js

@@ -49,7 +49,8 @@ const ItemListButton = ({ listName, parent, modifier }) => {
       } = listAddResult;
 
       if (!listId) {
-        localStorage.setItem(LIST_ITEM_LOCAL_KEY(listName), id);
+        const localListName = `${LIST_ITEM_LOCAL_KEY}${listName}`;
+        localStorage.setItem(localListName, id);
         window.dispatchEvent(new Event('storage'));
       }
     }
@@ -75,7 +76,6 @@ const ItemListButton = ({ listName, parent, modifier }) => {
 
   const listItems = getItemListData(data);
   const isInList = !!listItems.find(({ itemId: idToCheck }) => idToCheck === itemId);
-
   const Icon = getIcon();
 
   return (

package/src/components/ItemListCounter/ItemListCounter.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { useQuery } from '@apollo/client';
@@ -34,6 +34,7 @@ const ItemListCounter = ({ listName, modifier, url }) => {
 
   if (loading) return '';
   if (error) return error.message;
+
   const listItems = getItemListData(data);
   const listLength = listItems.length;
   const CounterIcon = listLength ? BsBookmarkStarFill : BsBookmarkStar;
@@ -44,10 +45,10 @@ const ItemListCounter = ({ listName, modifier, url }) => {
     <div
       role="button"
       type="button"
-      className={`icon-button item-list-counter ${modifier}`}
+      className={`item-list-counter ${modifier}`}
       onClick={handleClick}>
       <CounterIcon />
-      <span className="icon-button__badge">{listLength}</span>
+      <span className="item-list-counter__badge">{listLength}</span>
     </div>
   );
 };

package/src/components/List/ListFactory.js

@@ -115,6 +115,9 @@ const ListFactory = props => {
       skip: !itemListId
     }
   );
+  if (!queryItemListId && itemListId) {
+    router.push('/Resolver', `${asPath}?itemListId=${itemListId}`, { shallow: true });
+  }
 
   const errorsToCheck = [
     schemaError,

package/src/components/SearchContent/SearchContent.js

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useRouter } from 'next/router';
+import { useDebounceSearch } from '@blaze-cms/plugin-search-ui';
+import BlazeLink from '../BlazeLink';
+
+const SearchContent = ({
+  entities,
+  searchInputAlignment,
+  searchInputWrapperMobile,
+  searchInputWrapperDesktop,
+  collapsible,
+  isMobile,
+  placeholder
+}) => {
+  const [collapsed, setCollapsed] = useState(collapsible);
+  const router = useRouter();
+
+  const {
+    loading,
+    results,
+    searchTerm,
+    setSearchTerm,
+    setPreviousSearchTerm,
+    debouncedSearchTerm,
+    previousSearchTerm
+  } = useDebounceSearch({
+    entities,
+    initialSearchTerm: '',
+    resultKeys: 'id, name, image { url }, url'
+  });
+
+  console.log({
+    searchTerm,
+    loading,
+    results,
+    setSearchTerm,
+    setPreviousSearchTerm,
+    debouncedSearchTerm,
+    previousSearchTerm
+  });
+
+  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 SearchResults = () => {
+    return results.map(result => {
+      if (!result.url) return null;
+      const { id, name, image, url } = result;
+      return (
+        <BlazeLink href={url} onClick={e => handleClick(e, url)} key={id}>
+          <div className="search-content--results__wrapper">
+            {image.url ? (
+              <img src={image.url} alt={name} className="search-content--results__image" />
+            ) : null}
+            <span className="search-content--results__title">{name}</span>
+          </div>
+        </BlazeLink>
+      );
+    });
+  };
+
+  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"
+            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>
+        {results && (
+          <div className="search-content--results__wrapper">
+            <div className="search-content--results__wrapper--message">
+              <div className="text-sm pt-2">{`Search results for: ${searchTerm}`}</div>
+              <div className="search-content--results__message">
+                <div className="search-content--results__content">
+                  <SearchResults />
+                </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
+};
+
+export default SearchContent;

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 SearchContent from "./SearchContent";
 
-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="search-content--results__wrapper">
-                {image.url ? (
-                  <img src={image.url} alt={name} className="search-content--results__image" />
-                ) : null}
-                <span className="search-content--results__title">{name}</span>
-              </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
-};
-
-export default SearchContent;
+export default SearchContent;

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')

package/src/constants/index.js

@@ -209,7 +209,7 @@ const DATA_SUMMARY_EMAIL_REGEX = /^([a-z0-9_\.\+-]+)@([\da-z\.-]+)\.([a-z\.]{2,6
 const DATA_SUMMARY_URL_REGEX = /(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
 const DATA_SUMMARY_TEL_REGEX = /^\+{0,1}[0-9\(\)\.\- \/]{7,}$/; // note: very loose phone number match not for validation
 
-const LIST_ITEM_LOCAL_KEY = name => `blaze_item_list_${name}`;
+const LIST_ITEM_LOCAL_KEY = 'blaze_item_list_';
 
 export {
   BANNER_LOADING,

package/src/helpers/get-item-list-id.js

@@ -4,7 +4,8 @@ const getItemListId = (listName, queryId) => {
   if (queryId) return queryId;
   if (!listName || typeof localStorage === 'undefined') return '';
 
-  return localStorage.getItem(LIST_ITEM_LOCAL_KEY(listName)) || '';
+  const localListName = `${LIST_ITEM_LOCAL_KEY}${listName}`;
+  return localStorage.getItem(localListName) || '';
 };
 
 export default getItemListId;