@webbio/strapi-plugin-page-builder 0.12.2-platform → 0.12.4-platform

package/admin/src/components/PlatformFilteredSelectField/Single/index.tsx

@@ -1,197 +1,197 @@
-import React, { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
-import debounce from 'lodash/debounce';
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-import { useSelector } from 'react-redux';
-import { Field } from '@strapi/design-system';
-import { useFetchClient } from '@strapi/helper-plugin';
-import { Link } from '@strapi/icons';
-
-import { Combobox, IReactSelectValue } from '../../Combobox';
-import { OptionProps, SingleValue, components } from 'react-select';
-import { useGetLocaleFromUrl } from '../../../utils/hooks/useGetLocaleFromUrl';
-import { getSearchFilteredEntities } from '../../../api/search-filtered-entity';
-import S from './../styles';
-import getTrad from '../../../utils/getTrad';
-import RelationHelper, { IPlatformFilteredSelectFieldProps } from '../utils/relation-helper';
-import { Platform } from '../../../api/platform';
-
-export interface ISinglePlatformFilteredSelectFieldProps extends IPlatformFilteredSelectFieldProps {
-	selectedPlatform?: Platform;
-	hiddenId?: number[];
-}
-
-interface CustomReactSelectValue extends Omit<IReactSelectValue, 'initialSelected'> {
-	href?: string;
-	publicationState?: string | false;
-	publishedAt?: string;
-}
-
-const SEARCH_DEBOUNCE_MS = 150;
-const PAGE = 1;
-
-const SinglePlatformFilteredSelectField = ({
-	attribute,
-	description,
-	labelAction,
-	error,
-	intlLabel,
-	name,
-	selectedPlatform,
-	hiddenId
-}: ISinglePlatformFilteredSelectFieldProps) => {
-	const fetchClient = useFetchClient();
-	const { onChange, initialData, modifiedData, isCreatingEntry, layout, allLayoutData } =
-		useCMEditViewDataManager() as any;
-
-	const { locales } = useSelector((state: any) => state.i18n_locales);
-	const urlLocale = useGetLocaleFromUrl();
-	const defaultLocale = locales.find((locale: any) => locale.isDefault);
-	const selectedLocale = initialData?.locale ?? urlLocale ?? defaultLocale.code;
-
-	const [selected, setSelected] = useState<SingleValue<CustomReactSelectValue | null>>();
-
-	const { formatMessage } = useIntl();
-
-	const { targetAttributes, targetFieldValue, targetField } = RelationHelper.getTargetAttributes(
-		name,
-		attribute,
-		modifiedData,
-		layout,
-		allLayoutData
-	);
-
-	const label = intlLabel?.id
-		? formatMessage({ id: intlLabel.id, defaultMessage: intlLabel?.defaultMessage }, { ...intlLabel.values })
-		: name;
-
-	const hint = description?.id
-		? formatMessage({ id: description.id, defaultMessage: description.defaultMessage }, { ...description.values })
-		: '';
-
-	useEffect(() => {
-		const initialSelect = getInitialSelectItem(targetFieldValue?.[0]);
-
-		setSelected(initialSelect);
-	}, [targetFieldValue]);
-
-	useEffect(() => {
-		if (isCreatingEntry) {
-			setSelected(null);
-		}
-	}, []);
-
-	const setFormValue = (name: string, value?: string | Record<string, any>[]) => {
-		onChange({
-			target: {
-				name,
-				value
-			},
-			shouldSetInitialValue: true
-		});
-	};
-
-	const handleChange = (value?: SingleValue<CustomReactSelectValue>) => {
-		if (value) {
-			const newFormValue = {
-				...value,
-				id: value.value,
-				title: value.label,
-				mainField: value.label,
-				label: value.label,
-				value: value.value
-			};
-			setFormValue(targetField, [newFormValue]);
-		} else {
-			setFormValue(targetField, []);
-		}
-	};
-
-	const getItems = async (inputValue?: string, platformTitle?: string): Promise<CustomReactSelectValue[]> => {
-		const pages = await getSearchFilteredEntities({
-			fetchClient,
-			page: PAGE,
-			uid: targetAttributes?.target || '',
-			locale: selectedLocale,
-			searchQuery: inputValue,
-			platformTitle: attribute?.pluginOptions?.filteredSelect?.disablePlatformFilter ? '' : platformTitle,
-			customFilters: attribute?.pluginOptions?.filteredSelect?.customFilters,
-			notIds: hiddenId
-		});
-
-		return pages?.results.map((x) => ({
-			value: String(x.id),
-			label: x.title,
-			href: x?.href,
-			publicationState: x.publicationState,
-			publishedAt: x.publishedAt
-		}));
-	};
-
-	const debouncedFetch = debounce((searchTerm, callback, selectedPlatformTitle?: string) => {
-		promiseOptions(searchTerm, selectedPlatformTitle).then((result) => {
-			return callback(result || []);
-		});
-	}, SEARCH_DEBOUNCE_MS);
-
-	const promiseOptions = (inputValue: string, selectedPlatformTitle?: string): Promise<CustomReactSelectValue[]> =>
-		new Promise<CustomReactSelectValue[]>((resolve) => {
-			resolve(getItems(inputValue, selectedPlatformTitle));
-		});
-
-	return (
-		<Field name={name} id={name} error={error} hint={hint}>
-			{targetAttributes?.type === 'relation' && (
-				<S.FieldWrapper>
-					<Combobox
-						key={`rerenderOnPlatformChange-${selectedPlatform?.title}`}
-						id="pagesSearch"
-						label={label}
-						loadOptions={(i, c) => debouncedFetch(i, c, selectedPlatform?.title)}
-						cacheOptions
-						customOption={CustomOption}
-						onChange={handleChange}
-						value={selected}
-						defaultOptions
-						hideSelectedOptions
-						labelAction={labelAction}
-						isDisabled={!selectedPlatform}
-						afterInput={
-							<S.LinkToPage
-								title={formatMessage({ id: getTrad('platformFilteredSelect.linkToEntity.label') })}
-								to={selected?.href}
-								disabled={!selected?.href}
-							>
-								<Link />
-							</S.LinkToPage>
-						}
-					/>
-				</S.FieldWrapper>
-			)}
-		</Field>
-	);
-};
-
-const CustomOption = (props: OptionProps<CustomReactSelectValue, false>) => {
-	return (
-		<components.Option {...props}>
-			<S.CustomOption>
-				{props.data?.publicationState && <S.CustomOptionStatus publicationState={props.data?.publicationState} />}
-				{props.children}
-			</S.CustomOption>
-		</components.Option>
-	);
-};
-
-const getInitialSelectItem = (initialValue?: Record<string, any>): SingleValue<CustomReactSelectValue | null> =>
-	initialValue?.id
-		? {
-				value: String(initialValue?.id),
-				label: initialValue?.title ?? '',
-				href: initialValue?.href,
-				publicationState: initialValue.publicationState,
-				publishedAt: initialValue.publishedAt
-			}
-		: null;
-
-export default SinglePlatformFilteredSelectField;
+import React, { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import debounce from 'lodash/debounce';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
+import { Field } from '@strapi/design-system';
+import { useFetchClient } from '@strapi/helper-plugin';
+import { Link } from '@strapi/icons';
+
+import { Combobox, IReactSelectValue } from '../../Combobox';
+import { OptionProps, SingleValue, components } from 'react-select';
+import { useGetLocaleFromUrl } from '../../../utils/hooks/useGetLocaleFromUrl';
+import { getSearchFilteredEntities } from '../../../api/search-filtered-entity';
+import S from './../styles';
+import getTrad from '../../../utils/getTrad';
+import RelationHelper, { IPlatformFilteredSelectFieldProps } from '../utils/relation-helper';
+import { Platform } from '../../../api/platform';
+
+export interface ISinglePlatformFilteredSelectFieldProps extends IPlatformFilteredSelectFieldProps {
+	selectedPlatform?: Platform;
+	hiddenId?: number[];
+}
+
+interface CustomReactSelectValue extends Omit<IReactSelectValue, 'initialSelected'> {
+	href?: string;
+	publicationState?: string | false;
+	publishedAt?: string;
+}
+
+const SEARCH_DEBOUNCE_MS = 150;
+const PAGE = 1;
+
+const SinglePlatformFilteredSelectField = ({
+	attribute,
+	description,
+	labelAction,
+	error,
+	intlLabel,
+	name,
+	selectedPlatform,
+	hiddenId
+}: ISinglePlatformFilteredSelectFieldProps) => {
+	const fetchClient = useFetchClient();
+	const { onChange, initialData, modifiedData, isCreatingEntry, layout, allLayoutData } =
+		useCMEditViewDataManager() as any;
+
+	const { locales } = useSelector((state: any) => state.i18n_locales);
+	const urlLocale = useGetLocaleFromUrl();
+	const defaultLocale = locales.find((locale: any) => locale.isDefault);
+	const selectedLocale = initialData?.locale ?? urlLocale ?? defaultLocale.code;
+
+	const [selected, setSelected] = useState<SingleValue<CustomReactSelectValue | null>>();
+
+	const { formatMessage } = useIntl();
+
+	const { targetAttributes, targetFieldValue, targetField } = RelationHelper.getTargetAttributes(
+		name,
+		attribute,
+		modifiedData,
+		layout,
+		allLayoutData
+	);
+
+	const label = intlLabel?.id
+		? formatMessage({ id: intlLabel.id, defaultMessage: intlLabel?.defaultMessage }, { ...intlLabel.values })
+		: name;
+
+	const hint = description?.id
+		? formatMessage({ id: description.id, defaultMessage: description.defaultMessage }, { ...description.values })
+		: '';
+
+	useEffect(() => {
+		const initialSelect = getInitialSelectItem(targetFieldValue?.[0]);
+
+		setSelected(initialSelect);
+	}, [targetFieldValue]);
+
+	useEffect(() => {
+		if (isCreatingEntry) {
+			setSelected(null);
+		}
+	}, []);
+
+	const setFormValue = (name: string, value?: string | Record<string, any>[]) => {
+		onChange({
+			target: {
+				name,
+				value
+			},
+			shouldSetInitialValue: true
+		});
+	};
+
+	const handleChange = (value?: SingleValue<CustomReactSelectValue>) => {
+		if (value) {
+			const newFormValue = {
+				...value,
+				id: value.value,
+				title: value.label,
+				mainField: value.label,
+				label: value.label,
+				value: value.value
+			};
+			setFormValue(targetField, [newFormValue]);
+		} else {
+			setFormValue(targetField, []);
+		}
+	};
+
+	const getItems = async (inputValue?: string, platformTitle?: string): Promise<CustomReactSelectValue[]> => {
+		const pages = await getSearchFilteredEntities({
+			fetchClient,
+			page: PAGE,
+			uid: targetAttributes?.target || '',
+			locale: selectedLocale,
+			searchQuery: inputValue,
+			platformTitle: attribute?.pluginOptions?.filteredSelect?.disablePlatformFilter ? '' : platformTitle,
+			customFilters: attribute?.pluginOptions?.filteredSelect?.customFilters,
+			notIds: hiddenId
+		});
+
+		return pages?.results.map((x) => ({
+			value: String(x.id),
+			label: x.title,
+			href: x?.href,
+			publicationState: x.publicationState,
+			publishedAt: x.publishedAt
+		}));
+	};
+
+	const debouncedFetch = debounce((searchTerm, callback, selectedPlatformTitle?: string) => {
+		promiseOptions(searchTerm, selectedPlatformTitle).then((result) => {
+			return callback(result || []);
+		});
+	}, SEARCH_DEBOUNCE_MS);
+
+	const promiseOptions = (inputValue: string, selectedPlatformTitle?: string): Promise<CustomReactSelectValue[]> =>
+		new Promise<CustomReactSelectValue[]>((resolve) => {
+			resolve(getItems(inputValue, selectedPlatformTitle));
+		});
+
+	return (
+		<Field name={name} id={name} error={error} hint={hint}>
+			{targetAttributes?.type === 'relation' && (
+				<S.FieldWrapper>
+					<Combobox
+						key={`rerenderOnPlatformChange-${selectedPlatform?.title}`}
+						id="pagesSearch"
+						label={label}
+						loadOptions={(i, c) => debouncedFetch(i, c, selectedPlatform?.title)}
+						cacheOptions
+						customOption={CustomOption}
+						onChange={handleChange}
+						value={selected}
+						defaultOptions
+						hideSelectedOptions
+						labelAction={labelAction}
+						isDisabled={!selectedPlatform}
+						afterInput={
+							<S.LinkToPage
+								title={formatMessage({ id: getTrad('platformFilteredSelect.linkToEntity.label') })}
+								to={selected?.href}
+								disabled={!selected?.href}
+							>
+								<Link />
+							</S.LinkToPage>
+						}
+					/>
+				</S.FieldWrapper>
+			)}
+		</Field>
+	);
+};
+
+const CustomOption = (props: OptionProps<CustomReactSelectValue, false>) => {
+	return (
+		<components.Option {...props}>
+			<S.CustomOption>
+				{props.data?.publicationState && <S.CustomOptionStatus publicationState={props.data?.publicationState} />}
+				{props.children}
+			</S.CustomOption>
+		</components.Option>
+	);
+};
+
+const getInitialSelectItem = (initialValue?: Record<string, any>): SingleValue<CustomReactSelectValue | null> =>
+	initialValue?.id
+		? {
+				value: String(initialValue?.id),
+				label: initialValue?.title ?? '',
+				href: initialValue?.href,
+				publicationState: initialValue.publicationState,
+				publishedAt: initialValue.publishedAt
+			}
+		: null;
+
+export default SinglePlatformFilteredSelectField;

package/admin/src/components/PlatformFilteredSelectField/hooks/useRelationLoad.tsx

@@ -1,128 +1,128 @@
-import get from 'lodash/get';
-import React from 'react';
-import { useRelation } from '../../StrapiCore/admin/admin/src/content-manager/components/Relations/useRelation';
-import { getInitialDataPathUsingTempKeys } from '../../StrapiCore/admin/admin/src/content-manager/utils/paths';
-import RelationHelper, { IPlatformFilteredSelectFieldProps } from '../utils/relation-helper';
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-import { useRouteMatch } from 'react-router-dom';
-
-const RELATIONS_TO_DISPLAY = 5;
-const SEARCH_RESULTS_TO_DISPLAY = 10;
-
-interface IRelationLoadProps extends IPlatformFilteredSelectFieldProps {}
-
-// This is largely a copy of https://github.com/strapi/strapi/blob/4e6961c7b8127f0f3bb0ad1fc430351ae9c4b8fa/packages/core/admin/admin/src/content-manager/components/Relations/RelationInputDataManager.tsx
-
-const useRelationLoad = ({ name, attribute }: IRelationLoadProps) => {
-	const fieldName = name || '';
-	const { modifiedData, initialData, slug, layout, allLayoutData, isCreatingEntry, relationLoad } =
-		useCMEditViewDataManager() as any;
-	const { params } =
-		useRouteMatch<{ origin?: string }>('/content-manager/collectionType/:collectionType/create/clone/:origin') ?? {};
-	const { origin } = params ?? {};
-	const isCloningEntry = Boolean(origin);
-	const entityId = origin || modifiedData.id;
-
-	const { componentUid, componentId, relationMainFieldName, targetAttributes, targetField, targetFieldName } =
-		RelationHelper.getTargetAttributes(fieldName, attribute, modifiedData, layout, allLayoutData);
-
-	const nameSplit = targetFieldName.split('.');
-	const isComponentRelation = Boolean(componentUid);
-	const initialDataPath = getInitialDataPathUsingTempKeys(initialData, modifiedData)(targetField);
-
-	const currentLastPage = Math.ceil((get(initialData, targetField, []) || []).length / RELATIONS_TO_DISPLAY);
-
-	// /content-manager/relations/[model]/[id]/[field-name]
-	const relationFetchEndpoint = React.useMemo(() => {
-		if (isCreatingEntry && !origin) {
-			return null;
-		}
-
-		if (componentUid) {
-			// repeatable components and dz are dynamically created
-			// if no componentId exists in modifiedData it means that the user just created it
-			// there then are no relations to request
-			return componentId ? `/content-manager/relations/${componentUid}/${componentId}/${nameSplit.at(-1)}` : null;
-		}
-
-		return `/content-manager/relations/${slug}/${entityId}/${targetField.split('.').at(-1)}`;
-	}, [isCreatingEntry, origin, componentUid, slug, entityId, targetField, componentId, nameSplit]);
-
-	// /content-manager/relations/[model]/[field-name]
-	const relationSearchEndpoint = React.useMemo(() => {
-		if (componentUid) {
-			return `/content-manager/relations/${componentUid}/${targetField.split('.').at(-1)}`;
-		}
-
-		return `/content-manager/relations/${slug}/${targetField.split('.').at(-1)}`;
-	}, [componentUid, slug, targetField]);
-
-	const { relations, search, searchFor } = useRelation([slug, initialDataPath.join('.'), modifiedData.id], {
-		relation: {
-			enabled: !!relationFetchEndpoint,
-			endpoint: relationFetchEndpoint!,
-			pageGoal: currentLastPage,
-			pageParams: {
-				pageSize: RELATIONS_TO_DISPLAY
-			},
-			onLoad(value) {
-				relationLoad?.({
-					target: {
-						initialDataPath: ['initialData', ...initialDataPath],
-						modifiedDataPath: ['modifiedData', ...nameSplit],
-						value
-					}
-				});
-			},
-			normalizeArguments: {
-				// @ts-expect-error
-				mainFieldName: relationMainFieldName,
-				shouldAddLink: true,
-				// @ts-expect-error
-				targetModel: targetAttributes?.targetModel
-			}
-		},
-		search: {
-			endpoint: relationSearchEndpoint,
-			pageParams: {
-				// eslint-disable-next-line no-nested-ternary
-				entityId: isCreatingEntry || isCloningEntry ? undefined : isComponentRelation ? componentId : entityId,
-				pageSize: SEARCH_RESULTS_TO_DISPLAY
-			}
-		}
-	});
-
-	/**
-	 * How to calculate the total number of relations even if you don't
-	 * have them all loaded in the browser.
-	 *
-	 * 1. The `infiniteQuery` gives you the total number of relations in the pagination result.
-	 * 2. You can diff the length of the browserState vs the fetchedServerState to determine if you've
-	 * either added or removed relations.
-	 * 3. Add them together, if you've removed relations you'll get a negative number and it'll
-	 * actually subtract from the total number on the server (regardless of how many you fetched).
-	 */
-	const relationsFromModifiedData = get(modifiedData, targetField, []);
-	const browserRelationsCount = (relationsFromModifiedData || [])?.length;
-	const serverRelationsCount = (get(initialData, initialDataPath) ?? []).length;
-	const realServerRelationsCount = relations.data?.pages[0]?.pagination?.total ?? 0;
-	/**
-	 * _IF_ theres no relations data and the browserCount is the same as serverCount you can therefore assume
-	 * that the browser count is correct because we've just _made_ this entry and the in-component hook is now fetching.
-	 */
-	const totalRelations =
-		!relations.data && browserRelationsCount === serverRelationsCount
-			? browserRelationsCount
-			: browserRelationsCount - serverRelationsCount + realServerRelationsCount;
-
-	return {
-		relations,
-		search,
-		searchFor,
-		isCloningEntry,
-		relationsFromModifiedData,
-		totalRelations: totalRelations || 0
-	};
-};
-
-export { useRelationLoad };
+import get from 'lodash/get';
+import React from 'react';
+import { useRelation } from '../../StrapiCore/admin/admin/src/content-manager/components/Relations/useRelation';
+import { getInitialDataPathUsingTempKeys } from '../../StrapiCore/admin/admin/src/content-manager/utils/paths';
+import RelationHelper, { IPlatformFilteredSelectFieldProps } from '../utils/relation-helper';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { useRouteMatch } from 'react-router-dom';
+
+const RELATIONS_TO_DISPLAY = 5;
+const SEARCH_RESULTS_TO_DISPLAY = 10;
+
+interface IRelationLoadProps extends IPlatformFilteredSelectFieldProps {}
+
+// This is largely a copy of https://github.com/strapi/strapi/blob/4e6961c7b8127f0f3bb0ad1fc430351ae9c4b8fa/packages/core/admin/admin/src/content-manager/components/Relations/RelationInputDataManager.tsx
+
+const useRelationLoad = ({ name, attribute }: IRelationLoadProps) => {
+	const fieldName = name || '';
+	const { modifiedData, initialData, slug, layout, allLayoutData, isCreatingEntry, relationLoad } =
+		useCMEditViewDataManager() as any;
+	const { params } =
+		useRouteMatch<{ origin?: string }>('/content-manager/collectionType/:collectionType/create/clone/:origin') ?? {};
+	const { origin } = params ?? {};
+	const isCloningEntry = Boolean(origin);
+	const entityId = origin || modifiedData.id;
+
+	const { componentUid, componentId, relationMainFieldName, targetAttributes, targetField, targetFieldName } =
+		RelationHelper.getTargetAttributes(fieldName, attribute, modifiedData, layout, allLayoutData);
+
+	const nameSplit = targetFieldName.split('.');
+	const isComponentRelation = Boolean(componentUid);
+	const initialDataPath = getInitialDataPathUsingTempKeys(initialData, modifiedData)(targetField);
+
+	const currentLastPage = Math.ceil((get(initialData, targetField, []) || []).length / RELATIONS_TO_DISPLAY);
+
+	// /content-manager/relations/[model]/[id]/[field-name]
+	const relationFetchEndpoint = React.useMemo(() => {
+		if (isCreatingEntry && !origin) {
+			return null;
+		}
+
+		if (componentUid) {
+			// repeatable components and dz are dynamically created
+			// if no componentId exists in modifiedData it means that the user just created it
+			// there then are no relations to request
+			return componentId ? `/content-manager/relations/${componentUid}/${componentId}/${nameSplit.at(-1)}` : null;
+		}
+
+		return `/content-manager/relations/${slug}/${entityId}/${targetField.split('.').at(-1)}`;
+	}, [isCreatingEntry, origin, componentUid, slug, entityId, targetField, componentId, nameSplit]);
+
+	// /content-manager/relations/[model]/[field-name]
+	const relationSearchEndpoint = React.useMemo(() => {
+		if (componentUid) {
+			return `/content-manager/relations/${componentUid}/${targetField.split('.').at(-1)}`;
+		}
+
+		return `/content-manager/relations/${slug}/${targetField.split('.').at(-1)}`;
+	}, [componentUid, slug, targetField]);
+
+	const { relations, search, searchFor } = useRelation([slug, initialDataPath.join('.'), modifiedData.id], {
+		relation: {
+			enabled: !!relationFetchEndpoint,
+			endpoint: relationFetchEndpoint!,
+			pageGoal: currentLastPage,
+			pageParams: {
+				pageSize: RELATIONS_TO_DISPLAY
+			},
+			onLoad(value) {
+				relationLoad?.({
+					target: {
+						initialDataPath: ['initialData', ...initialDataPath],
+						modifiedDataPath: ['modifiedData', ...nameSplit],
+						value
+					}
+				});
+			},
+			normalizeArguments: {
+				// @ts-expect-error
+				mainFieldName: relationMainFieldName,
+				shouldAddLink: true,
+				// @ts-expect-error
+				targetModel: targetAttributes?.targetModel
+			}
+		},
+		search: {
+			endpoint: relationSearchEndpoint,
+			pageParams: {
+				// eslint-disable-next-line no-nested-ternary
+				entityId: isCreatingEntry || isCloningEntry ? undefined : isComponentRelation ? componentId : entityId,
+				pageSize: SEARCH_RESULTS_TO_DISPLAY
+			}
+		}
+	});
+
+	/**
+	 * How to calculate the total number of relations even if you don't
+	 * have them all loaded in the browser.
+	 *
+	 * 1. The `infiniteQuery` gives you the total number of relations in the pagination result.
+	 * 2. You can diff the length of the browserState vs the fetchedServerState to determine if you've
+	 * either added or removed relations.
+	 * 3. Add them together, if you've removed relations you'll get a negative number and it'll
+	 * actually subtract from the total number on the server (regardless of how many you fetched).
+	 */
+	const relationsFromModifiedData = get(modifiedData, targetField, []);
+	const browserRelationsCount = (relationsFromModifiedData || [])?.length;
+	const serverRelationsCount = (get(initialData, initialDataPath) ?? []).length;
+	const realServerRelationsCount = relations.data?.pages[0]?.pagination?.total ?? 0;
+	/**
+	 * _IF_ theres no relations data and the browserCount is the same as serverCount you can therefore assume
+	 * that the browser count is correct because we've just _made_ this entry and the in-component hook is now fetching.
+	 */
+	const totalRelations =
+		!relations.data && browserRelationsCount === serverRelationsCount
+			? browserRelationsCount
+			: browserRelationsCount - serverRelationsCount + realServerRelationsCount;
+
+	return {
+		relations,
+		search,
+		searchFor,
+		isCloningEntry,
+		relationsFromModifiedData,
+		totalRelations: totalRelations || 0
+	};
+};
+
+export { useRelationLoad };