@blaze-cms/react-page-builder 0.146.0-alpha.4 → 0.146.0-alpha.41

package/src/components/MenuItem/MenuEntitiesItem.js

@@ -0,0 +1,204 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useQuery } from '@apollo/client';
+import MenuItemRender from './MenuItemRender';
+import {
+  buildPropsQuery,
+  getEntityData,
+  getRequiredSchemas,
+  getUnpublishedEntityName,
+  getUpdatedFilterBy,
+  filterQuerySetup,
+  filtersSetup,
+  getUpdatedItemsToDisplay,
+  getUpdatedSortProperties,
+  shouldReturn,
+  shouldSkipSingleQuery
+} from '../../helpers';
+import { useGetEntitySchemasAsObj } from '../../hooks';
+import { generateSingleItemQuery } from '../../application/query';
+import { AND, SEARCH_PUBLISHED_CONTENT } from '../../constants';
+
+const MenuEntitiesItem = ({ entities, parent, ...props }) => {
+  const { itemEntity: parentEntity, itemId: parentId } = parent;
+  const {
+    operator: filterOperator = AND,
+    filterByProperty = [],
+    sortProperties = [],
+    itemsToDisplay,
+    filterBy = [],
+    sortby,
+    sort
+  } = props;
+
+  const unpublishedEntityName = getUnpublishedEntityName(parentEntity);
+
+  const [updatedSortProperties, sortbyFilters] = getUpdatedSortProperties(
+    sort,
+    sortby,
+    sortProperties
+  );
+
+  const {
+    data: mainSchemas = {},
+    loading: entityObjloading,
+    error: entityObjError
+  } = useGetEntitySchemasAsObj([unpublishedEntityName, ...entities]);
+
+  const [filterEntity] = entities;
+
+  const { [filterEntity]: filterEntitySchema = {} } = mainSchemas;
+
+  const entitiesTypes = entities.map(entity => getEntityData(entity, mainSchemas[entity]));
+  const graphqlEntityMap = entitiesTypes.reduce(
+    (acc, entityType) => ({ ...acc, [entityType.entityType]: entityType.entity }),
+    {}
+  );
+  const docTypes = entitiesTypes.map(({ docType }) => docType);
+  const entityTypes = entitiesTypes.map(({ entityType }) => entityType);
+
+  const entityFields = buildPropsQuery(filterEntitySchema, ['name', 'url']) || '';
+  const parentSchema = mainSchemas[unpublishedEntityName] || {};
+
+  const {
+    entitySameAsCurrentItemEntity,
+    filterEntityRelations,
+    inheritedFilters,
+    queryProps,
+    getAction,
+    action
+  } = filtersSetup({
+    itemEntityUpdated: unpublishedEntityName,
+    currentSchema: parentSchema,
+    filterEntitySchema,
+    filterByProperty,
+    entityFields,
+    entityTypes,
+    filterBy,
+    entities
+  });
+
+  const {
+    data: { entityData: parentEntityData = {} } = {},
+    error: singleItemQueryError,
+    loading: singleItemQueryLoading
+  } = useQuery(generateSingleItemQuery(getAction, queryProps), {
+    variables: { id: parentId },
+    skip: shouldSkipSingleQuery(entityObjloading, getAction, queryProps)
+  });
+
+  const {
+    data: requiredSchema = {},
+    loading: schemaLoading,
+    error: schemaError
+  } = useGetEntitySchemasAsObj(
+    getRequiredSchemas([...filterByProperty, ...sortbyFilters], filterEntitySchema),
+    entityObjloading
+  );
+
+  const getEntitySchemas = Object.values(requiredSchema);
+
+  const updatedItemsToDisplay = getUpdatedItemsToDisplay({
+    inheritedFilters,
+    parentEntityData,
+    itemsToDisplay,
+    parentSchema
+  });
+
+  const variableProps = {
+    sortProperties: updatedSortProperties,
+    filterByProperty,
+    sortby: null,
+    sort: null,
+    filterBy
+  };
+
+  const updatedFilterBy = getUpdatedFilterBy(
+    inheritedFilters,
+    parentEntityData,
+    filterEntitySchema,
+    parentSchema,
+    parentId,
+    variableProps
+  );
+
+  const { variables } = filterQuerySetup({
+    itemsToDisplay: updatedItemsToDisplay,
+    entitySameAsCurrentItemEntity,
+    filterEntityRelations,
+    entity: filterEntity,
+    docType: docTypes,
+    getEntitySchemas,
+    updatedFilterBy,
+    variableProps,
+    filterOperator
+  });
+
+  variables.limit = props.limit || undefined;
+
+  const hasNoItemsToDisplayOrFilter = !updatedItemsToDisplay.length && !updatedFilterBy;
+
+  const { data = {} } = useQuery(action, {
+    variables,
+    skip: shouldReturn(
+      hasNoItemsToDisplayOrFilter,
+      singleItemQueryLoading,
+      singleItemQueryError,
+      entityObjloading,
+      entityObjError,
+      schemaLoading,
+      schemaError
+    )
+  });
+
+  const { results } = data[SEARCH_PUBLISHED_CONTENT] || {};
+
+  if (!results) return null;
+
+  return results.map(item => {
+    const itemParent = {
+      itemId: item.id,
+      itemEntity: graphqlEntityMap[item.__typename]
+    };
+    return <MenuItemRender {...props} parent={itemParent} url={item.url || props.url} />;
+  });
+};
+
+MenuEntitiesItem.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  eventType: PropTypes.string.isRequired,
+  modifier: PropTypes.string,
+  parent: PropTypes.object,
+  text: PropTypes.string,
+  url: PropTypes.string,
+  entities: PropTypes.array,
+  limit: PropTypes.number,
+  offset: PropTypes.number,
+  sortby: PropTypes.array,
+  filterBy: PropTypes.array,
+  sort: PropTypes.string,
+  operator: PropTypes.string.isRequired,
+  filterOperator: PropTypes.string.isRequired,
+  sortProperties: PropTypes.array,
+  filterByProperty: PropTypes.array,
+  itemsToDisplay: PropTypes.array
+};
+
+MenuEntitiesItem.defaultProps = {
+  children: null,
+  modifier: '',
+  limit: 0,
+  offset: 0,
+  itemsToDisplay: [],
+  sort: '',
+  sortby: [],
+  sortProperties: [],
+  filterByProperty: [],
+  parent: {},
+  filterBy: [],
+  text: '',
+  url: '',
+  entities: []
+};
+
+export default MenuEntitiesItem;

package/src/components/MenuItem/MenuItem.js

@@ -1,76 +1,33 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
-import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
-import { hasChildren } from '../../helpers';
-import BlazeLink from '../BlazeLink';
-import MenuContext from '../Menu/MenuContext';
+import MenuItemRender from './MenuItemRender';
+import MenuEntitiesItem from './MenuEntitiesItem';
 
-const MenuItem = ({ children, eventType, text, modifier, url }) => {
-  const [displayChildren, setDisplayChildren] = useState(false);
-  const { showMobileMenu } = useContext(MenuContext);
+const MenuItem = ({ entities, parent, ...props }) => {
+  const hasEntities = entities && entities.length;
 
-  useEffect(
-    () => {
-      if (!showMobileMenu) setDisplayChildren(false);
-    },
-    [showMobileMenu]
-  );
+  if (!hasEntities) return <MenuItemRender parent={parent} {...props} />;
 
-  const isHoverEvent = eventType === HOVER;
-  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
-
-  const handleItemEvent = ({ type }) => {
-    if (isHoverEvent) {
-      if (type === MOUSE_ENTER) {
-        setDisplayChildren(true);
-      }
-      if (type === MOUSE_LEAVE) {
-        setDisplayChildren(false);
-      }
-    }
-  };
-  const hasValidChildren = hasChildren(children);
-
-  return (
-    <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
-      <div className="menu--item--link">
-        {url ? (
-          <BlazeLink href={url}>{text}</BlazeLink>
-        ) : (
-          <span role="button" onClick={handleItemEvent}>
-            {text}
-          </span>
-        )}
-        {hasValidChildren && (
-          <i
-            role="button"
-            className="menu--item--link--icon"
-            onClick={() => setDisplayChildren(!displayChildren)}>
-            {displayChildren ? <FaChevronUp /> : <FaChevronDown />}
-          </i>
-        )}
-      </div>
-      {hasValidChildren && (
-        <div className={`menu--item-children ${childrenDisplayClass}`}>{children}</div>
-      )}
-    </li>
-  );
+  return <MenuEntitiesItem entities={entities} parent={parent} {...props} />;
 };
 
 MenuItem.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  eventType: PropTypes.string.isRequired,
   modifier: PropTypes.string,
+  parent: PropTypes.object,
   text: PropTypes.string,
   url: PropTypes.string,
-  eventType: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+  entities: PropTypes.array
 };
 
 MenuItem.defaultProps = {
-  url: '',
+  children: null,
   modifier: '',
+  parent: {},
   text: '',
-  children: null
+  url: '',
+  entities: []
 };
 
 export default MenuItem;

package/src/components/MenuItem/MenuItemRender.js

@@ -0,0 +1,103 @@
+import React, { useState, useContext, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import { useRouter } from 'next/router';
+import { useStringTemplate } from '@blaze-cms/utils-handlebars';
+import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
+import { hasChildren } from '../../helpers';
+import BlazeLink from '../BlazeLink';
+import MenuContext from '../Menu/MenuContext';
+import { injectHelperIntoTemplate } from './helpers';
+
+const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) => {
+  const [displayChildren, setDisplayChildren] = useState(false);
+  const { showMobileMenu } = useContext(MenuContext);
+  const {
+    loading: loadingText,
+    data: [textToUse]
+  } = useStringTemplate(parent, [text]);
+  const {
+    loading: loadingUrl,
+    data: [urlToUse]
+  } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);
+
+  const router = useRouter();
+  const isHoverEvent = eventType === HOVER;
+  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
+
+  useEffect(
+    () => {
+      if (!showMobileMenu) setDisplayChildren(false);
+    },
+    [showMobileMenu]
+  );
+
+  useEffect(
+    () => {
+      if (isHoverEvent) {
+        setDisplayChildren(false);
+      }
+    },
+    [router.asPath, isHoverEvent]
+  );
+
+  if (loadingUrl || loadingText) return '';
+
+  const handleItemEvent = ({ type }) => {
+    if (isHoverEvent) {
+      if (type === MOUSE_ENTER) {
+        setDisplayChildren(true);
+      }
+      if (type === MOUSE_LEAVE) {
+        setDisplayChildren(false);
+      }
+    }
+  };
+
+  const hasValidChildren = hasChildren(children);
+
+  return (
+    <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
+      <div className="menu--item--link">
+        {urlToUse ? (
+          <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
+        ) : (
+          <span role="button" onClick={handleItemEvent}>
+            {textToUse}
+          </span>
+        )}
+        {hasValidChildren && (
+          <i
+            role="button"
+            className="menu--item--link--icon"
+            onClick={() => setDisplayChildren(!displayChildren)}>
+            {displayChildren ? <FaChevronUp /> : <FaChevronDown />}
+          </i>
+        )}
+      </div>
+
+      {hasValidChildren && (
+        <div className={`menu--item-children ${childrenDisplayClass}`}>{children}</div>
+      )}
+    </li>
+  );
+};
+
+MenuItemRender.propTypes = {
+  modifier: PropTypes.string,
+  text: PropTypes.string,
+  url: PropTypes.string,
+  eventType: PropTypes.string.isRequired,
+  parent: PropTypes.object,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+};
+
+MenuItemRender.defaultProps = {
+  url: '',
+  modifier: '',
+  text: '',
+  children: null,
+  parent: {}
+};
+
+export default MenuItemRender;

package/src/components/MenuItem/helpers/index.js

@@ -0,0 +1,3 @@
+import injectHelperIntoTemplate from './inject-helper-into-template';
+
+export { injectHelperIntoTemplate };

package/src/components/MenuItem/helpers/inject-helper-into-template.js

@@ -0,0 +1,11 @@
+const injectHelperIntoTemplate = (template, helper) => {
+  if (!helper || !template) return template;
+
+  let result = template.replace(/{{{([^{}]+)}}}/g, `{{{${helper} $1}}}`);
+
+  result = result.replace(/{{([^{}]+)}}(?!})/g, `{{${helper} $1}}`);
+
+  return result;
+};
+
+export default injectHelperIntoTemplate;

package/src/components/Modal/Modal.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import BlazeModal from '@blaze-react/modal';
+import BlazeModal from '../ModalAdapter';
 import { renderChildren, updateChildrensParent, hasChildren } from '../../helpers';
 
 const Modal = ({ children, elementTitle, onClose, ...otherProps }) => {

package/src/components/ModalAdapter/ModalAdapter.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Modal from '@blaze-react/modal';
+import ReactDOM from 'react-dom';
+import { usePortal } from '../../hooks';
+
+const ModalAdapter = ({ ...props }) => {
+  const target = usePortal();
+
+  return ReactDOM.createPortal(<Modal {...props} />, target);
+};
+
+export default ModalAdapter;

package/src/components/ModalAdapter/index.js

@@ -0,0 +1,5 @@
+import dynamic from 'next/dynamic';
+
+export default dynamic(() =>
+  import(/* webpackChunkName: "blazePbModalAdaptor" */ './ModalAdapter')
+);

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

@@ -3,17 +3,17 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import debounce from 'lodash.debounce';
 import FiltersList from './FiltersList';
-import { isDeviceDesktop, getResponsiveFilterClassnames, buildUrlQuery } from '../helpers';
-
 import CloseMobileForm from './CloseMobileForm';
 import ResetDesktopForm from './ResetDesktopForm';
 import MobileFormToolbar from './MobileFormToolbar';
+import { useFilterAggregationValues } from '../../../hooks';
+import { isDeviceDesktop, getResponsiveFilterClassnames, buildUrlQuery } from '../helpers';
 import { SEARCH, REFINE, MORE_FILTERS_CLASSES } from '../constants';
 
 const SearchFilter = ({
   searchFilterRef,
   listComponentName,
-  data,
+  data: filterData,
   filters,
   hasUrl,
   entity,
@@ -26,11 +26,17 @@ const SearchFilter = ({
   groupAfterMobile,
   filterValues,
   setAppliedFilters,
+  mobileRefineButtonText,
   query
 }) => {
   const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);
   const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);
 
+  const [data, setStateValues, setSelectProp] = useFilterAggregationValues({
+    data: filterData,
+    filterValues
+  });
+
   const doSubmit = newValues => {
     const newQuery = filterValues
       ? buildUrlQuery(newValues, filters, listComponentName, query)
@@ -74,6 +80,8 @@ const SearchFilter = ({
   };
 
   const updateFilterValues = (newValues, shouldSubmit) => {
+    const [lastChangedFilter] = Object.keys(newValues);
+    setSelectProp(lastChangedFilter);
     setAppliedFilters({ newValues, shouldSearch: shouldSubmit, type: 'update' });
   };
 
@@ -89,6 +97,7 @@ const SearchFilter = ({
         onSubmit={e => {
           e.preventDefault();
           doSubmit(filterValues);
+          setStateValues(filterData);
         }}>
         {displaySearchFilter && (
           <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />
@@ -216,7 +225,7 @@ const SearchFilter = ({
             data-testid="refine-mobile"
             aria-label="Toggle Search Filter">
             <div role="button" onClick={() => setDisplaySearchFilter(true)}>
-              {REFINE}
+              {mobileRefineButtonText || REFINE}
             </div>
           </div>
         )}
@@ -240,10 +249,12 @@ SearchFilter.propTypes = {
   filterValues: PropTypes.object.isRequired,
   setAppliedFilters: PropTypes.func.isRequired,
   listComponentName: PropTypes.string,
-  query: PropTypes.object
+  query: PropTypes.object,
+  mobileRefineButtonText: PropTypes.string
 };
 
 SearchFilter.defaultProps = {
+  mobileRefineButtonText: '',
   listComponentName: '',
   query: {}
 };

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -11,7 +11,8 @@ import {
   buildNewUrl,
   getFilterValues,
   getFilterRangesAndCheckboxesValues,
-  getUpdatedFilterBy
+  getUpdatedFilterBy,
+  buildListNameQuery
 } from './helpers';
 import {
   getEntityData,
@@ -25,23 +26,6 @@ import { SCROLL_OFFSET } from '../../constants';
 import searchFilterReducer from './searchFilterReducer';
 import { useGetEntitySchemasAsObj } from '../../hooks';
 
-const getFiltersUrlQuery = (query, listName) => {
-  if (!listName) return query;
-  const updatedQuery = {};
-  const listKey = `pb[${listName}]`;
-  Object.keys(query).forEach(queryKey => {
-    const isListKey = queryKey.indexOf(`${listName}`) !== -1;
-    if (!isListKey) return;
-    const decodedQueryValue = Array.isArray(query[queryKey])
-      ? query[queryKey].map(value => decodeURIComponent(value))
-      : decodeURIComponent(query[queryKey]);
-    const strippedKey = queryKey.substring(listKey.length + 1, queryKey.length - 1);
-    if (isListKey) updatedQuery[strippedKey] = decodedQueryValue;
-  });
-
-  return updatedQuery;
-};
-
 const SearchFilterContainer = ({
   entity,
   url,
@@ -54,7 +38,8 @@ const SearchFilterContainer = ({
   filterByProperty,
   shouldAddFilters,
   listComponentName,
-  parent
+  parent,
+  mobileRefineButtonText
 }) => {
   const { isPreview } = useContext(MainContext);
   const router = useRouter();
@@ -65,15 +50,28 @@ const SearchFilterContainer = ({
   const [urlPath, setUrlPath] = useState(asPath); // used as asPath can take too long to update
   const [filterValues, dispatch] = useReducer(searchFilterReducer, null);
   const { url: currentUrl, query } = parseUrl(urlPath);
-  const updatedQuery = getFiltersUrlQuery(query, listComponentName);
+  const updatedQuery = buildListNameQuery(query, listComponentName);
   const { itemId: parentId, itemEntity: parentEntity } = parent;
 
   useEffect(
     () => {
-      if (asPath) setUrlPath(asPath);
+      if (asPath === urlPath) return;
+
+      const { query: newQuery } = parseUrl(asPath);
+      const updatedNewQuery = buildListNameQuery(newQuery, listComponentName);
+      const newValues = getFilterValues(filterData, filters, updatedNewQuery);
+      if (newValues)
+        dispatch({
+          newValues,
+          shouldSearch: false,
+          type: 'update'
+        });
+      setUrlPath(asPath);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [asPath]
   );
+
   const { data: mainSchemas = {}, loading: schemasLoading } = useGetEntitySchemasAsObj([
     parentEntity,
     entity
@@ -186,11 +184,13 @@ const SearchFilterContainer = ({
       setDisplaySearchFilter={setDisplaySearchFilter}
       groupAfterMobile={groupAfterMobile}
       groupAfterDesktop={groupAfterDesktop}
+      mobileRefineButtonText={mobileRefineButtonText}
     />
   );
 };
 
 SearchFilterContainer.propTypes = {
+  mobileRefineButtonText: PropTypes.string,
   entity: PropTypes.string,
   url: PropTypes.string,
   filters: PropTypes.array,
@@ -216,7 +216,8 @@ SearchFilterContainer.defaultProps = {
   filterByProperty: [],
   shouldAddFilters: false,
   listComponentName: '',
-  parent: {}
+  parent: {},
+  mobileRefineButtonText: ''
 };
 
 export default withTitle(SearchFilterContainer);

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

@@ -17,6 +17,7 @@ const SelectFilter = ({
   const filterValue = filterValues[prop] || '';
   const disabledOptions = [];
   const { buckets = [] } = data[prop] || {};
+
   const options = buckets
     .map(({ key, doc_count: count }) => {
       if (!count) disabledOptions.push(key);
@@ -48,6 +49,7 @@ const SelectFilter = ({
         onChange={({ value }) => {
           let valueToUse = value;
           if (value === defaultTextValue) valueToUse = '';
+
           updateFilterValues({ [prop]: valueToUse }, shouldSearch);
         }}
         disabled={disabledOptions}

package/src/components/SearchFilter/helpers/build-list-name-query.js

@@ -0,0 +1,18 @@
+const buildListNameQuery = (query, listName) => {
+  if (!listName) return query;
+  const updatedQuery = {};
+  const listKey = `pb[${listName}]`;
+  Object.keys(query).forEach(queryKey => {
+    const isListKey = queryKey.indexOf(`${listName}`) !== -1;
+    if (!isListKey) return;
+    const decodedQueryValue = Array.isArray(query[queryKey])
+      ? query[queryKey].map(value => decodeURIComponent(value))
+      : decodeURIComponent(query[queryKey]);
+    const strippedKey = queryKey.substring(listKey.length + 1, queryKey.length - 1);
+    if (isListKey) updatedQuery[strippedKey] = decodedQueryValue;
+  });
+
+  return updatedQuery;
+};
+
+export default buildListNameQuery;

package/src/components/SearchFilter/helpers/decode-encode.js

@@ -1,5 +1,4 @@
 const decodeValue = value => decodeURIComponent(value);
-
 const encodeValue = value => encodeURIComponent(value);
 
 export { decodeValue, encodeValue };