@blaze-cms/react-page-builder 0.113.0-alpha.8 → 0.114.0-alpha.1

package/src/components/Card/CardRender.js

@@ -9,26 +9,45 @@ import { useGetEntitySchemasAsObj, useGetImages } from '../../hooks';
 import {
   getUpdatedFilterBy,
   getEntityData,
+  getRequiredSchemas,
   sortResponseData,
   getUnpublishedEntityName,
   renderChildren,
   splitChildren,
   removeExtraItems,
-  getRequiredSchemas,
   appendImages
 } from '../../helpers';
 import { filtersSetup, filterQuerySetup, shouldSkipSingleQuery, shouldReturn } from './helpers';
 
 const CardContainer = dynamic(() => import('./CardContainer'));
 
-const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...variableProps }) => {
+const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...otherProps }) => {
   const {
     parent: { itemId, itemEntity },
     filterBy = [],
     filterByProperty = [],
-    sortby = [],
+    sortby,
+    sort,
+    sortProperties = [],
     operator: filterOperator = AND
-  } = variableProps;
+  } = otherProps;
+
+  const updatedSortProperties = [...sortProperties];
+  if (!updatedSortProperties.length && sort) {
+    updatedSortProperties.unshift({ sort, propsToDisplay: sortby });
+  }
+
+  const sortbyFilters = updatedSortProperties
+    .map(({ propsToDisplay }) => propsToDisplay)
+    .filter(Boolean)
+    .flat();
+
+  const variableProps = {
+    ...otherProps,
+    sortProperties: updatedSortProperties,
+    sort: null,
+    sortby: null
+  };
 
   const itemEntityUpdated = getUnpublishedEntityName(itemEntity);
   const { data: mainSchemas = {}, loading: _loading, error: _error } = useGetEntitySchemasAsObj([
@@ -70,7 +89,7 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...variabl
     loading: schemaLoading,
     error: schemaError
   } = useGetEntitySchemasAsObj(
-    getRequiredSchemas([...filterByProperty, ...sortby], filterEntitySchema),
+    getRequiredSchemas([...filterByProperty, ...sortbyFilters], filterEntitySchema),
     _loading
   );
 
@@ -94,7 +113,6 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...variabl
     itemsToDisplay,
     entitySameAsCurrentItemEntity
   });
-
   const { data, error: cardsError, loading: cardsLoading } = useQuery(action, {
     variables,
     skip: shouldReturn(!updatedFilterBy, _loading, _load, schemaLoading, _error, _err, schemaError)

package/src/components/Card/helpers/filter-query-setup.js

@@ -41,6 +41,7 @@ const filterQuerySetup = ({
     stringProps,
     JSON.stringify(rawQuery)
   );
+
   return { variables, limit };
 };
 

package/src/components/List/ListBuilder.js

@@ -51,14 +51,15 @@ const ListBuilder = props => {
     filterEntitySchema,
     requiredSchema,
     searchValues,
-    azFilter
+    azFilter,
+    sortProperties
   } = 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 shouldApplyDefaultSort = !sortby || !sortby.length;
+  const shouldApplyDefaultSort = !sortProperties || !sortProperties.length;
   const itemsPerPageToUse = getItemsPerPageToUse(itemsPerPage, limitToUse);
   const initialOffset = getCurrentOffset(offset, itemsPerPageToUse, paginationIndex, limitToUse);
   const { entityType, docType } = getEntityData(entity);
@@ -105,7 +106,8 @@ const ListBuilder = props => {
       limit: itemsPerPageToUse,
       offset: initialOffset,
       sort,
-      sortby
+      sortby,
+      sortProperties
     },
     stringProps,
     JSON.stringify(azRawQuery),
@@ -147,7 +149,8 @@ const ListBuilder = props => {
       limit: itemsPerPageToUse,
       offset: initialOffset,
       sort,
-      sortby
+      sortby,
+      sortProperties
     },
     stringProps,
     JSON.stringify(rawQuery),
@@ -198,7 +201,8 @@ ListBuilder.propTypes = {
   operator: PropTypes.string.isRequired,
   filterOperator: PropTypes.string.isRequired,
   paginationType: PropTypes.string,
-  azFilter: PropTypes.string
+  azFilter: PropTypes.string,
+  sortProperties: PropTypes.array
 };
 
 ListBuilder.defaultProps = {
@@ -209,7 +213,8 @@ ListBuilder.defaultProps = {
   offset: 0,
   paginationType: 'infinite',
   inheritedFilters: [],
-  azFilter: ''
+  azFilter: '',
+  sortProperties: []
 };
 
 export default ListBuilder;

package/src/components/List/ListFactory.js

@@ -7,7 +7,7 @@ import { MainContext } from '@blaze-cms/nextjs-components';
 import { getSingleEntitySchema, generateSingleItemQuery } from '../../application/query';
 import ListBuilder from './ListBuilder';
 import { AZ_LIST_TYPE } from './constants';
-import { getAzQueryFilter } from './helpers';
+import { getAzQueryFilter, getSortProps } from './helpers';
 import {
   getGenericProps,
   getRequiredSchemas,
@@ -36,7 +36,8 @@ const ListFactory = props => {
     sortby: defaultSortBy,
     sort: defaultSort,
     searchFilter,
-    operator: filterOperator
+    operator: filterOperator,
+    sortProperties
   } = props;
 
   const { isPreview } = useContext(MainContext);
@@ -46,8 +47,14 @@ const ListFactory = props => {
   const { query, url, query: { sort: querySort, sortby: querySortBy } = {} } = parseUrl(
     parsedQuery
   );
-  const sort = querySort || defaultSort;
-  const sortby = querySortBy ? [querySortBy] : defaultSortBy || [];
+  const { sortbyFilters, updatedSortProperties } = getSortProps({
+    querySort,
+    sortProperties,
+    defaultSort,
+    querySortBy,
+    defaultSortBy
+  });
+
   const { itemEntity, itemId } = parent;
   const itemEntityUpdated = getUnpublishedEntityName(itemEntity);
   const paginationIndex = getPaginationIndex(query, name);
@@ -75,7 +82,7 @@ const ListFactory = props => {
     loading: requiredSchemaLoading,
     error: requiredSchemaError
   } = useGetEntitySchemasAsObj(
-    getRequiredSchemas([...filterByProperty, ...sortby], filterEntitySchema),
+    getRequiredSchemas([...filterByProperty, ...sortbyFilters], filterEntitySchema),
     schemasLoading
   );
   const inheritedFilters = getInheritedFilters(filterBy, filterByProperty);
@@ -126,8 +133,9 @@ const ListFactory = props => {
     isAZ,
     router,
     entitySchema,
-    sort,
-    sortby,
+    sort: null,
+    sortby: null,
+    sortProperties: updatedSortProperties,
     azFilter,
     searchValues,
     filterEntitySchema,
@@ -156,7 +164,8 @@ ListFactory.propTypes = {
   name: PropTypes.string,
   sortby: PropTypes.array,
   sort: PropTypes.string,
-  searchFilter: PropTypes.object
+  searchFilter: PropTypes.object,
+  sortProperties: PropTypes.array
 };
 
 ListFactory.defaultProps = {
@@ -165,6 +174,7 @@ ListFactory.defaultProps = {
   omitWrappers: false,
   name: '',
   sortby: [],
+  sortProperties: [],
   sort: '',
   operator: AND,
   searchFilter: {}

package/src/components/List/helpers/get-sort-props.js

@@ -0,0 +1,17 @@
+const getSortProps = ({ querySort, sortProperties, defaultSort, querySortBy, defaultSortBy }) => {
+  const sort = querySort || (sortProperties.length ? null : defaultSort);
+  let sortby = null;
+  if (querySortBy) sortby = [querySortBy];
+  else if (!sortProperties.length) sortby = defaultSortBy;
+
+  const updatedSortProperties = [...sortProperties];
+  if (sort) updatedSortProperties.unshift({ sort, propsToDisplay: sortby });
+
+  const sortbyFilters = updatedSortProperties
+    .map(({ propsToDisplay: filterProps }) => filterProps)
+    .filter(Boolean)
+    .flat();
+  return { sortbyFilters, updatedSortProperties };
+};
+
+export default getSortProps;

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

@@ -4,3 +4,4 @@ export { default as buildAzAggregations } from './build-az-aggregations';
 export { default as buildAzUrl } from './build-az-url';
 export { default as sortAggs } from './sort-aggs';
 export { default as getItemsPerPageToUse } from './get-items-per-page-to-use';
+export { default as getSortProps } from './get-sort-props';

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

@@ -3,11 +3,16 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import debounce from 'lodash.debounce';
 import FiltersList from './FiltersList';
-import { isDeviceDesktop, buildQuery, getInitialFilterValues } from '../helpers';
+import {
+  isDeviceDesktop,
+  buildQuery,
+  getInitialFilterValues,
+  getResponsiveFilterClassnames
+} from '../helpers';
 import CloseMobileForm from './CloseMobileForm';
 import ResetDesktopForm from './ResetDesktopForm';
 import MobileFormToolbar from './MobileFormToolbar';
-import { SEARCH, REFINE } from '../constants';
+import { SEARCH, REFINE, MORE_FILTERS_CLASSES } from '../constants';
 
 const reducer = (state, action) => {
   const { newValues, type, shouldSearch = true } = action;
@@ -36,11 +41,13 @@ const SearchFilter = ({
   displaySearchFilter,
   setDisplaySearchFilter,
   initialFilterValues,
-  groupAfter
+  groupAfterDesktop,
+  groupAfterMobile
 }) => {
   const [isDesktop, setIsDesktop] = useState(true);
   const [pageWidth, setPageWidth] = useState(null);
-  const [moreFiltersCollapsed, setMoreFiltersCollapsed] = useState(true);
+  const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);
+  const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);
   const [filterValues, dispatch] = useReducer(reducer, initialFilterValues);
 
   const handleSubmit = debounce(newValues => {
@@ -91,13 +98,12 @@ const SearchFilter = ({
     'filter__form filter__form--mobile': isMobileFormDisplayed
   });
 
-  const moreFiltersWrapperClass = classnames('filter__more-filters-wrapper', {
-    'filter__more-filters-wrapper--open': !moreFiltersCollapsed
-  });
-
-  const moreFiltersTogglerClass = classnames('filter__more-filters-toggler', {
-    'filter__more-filters-toggler--open': !moreFiltersCollapsed
-  });
+  const {
+    moreFiltersMobileWrapperClass,
+    moreFiltersMobileTogglerClass,
+    moreFiltersDesktopWrapperClass,
+    moreFiltersDesktopTogglerClass
+  } = getResponsiveFilterClassnames(moreFiltersDesktopCollapsed, moreFiltersMobileCollapsed);
 
   const formId = `filter-${name}-form`;
 
@@ -111,6 +117,8 @@ const SearchFilter = ({
     dispatch({ newValues, shouldSearch, type: 'update' });
   };
 
+  const shouldGroup = !!(groupAfterDesktop || groupAfterMobile);
+
   return (
     <>
       {isDesktopFormDisplayed || isMobileFormDisplayed ? (
@@ -132,7 +140,7 @@ const SearchFilter = ({
             {isDesktopFormDisplayed && <ResetDesktopForm handleReset={handleReset} />}
 
             <div className="filter__wrapper filter__wrapper--search-refine">
-              {!groupAfter && (
+              {!shouldGroup && (
                 <FiltersList
                   data={data}
                   filters={filters}
@@ -143,37 +151,74 @@ const SearchFilter = ({
                 />
               )}
 
-              {!!groupAfter && (
+              {shouldGroup && (
                 <>
                   <FiltersList
                     data={data}
-                    filters={filters.slice(0, groupAfter)}
+                    filters={filters.slice(0, groupAfterMobile)}
                     hasUrl={hasUrl}
                     entity={entity}
                     filterValues={filterValues}
                     updateFilterValues={updateFilterValues}
                   />
 
-                  <button
-                    className={moreFiltersTogglerClass}
-                    type="button"
-                    onClick={() => setMoreFiltersCollapsed(!moreFiltersCollapsed)}>
-                    More filters
-                  </button>
+                  {!!groupAfterMobile && (
+                    <button
+                      className={moreFiltersMobileTogglerClass}
+                      type="button"
+                      onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>
+                      Filters
+                    </button>
+                  )}
 
-                  <div className={moreFiltersWrapperClass}>
-                    <div className="filter__more-filters-content">
+                  <div className={moreFiltersMobileWrapperClass}>
+                    <div className={MORE_FILTERS_CLASSES.MOBILE_CONTENT}>
                       <FiltersList
                         data={data}
-                        filters={filters.slice(groupAfter)}
+                        filters={filters.slice(
+                          groupAfterMobile,
+                          groupAfterDesktop ? groupAfterDesktop - 1 : 0
+                        )}
                         hasUrl={hasUrl}
                         entity={entity}
                         filterValues={filterValues}
                         updateFilterValues={updateFilterValues}
                       />
+
+                      {!!groupAfterDesktop && (
+                        <button
+                          className={moreFiltersDesktopTogglerClass}
+                          type="button"
+                          onClick={() =>
+                            setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)
+                          }>
+                          More filters
+                        </button>
+                      )}
+
+                      <div className={moreFiltersDesktopWrapperClass}>
+                        <div className={MORE_FILTERS_CLASSES.DESKTOP_CONTENT}>
+                          <FiltersList
+                            data={data}
+                            filters={filters.slice(groupAfterDesktop)}
+                            hasUrl={hasUrl}
+                            entity={entity}
+                            filterValues={filterValues}
+                            updateFilterValues={updateFilterValues}
+                          />
+                        </div>
+
+                        <div className={MORE_FILTERS_CLASSES.DESKTOP_BUTTONS}>
+                          <ResetDesktopForm handleReset={handleReset} />
+
+                          <button className="button button--full-width" type="submit">
+                            {SEARCH}
+                          </button>
+                        </div>
+                      </div>
                     </div>
 
-                    <div className="filter__more-filters-buttons">
+                    <div className={MORE_FILTERS_CLASSES.MOBILE_BUTTONS}>
                       <ResetDesktopForm handleReset={handleReset} />
 
                       <button className="button button--full-width" type="submit">
@@ -224,7 +269,8 @@ SearchFilter.propTypes = {
   displaySearchFilter: PropTypes.bool.isRequired,
   setDisplaySearchFilter: PropTypes.func.isRequired,
   isCollapsedOnResponsive: PropTypes.bool.isRequired,
-  groupAfter: PropTypes.number.isRequired,
+  groupAfterDesktop: PropTypes.number.isRequired,
+  groupAfterMobile: PropTypes.number.isRequired,
   initialFilterValues: PropTypes.object.isRequired
 };
 

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -23,7 +23,8 @@ const SearchFilterContainer = ({
   filters,
   name,
   isCollapsedOnResponsive,
-  groupAfter
+  groupAfterMobile,
+  groupAfterDesktop
 }) => {
   const router = useRouter();
   const searchFilterRef = useRef(null);
@@ -61,11 +62,14 @@ const SearchFilterContainer = ({
     variables: { rawQueryStringified, limit: 0 }, // we only want aggs so limit=0 for no search results
     skip: !rawQueryStringified
   });
-  if (loading || !data) return '';
+
+  if (loading) return null;
   if (error) return error.message;
-  const { searchPublishedContent: { rawResults: { aggregations: filterData } = {} } = {} } = data;
-  const shouldDisplayForm = !!filters.length && !loading;
-  if (!shouldDisplayForm || !filterData) return null;
+  if (!filters.length) return null;
+
+  const { searchPublishedContent: { rawResults: { aggregations: filterData = {} } = {} } = {} } =
+    data || {};
+
   const initialFilterValues = getInitialFilterValues(filterData, filters, query);
 
   const handleSearch = newQuery => {
@@ -110,7 +114,8 @@ const SearchFilterContainer = ({
       isCollapsedOnResponsive={isCollapsedOnResponsive}
       displaySearchFilter={displaySearchFilter}
       setDisplaySearchFilter={setDisplaySearchFilter}
-      groupAfter={groupAfter}
+      groupAfterMobile={groupAfterMobile}
+      groupAfterDesktop={groupAfterDesktop}
     />
   );
 };
@@ -121,7 +126,8 @@ SearchFilterContainer.propTypes = {
   filters: PropTypes.array,
   name: PropTypes.string.isRequired,
   isCollapsedOnResponsive: PropTypes.bool,
-  groupAfter: PropTypes.number
+  groupAfterMobile: PropTypes.number,
+  groupAfterDesktop: PropTypes.number
 };
 
 SearchFilterContainer.defaultProps = {
@@ -129,7 +135,8 @@ SearchFilterContainer.defaultProps = {
   filters: [],
   entity: '',
   isCollapsedOnResponsive: true,
-  groupAfter: 0
+  groupAfterMobile: 0,
+  groupAfterDesktop: 0
 };
 
 export default withTitle(SearchFilterContainer);

package/src/components/SearchFilter/constants.js

@@ -24,6 +24,18 @@ const SEARCH = 'Search';
 const REFINE = `Refine Search`;
 const MOBILE_REFINEMENT_TITLE = 'Search refinement';
 
+const MORE_FILTERS_CLASSES_BASE = 'filter__more-filters';
+const MORE_FILTERS_CLASSES = {
+  MOBILE_WRAPPER: `${MORE_FILTERS_CLASSES_BASE}-mobile-wrapper`,
+  MOBILE_CONTENT: `${MORE_FILTERS_CLASSES_BASE}-mobile-content`,
+  MOBILE_TOGGLER: `${MORE_FILTERS_CLASSES_BASE}-mobile-toggler`,
+  MOBILE_BUTTONS: `${MORE_FILTERS_CLASSES_BASE}-mobile-buttons`,
+  DESKTOP_WRAPPER: `${MORE_FILTERS_CLASSES_BASE}-desktop-wrapper`,
+  DESKTOP_CONTENT: `${MORE_FILTERS_CLASSES_BASE}-desktop-content`,
+  DESKTOP_TOGGLER: `${MORE_FILTERS_CLASSES_BASE}-desktop-toggler`,
+  DESKTOP_BUTTONS: `${MORE_FILTERS_CLASSES_BASE}-desktop-buttons`
+};
+
 export {
   CHECKBOX,
   SELECT,
@@ -49,5 +61,6 @@ export {
   RESET,
   SEARCH,
   REFINE,
-  MOBILE_REFINEMENT_TITLE
+  MOBILE_REFINEMENT_TITLE,
+  MORE_FILTERS_CLASSES
 };

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

@@ -8,12 +8,11 @@ const buildQuery = (filterValues, filters) => {
 
   filters.forEach(({ propsToDisplay, type }) => {
     if (type === TEXT_SEARCH) return;
-    propsToDisplay.map(prop => {
+
+    propsToDisplay.forEach(prop => {
       const value = filterValues[prop];
       const parsedValue = parseFilterValue(prop, type, value);
-      if (!parsedValue) return null;
       if (parsedValue) newQuery.push(parsedValue);
-      return parsedValue;
     });
   });
 

package/src/components/SearchFilter/helpers/get-responsive-filter-classnames.js

@@ -0,0 +1,22 @@
+import classnames from 'classnames';
+import { MORE_FILTERS_CLASSES } from '../constants';
+
+const getResponsiveFilterClassnames = (
+  moreFiltersDesktopCollapsed,
+  moreFiltersMobileCollapsed
+) => ({
+  moreFiltersMobileWrapperClass: classnames(MORE_FILTERS_CLASSES.MOBILE_WRAPPER, {
+    [`${MORE_FILTERS_CLASSES.MOBILE_WRAPPER}--open`]: !moreFiltersMobileCollapsed
+  }),
+  moreFiltersMobileTogglerClass: classnames(MORE_FILTERS_CLASSES.MOBILE_TOGGLER, {
+    [`${MORE_FILTERS_CLASSES.MOBILE_TOGGLER}--open`]: !moreFiltersMobileCollapsed
+  }),
+  moreFiltersDesktopWrapperClass: classnames(MORE_FILTERS_CLASSES.DESKTOP_WRAPPER, {
+    [`${MORE_FILTERS_CLASSES.DESKTOP_WRAPPER}--open`]: !moreFiltersDesktopCollapsed
+  }),
+  moreFiltersDesktopTogglerClass: classnames(MORE_FILTERS_CLASSES.DESKTOP_TOGGLER, {
+    [`${MORE_FILTERS_CLASSES.DESKTOP_TOGGLER}--open`]: !moreFiltersDesktopCollapsed
+  })
+});
+
+export default getResponsiveFilterClassnames;

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

@@ -2,6 +2,7 @@ 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';
+import getResponsiveFilterClassnames from './get-responsive-filter-classnames';
 import getDisplayValue from './get-display-value';
 import calculateStep from './calculate-step';
 import calculateMinMax from './calculate-min-max';
@@ -20,6 +21,7 @@ export {
   decodeValue,
   encodeValue,
   checkIfRangeUpdated,
+  getResponsiveFilterClassnames,
   getDisplayValue,
   calculateStep,
   calculateMinMax,

package/src/helpers/get-generic-render-variables.js

@@ -1,31 +1,41 @@
-import checkSortby from './check-sort-by';
 import getSortbyFieldName from './get-sort-by-field-name';
 import { DEFAULT_LIMIT, DEFAULT_OFFSET } from '../constants';
 
+const buildSortValues = (sortFilters, relations, stringProps) => {
+  if (!sortFilters || !sortFilters.length) return { sort: [] };
+  const sortValues = sortFilters
+    .map(
+      ({ sort, propsToDisplay }) =>
+        !!sort &&
+        !!propsToDisplay[0] &&
+        `${getSortbyFieldName(relations, propsToDisplay[0], stringProps)}:${sort.toLowerCase()}`
+    )
+    .filter(Boolean)
+    .join(',');
+
+  return { sort: sortValues };
+};
 const getCorrectSort = (relations, filterProps, stringProps, isTextSearchApplied) => {
   if (isTextSearchApplied) {
     return {};
   }
-  const { sort, sortby } = filterProps;
-
-  const isSortbyArray = Array.isArray(sortby);
-
-  const hasSortFields = sort && checkSortby(sortby, isSortbyArray);
-
-  const sortValue = hasSortFields
-    ? `${getSortbyFieldName(relations, sortby, stringProps, isSortbyArray)}:${sort.toLowerCase()}`
-    : '';
+  const { sort, sortby, sortProperties = [] } = filterProps;
 
-  return sortValue ? { sort: sortValue } : {};
+  return buildSortValues(
+    [{ sort, propsToDisplay: [sortby] }, ...sortProperties],
+    relations,
+    stringProps
+  );
 };
 
 const getGenericRenderVariables = (
   relations,
-  { limit = DEFAULT_LIMIT, offset, ...filterProps } = {},
+  filterProps = {},
   stringProps = [],
   rawQueryStringified = '',
   isTextSearchFilterApplied = false
 ) => {
+  const { limit = DEFAULT_LIMIT, offset } = filterProps;
   const sort = getCorrectSort(relations, filterProps, stringProps, isTextSearchFilterApplied);
   const raw = rawQueryStringified ? { rawQueryStringified } : {};
 

package/tests/unit/src/components/List/helpers/get-sort-props.test.js

@@ -0,0 +1,58 @@
+import getSortProps from '../../../../../../src/components/List/helpers/get-sort-props';
+
+const property = 'updated';
+const defaultProperty = 'name';
+const asc = 'asc';
+const desc = 'desc';
+const sortProperties = [
+  {
+    propsToDisplay: [property],
+    sort: asc
+  }
+];
+const querySortBy = 'date';
+const props = {
+  querySort: '',
+  sortProperties,
+  defaultSort: desc,
+  querySortBy: '',
+  defaultSortBy: [defaultProperty]
+};
+
+describe('getSortProps helper function', () => {
+  it('should ignore old sortby/sort and use sortProperties', () => {
+    const { sortbyFilters, updatedSortProperties } = getSortProps(props);
+    expect(sortbyFilters).toEqual([property]);
+    expect(updatedSortProperties).toEqual(sortProperties);
+  });
+
+  it('should add query sort', () => {
+    const { sortbyFilters, updatedSortProperties } = getSortProps({
+      ...props,
+      querySortBy,
+      querySort: desc
+    });
+    expect(sortbyFilters).toEqual([querySortBy, property]);
+    expect(updatedSortProperties).toEqual([
+      {
+        propsToDisplay: [querySortBy],
+        sort: desc
+      },
+      ...sortProperties
+    ]);
+  });
+
+  it('should use old style sort', () => {
+    const { sortbyFilters, updatedSortProperties } = getSortProps({
+      ...props,
+      sortProperties: []
+    });
+    expect(sortbyFilters).toEqual([defaultProperty]);
+    expect(updatedSortProperties).toEqual([
+      {
+        propsToDisplay: [defaultProperty],
+        sort: desc
+      }
+    ]);
+  });
+});