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

package/src/components/ItemListButton/ItemListButton.js

@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import {
+  BsBookmarkStarFill,
+  BsBookmarkCheckFill,
+  BsBookmarkStar,
+  BsBookmarkXFill
+} from 'react-icons/bs';
+import { useQuery, useMutation } from '@apollo/client';
+import { getItemList, addItemsToList, removeItemsFromList } from '../../application/query';
+import { getItemListData, getItemListId } from '../../helpers';
+import { LIST_ITEM_LOCAL_KEY } from '../../constants';
+
+const ItemListButton = ({ listName, parent, modifier }) => {
+  const { itemId, itemEntity } = parent;
+  const idFromStorage = getItemListId(listName);
+  const [listId, setListId] = useState(idFromStorage);
+  const [isHover, setIsHover] = useState(false);
+
+  useEffect(
+    () => {
+      const storageEventHandler = () => {
+        const newId = getItemListId(listName);
+        setListId(newId);
+      };
+
+      window.addEventListener('storage', storageEventHandler);
+
+      return () => {
+        window.removeEventListener('storage', storageEventHandler);
+      };
+    },
+    [listName]
+  );
+  const getIcon = () => {
+    if (isInList) return isHover ? BsBookmarkXFill : BsBookmarkCheckFill;
+    return isHover ? BsBookmarkStarFill : BsBookmarkStar;
+  };
+
+  const { data, error, loading } = useQuery(getItemList, {
+    variables: { id: listId },
+    skip: !listId
+  });
+
+  const [addListItem] = useMutation(addItemsToList, {
+    onCompleted: ({ addItemsToList: listAddResult }) => {
+      const {
+        result: { id }
+      } = listAddResult;
+
+      if (!listId) {
+        localStorage.setItem(LIST_ITEM_LOCAL_KEY(listName), id);
+        window.dispatchEvent(new Event('storage'));
+      }
+    }
+  });
+
+  const [removeListItem] = useMutation(removeItemsFromList);
+
+  const clickHandler = () => {
+    setIsHover(false);
+    isInList
+      ? removeListItem({
+          variables: { listId, listItems: [{ itemId, itemEntity }] },
+          skip: !listId
+        })
+      : addListItem({
+          variables: { name: listName, id: listId, listItems: [{ itemId, itemEntity }] },
+          skip: !listId
+        });
+  };
+
+  if (loading) return '';
+  if (error) return error.message;
+
+  const listItems = getItemListData(data);
+  const isInList = !!listItems.find(({ itemId: idToCheck }) => idToCheck === itemId);
+
+  const Icon = getIcon();
+
+  return (
+    <div
+      className={`item-list-button ${modifier}`}
+      role="button"
+      onClick={clickHandler}
+      onMouseEnter={() => setIsHover(true)}
+      onMouseLeave={() => setIsHover(false)}>
+      <i>
+        <Icon />
+      </i>
+    </div>
+  );
+};
+
+ItemListButton.propTypes = {
+  parent: PropTypes.object,
+  listName: PropTypes.string,
+  modifier: PropTypes.string
+};
+
+ItemListButton.defaultProps = {
+  parent: {},
+  listName: '',
+  modifier: ''
+};
+
+export default ItemListButton;

package/src/components/ItemListButton/index.js

@@ -0,0 +1,3 @@
+import ItemListButton from './ItemListButton';
+
+export default ItemListButton;

package/src/components/ItemListCounter/ItemListCounter.js

@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useRouter } from 'next/router';
+import { useQuery } from '@apollo/client';
+import { BsBookmarkStarFill, BsBookmarkStar } from 'react-icons/bs';
+import { getItemList } from '../../application/query';
+import { getItemListData, getItemListId } from '../../helpers';
+
+const ItemListCounter = ({ listName, modifier, url }) => {
+  const router = useRouter();
+  const idFromStorage = getItemListId(listName);
+  const [listId, setListId] = useState(idFromStorage);
+
+  useEffect(
+    () => {
+      const storageEventHandler = () => {
+        const newId = getItemListId(listName);
+        setListId(newId);
+      };
+
+      window.addEventListener('storage', storageEventHandler);
+
+      return () => {
+        window.removeEventListener('storage', storageEventHandler);
+      };
+    },
+    [listName]
+  );
+
+  const { data, error, loading } = useQuery(getItemList, {
+    variables: { id: listId },
+    skip: !listId
+  });
+
+  if (loading) return '';
+  if (error) return error.message;
+  const listItems = getItemListData(data);
+  const listLength = listItems.length;
+  const CounterIcon = listLength ? BsBookmarkStarFill : BsBookmarkStar;
+
+  const handleClick = () => router.push('/Resolver', `${url}?itemListId=${listId}`);
+
+  return (
+    <div
+      role="button"
+      type="button"
+      className={`icon-button item-list-counter ${modifier}`}
+      onClick={handleClick}>
+      <CounterIcon />
+      <span className="icon-button__badge">{listLength}</span>
+    </div>
+  );
+};
+
+ItemListCounter.propTypes = {
+  url: PropTypes.string,
+  listName: PropTypes.string,
+  modifier: PropTypes.string
+};
+
+ItemListCounter.defaultProps = {
+  url: '',
+  listName: '',
+  modifier: ''
+};
+
+export default ItemListCounter;

package/src/components/ItemListCounter/index.js

@@ -0,0 +1,3 @@
+import ItemListCounter from './ItemListCounter';
+
+export default ItemListCounter;

package/src/components/List/ListBuilder.js

@@ -52,13 +52,15 @@ const ListBuilder = props => {
     requiredSchema,
     searchValues,
     azFilter,
-    sortProperties
+    sortProperties,
+    itemListIds
   } = props;
   const isInfinite = paginationType === INFINITE;
   const listComponent = getListComponent(isCard, paginationType);
   const propsToDisplayValues = checkPropsToUse(propsToDisplay);
   const entityFields = buildPropsQuery(entitySchema, propsToDisplayValues, props) || '';
-  const limitToUse = limit || itemsToDisplay.length;
+  const itemsToDisplayToUse = itemListIds || itemsToDisplay;
+  const limitToUse = limit || itemsToDisplayToUse.length;
   const shouldApplyDefaultSort = !sortProperties || !sortProperties.length;
   const itemsPerPageToUse = getItemsPerPageToUse(itemsPerPage, limitToUse);
   const initialOffset = getCurrentOffset(offset, itemsPerPageToUse, paginationIndex, limitToUse);
@@ -94,7 +96,7 @@ const ListBuilder = props => {
       stringProps
     },
     itemId,
-    itemsToDisplay,
+    itemsToDisplayToUse,
     shouldApplyDefaultSort,
     { shouldReturnAggs: true, isAZ }
   );
@@ -137,7 +139,7 @@ const ListBuilder = props => {
       azFilter
     },
     itemId,
-    itemsToDisplay,
+    itemsToDisplayToUse,
     shouldApplyDefaultSort,
     { shouldReturnAggs: false, isAZ }
   );
@@ -172,6 +174,7 @@ const ListBuilder = props => {
       isAZ={isAZ}
       azFilter={azFilter}
       {...props}
+      itemsToDisplay={itemsToDisplayToUse}
     />
   );
 };
@@ -202,12 +205,14 @@ ListBuilder.propTypes = {
   filterOperator: PropTypes.string.isRequired,
   paginationType: PropTypes.string,
   azFilter: PropTypes.string,
-  sortProperties: PropTypes.array
+  sortProperties: PropTypes.array,
+  itemListIds: PropTypes.array
 };
 
 ListBuilder.defaultProps = {
   entityData: {},
   itemsToDisplay: [],
+  itemListIds: null,
   limit: 0,
   omitWrappers: false,
   offset: 0,

package/src/components/List/ListFactory.js

@@ -4,7 +4,11 @@ import { parseUrl } from 'query-string';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { MainContext } from '@blaze-cms/nextjs-components';
-import { getSingleEntitySchema, generateSingleItemQuery } from '../../application/query';
+import {
+  getSingleEntitySchema,
+  generateSingleItemQuery,
+  getItemList
+} from '../../application/query';
 import ListBuilder from './ListBuilder';
 import { AZ_LIST_TYPE } from './constants';
 import { getAzQueryFilter, getSortProps } from './helpers';
@@ -19,7 +23,9 @@ import {
   buildSearchValuesText,
   getQueryFilters,
   getInheritedFilters,
-  getQueryProps
+  getQueryProps,
+  getItemListId,
+  getItemListIds
 } from '../../helpers';
 import { useGetEntitySchemasAsObj } from '../../hooks';
 import { AND_OPERATOR, TEXT_SEARCH, ID, AND, FULL } from '../../constants';
@@ -37,16 +43,18 @@ const ListFactory = props => {
     sort: defaultSort,
     searchFilter,
     operator: filterOperator,
-    sortProperties
+    sortProperties,
+    itemListName
   } = props;
-
   const { isPreview } = useContext(MainContext);
   const router = useRouter();
   const { asPath } = router;
   const parsedQuery = asPath.replace(/%5D/g, ']').replace(/%5B/g, '[');
-  const { query, url, query: { sort: querySort, sortby: querySortBy } = {} } = parseUrl(
-    parsedQuery
-  );
+  const {
+    query,
+    url,
+    query: { sort: querySort, sortby: querySortBy, itemListId: queryItemListId } = {}
+  } = parseUrl(parsedQuery);
   const { sortbyFilters, updatedSortProperties } = getSortProps({
     querySort,
     sortProperties,
@@ -55,6 +63,7 @@ const ListFactory = props => {
     defaultSortBy
   });
 
+  const itemListId = getItemListId(itemListName, queryItemListId);
   const { itemEntity, itemId } = parent;
   const itemEntityUpdated = getUnpublishedEntityName(itemEntity);
   const paginationIndex = getPaginationIndex(query, name);
@@ -98,13 +107,36 @@ const ListFactory = props => {
     variables: { id: itemId },
     skip: schemasLoading || (!inheritedFilters.length && queryProps === ID)
   });
-  const errorsToCheck = [schemaError, schemasError, requiredSchemaError, itemQueryError];
+
+  const { data: itemListData = {}, error: itemListError, loading: itemListLoading } = useQuery(
+    getItemList,
+    {
+      variables: { id: itemListId },
+      skip: !itemListId
+    }
+  );
+
+  const errorsToCheck = [
+    schemaError,
+    schemasError,
+    requiredSchemaError,
+    itemQueryError,
+    itemListError
+  ];
   const { hasErr, errMsg } = checkForError(errorsToCheck);
 
-  if (requiredSchemaLoading || schemasLoading || schemaLoading || itemQueryLoading) return '';
+  if (
+    requiredSchemaLoading ||
+    schemasLoading ||
+    schemaLoading ||
+    itemQueryLoading ||
+    itemListLoading
+  )
+    return '';
   if (hasErr) return errMsg;
   if (!entitySchema) return null;
 
+  const itemListIds = getItemListIds(itemListData);
   const isCard = type !== FULL;
   const isAZ = type === AZ_LIST_TYPE;
   const genericProps = getGenericProps(props);
@@ -147,7 +179,8 @@ const ListFactory = props => {
     paginationIndex,
     entityData,
     inheritedFilters,
-    filterOperator
+    filterOperator,
+    itemListIds
   };
 
   return <ListBuilder {...listProps} />;
@@ -165,7 +198,8 @@ ListFactory.propTypes = {
   sortby: PropTypes.array,
   sort: PropTypes.string,
   searchFilter: PropTypes.object,
-  sortProperties: PropTypes.array
+  sortProperties: PropTypes.array,
+  itemListName: PropTypes.string
 };
 
 ListFactory.defaultProps = {
@@ -177,7 +211,8 @@ ListFactory.defaultProps = {
   sortProperties: [],
   sort: '',
   operator: AND,
-  searchFilter: {}
+  searchFilter: {},
+  itemListName: ''
 };
 
 export default ListFactory;

package/src/components/index.js

@@ -42,5 +42,11 @@ export default {
     import(/* webpackChunkName: "blazePbPasswordResetRequest" */ './PasswordResetRequest')
   ),
   breadcrumb: dynamic(() => import(/* webpackChunkName: "blazePbBreadcrumb" */ './Breadcrumb')),
+  itemlistbutton: dynamic(() =>
+    import(/* webpackChunkName: "blazePbItemListButton" */ './ItemListButton')
+  ),
+  itemlistcounter: dynamic(() =>
+    import(/* webpackChunkName: "blazePbItemListCounter" */ './ItemListCounter')
+  ),
   backtotop: dynamic(() => import(/* webpackChunkName: "blazePbBackToTop" */ './BackToTop'))
 };

package/src/constants/index.js

@@ -209,6 +209,8 @@ 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}`;
+
 export {
   BANNER_LOADING,
   BANNER_EMPTY,
@@ -320,5 +322,6 @@ export {
   TARGET_BLANK,
   DATA_SUMMARY_EMAIL_REGEX,
   DATA_SUMMARY_URL_REGEX,
-  DATA_SUMMARY_TEL_REGEX
+  DATA_SUMMARY_TEL_REGEX,
+  LIST_ITEM_LOCAL_KEY
 };

package/src/helpers/build-raw-query.js

@@ -62,6 +62,7 @@ const buildRawQuery = (
 
   if (itemsToDisplay && itemsToDisplay.length) {
     const itemsToDisplayIds = getItemsToDisplayIds(itemsToDisplay);
+
     query.bool.must.push({ ids: { values: itemsToDisplayIds } });
     if (shouldApplySort) {
       return {

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

@@ -0,0 +1,6 @@
+const getItemListData = data => {
+  if (data && data.getItemList && data.getItemList.listItems) return data.getItemList.listItems;
+  return [];
+};
+
+export default getItemListData;

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

@@ -0,0 +1,10 @@
+import { LIST_ITEM_LOCAL_KEY } from '../constants';
+
+const getItemListId = (listName, queryId) => {
+  if (queryId) return queryId;
+  if (!listName || typeof localStorage === 'undefined') return '';
+
+  return localStorage.getItem(LIST_ITEM_LOCAL_KEY(listName)) || '';
+};
+
+export default getItemListId;

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

@@ -0,0 +1,10 @@
+import getItemListData from './get-item-list-data';
+
+const getItemListIds = data => {
+  const itemListElements = getItemListData(data);
+  return itemListElements.length
+    ? itemListElements.map(({ itemId }) => ({ displayItems: [itemId] }))
+    : null;
+};
+
+export default getItemListIds;

package/src/helpers/index.js

@@ -51,3 +51,6 @@ export { default as getParsedPropValues } from './get-parsed-prop-values';
 export { default as getSanitizedPropValues } from './get-sanitized-prop-values';
 export { default as appendImages } from './append-images';
 export { default as parseTextBlock } from './parse-TextBlock';
+export { default as getItemListId } from './get-item-list-id';
+export { default as getItemListIds } from './get-item-list-ids';
+export { default as getItemListData } from './get-item-list-data';

package/tests/unit/src/components/__snapshots__/index.test.js.snap

@@ -46,6 +46,14 @@ Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
   },
+  "itemlistbutton": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+  "itemlistcounter": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
   "list": Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],

package/tests/unit/src/helpers/get-item-list-data.test.js

@@ -0,0 +1,28 @@
+import '@testing-library/jest-dom/extend-expect';
+import getItemListData from '../../../../src/helpers/get-item-list-data';
+
+describe('getItemListData helper', () => {
+  const noData = getItemListData();
+  const noGetItemList = getItemListData({});
+  const noListItems = getItemListData({ getItemList: {} });
+  const withCorrectData = getItemListData({
+    getItemList: { listItems: ['one item', 'two items'] }
+  });
+
+  it('should always return an array', () => {
+    expect(Array.isArray(noData)).toBeTruthy();
+    expect(Array.isArray(noGetItemList)).toBeTruthy();
+    expect(Array.isArray(noListItems)).toBeTruthy();
+    expect(Array.isArray(withCorrectData)).toBeTruthy();
+  });
+
+  it('should return an empty array if data passed doesnt have expected props', () => {
+    expect(noData).toEqual([]);
+    expect(noGetItemList).toEqual([]);
+    expect(noListItems).toEqual([]);
+  });
+
+  it('should return listData otherwise', () => {
+    expect(withCorrectData).toEqual(['one item', 'two items']);
+  });
+});

package/tests/unit/src/helpers/get-item-list-id.test.js

@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom/extend-expect';
+import getitemListId from '../../../../src/helpers/get-item-list-id';
+
+describe('getitemListId helper', () => {
+  const noValues = getitemListId();
+  const noListId = getitemListId('listName');
+  const noListName = getitemListId(null, '123asd');
+
+  it('should return empty string if no values are passed', () => {
+    expect(noValues).toEqual('');
+  });
+
+  it('should return listId if passed', () => {
+    expect(noListName).toEqual('123asd');
+  });
+
+  it('should return local value if no id is passed but name is', () => {
+    expect(noListId).toEqual('');
+  });
+});

package/tests/unit/src/helpers/get-item-list-ids.test.js

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/extend-expect';
+import getitemListIds from '../../../../src/helpers/get-item-list-ids';
+
+describe('getitemListIds helper', () => {
+  const noData = getitemListIds();
+  const emptyData = getitemListIds({});
+  const withData = getitemListIds({
+    getItemList: { listItems: [{ itemId: '123' }, { itemId: '456' }] }
+  });
+
+  it('should return null if no valid data is passed', () => {
+    expect(noData).toEqual(null);
+    expect(emptyData).toEqual(null);
+  });
+
+  it('should return itemsToDisplay formatted ids', () => {
+    expect(withData).toEqual([{ displayItems: ['123'] }, { displayItems: ['456'] }]);
+  });
+});