@blaze-cms/react-page-builder 0.131.0-project-admin-customisations.2 → 0.131.1

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -2,37 +2,33 @@ import React, { useState, useRef, useReducer, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { useQuery } from '@apollo/client';
 import PropTypes from 'prop-types';
-import { parseUrl } from 'query-string';
+import { parseUrl, stringify } from 'query-string';
 import SearchFilter from './SearchFilter';
 import { withTitle } from '../../HOC';
 import { getSearchPublishedContent } from '../../application/query';
 import {
-  buildNewUrl,
+  buildNewQuery,
   buildRawQueryStringified,
-  getFilterValues,
-  buildFiltersQuery,
-  getFilterRangesAndCheckboxesValues
+  getInitialFilterValues,
+  buildFiltersQuery
 } from './helpers';
 import { getEntityData } from '../../helpers';
-import { RAW_RESULTS } from './constants';
+import { RAW_RESULTS, RANGE, CHECKBOX_SELECT } from './constants';
 import { SCROLL_OFFSET } from '../../constants';
-import searchFilterReducer from './searchFilterReducer';
-
-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 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: false };
+    default:
+      throw new Error();
+  }
 };
 
 const SearchFilterContainer = ({
@@ -45,8 +41,7 @@ const SearchFilterContainer = ({
   groupAfterDesktop,
   filterBy,
   filterByProperty,
-  shouldAddFilters,
-  listComponentName
+  shouldAddFilters
 }) => {
   const router = useRouter();
   const { asPath } = router;
@@ -54,10 +49,15 @@ const SearchFilterContainer = ({
   const [key, setKey] = useState(`filter-${name}`);
   const [displaySearchFilter, setDisplaySearchFilter] = useState(false);
   const [urlPath, setUrlPath] = useState(asPath); // used as asPath can take too long to update
-  const { url: currentUrl, query } = parseUrl(urlPath);
-  const updatedQuery = getFiltersUrlQuery(query, listComponentName);
-
-  const [filterValues, dispatch] = useReducer(searchFilterReducer, null);
+  const {
+    url: currentUrl,
+    query: { sort, sortby },
+    query
+  } = parseUrl(urlPath);
+  const [filterValues, dispatch] = useReducer(
+    reducer,
+    getInitialFilterValues(null, filters, query)
+  );
 
   useEffect(
     () => {
@@ -66,19 +66,34 @@ const SearchFilterContainer = ({
     [asPath]
   );
 
+  const hasUrl = !!url;
+
+  const sortValues = sort && sortby ? stringify({ sort, sortby }) : '';
+  const baseQuery = sortValues ? `${currentUrl}?${sortValues}` : currentUrl;
+
   const action = getSearchPublishedContent(RAW_RESULTS);
-  const [checkboxSelectValues, rangeValues] = getFilterRangesAndCheckboxesValues(filters);
+  const checkboxSelectValues = [];
+  const rangeValues = [];
+
+  filters.forEach(({ type, propsToDisplay }) => {
+    if (CHECKBOX_SELECT.includes(type)) {
+      checkboxSelectValues.push(propsToDisplay[0]);
+    } else if (type === RANGE) {
+      rangeValues.push(...propsToDisplay);
+    }
+  });
 
   const { docType } = getEntityData(entity);
 
-  const filtersQuery = buildFiltersQuery({
-    shouldAddFilters,
-    query: filterValues || {},
-    filterBy,
-    filterByProperty,
-    rangeValues,
-    queryKeys: Object.keys(updatedQuery)
-  });
+  const filtersQuery = shouldAddFilters
+    ? buildFiltersQuery({
+        query: filterValues,
+        filterBy,
+        filterByProperty,
+        rangeValues,
+        queryKeys: Object.keys(query)
+      })
+    : [];
 
   const rawQueryStringified = buildRawQueryStringified(
     checkboxSelectValues,
@@ -87,7 +102,7 @@ const SearchFilterContainer = ({
     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
   });
@@ -98,29 +113,30 @@ const SearchFilterContainer = ({
   const { searchPublishedContent: { rawResults: { aggregations: filterData } = {} } = {} } =
     data || {};
 
-  if (!filterValues && !loading && filterData) {
-    const newValues = getFilterValues(filterData, filters, updatedQuery);
-    dispatch({ newValues, shouldSearch: false, type: 'update' });
+  if (filterValues.dataNotSet && filterData) {
+    const initialFilterValues = getInitialFilterValues(filterData, filters, query);
+    dispatch({ newValues: initialFilterValues, shouldSearch: false, type: 'update' });
   }
 
   const handleSearch = newQuery => {
     setDisplaySearchFilter(false);
-    const hashBit = asPath.split('#')[1] || '';
-    const parsedHashBit = hashBit ? `#${hashBit}` : '';
-    scrollToFirstList();
+
     if (!newQuery) {
-      const baseQuery = `${currentUrl}${parsedHashBit}`;
-      return router.push('/Resolver', baseQuery, { shallow: !url, scroll: false }).then(() => {
+      scrollToFirstList();
+      setUrlPath(baseQuery);
+      return router.push('/Resolver', baseQuery, { shallow: !hasUrl, scroll: false }).then(() => {
         setKey(`filter-${name}:${Date.now()}`); // remove after range component update
       });
     }
-    const newUrl = buildNewUrl(url, currentUrl, newQuery, hashBit);
-    return router.push('/Resolver', newUrl, { shallow: !url, scroll: false });
+    const newUrl = buildNewQuery(url, currentUrl, newQuery, sortValues);
+    scrollToFirstList();
+    setUrlPath(newUrl);
+    return router.push('/Resolver', newUrl, { shallow: !hasUrl, scroll: false });
   };
 
   const scrollToFirstList = () => {
     const [list] = document.getElementsByClassName('list-top');
-    const shouldScrollToFirstList = !url && list;
+    const shouldScrollToFirstList = !hasUrl && list;
 
     if (shouldScrollToFirstList) {
       window.scrollTo({
@@ -131,18 +147,16 @@ const SearchFilterContainer = ({
       window.scrollTo(0, 0);
     }
   };
-  if (!filterValues || filterValues.dataNotSet) return null;
+  if (!filterValues) return '';
 
   return (
     <SearchFilter
       key={key}
       setAppliedFilters={dispatch}
-      query={updatedQuery}
-      listComponentName={listComponentName}
       searchFilterRef={searchFilterRef}
       data={filterData}
       filters={filters}
-      hasUrl={!!url}
+      hasUrl={hasUrl}
       entity={entity}
       handleSearch={handleSearch}
       filterValues={filterValues}
@@ -166,8 +180,7 @@ SearchFilterContainer.propTypes = {
   groupAfterDesktop: PropTypes.number,
   filterBy: PropTypes.array,
   filterByProperty: PropTypes.array,
-  shouldAddFilters: PropTypes.bool,
-  listComponentName: PropTypes.string
+  shouldAddFilters: PropTypes.bool
 };
 
 SearchFilterContainer.defaultProps = {
@@ -179,8 +192,7 @@ SearchFilterContainer.defaultProps = {
   groupAfterDesktop: 0,
   filterBy: [],
   filterByProperty: [],
-  shouldAddFilters: false,
-  listComponentName: ''
+  shouldAddFilters: false
 };
 
 export default withTitle(SearchFilterContainer);

package/src/components/SearchFilter/helpers/build-filters-query.js

@@ -29,15 +29,7 @@ const builFilterObject = ({ queryKey, value, filters, isRange, isInQuery }) => {
     filters.push({ match: { [key]: filterValue } });
   });
 };
-const buildFiltersQuery = ({
-  shouldAddFilters,
-  query,
-  filterBy,
-  filterByProperty,
-  rangeValues,
-  queryKeys
-}) => {
-  if (!shouldAddFilters) return [];
+const buildFiltersQuery = ({ query, filterBy, filterByProperty, rangeValues, queryKeys }) => {
   const mustFilters = [];
   Object.keys(query).forEach(queryKey => {
     if (QUERY_KEYS_TO_IGNORE.includes(queryKey)) return;

package/src/components/SearchFilter/helpers/build-new-query.js

@@ -0,0 +1,6 @@
+const buildNewQuery = (url, currentUrl, queryParams, sortValues) => {
+  const newUrl = url ? `${url}?${queryParams}` : `${currentUrl}?${queryParams}`;
+  return sortValues ? `${newUrl}&${sortValues}` : newUrl;
+};
+
+export default buildNewQuery;

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

@@ -0,0 +1,26 @@
+import { SEARCH_TERM, TEXT_SEARCH } from '../constants';
+import parseFilterValue from './parse-filter-value';
+
+const buildQuery = (filterValues, filters) => {
+  const newQuery = [];
+  const searchValue = filterValues[SEARCH_TERM]
+    ? encodeURIComponent(filterValues[SEARCH_TERM])
+    : '';
+  if (searchValue) newQuery.push(`${SEARCH_TERM}=${searchValue}`);
+
+  filters.forEach(({ propsToDisplay, type }) => {
+    if (type === TEXT_SEARCH) return;
+
+    propsToDisplay.forEach(prop => {
+      const value = filterValues[prop];
+      const parsedValue = parseFilterValue(prop, type, value);
+      if (parsedValue && !newQuery.includes(parsedValue)) {
+        newQuery.push(parsedValue);
+      }
+    });
+  });
+
+  return newQuery.join('&');
+};
+
+export default buildQuery;

package/src/components/SearchFilter/helpers/get-initial-filter-values.js

@@ -0,0 +1,30 @@
+import { SEARCH_TERM } from '../constants';
+import getFilterValueFromQuery from './get-filter-value-from-query';
+
+const getInitialFilterValues = (filterData, filters, query) => {
+  const filterValues = {};
+  filterValues[SEARCH_TERM] = query[SEARCH_TERM] || '';
+
+  if (!filterData) {
+    filters.forEach(filterProps => {
+      const {
+        propsToDisplay: [key]
+      } = filterProps;
+      filterValues[key] = query[key] ? getFilterValueFromQuery(key, filterProps, {}, query) : null;
+    });
+    filterValues.dataNotSet = true;
+    return filterValues;
+  }
+
+  Object.keys(filterData).forEach(key => {
+    const filterProps =
+      filters.find(({ propsToDisplay }) => propsToDisplay.find(prop => key === prop)) || {};
+    filterValues[key] = getFilterValueFromQuery(key, filterProps, filterData[key], query);
+  });
+
+  filterValues.dataNotSet = false;
+
+  return filterValues;
+};
+
+export default getInitialFilterValues;

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

@@ -1,4 +1,4 @@
-import buildNewUrl from './build-new-url';
+import buildNewQuery from './build-new-query';
 import buildRawQueryStringified from './build-raw-query-stringified';
 import { decodeValue, encodeValue } from './decode-encode';
 import checkIfRangeUpdated from './check-if-range-updated';
@@ -10,15 +10,14 @@ import getIntersectedProp from './get-intersected-prop';
 import getRangeValue from './get-range-value';
 import getSelectOptions from './get-select-options';
 import isDeviceDesktop from './is-device-desktop';
-import getFilterValues from './get-filter-values';
+import getInitialFilterValues from './get-initial-filter-values';
 import getFilterValueFromQuery from './get-filter-value-from-query';
-import buildUrlQuery from './build-url-query';
+import buildQuery from './build-query';
 import buildFiltersQuery from './build-filters-query';
-import getFilterRangesAndCheckboxesValues from './get-filter-ranges-and-checkboxes-values';
 
 export {
-  buildUrlQuery,
-  buildNewUrl,
+  buildQuery,
+  buildNewQuery,
   buildRawQueryStringified,
   decodeValue,
   encodeValue,
@@ -31,8 +30,7 @@ export {
   getRangeValue,
   getSelectOptions,
   isDeviceDesktop,
-  getFilterValues,
+  getInitialFilterValues,
   getFilterValueFromQuery,
-  buildFiltersQuery,
-  getFilterRangesAndCheckboxesValues
+  buildFiltersQuery
 };

package/src/components/SearchFilter/index.js

@@ -1,3 +1,3 @@
-import SearchFilter from './SearchFilterContainer';
+import SearchFilterContainer from './SearchFilterContainer';
 
-export default SearchFilter;
+export default SearchFilterContainer;

package/src/components/SearchFilterSort/SearchFilterSort.js

@@ -1,23 +1,15 @@
 import React from 'react';
 import Select from '@blaze-react/select';
-import { useRouter } from 'next/router';
+import { withRouter } from 'next/router';
 import { parseUrl } from 'query-string';
 import PropTypes from 'prop-types';
 import { DEFAULT_SORT } from './constants';
 import { handleSortUpdate } from './helpers';
 import { withTitle } from '../../HOC';
 
-const getSortFromQuery = listComponentName => {
-  const listNameKey = listComponentName ? `pb[${listComponentName}]` : '';
-  const sortKey = `${listNameKey}${listNameKey ? '[sort]' : 'sort'}`;
-  const sortByKey = `${listNameKey}${listNameKey ? '[sortby]' : 'sortby'}`;
-  return [sortKey, sortByKey];
-};
-const SearchFilterSort = ({ filters, elementLabel, selectLabel, id, listComponentName }) => {
-  const router = useRouter();
+const SearchFilterSort = ({ router, filters, elementLabel, selectLabel, id }) => {
   const { asPath } = router;
-  const [sortKey, sortByKey] = getSortFromQuery(listComponentName);
-  const { url, query, query: { [sortKey]: sort, [sortByKey]: sortby } = {} } = parseUrl(asPath);
+  const { url, query, query: { sort, sortby } = {} } = parseUrl(asPath);
   const selectedValue = `${sortby}:${sort}` || '';
   const defaultTextValue = selectLabel || DEFAULT_SORT;
   const options = filters.map(({ label: optionLabel, propsToDisplay, sort: sortValue }) => [
@@ -25,8 +17,7 @@ const SearchFilterSort = ({ filters, elementLabel, selectLabel, id, listComponen
     optionLabel
   ]);
 
-  const setSortValue = ({ value }) =>
-    handleSortUpdate({ router, value, query, url, selectLabel, listComponentName });
+  const setSortValue = ({ value }) => handleSortUpdate(router, value, query, url, selectLabel);
 
   return (
     <div className="sort-by">
@@ -43,19 +34,18 @@ const SearchFilterSort = ({ filters, elementLabel, selectLabel, id, listComponen
 };
 
 SearchFilterSort.propTypes = {
+  router: PropTypes.object.isRequired,
   filters: PropTypes.array,
   elementLabel: PropTypes.string,
   selectLabel: PropTypes.string,
-  id: PropTypes.string,
-  listComponentName: PropTypes.string
+  id: PropTypes.string
 };
 
 SearchFilterSort.defaultProps = {
   filters: [],
   elementLabel: '',
   selectLabel: '',
-  id: '',
-  listComponentName: ''
+  id: ''
 };
 
-export default withTitle(SearchFilterSort);
+export default withRouter(withTitle(SearchFilterSort));

package/src/components/SearchFilterSort/helpers/handle-sort-update.js

@@ -2,30 +2,21 @@ import { stringify } from 'query-string';
 import { DEFAULT_SORT, SORT, SORTBY, PAGINATION_QUERY } from '../constants';
 import updateSort from './update-sort';
 
-const handleSortUpdate = ({ router, value, query, url, selectLabel, listComponentName }) => {
+const handleSortUpdate = (router, value, query, url, selectLabel) => {
   const queryWithoutSort = {};
   const routerOptions = { shallow: true, scroll: false };
-  const { asPath } = router;
-  const hashBit = asPath.split('#')[1];
-  const parsedHash = hashBit ? `#${hashBit}` : '';
-  const listNameKey = listComponentName ? `pb[${listComponentName}]` : '';
-  const sortString = listNameKey ? `[${SORT}]` : SORT;
-  const sortByString = listNameKey ? `[${SORTBY}]` : SORTBY;
-  const sortKey = `${listNameKey}${sortString}`;
-  const sortByKey = `${listNameKey}${sortByString}`;
   Object.keys(query).forEach(key => {
     if (key.indexOf(PAGINATION_QUERY) !== -1) return;
-    if (key !== sortByKey && key !== sortKey) queryWithoutSort[key] = query[key];
+    if (key !== SORTBY && key !== SORT) queryWithoutSort[key] = query[key];
   });
   if (value === DEFAULT_SORT || value === selectLabel) {
     const stringifiedQuery = stringify(queryWithoutSort);
 
     return stringifiedQuery
-      ? router.push(`/Resolver`, `${url}?${stringifiedQuery}${parsedHash}`, routerOptions)
-      : router.push(`/Resolver`, `${url}${parsedHash}`, routerOptions);
+      ? router.push(`/Resolver`, `${url}?${stringifiedQuery}`, routerOptions)
+      : router.push(`/Resolver`, url, routerOptions);
   }
-
-  const updatedSortUrl = updateSort(value, queryWithoutSort, url, parsedHash, listComponentName);
+  const updatedSortUrl = updateSort(value, queryWithoutSort, url);
   return router.push('/Resolver', updatedSortUrl, routerOptions);
 };
 

package/src/components/SearchFilterSort/helpers/update-sort.js

@@ -1,14 +1,10 @@
 import { stringify } from 'query-string';
-import { buildQueryKey } from '../../../helpers';
-import { SORT, SORTBY } from '../constants';
 
-const updateSort = (value, query, url, hashBit = '', listComponentName = '') => {
-  const sortKey = buildQueryKey(SORT, listComponentName);
-  const sortByKey = buildQueryKey(SORTBY, listComponentName);
+const updateSort = (value, query, url) => {
   const [newSortBy, newSort] = value.split(':');
-  const updatedQuery = { ...query, [sortByKey]: newSortBy, [sortKey]: newSort };
+  const updatedQuery = { ...query, sortby: newSortBy, sort: newSort };
   const parsedQuery = stringify(updatedQuery);
-  return `${url}?${parsedQuery}${hashBit}`;
+  return `${url}?${parsedQuery}`;
 };
 
 export default updateSort;

package/src/helpers/build-inherited-filters.js

@@ -1,7 +1,6 @@
 import flatten from 'lodash.flatten';
 import isFilterEntitysId from './is-filter-entitys-id';
 import getFilterProps from './get-filter-props';
-import { ID } from '../constants';
 
 const getRelationData = (entityData, relationName, currentRelationNames) => {
   if (!entityData) return null;
@@ -50,9 +49,8 @@ const buildInheritedFilters = (
       shouldIgnoreFilter
     } = getFilterProps(filter, currentSchema, filterEntitySchema);
 
-    if (filterName === ID) return;
-
     const relationData = getRelationData(entityData, relationName, relationForeignKeys);
+
     if (
       (currentEntityId === entityName && isFilterEntitysId(filterName, currentEntityId)) ||
       shouldIgnoreFilter

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

@@ -44,21 +44,19 @@ const buildPropsQuery = (entitySchema, extraProps = [], cardOptions = null, link
 const buildComplexProps = (
   shouldAddCategoryProps,
   props,
-  { relations = [], dynamicProperties = {}, properties = {} },
+  { relations = [], dynamicProperties = {} },
   linkProps
 ) =>
   Object.keys(props).map(base => {
     const nestedProps = props[base];
     const hasLink = !!linkProps.find(linkProp => linkProp.includes(base));
-    const matchingProperty = !!properties[base];
     const matchingRelation = relations.find(({ localField }) => localField === base);
     const matchingDynamicProp = Object.keys(dynamicProperties).find(
       dynamicKey => dynamicKey === base
     );
 
     if (matchingRelation && !nestedProps.includes('id')) nestedProps.push('id');
-    if (hasLink && (!!matchingProperty || !!matchingRelation || !!matchingDynamicProp))
-      nestedProps.push('url');
+    if (hasLink && (!!matchingRelation || !!matchingDynamicProp)) nestedProps.push('url');
     const jointNestedProps = nestedProps.join(',');
     if (base === 'category' && shouldAddCategoryProps)
       return `${base}{${jointNestedProps}, ${categoryProps}}`;

package/src/helpers/build-set-filters.js

@@ -31,9 +31,8 @@ const buildSetFilters = ({
   }
 
   const shouldApplyFilterValues = filterBy.length && filterByProperty.length;
-  if (!shouldApplyFilterValues) return { checkboxFilters, listFilterValues: {} };
+  const listFilterValues = shouldApplyFilterValues ? getFilterValues(filterBy) : {};
 
-  const listFilterValues = getFilterValues(filterBy);
   return { checkboxFilters, listFilterValues };
 };
 

package/src/helpers/get-query-filters.js

@@ -2,9 +2,10 @@ import getSearchFilterType from './get-search-filter-type';
 import buildSearchValuesCheckboxSelect from './build-search-values-checkbox-select';
 import { RANGE, CHECKBOX, SELECT } from '../constants';
 
-const getQueryFilters = (searchFilter, query, listName) => {
-  if (!searchFilter.settings || !searchFilter.settings.filters)
+const getQueryFilters = (searchFilter, query) => {
+  if (!searchFilter.settings || !searchFilter.settings.filters) {
     return { valuesAnd: [], valuesOr: [] };
+  }
 
   const rangeFilters = getSearchFilterType(searchFilter, RANGE);
   const checkboxFilters = getSearchFilterType(searchFilter, CHECKBOX);
@@ -14,8 +15,7 @@ const getQueryFilters = (searchFilter, query, listName) => {
     query,
     rangeFilters,
     checkboxFilters,
-    selectFilters,
-    listName
+    selectFilters
   );
   return { valuesAnd, valuesOr };
 };

package/src/helpers/get-query-props.js

@@ -2,11 +2,10 @@ import isFilterEntitysId from './is-filter-entitys-id';
 import getFilterProps from './get-filter-props';
 import { ID } from '../constants';
 
-const getQueryProps = (inheritedFilters, currentSchema, filterEntitySchema = {}) => {
+const getQueryProps = (inheritedFilters, currentSchema, filterEntitySchema) => {
   if (!currentSchema || !inheritedFilters.length) return ID;
 
-  const { identifier: currentEntityId, properties } = currentSchema;
-  const { identifier: filterEntityId } = filterEntitySchema;
+  const { identifier: currentEntityId } = currentSchema;
 
   return inheritedFilters.reduce((acc, filter) => {
     const {
@@ -18,19 +17,12 @@ const getQueryProps = (inheritedFilters, currentSchema, filterEntitySchema = {})
       relationForeignKeys,
       shouldIgnoreFilter
     } = getFilterProps(filter, currentSchema, filterEntitySchema);
+
     if (shouldIgnoreFilter) return acc;
     if (relationForeignKeys && relationForeignKeys.length) {
       return `${acc} ${relationForeignKeys.join(' ')}`;
     }
-    if (filterName === ID) {
-      const queryValue = Object.keys(properties).find(
-        propKey =>
-          properties[propKey] &&
-          properties[propKey].relation &&
-          properties[propKey].relation.entityIdentifier === filterEntityId
-      );
-      if (queryValue) return `${acc} ${queryValue} `;
-    }
+
     const queryProp = relationEntityName ? `${relationName} { ${relationProp} }` : filterName;
     const queryPropFinalValue =
       isEntityItself && isFilterEntitysId(filterName, currentEntityId) ? ID : queryProp;

package/src/helpers/get-wrapped-value-with-link.js

@@ -6,16 +6,13 @@ const getWrappedValueWithLink = (value, link, keyPrefix = '') => {
     const arrayResults = value.map((arrValue, index) => {
       const { keyField, url } = arrValue;
       const keyValue = arrValue[keyField];
-
       const isLastItem = index === value.length - 1;
-      const keyFieldValue = isLastItem ? keyValue : <>{keyValue}, </>;
+      const keyFieldValue = isLastItem ? keyValue : keyValue.concat(',');
 
       return url ? (
-        <BlazeLink key={[keyPrefix, index].join('-')} href={url}>
-          {<>{keyFieldValue} </>}
-        </BlazeLink>
+        <BlazeLink key={[keyPrefix, index].join('-')} href={url}>{`${keyFieldValue} `}</BlazeLink>
       ) : (
-        <>{keyFieldValue} </>
+        `${keyFieldValue} `
       );
     });
 

package/src/helpers/index.js

@@ -51,5 +51,3 @@ 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 processDataSummaryValue } from './process-data-summary-value';
-export { default as buildQueryKey } from './build-query-key';