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

package/admin/src/api/platform-page-types.ts

@@ -21,7 +21,7 @@ const fetchPageTypesForPlatform = async ({ fetchClient, id }: Record<string, any
 		const pageTypesResult = await get(`/content-manager/collection-types/api::page-type.page-type?page=1&pageSize=999`);
 
 		return pageTypesResult?.data?.results
-			?.filter((x) => x?.platform?.id === id)
+			?.filter((x: Record<string, any>) => x?.platform?.id === id)
 			?.map((pageType: Record<string, any>) => ({
 				id: pageType.id,
 				uid: pageType.uid,
@@ -36,7 +36,7 @@ const fetchPageTypesForPlatform = async ({ fetchClient, id }: Record<string, any
 export const useGetPageTypesForPlatform = (params: Record<string, any>) => {
 	const fetchClient = useFetchClient();
 
-	return useQuery<PageType[], Error>([QUERY_KEY, params], () =>
+	return useQuery<PageType[], Error>([QUERY_KEY, params.id], () =>
 		fetchPageTypesForPlatform({
 			...params,
 			fetchClient

package/admin/src/api/platform-relation.ts

@@ -2,10 +2,7 @@ import { useQuery } from 'react-query';
 
 import { useFetchClient } from '@strapi/helper-plugin';
 
-export type Platform = {
-	id: number;
-	title?: string;
-};
+import { Platform } from './platform';
 
 const QUERY_KEY = 'platformRelations';
 
@@ -13,7 +10,7 @@ const fetchPlatformRelation = async ({
 	fetchClient,
 	id,
 	uid
-}: Record<string, any> & UseGetPlatformRelationParams): Promise<Platform[] | undefined> => {
+}: Record<string, any> & UseGetPlatformRelationParams): Promise<Platform | undefined> => {
 	try {
 		if (!uid || !id) {
 			throw new Error('No uid or id');
@@ -36,7 +33,7 @@ type UseGetPlatformRelationParams = {
 export const useGetPlatformRelation = (params: Record<string, any> & UseGetPlatformRelationParams) => {
 	const fetchClient = useFetchClient();
 
-	return useQuery<Platform[] | undefined, Error>([QUERY_KEY, params], () =>
+	return useQuery<Platform | undefined, Error>([QUERY_KEY, params], () =>
 		fetchPlatformRelation({
 			...params,
 			fetchClient

package/admin/src/api/platform.ts

@@ -2,12 +2,9 @@ import { useQuery } from 'react-query';
 
 import { useFetchClient } from '@strapi/helper-plugin';
 
-import { PageType } from './platform-page-types';
-
 export type Platform = {
 	id: number;
 	title?: string;
-	pageTypes?: PageType[];
 };
 
 const QUERY_KEY = 'platforms';

package/admin/src/components/EditView/CollectionTypeSettings/CreatePageButton/index.tsx

@@ -10,12 +10,20 @@ import getRequestUrl from '../../../../utils/getRequestUrl';
 import { sanitizeModules } from '../../../../utils/sanitizeModules';
 import { PAGE_UID } from '../../../../../../shared/utils/constants';
 import { IGetTranslationPageLinks } from '../../../../../../server/controllers/collection-types';
+import { usePlatformFormData } from '../../../../utils/hooks/usePlatformFormData';
 
 import S from './styles';
+import { Platform } from '../../../../api/platform';
 
-export const CreatePageButton = () => {
+interface ICreatePageButtonProps {
+	selectedPlatform: Platform;
+}
+
+export const CreatePageButton = ({ selectedPlatform }: ICreatePageButtonProps) => {
 	const history = useHistory();
-	const { layout, initialData } = useCMEditViewDataManager() as any;
+	const form = (useCMEditViewDataManager() || {}) as Record<string, any>;
+	const { layout, initialData } = form;
+
 	const { locales } = useSelector((state: any) => state.i18n_locales);
 
 	const { post, get, put } = useFetchClient();
@@ -23,8 +31,9 @@ export const CreatePageButton = () => {
 
 	const handleCreatePage = async (e: React.MouseEvent<HTMLAnchorElement>) => {
 		e.preventDefault();
+
 		try {
-			const pageTypeUrl = getRequestUrl(`/page-types/${layout.uid}/${initialData.platform[0]?.id}`);
+			const pageTypeUrl = getRequestUrl(`/page-types/${layout.uid}/${selectedPlatform.id}`);
 			const { data: pageType } = await get(pageTypeUrl);
 			const mappedLocalizations = (initialData?.localizations || []).map((x: any) => x?.id).join(',');
 			const linkedPages: { data: IGetTranslationPageLinks[] } = await get(
@@ -49,7 +58,7 @@ export const CreatePageButton = () => {
 				post,
 				locale,
 				pageTypeId: pageType.id,
-				platformId: initialData.platform[0]?.id,
+				platformId: selectedPlatform.id,
 				parentId: pageType?.defaultParent?.id,
 				collectionTypeId: initialData.id,
 				layoutUid: layout.uid,
@@ -107,7 +116,7 @@ const createNewPage = async ({
 					lower: true,
 					trim: true
 				})
-		  }
+			}
 		: {};
 
 	const { data: page } = await post(url, {

package/admin/src/components/EditView/CollectionTypeSettings/index.tsx

@@ -16,12 +16,12 @@ interface CollectionTypeSettingsProps {
 
 export const CollectionTypeSettings = ({ onlyPlatform }: CollectionTypeSettingsProps) => {
 	const form = (useCMEditViewDataManager() || {}) as Record<string, any>;
-	usePlatformFormData(form);
+	const { selectedPlatform, isLoadingPlatform } = usePlatformFormData(form);
 	const { layout, isCreatingEntry, initialData, modifiedData, onChange } = form;
 	const isUserCreatedContentType = layout.uid.startsWith('api::');
 	const [linkedPage, setLinkedPage] = useState<Record<string, any> | undefined>(initialData.page?.[0]);
 
-	const showCreatePageButton = isUserCreatedContentType && !isCreatingEntry && !linkedPage;
+	const showCreatePageButton = isUserCreatedContentType && !isCreatingEntry && !linkedPage && !isLoadingPlatform;
 	const url = generateLink(linkedPage?.id, initialData?.locale);
 
 	useEffect(() => {
@@ -50,7 +50,7 @@ export const CollectionTypeSettings = ({ onlyPlatform }: CollectionTypeSettingsP
 			{!isCreatingEntry && !onlyPlatform && (
 				<Wrapper title="Gekoppelde pagina">
 					<Flex direction="column" gap={4} width="100%" alignItems="start">
-						{showCreatePageButton && <CreatePageButton />}
+						{showCreatePageButton && selectedPlatform && <CreatePageButton selectedPlatform={selectedPlatform} />}
 
 						{url && (
 							<Flex direction="column" alignItems="start" width="100%" gap={1}>

package/admin/src/components/EditView/PageSettings/index.tsx

@@ -7,9 +7,7 @@ import { TemplateSelect } from '../Template/TemplateSelect';
 import { PageTypeSelect } from '../page-type-select';
 import { CollectionTypeSearch } from '../CollectionTypeSearch';
 import { Wrapper } from '../wrapper';
-import { PageType } from '../../../api/platform-page-types';
 import { Details } from '../Details';
-import { Platform } from '../../../api/platform';
 import { usePlatformFormData } from '../../../utils/hooks/usePlatformFormData';
 import { useGetPageTypesForPlatform } from '../../../api/platform-page-types';
 import S from '../Details/styles';
@@ -17,17 +15,19 @@ import S from '../Details/styles';
 export const PageSettings = () => {
 	const form = (useCMEditViewDataManager() || {}) as Record<string, any>;
 	const { isCreatingEntry, initialData, onChange, modifiedData } = form;
-	const { defaultPlatform } = usePlatformFormData(form);
-	const [selectedPageType, setSelectedPageType] = useState<PageType | undefined | null>(initialData?.initialPageType);
-	const [selectedPlatform, setSelectedPlatform] = useState<Platform | undefined | null>(initialData?.platform?.[0]);
+	const { selectedPlatform, isLoadingPlatform } = usePlatformFormData(form);
+
 	const { data: pageTypesForPlatform } = useGetPageTypesForPlatform({
 		id: selectedPlatform?.id
 	});
+	const selectedPageType = pageTypesForPlatform?.find(
+		(pageType) => pageType.id === Number(modifiedData?.pageType?.[0]?.id)
+	);
 	const noPlatformSelected = useMemo(() => !Boolean(selectedPlatform), [selectedPlatform]);
 	const [isEditting, setIsEditting] = useState(false);
 	const showEditFields = useMemo(
-		() => isCreatingEntry || !selectedPageType?.id || !initialData.collectionTypeTitle || isEditting,
-		[isCreatingEntry, isEditting, selectedPageType, initialData]
+		() => isCreatingEntry || !initialData?.initialPageType?.id || !initialData.collectionTypeTitle || isEditting,
+		[isCreatingEntry, isEditting, initialData?.initialPageType, initialData]
 	);
 
 	const setFormValue = (name: string, value?: string | Record<string, any>[]) => {
@@ -41,29 +41,20 @@ export const PageSettings = () => {
 	};
 
 	useEffect(() => {
-		setSelectedPageType(initialData?.initialPageType);
-		setSelectedPlatform(initialData?.platform?.[0]);
-		setIsEditting(false);
-	}, [initialData]);
-
-	useEffect(() => {
-		if (!initialData?.platform?.[0] && defaultPlatform) {
-			setSelectedPlatform(defaultPlatform);
+		if (!isLoadingPlatform) {
+			setIsEditting(false);
 		}
-	}, [initialData, defaultPlatform]);
+	}, [isLoadingPlatform]);
 
 	const cancelEdit = () => {
 		setIsEditting(false);
-		setSelectedPageType(initialData?.initialPageType || []);
-		setSelectedPlatform(initialData?.platform?.[0]);
 		setFormValue('pageType', initialData?.initialPageType || []);
 		setFormValue('collectionTypeTitle', initialData?.collectionTypeTitle);
 		setFormValue('collectionTypeId', initialData?.collectionTypeId);
-		setFormValue('platform', initialData?.platform);
+		setFormValue('platform', modifiedData?.platform);
 	};
 
 	const removePageType = () => {
-		setSelectedPageType(undefined);
 		setFormValue('pageType', []);
 		setFormValue('collectionTypeTitle', undefined);
 		setFormValue('collectionTypeId', undefined);
@@ -73,7 +64,6 @@ export const PageSettings = () => {
 		const pageType = pageTypesForPlatform?.find((pageType) => pageType.id === Number(pageTypeId));
 
 		if (pageType) {
-			setSelectedPageType(pageType);
 			const formPageType = {
 				...pageType,
 				mainField: pageType.uid,

package/admin/src/components/PageTypeEditView/index.tsx

@@ -7,25 +7,29 @@ import { PAGE_TYPE_UID } from '../../../../shared/utils/constants';
 import { TemplatePlatformSelect } from './TemplatePlatformSelect';
 import { Wrapper } from '../EditView/wrapper';
 import SinglePlatformFilteredSelectField from '../PlatformFilteredSelectField/Single';
+import { usePlatformFormData } from '../../utils/hooks/usePlatformFormData';
 
 export const PageTypeEditView = () => {
-	const { layout } = useCMEditViewDataManager() as any;
+	const form = useCMEditViewDataManager() as any;
+	const { layout } = form;
+	const { selectedPlatform } = usePlatformFormData(form);
 
 	const isPageTypeCollectionType = layout.uid === PAGE_TYPE_UID;
 
-	if (isPageTypeCollectionType) {
-		return (
-			<Wrapper title="Instellingen">
-				<Stack spacing={4} width="100%">
-					<TemplatePlatformSelect />
-					<SinglePlatformFilteredSelectField
-						name="defaultParent"
-						attribute={{ pluginOptions: { filteredSelect: { targetField: 'defaultParent' } } }}
-					/>
-				</Stack>
-			</Wrapper>
-		);
+	if (!isPageTypeCollectionType || !selectedPlatform) {
+		return null;
 	}
 
-	return null;
+	return (
+		<Wrapper title="Instellingen">
+			<Stack spacing={4} width="100%">
+				<TemplatePlatformSelect />
+				<SinglePlatformFilteredSelectField
+					name="defaultParent"
+					attribute={{ pluginOptions: { filteredSelect: { targetField: 'defaultParent' } } }}
+					selectedPlatform={selectedPlatform}
+				/>
+			</Stack>
+		</Wrapper>
+	);
 };

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

@@ -14,6 +14,7 @@ import { useGetLocaleFromUrl } from '../../../utils/hooks/useGetLocaleFromUrl';
 import { getSearchFilteredEntities } from '../../../api/search-filtered-entity';
 import RelationHelper, { IPlatformFilteredSelectFieldProps } from '../utils/relation-helper';
 import { getTranslation } from '../utils/get-translations';
+import { Platform } from '../../../api/platform';
 
 const PAGE = 1;
 
@@ -24,6 +25,7 @@ export interface IMultiPlatformFilteredSelectFieldProps extends IPlatformFiltere
 	isCloningEntry?: boolean;
 	totalRelations: number;
 	relationsFromModifiedData?: Record<string, any>[];
+	selectedPlatform: Platform;
 }
 
 const MultiPlatformFilteredSelectField = ({
@@ -38,7 +40,8 @@ const MultiPlatformFilteredSelectField = ({
 	relations,
 	isCloningEntry,
 	totalRelations,
-	relationsFromModifiedData
+	relationsFromModifiedData,
+	selectedPlatform
 }: IMultiPlatformFilteredSelectFieldProps) => {
 	const fetchClient = useFetchClient();
 	const {
@@ -95,7 +98,7 @@ const MultiPlatformFilteredSelectField = ({
 			uid: targetAttributes?.target || '',
 			locale: selectedLocale,
 			searchQuery: inputValue,
-			platformTitle: initialData?.platform?.[0]?.title,
+			platformTitle: selectedPlatform?.title,
 			notIds: selectedResults?.data?.map((x: Record<string, any>) => x.id)
 		});
 

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

@@ -14,6 +14,11 @@ 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;
+}
 
 interface CustomReactSelectValue extends Omit<IReactSelectValue, 'initialSelected'> {
 	href?: string;
@@ -30,11 +35,13 @@ const SinglePlatformFilteredSelectField = ({
 	labelAction,
 	error,
 	intlLabel,
-	name
-}: IPlatformFilteredSelectFieldProps) => {
+	name,
+	selectedPlatform
+}: 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);
@@ -133,10 +140,10 @@ const SinglePlatformFilteredSelectField = ({
 			{targetAttributes?.type === 'relation' && (
 				<S.FieldWrapper>
 					<Combobox
-						key={`rerenderOnPlatformChange-${modifiedData?.platform?.[0]?.title}`}
+						key={`rerenderOnPlatformChange-${selectedPlatform?.title}`}
 						id="pagesSearch"
 						label={label}
-						loadOptions={(i, c) => debouncedFetch(i, c, modifiedData?.platform?.[0]?.title)}
+						loadOptions={(i, c) => debouncedFetch(i, c, selectedPlatform?.title)}
 						cacheOptions
 						customOption={CustomOption}
 						onChange={handleChange}
@@ -178,7 +185,7 @@ const getInitialSelectItem = (initialValue?: Record<string, any>): SingleValue<C
 				href: initialValue?.href,
 				publicationState: initialValue.publicationState,
 				publishedAt: initialValue.publishedAt
-		  }
+			}
 		: null;
 
 export default SinglePlatformFilteredSelectField;

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

@@ -5,22 +5,30 @@ import RelationHelper, { IPlatformFilteredSelectFieldProps } from './utils/relat
 import MultiPlatformFilteredSelectField from './Multi';
 import SinglePlatformFilteredSelectField from './Single';
 import { useRelationLoad } from './hooks/useRelationLoad';
+import { usePlatformFormData } from '../../utils/hooks/usePlatformFormData';
 
 const PlatformFilteredSelectField = (props: IPlatformFilteredSelectFieldProps) => {
 	const { name, attribute } = props;
-	const { modifiedData, layout, allLayoutData } = useCMEditViewDataManager() as any;
+	const form = useCMEditViewDataManager() as any;
+	const { modifiedData, layout, allLayoutData } = form;
+	const { selectedPlatform } = usePlatformFormData(form);
 	const { relations, isCloningEntry, totalRelations, relationsFromModifiedData } = useRelationLoad(props);
 	const { targetAttributes } = RelationHelper.getTargetAttributes(name, attribute, modifiedData, layout, allLayoutData);
 	const toOneRelation = ['oneWay', 'oneToOne', 'manyToOne', 'oneToManyMorph', 'oneToOneMorph'].includes(
 		targetAttributes?.relation || ''
 	);
 
+	if (!selectedPlatform) {
+		return null;
+	}
+
 	if (toOneRelation) {
-		return <SinglePlatformFilteredSelectField {...props} />;
+		return <SinglePlatformFilteredSelectField selectedPlatform={selectedPlatform} {...props} />;
 	}
 
 	return (
 		<MultiPlatformFilteredSelectField
+			selectedPlatform={selectedPlatform}
 			relations={relations}
 			isCloningEntry={isCloningEntry}
 			totalRelations={totalRelations}

package/admin/src/utils/hooks/usePlatformFormData.ts

@@ -1,24 +1,28 @@
-import { Platform } from '../../api/platform';
 import { useEffect } from 'react';
+
+import { Platform } from '../../api/platform';
 import { useDefaultPlatformFromLocalStorage } from './useDefaultPlatformFromLocalStorage';
 import { useGetPlatformRelation } from '../../api/platform-relation';
 
 const usePlatformFormData = (form?: Record<string, any>, onPlatformChange?: (platform: Platform) => void) => {
 	const { onChange, initialData, layout } = form || {};
-	const { isLoading } = useGetPlatformRelation({ id: initialData?.id, uid: layout.uid });
+	const { isLoading: isLoadingPlatform, data: selectedPlatform } = useGetPlatformRelation({
+		id: initialData?.id,
+		uid: layout.uid
+	});
 
 	const { selectedPlatform: defaultPlatform, setSelectedPlatform: setDefaultPlatform } =
 		useDefaultPlatformFromLocalStorage();
 
 	useEffect(() => {
-		if (!isLoading && !initialData.platform[0]?.id && defaultPlatform) {
+		if (!isLoadingPlatform && !selectedPlatform?.id && defaultPlatform) {
 			handleSelectPlatform(defaultPlatform);
 		}
 
-		if (initialData.platform[0]?.id && defaultPlatform?.id && initialData.platform[0].id !== defaultPlatform.id) {
-			setDefaultPlatform(initialData.platform[0]);
+		if (selectedPlatform?.id && defaultPlatform?.id && selectedPlatform.id !== defaultPlatform.id) {
+			setDefaultPlatform(selectedPlatform);
 		}
-	}, [isLoading, defaultPlatform, initialData]);
+	}, [isLoadingPlatform, defaultPlatform]);
 
 	const setFormValue = (name: string, value?: string | Record<string, any>[]) => {
 		onChange({
@@ -44,7 +48,7 @@ const usePlatformFormData = (form?: Record<string, any>, onPlatformChange?: (pla
 		}
 	};
 
-	return { defaultPlatform };
+	return { defaultPlatform, selectedPlatform, isLoadingPlatform };
 };
 
 export { usePlatformFormData };

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webbio/strapi-plugin-page-builder",
-    "version": "0.9.2-platform",
+    "version": "0.9.4-platform",
     "description": "This is the description of the plugin.",
     "scripts": {
         "develop": "tsc -p tsconfig.server.json -w",