@blaze-cms/react-page-builder 0.146.0-node18.1 → 0.146.0-rc-eagle.0

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

@@ -2,13 +2,15 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import debounce from 'lodash.debounce';
+import { useTranslation } from '@blaze-cms/nextjs-components';
 import FiltersList from './FiltersList';
 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';
+import { MORE_FILTERS_CLASSES } from '../constants';
+import { TRANSLATION_NAMESPACE } from '../../../constants';
 
 const SearchFilter = ({
   searchFilterRef,
@@ -29,6 +31,7 @@ const SearchFilter = ({
   mobileRefineButtonText,
   query
 }) => {
+  const { t } = useTranslation(TRANSLATION_NAMESPACE);
   const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);
   const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);
 
@@ -187,7 +190,7 @@ const SearchFilter = ({
                         <ResetDesktopForm handleReset={handleReset} />
 
                         <button className="button button--full-width" type="submit">
-                          {SEARCH}
+                          {t('SEARCH_BUTTON_TEXT')}
                         </button>
                       </div>
                     </div>
@@ -197,7 +200,7 @@ const SearchFilter = ({
                     <ResetDesktopForm handleReset={handleReset} />
 
                     <button className="button button--full-width" type="submit">
-                      {SEARCH}
+                      {t('SEARCH_BUTTON_TEXT')}
                     </button>
                   </div>
                 </div>
@@ -206,7 +209,7 @@ const SearchFilter = ({
 
             {!displaySearchFilter && (
               <button className="button button--full-width" type="submit">
-                {SEARCH}
+                {t('SEARCH_BUTTON_TEXT')}
               </button>
             )}
           </div>
@@ -219,9 +222,9 @@ const SearchFilter = ({
         <div
           className="filter__refine filter__refine--mobile-close"
           data-testid="refine-mobile"
-          aria-label="Toggle Search Filter">
+          aria-label={t('REFINE_SEARCH')}>
           <div role="button" onClick={() => setDisplaySearchFilter(true)}>
-            {mobileRefineButtonText || REFINE}
+            {mobileRefineButtonText || t('REFINE_SEARCH')}
           </div>
         </div>
       )}

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -19,10 +19,10 @@ import {
   getInheritedFilters,
   getQueryProps,
   buildRawQueryStringified,
-  buildFiltersQuery
+  buildFiltersQuery,
+  getComponentId
 } from '../../helpers';
 import { RAW_RESULTS } from './constants';
-import { SCROLL_OFFSET } from '../../constants';
 import searchFilterReducer from './searchFilterReducer';
 import { useGetEntitySchemasAsObj } from '../../hooks';
 
@@ -133,31 +133,35 @@ const SearchFilterContainer = ({
   }
 
   const handleSearch = newQuery => {
+    const componentId = listComponentName ? getComponentId(listComponentName) : '';
     setDisplaySearchFilter(false);
     const hashBit = asPath.split('#')[1] || '';
-    const parsedHashBit = hashBit ? `#${hashBit}` : '';
-    scrollToFirstList();
+    let parsedHashBit = hashBit ? `#${hashBit}` : '';
+    parsedHashBit = parsedHashBit || (componentId ? `#${componentId}` : '');
+
+    scrollToFirstList(componentId);
     if (!newQuery) {
-      const baseQuery = `${currentUrl}${parsedHashBit}`;
+      const baseUrl = url || currentUrl;
+      const baseQuery = `${baseUrl}${parsedHashBit}`;
       setUrlPath(baseQuery);
       return router.push('/Resolver', baseQuery, { shallow: !url, scroll: false }).then(() => {
         setKey(`filter-${name}:${Date.now()}`); // remove after range component update
       });
     }
-    const newUrl = buildNewUrl(url, currentUrl, newQuery, hashBit);
+    const hashToUse = componentId;
+    const newUrl = buildNewUrl(url, currentUrl, newQuery, hashToUse);
     setUrlPath(newUrl);
     return router.push('/Resolver', newUrl, { shallow: !url, scroll: false });
   };
 
-  const scrollToFirstList = () => {
-    const [list] = document.getElementsByClassName('list-top');
+  const scrollToFirstList = componentId => {
+    const list = componentId
+      ? document.getElementById(componentId)
+      : document.getElementsByClassName('list-top')[0];
     const shouldScrollToFirstList = !url && list;
 
     if (shouldScrollToFirstList) {
-      window.scrollTo({
-        left: 0,
-        top: window.pageYOffset - SCROLL_OFFSET + list.getBoundingClientRect().top
-      });
+      list.scrollIntoView();
     } else {
       window.scrollTo(0, 0);
     }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
+import classNames from 'classnames';
 import RangeFilter from '@blaze-react/range-filter';
 import { useRouter } from 'next/router';
 import Select from '@blaze-react/select';
@@ -18,7 +19,8 @@ const Range = ({
   updateFilterValues,
   filterValues,
   shouldSearch,
-  elementTitle
+  elementTitle,
+  unit
 }) => {
   const router = useRouter();
   const debounceAmount = shouldSearch ? 1200 : 400;
@@ -38,7 +40,6 @@ const Range = ({
   if (loading || !rangeOption || !rangeValue) return '';
 
   const options = getSelectOptions(getEntitySchema, propsToDisplay);
-  // get range from aggregations so it updates
   const { min, max } = calculateMinMax(dataAggregations[rangeOption], rangeInterval);
   const minValue = rangeValue.minValue < min ? min : rangeValue.minValue;
   const maxValue = rangeValue.maxValue > max ? max : rangeValue.maxValue;
@@ -48,6 +49,11 @@ const Range = ({
     updateFilterValues({ [option]: { ...value, selectedOption: rangeOption } }, shouldSearch);
   }, debounceAmount);
 
+  let displayLabel = '';
+  if (!hasMultipleOptions) {
+    displayLabel = label;
+  }
+
   return (
     <>
       {elementTitle && <div className="heading heading--section">{elementTitle}</div>}
@@ -62,8 +68,11 @@ const Range = ({
             onChange={({ value }) => {
               const updatedOptions = {};
               propsToDisplay.forEach(prop => {
-                const { min: eMin, max: eMax } = filterValues[prop];
-                const initValue = getRangeValue(null, rangeInterval, eMin, eMax);
+                const { min: aggMin, max: aggMax } = calculateMinMax(
+                  dataAggregations[prop],
+                  rangeInterval
+                );
+                const initValue = getRangeValue(null, rangeInterval, aggMin, aggMax);
                 updatedOptions[prop] = { ...initValue, selectedOption: value };
               });
 
@@ -72,16 +81,22 @@ const Range = ({
           />
         </>
       )}
-      <RangeFilter
-        key={`${rangeOption}-${minValue}-${maxValue}`}
-        name={rangeOption}
-        label={hasMultipleOptions ? '' : label}
-        value={valueToUse}
-        id={rangeOption}
-        onChange={({ value }) => {
-          handleChange(rangeOption, value);
-        }}
-      />
+      <div
+        className={classNames('range-filter-wrapper', {
+          'has-unit': unit
+        })}
+        style={unit ? { '--unit': `"${unit}"` } : {}}>
+        <RangeFilter
+          key={`${rangeOption}-${min}-${max}`}
+          name={rangeOption}
+          label={displayLabel}
+          value={valueToUse}
+          id={rangeOption}
+          onChange={({ value }) => {
+            handleChange(rangeOption, value);
+          }}
+        />
+      </div>
     </>
   );
 };
@@ -95,14 +110,16 @@ Range.propTypes = {
   rangeInterval: PropTypes.number,
   label: PropTypes.string,
   elementTitle: PropTypes.string,
-  dataAggregations: PropTypes.object.isRequired
+  dataAggregations: PropTypes.object.isRequired,
+  unit: PropTypes.string
 };
 
 Range.defaultProps = {
   shouldSearch: false,
   rangeInterval: 1,
   label: '',
-  elementTitle: ''
+  elementTitle: '',
+  unit: ''
 };
 
 export default Range;

package/src/components/SearchFilter/constants.js

@@ -17,10 +17,6 @@ const UPDATED_RANGES = 'updated_ranges';
 const MIN_VALUE = 'min-value';
 const MAX_VALUE = 'max-value';
 const TABLET_WIDTH = 768;
-const RESET = 'Reset all filters';
-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 = {
@@ -54,9 +50,5 @@ export {
   MIN_VALUE,
   MAX_VALUE,
   TABLET_WIDTH,
-  RESET,
-  SEARCH,
-  REFINE,
-  MOBILE_REFINEMENT_TITLE,
   MORE_FILTERS_CLASSES
 };

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

@@ -1,6 +1,7 @@
-const buildNewUrl = (url, currentUrl, queryParams, hashBit) => {
+const buildNewUrl = (url, currentUrl, queryParams, newHashBit) => {
   const encodedQuery = encodeURI(queryParams);
-  const baseUrl = url || currentUrl;
+  const [baseUrl, urlHash] = (url || currentUrl).split('#');
+  const hashBit = newHashBit || urlHash || '';
   const newUrl = encodedQuery ? `${baseUrl}?${encodedQuery}` : `${baseUrl}`;
   return hashBit ? `${newUrl}#${hashBit}` : newUrl;
 };

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

@@ -22,7 +22,16 @@ const buildUrlQuery = (filterValues = {}, filters = [], listComponentName = '',
   });
 
   Object.keys(query).forEach(key => {
-    if (queryKeys.indexOf(key) === -1) newQuery.push(`${key}=${query[key]}`);
+    if (queryKeys.indexOf(key) !== -1) return;
+
+    let shouldAdd = true;
+    if (!listComponentName) {
+      shouldAdd = !key.endsWith('[page]');
+    } else {
+      shouldAdd = !key.includes(listComponentName);
+    }
+
+    if (shouldAdd) newQuery.push(`${key}=${query[key]}`);
   });
 
   return newQuery.join('&');

package/src/constants/index.js

@@ -37,6 +37,7 @@ const ID = 'id';
 const LINK = 'link';
 const LOGOUT = 'logout';
 const GRAPH_QL_ERROR = 'GraphQL error: ';
+const PRIORITY_HIGH = 'high';
 const HOVER = 'hover';
 const MOUSE_ENTER = 'mouseenter';
 const MOUSE_LEAVE = 'mouseleave';
@@ -164,8 +165,6 @@ const AZ = [
 
 const AZ_DEFAULT_PROP = 'name';
 
-const SCROLL_OFFSET = process.env.BLAZE_SCROLL_OFFSET || 50;
-
 const BANNER_LOADING = 'loading';
 const BANNER_EMPTY = 'empty';
 const BANNER_LOADED = 'loaded';
@@ -178,6 +177,9 @@ const DATA_SUMMARY_URL_REGEX =
 const DATA_SUMMARY_TEL_REGEX = /^\+{0,1}[0-9\(\)\.\- \/]{7,}$/; // note: very loose phone number match not for validation
 const SIZE = process.env.BLAZE_PB_SEARCH_FILETER_AGG_SIZE || 500;
 
+const TRANSLATION_NAMESPACE = 'page-builder-fe';
+const COMPONENT_ID_PREFIX = 'pb-';
+
 export {
   BANNER_LOADING,
   BANNER_EMPTY,
@@ -259,6 +261,7 @@ export {
   MIN_BANNER_HEIGHT,
   MAX_BANNER_HEIGHT,
   GRAPH_QL_ERROR,
+  PRIORITY_HIGH,
   HOVER,
   MOUSE_ENTER,
   MOUSE_LEAVE,
@@ -278,12 +281,13 @@ export {
   AZ_QUERY_CONST,
   AZ_DEFAULT_PROP,
   AZ,
-  SCROLL_OFFSET,
   ANCHOR_TAG,
   TARGET_BLANK,
   DATA_SUMMARY_EMAIL_REGEX,
   DATA_SUMMARY_URL_REGEX,
   DATA_SUMMARY_TEL_REGEX,
   VIMEO_OEMBED_URL,
-  SIZE
+  SIZE,
+  TRANSLATION_NAMESPACE,
+  COMPONENT_ID_PREFIX
 };

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

@@ -79,7 +79,7 @@ const getTypeBaseProps = (entitySchema, cardOptions, extraPropsHaveCategory) =>
 
   const { interfaces, properties, dynamicProperties, relations } = entitySchema;
 
-  const isContent = !!interfaces.includes('content/content');
+  const isContent = !!interfaces.includes('content/content-base');
   const hasCategory = checkProps(properties) || checkProps(dynamicProperties);
   const hasPreheader = properties[PREHEADER_PROP];
 
@@ -97,7 +97,8 @@ const getTypeBaseProps = (entitySchema, cardOptions, extraPropsHaveCategory) =>
   return { typeBasedProps, shouldAddCategoryProps };
 };
 
-const getContentProps = isContent => (isContent ? ['url', 'sponsored', 'featured'] : []);
+// make sure all props are supported by content/content-base interface
+const getContentProps = isContent => (isContent ? ['url', 'sponsored', 'featured', 'live'] : []);
 
 const getCategoyProps = (shouldAddCategoryProps, hasCategory, hasPreheader) => {
   if (!shouldAddCategoryProps) return [];

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

@@ -6,7 +6,7 @@ const buildQueryFields = (sanitizedEntityFields, entityTypes, isFull) =>
       ${sanitizedEntityFields}
       __typename
       id
-      ${isFull ? 'pageBuilderComponents' : ''}
+     ${isFull ? 'pageBuilderComponents: preparedPageBuilderComponents' : ''}
     }`
     )}
   },

package/src/helpers/get-component-id.js

@@ -0,0 +1,9 @@
+import cssesc from 'cssesc';
+import { COMPONENT_ID_PREFIX } from '../constants';
+
+const getComponentId = componentName =>
+  cssesc(`${COMPONENT_ID_PREFIX}${componentName.replace(/\s+/g, '-')}`, {
+    isIdentifier: true
+  });
+
+export default getComponentId;

package/src/helpers/get-custom-html-properties.js

@@ -0,0 +1,11 @@
+const getCustomHtmlProperties = ({ customHtmlProps = [] }) =>
+  customHtmlProps
+    ? customHtmlProps.reduce((acc, { name, value }) => {
+        if (name) {
+          acc[name] = value !== 'null' ? value : undefined;
+        }
+        return acc;
+      }, {})
+    : {};
+
+export default getCustomHtmlProperties;

package/src/helpers/get-image-ids.js

@@ -4,6 +4,7 @@ const getIdsFromArray = (relationImageData, relationProp, imageId) => {
   if (!relationImageData.length) return [imageId];
   return relationImageData
     .map(image => {
+      if (typeof image !== 'object') return image;
       if (!Object.keys(image).length) return '';
       return image[relationProp];
     })
@@ -27,6 +28,8 @@ const getImageIds = (imageRelation, relationData, imageId) => {
         ? relationImageData[relationProp]
         : [relationImageData[relationProp]];
     }
+
+    if (relationImageData) return [relationImageData];
   }
 
   return imageIdArray;

package/src/helpers/index.js

@@ -61,3 +61,5 @@ export { default as shouldReturn } from './should-return';
 export { default as shouldSkipSingleQuery } from './should-skip-single-query';
 export { default as buildRawQueryStringified } from './build-raw-query-stringified';
 export { default as buildFiltersQuery } from './build-filters-query';
+export { default as getComponentId } from './get-component-id';
+export { default as getCustomHtmlProperties } from './get-custom-html-properties';

package/src/hooks/helpers/RenderComponent.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ErrorBoundary from '@blaze-cms/core-errors-ui';
+import { useMainContext } from '@blaze-cms/nextjs-components';
 import getComponent from './getComponent';
 import getVariant from './getVariant';
 import appendGtmClassName from './append-gtm-classname';
 import { PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL } from './constants';
 import { BannerContextProvider } from '../../BannerContext';
+import { PbWrapper } from '../../system-components';
 
 const RenderComponent = ({
   component,
@@ -17,6 +19,7 @@ const RenderComponent = ({
   siblings,
   ...nestedComponentsProps
 }) => {
+  const { debugOptions: { editorModeEnabled } = {} } = useMainContext();
   const { type, settings, id, name } = component;
   const Component = getComponent(type);
   const isImage = [PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL].includes(
@@ -29,6 +32,7 @@ const RenderComponent = ({
 
   return (
     <ErrorBoundary>
+      {editorModeEnabled && <PbWrapper name={name} />}
       <Component
         key={id}
         type={type}
@@ -47,6 +51,7 @@ const RenderComponent = ({
           childComponents
         )}
       </Component>
+      {editorModeEnabled && <PbWrapper name={name} type="end" />}
     </ErrorBoundary>
   );
 };

package/src/hooks/helpers/StoreImages.js

@@ -1,48 +1,50 @@
 class StoreImages {
-  constructor() {
-    this.images = [];
-    this.id = null;
-    this.toggleModal = () => {};
-    this.setSelectedImage = () => {};
-  }
+  #images = [];
 
-  resetImages() {
-    this.images = [];
-  }
+  #pageBuilderID = null;
 
-  removeDuplicated = (images, key) => {
-    this.images = images
-      .map(item => item[key])
-      .map((item, index, final) => final.indexOf(item) === index && index)
-      .filter(item => images[item])
-      .map(item => images[item]);
+  #handlers = {
+    toggleModal: () => {},
+    onSelect: () => {}
   };
 
-  handleSelectedImage = imageId => {
-    const index = this.images.findIndex(image => image.imageId === imageId);
-    if (index !== -1) {
-      this.setSelectedImage(index);
-    }
-  };
+  get images() {
+    return [...this.#images];
+  }
 
-  setHandlers = ({ toggleModal = this.toggleModal, setSelectedImage = this.setSelectedImage }) => {
-    this.toggleModal = toggleModal;
-    this.setSelectedImage = setSelectedImage;
-  };
+  resetImages() {
+    this.#images = [];
+  }
 
-  addImages = (images, options = {}) => {
-    if (!images.length) return this.images;
+  setHandlers({ toggleModal, setSelectedImage }) {
+    if (typeof toggleModal === 'function') this.#handlers.toggleModal = toggleModal;
+    if (typeof setSelectedImage === 'function') this.#handlers.onSelect = setSelectedImage;
+  }
 
-    const { pageBuilderID } = options;
+  addImages(newImages, { pageBuilderID } = {}, handlers = {}) {
+    if (!Array.isArray(newImages) || newImages.length === 0) {
+      return this.images;
+    }
 
-    if (pageBuilderID !== this.id) {
+    if (pageBuilderID != null && pageBuilderID !== this.#pageBuilderID) {
       this.resetImages();
-      this.id = pageBuilderID;
+      this.#pageBuilderID = pageBuilderID;
     }
 
-    this.removeDuplicated(this.images.concat(images), 'imageId');
+    const merged = this.#images.concat(newImages);
+    this.#images = Array.from(new Map(merged.map(img => [img.imageId, img])).values());
 
+    this.setHandlers(handlers);
     return this.images;
+  }
+
+  toggleModal = () => {
+    this.#handlers.toggleModal();
+  };
+
+  handleSelectedImage = imageId => {
+    const idx = this.#images.findIndex(img => img.imageId === imageId);
+    if (idx !== -1) this.#handlers.onSelect(idx);
   };
 }
 

package/src/hooks/index.js

@@ -9,3 +9,4 @@ export { default as useBannerInsertion } from './use-banner-insertion';
 export { default as useAppSyncEventHook } from './use-app-sync-event-hook';
 export { default as usePortal } from './use-portal';
 export { default as useFilterAggregationValues } from './use-filter-aggregation-values';
+export { default as useAppEventHook } from './use-app-event-hook';

package/src/hooks/use-app-event-hook.js

@@ -0,0 +1,34 @@
+import { AppContext } from '@blaze-cms/nextjs-components';
+import { useContext, useEffect, useState, useMemo } from 'react';
+
+const useAppEventHook = ({ eventName, data, props }) => {
+  const { blazeApp } = useContext(AppContext);
+  const hasListener =
+    blazeApp && blazeApp.events && blazeApp.events.hasListeners(`plugin:page-builder:${eventName}`);
+  const [loading, setLoading] = useState(hasListener);
+  const [updatedData, setUpdatedData] = useState(null);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const stableData = useMemo(() => data, [JSON.stringify(data)]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const stableProps = useMemo(() => props, [JSON.stringify(props)]);
+
+  useEffect(() => {
+    async function emitEvent() {
+      // setLoading(true);
+      await blazeApp.events.emitAsync(`plugin:page-builder:${eventName}`, {
+        data: updatedData,
+        props: stableProps
+      });
+      setLoading(false);
+    }
+    if (hasListener && updatedData) emitEvent();
+  }, [updatedData, eventName, hasListener, blazeApp.events, stableProps]);
+
+  useEffect(() => {
+    setUpdatedData(stableData);
+  }, [stableData]);
+
+  return { data: updatedData || stableData, loading };
+};
+export default useAppEventHook;

package/src/hooks/use-app-sync-event-hook.js

@@ -1,18 +1,32 @@
-import { useContext } from 'react';
+import { useContext, useCallback } from 'react';
 import { AppContext } from '@blaze-cms/nextjs-components';
 
 const EVENET_PREFIX = 'plugin:page-builder:';
 const EVENET_SUFIX = ':sync';
 
-const useAppSyncEventHook = ({ eventName, data, props }) => {
+const useAppSyncEventHook = ({ eventName, data, props, returnFunction }) => {
   const { blazeApp } = useContext(AppContext);
+
+  const runHook = useCallback(
+    newData => {
+      const eventData = newData || data;
+      blazeApp.events.emit(`${EVENET_PREFIX}${eventName}${EVENET_SUFIX}`, {
+        data: eventData,
+        props
+      });
+
+      return eventData;
+    },
+    [blazeApp, eventName, data, props]
+  );
+
   if (!blazeApp) return { data };
 
-  blazeApp.events.emit(`${EVENET_PREFIX}${eventName}${EVENET_SUFIX}`, {
-    data,
-    props
-  });
+  if (returnFunction) {
+    return { data, runHook };
+  }
 
+  runHook();
   return { data };
 };
 

package/src/hooks/use-get-image-id-from-relation.js

@@ -10,6 +10,7 @@ function useGetImageIdFromRelation(
   hasImgSrc
 ) {
   const skip =
+    !actions ||
     !id ||
     hasImgSrc ||
     typeof id !== 'string' ||
@@ -18,17 +19,24 @@ function useGetImageIdFromRelation(
 
   const [imageRelationData = ''] = imageRelation;
   const [relationName = '', relationProp = ''] = imageRelationData.split('.');
-  const { getPublished, get } = actions;
+  const { getPublished, get } = actions || {};
   const getAction = isPreview ? get : getPublished || get;
 
-  const props = imageRelationData ? `${relationName} { ${relationProp} }` : 'id';
+  let props;
+  if (imageRelationData) {
+    if (relationProp) {
+      props = imageRelationData ? `${relationName} { ${relationProp} }` : 'id';
+    } else {
+      props = relationName;
+    }
+  }
   const {
     data = {},
     loading,
     error
   } = useQuery(generateSingleItemQuery(getAction, props), {
     variables: { id },
-    skip
+    skip: skip || !imageRelationData
   });
   return { data, loading, error };
 }

package/src/index.js

@@ -6,13 +6,15 @@ export { default as components } from './components';
 export { default as variants } from './variants';
 export { default as LoadingComponent } from './components/Loading';
 export { default as Modal } from './components/ModalAdapter';
+export { default as ErrorMessage } from './components/ErrorMessage';
 export {
   getAction,
   generateSingleItemQuery,
   generateMultiItemQuery,
   getEntitySchema,
   getSingleEntitySchema,
-  getUser
+  getUser,
+  getCurrentUser
 } from './application/query';
 export {
   getInheritedFilters,
@@ -23,9 +25,11 @@ export {
   buildFiltersQuery,
   getUnpublishedEntityName,
   renderChildren,
-  hasChildren
+  hasChildren,
+  getComponentId
 } from './helpers';
 export { withTitle } from './HOC';
 export { useGetEntitySchema, useGetEntitySchemasAsObj, useGetSingleEntitySchema } from './hooks';
 export { summaryComponents } from './components/DataSummary/DataSummaryTypes';
 export { buildPropsToDisplayWithContent } from './components/DataSummary/helpers';
+export { default as translations } from './translations';