@webbio/strapi-plugin-page-builder 0.9.0-platform → 0.9.2-platform

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

@@ -107,6 +107,7 @@ const MultiPlatformFilteredSelectField = ({
 			publishedAt: x.publishedAt
 		}));
 
+		// @ts-expect-error data is fine
 		setSearchResults({ data: mapped || [], isLoading: false });
 	};
 

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

@@ -1,7 +1,7 @@
 import get from 'lodash/get';
 import React from 'react';
-import { useRelation } from '@strapi/admin/admin/src/content-manager/hooks/useRelation/index';
-import { getInitialDataPathUsingTempKeys } from '@strapi/admin/admin/src/content-manager/utils/paths';
+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';
@@ -73,8 +73,10 @@ const useRelationLoad = ({ name, attribute }: IPlatformFilteredSelectFieldProps)
 				});
 			},
 			normalizeArguments: {
+				// @ts-expect-error
 				mainFieldName: relationMainFieldName,
 				shouldAddLink: true,
+				// @ts-expect-error
 				targetModel: targetAttributes?.targetModel
 			}
 		},

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/components/Relations/RelationInput.tsx

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 import * as React from 'react';
 
 import {
@@ -549,6 +547,7 @@ const LinkEllipsis = styled(Link)`
 
 interface RelationItemProps
 	extends Pick<UseDragAndDropOptions, 'onCancel' | 'onDropItem' | 'onGrabItem'>,
+		// @ts-ignore
 		Omit<FlexProps, 'id' | 'style'>,
 		Pick<ListChildComponentProps, 'style' | 'index'> {
 	ariaDescribedBy: string;

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/components/Relations/useRelation.ts

@@ -0,0 +1,170 @@
+// @ts-nocheck build compiler thinks differently than runtime compiler
+import { useEffect, useState } from 'react';
+
+import { useCallbackRef, useFetchClient } from '@strapi/helper-plugin';
+import { useInfiniteQuery } from 'react-query';
+
+import { NormalizeRelationArgs, NormalizedRelation, normalizeRelations } from './utils/normalizeRelations';
+
+import type { Contracts } from '../../../../../../content-manager/shared';
+
+interface UseRelationArgs {
+	relation: {
+		enabled: boolean;
+		endpoint: string;
+		normalizeArguments: NormalizeRelationArgs;
+		onLoad: (data: NormalizedRelation[]) => void;
+		pageParams?: Record<string, any>;
+		pageGoal?: number;
+	};
+	search: {
+		endpoint: string;
+		pageParams?: Record<string, any>;
+	};
+}
+
+const useRelation = (cacheKey: any[] = [], { relation, search }: UseRelationArgs) => {
+	const [searchParams, setSearchParams] = useState({});
+	const [currentPage, setCurrentPage] = useState(0);
+	const { get } = useFetchClient();
+
+	const { onLoad: onLoadRelations, normalizeArguments } = relation;
+
+	const relationsRes = useInfiniteQuery(
+		['relation', ...cacheKey],
+		async ({ pageParam = 1 }) => {
+			try {
+				const { data } = await get<Contracts.Relations.FindExisting.Response>(relation?.endpoint, {
+					params: {
+						...(relation.pageParams ?? {}),
+						page: pageParam
+					}
+				});
+
+				setCurrentPage(pageParam);
+
+				return data;
+			} catch (err) {
+				return null;
+			}
+		},
+		{
+			cacheTime: 0,
+			enabled: relation.enabled,
+			getNextPageParam(lastPage) {
+				const isXToOneRelation = lastPage && !('pagination' in lastPage);
+
+				if (
+					!lastPage || // the API may send an empty 204 response
+					isXToOneRelation || // xToOne relations do not have a pagination
+					lastPage?.pagination.page >= lastPage?.pagination.pageCount
+				) {
+					return undefined;
+				}
+
+				// eslint-disable-next-line consistent-return
+				return lastPage.pagination.page + 1;
+			},
+			select: (data) => ({
+				...data,
+				pages: data.pages.map((page) => {
+					if (!page) {
+						return page;
+					}
+
+					let normalizedResults: Contracts.Relations.RelationResult[] = [];
+
+					// xToOne relations return an object, which we normalize so that relations
+					// always have the same shape
+					if ('data' in page && page.data) {
+						normalizedResults = [page.data];
+					} else if ('results' in page && page.results) {
+						normalizedResults = [...page.results].reverse();
+					}
+
+					return {
+						pagination: 'pagination' in page ? page.pagination : undefined,
+						results: normalizedResults
+					};
+				})
+			})
+		}
+	);
+
+	const { pageGoal } = relation;
+
+	const { status, data, fetchNextPage, hasNextPage } = relationsRes;
+
+	useEffect(() => {
+		/**
+		 * This ensures the infiniteQuery hook fetching has caught-up with the modifiedData
+		 * state i.e. in circumstances where you add 10 relations, the browserState knows this,
+		 * but the hook would think it could fetch more, when in reality, it can't.
+		 */
+		if (pageGoal && pageGoal > currentPage && hasNextPage && status === 'success') {
+			fetchNextPage({
+				pageParam: currentPage + 1
+			});
+		}
+	}, [pageGoal, currentPage, fetchNextPage, hasNextPage, status]);
+
+	const onLoadRelationsCallback = useCallbackRef(onLoadRelations);
+
+	useEffect(() => {
+		if (status === 'success' && data && data.pages?.at(-1)?.results && onLoadRelationsCallback) {
+			// everytime we fetch, we normalize prior to adding to redux
+			const normalizedResults = normalizeRelations(data.pages.at(-1)?.results ?? [], normalizeArguments);
+
+			// this is loadRelation from EditViewDataManagerProvider
+			onLoadRelationsCallback(normalizedResults);
+		}
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [status, onLoadRelationsCallback, data]);
+
+	const searchRes = useInfiniteQuery(
+		['relation', ...cacheKey, 'search', JSON.stringify(searchParams)],
+		async ({ pageParam = 1 }) => {
+			try {
+				const { data } = await get<Contracts.Relations.FindAvailable.Response>(search.endpoint, {
+					params: {
+						...(search.pageParams ?? {}),
+						...searchParams,
+						page: pageParam
+					}
+				});
+
+				return data;
+			} catch (err) {
+				return null;
+			}
+		},
+		{
+			enabled: Object.keys(searchParams).length > 0,
+			getNextPageParam(lastPage) {
+				if (
+					!lastPage?.pagination ||
+					(lastPage.pagination && lastPage.pagination.page >= lastPage.pagination.pageCount)
+				) {
+					return undefined;
+				}
+
+				// eslint-disable-next-line consistent-return
+				return lastPage.pagination.page + 1;
+			}
+		}
+	);
+
+	const searchFor = (term: string, options: object = {}) => {
+		setSearchParams({
+			...options,
+			_q: term,
+			_filter: '$containsi'
+		});
+	};
+
+	return { relations: relationsRes, search: searchRes, searchFor };
+};
+
+export { useRelation };
+export type { UseRelationArgs };

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/components/Relations/utils/getRelationLink.ts

@@ -0,0 +1,5 @@
+import { Entity } from '@strapi/types';
+
+export function getRelationLink(targetModel: string, id?: Entity.ID) {
+	return `/content-manager/collection-types/${targetModel}/${id ?? ''}`;
+}

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/components/Relations/utils/normalizeRelations.ts

@@ -0,0 +1,52 @@
+// @ts-nocheck build compiler thinks differently than runtime compiler
+import type { Contracts } from '../../../../../../../content-manager/shared';
+
+import { PUBLICATION_STATES } from '../RelationInputDataManager';
+
+import { getRelationLink } from './getRelationLink';
+
+export interface NormalizeRelationArgs {
+	shouldAddLink: boolean;
+	mainFieldName: string;
+	targetModel: string;
+}
+
+export type NormalizedRelation = Contracts.Relations.RelationResult & {
+	href?: string;
+	mainField: string;
+	publicationState?: false | 'published' | 'draft';
+};
+
+export const normalizeRelation = (
+	relation: Contracts.Relations.RelationResult,
+	{ shouldAddLink, mainFieldName, targetModel }: NormalizeRelationArgs
+) => {
+	const nextRelation: NormalizedRelation = {
+		...relation,
+		mainField: relation[mainFieldName]
+	};
+
+	if (shouldAddLink) {
+		nextRelation.href = getRelationLink(targetModel, nextRelation.id);
+	}
+
+	nextRelation.publicationState = false;
+
+	if (nextRelation?.publishedAt !== undefined) {
+		nextRelation.publicationState = nextRelation.publishedAt ? PUBLICATION_STATES.PUBLISHED : PUBLICATION_STATES.DRAFT;
+	}
+
+	return nextRelation;
+};
+
+/*
+ * Applies some transformations to existing and new relations in order to display them correctly
+ * relations: raw relations data coming from useRelations
+ * shouldAddLink: comes from generateRelationQueryInfos, if true we display a link to the relation (TO FIX: explanation)
+ * mainFieldName: name of the main field inside the relation (e.g. text field), if no displayable main field exists (e.g. date field) we use the id of the entry
+ * targetModel: the model on which the relation is based on, used to create an URL link
+ */
+
+export const normalizeRelations = (relations: Contracts.Relations.RelationResult[], args: NormalizeRelationArgs) => {
+	return [...relations].map((relation) => normalizeRelation(relation, args));
+};

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/hooks/useDragAndDrop.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import * as React from 'react';
 
 import {
@@ -250,4 +249,5 @@ const useDragAndDrop = <
 	];
 };
 
-export { useDragAndDrop, UseDragAndDropReturn, UseDragAndDropOptions, DIRECTIONS, DROP_SENSITIVITY };
+export type { UseDragAndDropReturn, UseDragAndDropOptions };
+export { useDragAndDrop, DIRECTIONS, DROP_SENSITIVITY };

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/hooks/useKeyboardDragAndDrop.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
 export type UseKeyboardDragAndDropCallbacks<TIndex extends number | Array<number> = number> = {
-  onCancel?: (index: TIndex) => void;
-  onDropItem?: (currentIndex: TIndex, newIndex?: TIndex) => void;
-  onGrabItem?: (index: TIndex) => void;
-  onMoveItem?: (newIndex: TIndex, currentIndex: TIndex) => void;
+	onCancel?: (index: TIndex) => void;
+	onDropItem?: (currentIndex: TIndex, newIndex?: TIndex) => void;
+	onGrabItem?: (index: TIndex) => void;
+	onMoveItem?: (newIndex: TIndex, currentIndex: TIndex) => void;
 };
 
 /**
@@ -14,83 +14,83 @@ export type UseKeyboardDragAndDropCallbacks<TIndex extends number | Array<number
  * @internal - You should use `useDragAndDrop` instead.
  */
 export const useKeyboardDragAndDrop = <TIndex extends number | Array<number> = number>(
-  active: boolean,
-  index: TIndex,
-  { onCancel, onDropItem, onGrabItem, onMoveItem }: UseKeyboardDragAndDropCallbacks<TIndex>
+	active: boolean,
+	index: TIndex,
+	{ onCancel, onDropItem, onGrabItem, onMoveItem }: UseKeyboardDragAndDropCallbacks<TIndex>
 ) => {
-  const [isSelected, setIsSelected] = React.useState(false);
+	const [isSelected, setIsSelected] = React.useState(false);
 
-  const handleMove = (movement: 'UP' | 'DOWN') => {
-    if (!isSelected) {
-      return;
-    }
-    if (typeof index === 'number' && onMoveItem) {
-      if (movement === 'UP') {
-        onMoveItem((index - 1) as TIndex, index);
-      } else if (movement === 'DOWN') {
-        onMoveItem((index + 1) as TIndex, index);
-      }
-    }
-  };
+	const handleMove = (movement: 'UP' | 'DOWN') => {
+		if (!isSelected) {
+			return;
+		}
+		if (typeof index === 'number' && onMoveItem) {
+			if (movement === 'UP') {
+				onMoveItem((index - 1) as TIndex, index);
+			} else if (movement === 'DOWN') {
+				onMoveItem((index + 1) as TIndex, index);
+			}
+		}
+	};
 
-  const handleDragClick = () => {
-    if (isSelected) {
-      if (onDropItem) {
-        onDropItem(index);
-      }
-      setIsSelected(false);
-    } else {
-      if (onGrabItem) {
-        onGrabItem(index);
-      }
-      setIsSelected(true);
-    }
-  };
+	const handleDragClick = () => {
+		if (isSelected) {
+			if (onDropItem) {
+				onDropItem(index);
+			}
+			setIsSelected(false);
+		} else {
+			if (onGrabItem) {
+				onGrabItem(index);
+			}
+			setIsSelected(true);
+		}
+	};
 
-  const handleCancel = () => {
-    if (isSelected) {
-      setIsSelected(false);
+	const handleCancel = () => {
+		if (isSelected) {
+			setIsSelected(false);
 
-      if (onCancel) {
-        onCancel(index);
-      }
-    }
-  };
+			if (onCancel) {
+				onCancel(index);
+			}
+		}
+	};
 
-  const handleKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
-    if (!active) {
-      return;
-    }
+	const handleKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
+		if (!active) {
+			return;
+		}
 
-    if (e.key === 'Tab' && !isSelected) {
-      return;
-    }
+		if (e.key === 'Tab' && !isSelected) {
+			return;
+		}
 
-    e.preventDefault();
+		e.preventDefault();
 
-    switch (e.key) {
-      case ' ':
-      case 'Enter':
-        handleDragClick();
-        break;
+		switch (e.key) {
+			case ' ':
+			case 'Enter':
+				handleDragClick();
+				break;
 
-      case 'Escape':
-        handleCancel();
-        break;
+			case 'Escape':
+				handleCancel();
+				break;
 
-      case 'ArrowDown':
-      case 'ArrowRight':
-        handleMove('DOWN');
-        break;
+			case 'ArrowDown':
+			case 'ArrowRight':
+				handleMove('DOWN');
+				break;
 
-      case 'ArrowUp':
-      case 'ArrowLeft':
-        handleMove('UP');
-        break;
+			case 'ArrowUp':
+			case 'ArrowLeft':
+				handleMove('UP');
+				break;
 
-      default:
-    }
-  };
+			default:
+		}
+	};
 
-  return handleKeyDown;
+	return handleKeyDown;
 };

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/hooks/usePrev.ts

@@ -1,11 +1,11 @@
 import { useEffect, useRef } from 'react';
 
 export const usePrev = <T>(value: T): T | undefined => {
-  const ref = useRef<T>();
+	const ref = useRef<T>();
 
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
+	useEffect(() => {
+		ref.current = value;
+	}, [value]);
 
-  return ref.current;
+	return ref.current;
 };

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/utils/dragAndDrop.ts

@@ -1,8 +1,8 @@
 export const ItemTypes = {
-  COMPONENT: 'component',
-  EDIT_FIELD: 'editField',
-  FIELD: 'field',
-  DYNAMIC_ZONE: 'dynamicZone',
-  RELATION: 'relation',
-  BLOCKS: 'blocks',
+	COMPONENT: 'component',
+	EDIT_FIELD: 'editField',
+	FIELD: 'field',
+	DYNAMIC_ZONE: 'dynamicZone',
+	RELATION: 'relation',
+	BLOCKS: 'blocks'
 } as const;

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/utils/paths.ts

@@ -7,30 +7,23 @@ import get from 'lodash/get';
  * a new item they wont have a server ID).
  */
 export const getInitialDataPathUsingTempKeys =
-  (initialData: Record<string, any>, modifiedData: Record<string, any>) =>
-  (currentPath: string) => {
-    const splitPath = currentPath.split('.');
+	(initialData: Record<string, any>, modifiedData: Record<string, any>) => (currentPath: string) => {
+		const splitPath = currentPath.split('.');
 
-    return splitPath.reduce<string[]>((acc, currentValue, index) => {
-      const initialDataParent = get(initialData, acc);
-      const modifiedDataTempKey = get(modifiedData, [
-        ...splitPath.slice(0, index),
-        currentValue,
-        '__temp_key__',
-      ]);
+		return splitPath.reduce<string[]>((acc, currentValue, index) => {
+			const initialDataParent = get(initialData, acc);
+			const modifiedDataTempKey = get(modifiedData, [...splitPath.slice(0, index), currentValue, '__temp_key__']);
 
-      if (Array.isArray(initialDataParent) && typeof modifiedDataTempKey === 'number') {
-        const initialDataIndex = initialDataParent.findIndex(
-          (entry) => entry.__temp_key__ === modifiedDataTempKey
-        );
+			if (Array.isArray(initialDataParent) && typeof modifiedDataTempKey === 'number') {
+				const initialDataIndex = initialDataParent.findIndex((entry) => entry.__temp_key__ === modifiedDataTempKey);
 
-        acc.push(initialDataIndex.toString());
+				acc.push(initialDataIndex.toString());
 
-        return acc;
-      }
+				return acc;
+			}
 
-      acc.push(currentValue);
+			acc.push(currentValue);
 
-      return acc;
-    }, []);
-  };
+			return acc;
+		}, []);
+	};

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/utils/refs.ts

@@ -3,11 +3,11 @@ import { MutableRefObject, Ref } from 'react';
 type PossibleRef<T> = Ref<T> | undefined;
 
 const setRef = <T>(ref: PossibleRef<T>, value: T) => {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref !== null && ref !== undefined) {
-    (ref as MutableRefObject<T>).current = value;
-  }
+	if (typeof ref === 'function') {
+		ref(value);
+	} else if (ref !== null && ref !== undefined) {
+		(ref as MutableRefObject<T>).current = value;
+	}
 };
 
 /**
@@ -15,5 +15,5 @@ const setRef = <T>(ref: PossibleRef<T>, value: T) => {
  * Accepts callback refs and RefObject(s)
  */
 export const composeRefs = <T>(...refs: PossibleRef<T>[]) => {
-  return (node: T) => refs.forEach((ref) => setRef(ref, node));
+	return (node: T) => refs.forEach((ref) => setRef(ref, node));
 };