@blaze-cms/react-page-builder 0.133.0-admin-updates.8 → 0.133.0-admin-updates.10

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -1,22 +1,25 @@
-import React, { useState, useRef, useReducer, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useReducer, useContext } from 'react';
+import { MainContext } from '@blaze-cms/nextjs-components';
 import { useRouter } from 'next/router';
 import { useQuery } from '@apollo/client';
 import PropTypes from 'prop-types';
 import { parseUrl } from 'query-string';
 import SearchFilter from './SearchFilter';
 import { withTitle } from '../../HOC';
-import { getSearchPublishedContent } from '../../application/query';
+import { getSearchPublishedContent, generateSingleItemQuery } from '../../application/query';
 import {
   buildNewUrl,
   buildRawQueryStringified,
   getFilterValues,
   buildFiltersQuery,
-  getFilterRangesAndCheckboxesValues
+  getFilterRangesAndCheckboxesValues,
+  getUpdatedFilterBy
 } from './helpers';
-import { getEntityData } from '../../helpers';
+import { getEntityData, getInheritedFilters, getQueryProps } from '../../helpers';
 import { RAW_RESULTS } from './constants';
 import { SCROLL_OFFSET } from '../../constants';
 import searchFilterReducer from './searchFilterReducer';
+import { useGetEntitySchemasAsObj } from '../../hooks';
 
 const getFiltersUrlQuery = (query, listName) => {
   if (!listName) return query;
@@ -46,18 +49,20 @@ const SearchFilterContainer = ({
   filterBy,
   filterByProperty,
   shouldAddFilters,
-  listComponentName
+  listComponentName,
+  parent
 }) => {
+  const { isPreview } = useContext(MainContext);
   const router = useRouter();
   const { asPath } = router;
   const searchFilterRef = useRef(null);
   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 [filterValues, dispatch] = useReducer(searchFilterReducer, null);
   const { url: currentUrl, query } = parseUrl(urlPath);
   const updatedQuery = getFiltersUrlQuery(query, listComponentName);
-
-  const [filterValues, dispatch] = useReducer(searchFilterReducer, null);
+  const { itemId: parentId, itemEntity: parentEntity } = parent;
 
   useEffect(
     () => {
@@ -65,6 +70,27 @@ const SearchFilterContainer = ({
     },
     [asPath]
   );
+  const { data: mainSchemas = {}, loading: schemasLoading } = useGetEntitySchemasAsObj([
+    parentEntity,
+    entity
+  ]);
+  const { [parentEntity]: parentSchema = {}, [entity]: filterEntitySchema = {} } = mainSchemas;
+  const { actions = {} } = parentSchema || {};
+  const getAction = isPreview ? actions.get : actions.getPublished;
+  const inheritedFilters = getInheritedFilters(filterBy, filterByProperty);
+  const queryProps = getQueryProps(inheritedFilters, parentSchema, filterEntitySchema);
+  const { data: { entityData: parentData } = {}, loading: parentQueryLoading } = useQuery(
+    generateSingleItemQuery(getAction, queryProps),
+    {
+      variables: { id: parentId },
+      skip: schemasLoading || !inheritedFilters.length
+    }
+  );
+  const { updatedFilterBy, updatedFilterByProperty } = getUpdatedFilterBy(
+    filterBy,
+    filterByProperty,
+    parentData
+  );
 
   const action = getSearchPublishedContent(RAW_RESULTS);
   const [checkboxSelectValues, rangeValues] = getFilterRangesAndCheckboxesValues(filters);
@@ -73,9 +99,9 @@ const SearchFilterContainer = ({
 
   const filtersQuery = buildFiltersQuery({
     shouldAddFilters,
-    query: filterValues || {},
-    filterBy,
-    filterByProperty,
+    query: filterValues,
+    filterBy: updatedFilterBy,
+    filterByProperty: updatedFilterByProperty,
     rangeValues,
     queryKeys: Object.keys(updatedQuery)
   });
@@ -89,7 +115,7 @@ const SearchFilterContainer = ({
 
   const { data, error, loading } = useQuery(action, {
     variables: { rawQueryStringified, limit: 0 }, // we only want aggs so limit=0 for no search results
-    skip: !rawQueryStringified
+    skip: !rawQueryStringified || parentQueryLoading
   });
 
   if (error) return error.message;
@@ -98,7 +124,7 @@ const SearchFilterContainer = ({
   const { searchPublishedContent: { rawResults: { aggregations: filterData } = {} } = {} } =
     data || {};
 
-  if (!filterValues && !loading && (filterData || !rawQueryStringified)) {
+  if (!filterValues && !loading && !parentQueryLoading && (filterData || !rawQueryStringified)) {
     const newValues = getFilterValues(filterData, filters, updatedQuery);
     dispatch({ newValues, shouldSearch: false, type: 'update' });
     return null;
@@ -171,7 +197,8 @@ SearchFilterContainer.propTypes = {
   filterBy: PropTypes.array,
   filterByProperty: PropTypes.array,
   shouldAddFilters: PropTypes.bool,
-  listComponentName: PropTypes.string
+  listComponentName: PropTypes.string,
+  parent: PropTypes.object
 };
 
 SearchFilterContainer.defaultProps = {
@@ -184,7 +211,8 @@ SearchFilterContainer.defaultProps = {
   filterBy: [],
   filterByProperty: [],
   shouldAddFilters: false,
-  listComponentName: ''
+  listComponentName: '',
+  parent: {}
 };
 
 export default withTitle(SearchFilterContainer);

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

@@ -29,38 +29,41 @@ const builFilterObject = ({ queryKey, value, filters, isRange, isInQuery }) => {
     filters.push({ match: { [key]: filterValue } });
   });
 };
+
 const buildFiltersQuery = ({
   shouldAddFilters,
-  query,
+
   filterBy,
   filterByProperty,
   rangeValues,
-  queryKeys
+  queryKeys,
+  query
 }) => {
   if (!shouldAddFilters) return [];
   const mustFilters = [];
-  Object.keys(query).forEach(queryKey => {
-    if (QUERY_KEYS_TO_IGNORE.includes(queryKey)) return;
-    if (!queryKey || !query[queryKey]) return;
-    const queryValue = query[queryKey];
+  if (query) {
+    Object.keys(query).forEach(queryKey => {
+      if (QUERY_KEYS_TO_IGNORE.includes(queryKey)) return;
+      if (!queryKey || !query[queryKey]) return;
+      const queryValue = query[queryKey];
 
-    const isRange = rangeValues.includes(queryKey);
-    const isInQuery = queryKeys.includes(queryKey);
-    builFilterObject({ queryKey, value: queryValue, filters: mustFilters, isRange, isInQuery });
-  });
+      const isRange = rangeValues.includes(queryKey);
+      const isInQuery = queryKeys.includes(queryKey);
+      builFilterObject({ queryKey, value: queryValue, filters: mustFilters, isRange, isInQuery });
+    });
+  }
 
   if (filterByProperty && filterByProperty.length) {
-    filterByProperty &&
-      filterByProperty.forEach(filterByPropOption => {
-        const [filterByPropKey] = filterByPropOption.split('/');
-        filterBy.forEach(filterByOption => {
-          if (filterByOption.indexOf(filterByPropKey) === -1) return;
-          const [, filteryByValue] = filterByOption.split('/');
-          const filterByKeyword = `${filterByPropKey}.keyword`;
-          if (!filteryByValue) return;
-          mustFilters.push({ match: { [filterByKeyword]: filteryByValue } });
-        });
+    filterByProperty.forEach(filterByPropOption => {
+      const [filterByPropKey] = filterByPropOption.split('/');
+      filterBy.forEach(filterByOption => {
+        if (filterByOption.indexOf(filterByPropKey) === -1) return;
+        const [, filteryByValue] = filterByOption.split('/');
+        const filterByKeyword = `${filterByPropKey}.keyword`;
+        if (!filteryByValue) return;
+        mustFilters.push({ match: { [filterByKeyword]: filteryByValue } });
       });
+    });
   }
 
   return mustFilters;

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

@@ -3,8 +3,6 @@ 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];

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

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

package/src/components/SearchFilter/helpers/get-updated-filter-by.js

@@ -0,0 +1,18 @@
+const getUpdatedFilterBy = (filterBy, filterByProperty, parentData) => {
+  if (!parentData || (filterBy && filterBy.length))
+    return { updatedFilterBy: filterBy, updatedFilterByProperty: filterByProperty };
+
+  const updatedFilterBy = [];
+  filterByProperty.forEach(property => {
+    const [key] = property.split('/');
+    const filterData = parentData[key];
+
+    if (!filterData) return;
+    if (Array.isArray(filterData)) filterData.forEach(dat => updatedFilterBy.push(`${key}/${dat}`));
+    else updatedFilterBy.push(`${key}/${filterData}`);
+  });
+
+  return { updatedFilterBy, updatedFilterByProperty: filterByProperty };
+};
+
+export default getUpdatedFilterBy;

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

@@ -12,12 +12,12 @@ import getSelectOptions from './get-select-options';
 import isDeviceDesktop from './is-device-desktop';
 import getFilterValues from './get-filter-values';
 import getFilterValueFromQuery from './get-filter-value-from-query';
-import buildUrlQuery from './build-url-query';
 import buildFiltersQuery from './build-filters-query';
 import getFilterRangesAndCheckboxesValues from './get-filter-ranges-and-checkboxes-values';
+import getUpdatedFilterBy from './get-updated-filter-by';
+import buildUrlQuery from './build-url-query';
 
 export {
-  buildUrlQuery,
   buildNewUrl,
   buildRawQueryStringified,
   decodeValue,
@@ -34,5 +34,7 @@ export {
   getFilterValues,
   getFilterValueFromQuery,
   buildFiltersQuery,
-  getFilterRangesAndCheckboxesValues
+  getFilterRangesAndCheckboxesValues,
+  getUpdatedFilterBy,
+  buildUrlQuery
 };

package/tests/unit/src/components/SearchFilter/helpers/get-updated-filter-by.test.js

@@ -0,0 +1,28 @@
+import getUpdatedFilterBy from '../../../../../../src/components/SearchFilter/helpers/get-updated-filter-by';
+
+const mockedFilterByProperty = ['categoryId/product', 'subjectIds/product'];
+
+const mockedParentData = {
+  id: 'abc123d',
+  categoryId: null,
+  subjectIds: ['subjectid123s']
+};
+
+describe('getUpdatedFilterBy helper', () => {
+  const mockedFilterBy = [1, 2, 3];
+  const noParentData = getUpdatedFilterBy(mockedFilterBy, [], {});
+  const withFilterBy = getUpdatedFilterBy(mockedFilterBy, [], { id: '123' });
+  const withUpdatedFilterBy = getUpdatedFilterBy([], mockedFilterByProperty, mockedParentData);
+
+  it('should return current filterBy and filterByProperty if no parentData or if filterBy values exist', () => {
+    expect(noParentData).toEqual({ updatedFilterBy: mockedFilterBy, updatedFilterByProperty: [] });
+    expect(withFilterBy).toEqual({ updatedFilterBy: mockedFilterBy, updatedFilterByProperty: [] });
+  });
+
+  it('should return updated filterBy based on parent data matchess', () => {
+    expect(withUpdatedFilterBy).toEqual({
+      updatedFilterBy: ['subjectIds/subjectid123s'],
+      updatedFilterByProperty: mockedFilterByProperty
+    });
+  });
+});