@blaze-cms/react-page-builder 0.131.1 → 0.132.0-admin-updates.1

package/src/components/SearchFilter/SearchFilterContainer.js

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

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

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

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

@@ -0,0 +1,8 @@
+const buildNewUrl = (url, currentUrl, queryParams, hashBit) => {
+  const encodedQuery = encodeURI(queryParams);
+  const baseUrl = url || currentUrl;
+  const newUrl = encodedQuery ? `${baseUrl}?${encodedQuery}` : `${baseUrl}`;
+  return hashBit ? `${newUrl}#${hashBit}` : newUrl;
+};
+
+export default buildNewUrl;

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

@@ -0,0 +1,33 @@
+import { SEARCH_TERM, TEXT_SEARCH } from '../constants';
+import parseFilterValue from './parse-filter-value';
+import { buildQueryKey } from '../../../helpers';
+
+const buildUrlQuery = (filterValues, filters, listComponentName = '', query = {}) => {
+  if (!filterValues) return '';
+
+  const newQuery = [];
+  const queryKeys = [];
+  const searchValue = filterValues[SEARCH_TERM];
+  const searchKey = buildQueryKey(SEARCH_TERM, listComponentName);
+  queryKeys.push(searchKey);
+  if (searchValue) newQuery.push(`${searchKey}=${searchValue}`);
+
+  filters.forEach(({ propsToDisplay, type }) => {
+    if (type === TEXT_SEARCH) return;
+    propsToDisplay.forEach(prop => {
+      const value = filterValues[prop];
+      const filterKey = buildQueryKey(prop, listComponentName);
+      queryKeys.push(filterKey);
+      const parsedValue = parseFilterValue(filterKey, type, value, newQuery);
+      if (parsedValue && !newQuery.includes(parsedValue)) newQuery.push(parsedValue);
+    });
+  });
+
+  Object.keys(query).forEach(key => {
+    if (queryKeys.indexOf(key) === -1) newQuery.push(`${key}=${query[key]}`);
+  });
+
+  return newQuery.join('&');
+};
+
+export default buildUrlQuery;

package/src/components/SearchFilter/helpers/get-filter-ranges-and-checkboxes-values.js

@@ -0,0 +1,17 @@
+import { RANGE, CHECKBOX_SELECT } from '../constants';
+
+const 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);
+    }
+  });
+  return [checkboxSelectValues, rangeValues];
+};
+
+export default getFilterRangesAndCheckboxesValues;

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

@@ -0,0 +1,21 @@
+import { SEARCH_TERM, TEXT_SEARCH } from '../constants';
+import getFilterValueFromQuery from './get-filter-value-from-query';
+
+const getFilterValues = (filterData, filters, query) => {
+  const filterValues = {};
+  filterValues[SEARCH_TERM] = query[SEARCH_TERM] || '';
+
+  filters.forEach(filterProps => {
+    const {
+      propsToDisplay: [key],
+      type
+    } = filterProps;
+    if (type === TEXT_SEARCH) return;
+    const data = filterData && filterData[key] ? filterData[key] : {};
+    filterValues[key] = getFilterValueFromQuery(key, filterProps, data, query);
+  });
+  filterValues.dataNotSet = !filterData;
+  return filterValues;
+};
+
+export default getFilterValues;

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

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

package/src/components/SearchFilter/index.js

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

package/src/components/SearchFilter/searchFilterReducer.js

@@ -0,0 +1,15 @@
+const searchFilterReducer = (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 null;
+    default:
+      throw new Error();
+  }
+};
+
+export default searchFilterReducer;

package/src/components/SearchFilterSort/SearchFilterSort.js

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

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

@@ -2,21 +2,30 @@ 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) => {
+const handleSortUpdate = ({ router, value, query, url, selectLabel, listComponentName }) => {
   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 !== SORTBY && key !== SORT) queryWithoutSort[key] = query[key];
+    if (key !== sortByKey && key !== sortKey) queryWithoutSort[key] = query[key];
   });
   if (value === DEFAULT_SORT || value === selectLabel) {
     const stringifiedQuery = stringify(queryWithoutSort);
 
     return stringifiedQuery
-      ? router.push(`/Resolver`, `${url}?${stringifiedQuery}`, routerOptions)
-      : router.push(`/Resolver`, url, routerOptions);
+      ? router.push(`/Resolver`, `${url}?${stringifiedQuery}${parsedHash}`, routerOptions)
+      : router.push(`/Resolver`, `${url}${parsedHash}`, routerOptions);
   }
-  const updatedSortUrl = updateSort(value, queryWithoutSort, url);
+
+  const updatedSortUrl = updateSort(value, queryWithoutSort, url, parsedHash, listComponentName);
   return router.push('/Resolver', updatedSortUrl, routerOptions);
 };
 

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

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

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

@@ -1,6 +1,7 @@
 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;
@@ -49,8 +50,9 @@ const buildInheritedFilters = (
       shouldIgnoreFilter
     } = getFilterProps(filter, currentSchema, filterEntitySchema);
 
-    const relationData = getRelationData(entityData, relationName, relationForeignKeys);
+    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,19 +44,21 @@ const buildPropsQuery = (entitySchema, extraProps = [], cardOptions = null, link
 const buildComplexProps = (
   shouldAddCategoryProps,
   props,
-  { relations = [], dynamicProperties = {} },
+  { relations = [], dynamicProperties = {}, properties = {} },
   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 && (!!matchingRelation || !!matchingDynamicProp)) nestedProps.push('url');
+    if (hasLink && (!!matchingProperty || !!matchingRelation || !!matchingDynamicProp))
+      nestedProps.push('url');
     const jointNestedProps = nestedProps.join(',');
     if (base === 'category' && shouldAddCategoryProps)
       return `${base}{${jointNestedProps}, ${categoryProps}}`;

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

@@ -0,0 +1,7 @@
+const buildQueryKey = (key, listName) => {
+  const listNameKey = listName ? `pb[${listName}]` : '';
+  const wrappedSearchKey = listNameKey ? `[${key}]` : key;
+  return `${listNameKey}${wrappedSearchKey}`;
+};
+
+export default buildQueryKey;

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

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

package/src/helpers/get-entities-with-banner.js

@@ -4,8 +4,9 @@ export default function getEntitiesWithBanner(entities, options, hasNewBannerSet
   const { hasBanner } = options;
   if (hasNewBannerSettings) {
     return entities.map(currentEntity => {
-      const { parent, transform, limit } = options;
-      return { ...currentEntity, parent, limit, transform };
+      const { parent, transform, limit, banner } = options;
+      const { adunit, baseAdunit } = banner || {};
+      return { ...currentEntity, parent, limit, transform, adunit, baseAdunit };
     });
   }
   if (!hasBanner) return entities;

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

@@ -2,10 +2,9 @@ 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) => {
-  if (!searchFilter.settings || !searchFilter.settings.filters) {
+const getQueryFilters = (searchFilter, query, listName) => {
+  if (!searchFilter.settings || !searchFilter.settings.filters)
     return { valuesAnd: [], valuesOr: [] };
-  }
 
   const rangeFilters = getSearchFilterType(searchFilter, RANGE);
   const checkboxFilters = getSearchFilterType(searchFilter, CHECKBOX);
@@ -15,7 +14,8 @@ const getQueryFilters = (searchFilter, query) => {
     query,
     rangeFilters,
     checkboxFilters,
-    selectFilters
+    selectFilters,
+    listName
   );
   return { valuesAnd, valuesOr };
 };

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

@@ -2,10 +2,11 @@ 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 } = currentSchema;
+  const { identifier: currentEntityId, properties } = currentSchema;
+  const { identifier: filterEntityId } = filterEntitySchema;
 
   return inheritedFilters.reduce((acc, filter) => {
     const {
@@ -17,12 +18,19 @@ 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,13 +6,16 @@ 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.concat(',');
+      const keyFieldValue = isLastItem ? keyValue : <>{keyValue}, </>;
 
       return url ? (
-        <BlazeLink key={[keyPrefix, index].join('-')} href={url}>{`${keyFieldValue} `}</BlazeLink>
+        <BlazeLink key={[keyPrefix, index].join('-')} href={url}>
+          {<>{keyFieldValue} </>}
+        </BlazeLink>
       ) : (
-        `${keyFieldValue} `
+        <>{keyFieldValue} </>
       );
     });