@webbio/strapi-plugin-page-builder 0.3.2 → 0.3.3-legacy

package/README.md

@@ -45,6 +45,9 @@ Voor elk collection type die een page type is, moet deze properties toegevoegd w
 
 Zodra dit goed is ingesteld, kan je via deze collectie types direct een pagina aanmaken.
 
+> **Notitie:**
+> `hasPage` wordt gebruikt om aan te tonen dan een collection type item een `published` pagina heeft.
+
 ## Page
 
 Op een page kan je in de Edit View een page type selecteren. Op basis daarvan wordt er een template geselecteerd (indien gekozen in een page type) en kan je zoeken in verschillende entiteiten binnen die page type. Deze kan je koppelen aan een pagina.
@@ -60,19 +63,31 @@ Om wijzigignen aan te brengen in een platform, moeten deze in de schema aangepas
 Voor elk collectiontype die je wil toevoegen aan het platform, moet deze relatie toegevoegd worden:
 
 ```
-"platform": {
-  "type": "relation",
-  "relation": "oneToOne",
-  "target": "api::platform.platform"
-}
+    "collectiontype": {
+      "type": "relation",
+      "relation": "oneToMany",
+      "target": "UID van collection type",
+      "mappedBy": "platform"
+    }
+```
+
+bijvoorbeeld :
+
+```
+    "faqs": {
+      "type": "relation",
+      "relation": "oneToMany",
+      "target": "api::faq.faq",
+      "mappedBy": "platform"
+    }
 ```
 
 Een platform zit altijd aan een pagina gekoppeld. Deze moet handmatig in de pagina toegevoegd worden.
 
 # Known bugs
 
+- Bij het opslaan van een collectietype wil de gekoppelde pagina of type in het ui wel eens verdwijnen.
 - Na het ontkoppelen en opslaan van een collectie item op een pagina, staat deze nog als "Geselecteerd" in de dropdown.
-- Sorteren op pages binnen een collectie type kan niet. Dus stel ik haal alle FAQ's op waarbij ik wil sorteren op een property op de page, kan dat niet.
 
 # Improvements
 

package/admin/src/api/collection-type.ts

@@ -26,7 +26,6 @@ type SearchEntitiesQueryParams = {
 	searchQuery?: string;
 	currentCollectionTypeId?: number;
 	currentPageId?: number;
-	platformTitle?: string;
 };
 
 const QUERY_KEY = ['entities'];
@@ -38,8 +37,7 @@ export const getSearchEntities = async ({
 	locale,
 	searchQuery,
 	currentCollectionTypeId,
-	currentPageId,
-	platformTitle
+	currentPageId
 }: SearchEntitiesQueryParams): Promise<SearchResult> => {
 	try {
 		const { get } = fetchClient;
@@ -55,10 +53,6 @@ export const getSearchEntities = async ({
 			searchParams.append('_q', searchQuery);
 		}
 
-		if (platformTitle) {
-			searchParams.append('filters[$and][0][platform][title][$contains]', String(platformTitle));
-		}
-
 		const { data } = await get(`/content-manager/collection-types/${uid}?${searchParams.toString()}`);
 
 		const filteredResults = data.results.filter((p: Record<string, any>) => {

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

@@ -14,10 +14,9 @@ const PAGE = 1;
 
 interface Props {
 	uid: string;
-	platformTitle?: string;
 }
 
-export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
+export const CollectionTypeSearch = ({ uid }: Props) => {
 	const fetchClient = useFetchClient();
 	const form = useCMEditViewDataManager() as any;
 	const { locales } = useSelector((state: any) => state.i18n_locales);
@@ -25,7 +24,6 @@ export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
 	const defaultLocale = locales.find((locale: any) => locale.isDefault);
 	const selectedLocale = form.initialData?.locale ?? urlLocale ?? defaultLocale.code;
 	const prevUid = usePrevious(uid);
-	const prevPlatformTitle = usePrevious(platformTitle);
 
 	const [selected, setSelected] = useState<SingleValue<IReactSelectValue | null>>(
 		getInitialSelectItem(form.initialData?.collectionTypeId, form.initialData?.collectionTypeTitle)
@@ -40,7 +38,7 @@ export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
 		}
 	}, []);
 
-	const getItems = async (inputValue?: string, platformTitle?: string): Promise<IReactSelectValue[]> => {
+	const getItems = async (inputValue?: string): Promise<IReactSelectValue[]> => {
 		const searchEntities = await getSearchEntities({
 			fetchClient,
 			page: PAGE,
@@ -48,8 +46,7 @@ export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
 			uid,
 			searchQuery: inputValue,
 			currentCollectionTypeId: form.initialData?.collectionTypeId,
-			currentPageId: form.initialData?.id,
-			platformTitle
+			currentPageId: form.initialData?.id
 		});
 
 		return searchEntities.results.map((x) => ({
@@ -76,28 +73,28 @@ export const CollectionTypeSearch = ({ uid, platformTitle }: Props) => {
 	};
 
 	useEffect(() => {
-		if ((prevUid !== null && prevUid !== uid) || (prevPlatformTitle !== null && prevPlatformTitle !== platformTitle)) {
+		if (prevUid !== null && prevUid !== uid) {
 			setSelected(null);
 		}
-	}, [uid, platformTitle]);
+	}, [uid]);
 
-	const debouncedFetch = debounce((searchTerm, callback, selectedPlatformTitle?: string) => {
-		promiseOptions(searchTerm, selectedPlatformTitle).then((result) => {
+	const debouncedFetch = debounce((searchTerm, callback) => {
+		promiseOptions(searchTerm).then((result) => {
 			return callback(result || []);
 		});
 	}, SEARCH_DEBOUNCE_MS);
 
-	const promiseOptions = (inputValue: string, selectedPlatformTitle?: string): Promise<IReactSelectValue[]> =>
+	const promiseOptions = (inputValue: string): Promise<IReactSelectValue[]> =>
 		new Promise<IReactSelectValue[]>((resolve) => {
-			resolve(getItems(inputValue, selectedPlatformTitle));
+			resolve(getItems(inputValue));
 		});
 
 	return (
 		<Combobox
-			key={`rerenderOnUidOrPlatformChange-${uid}-${platformTitle}`}
+			key={`rerenderOnUidChange-${uid}`}
 			id="collectionTypeSearch"
 			label="Entity"
-			loadOptions={(i, c) => debouncedFetch(i, c, platformTitle)}
+			loadOptions={debouncedFetch}
 			cacheOptions
 			onChange={handleChange}
 			customOption={CustomOption}

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

@@ -1,4 +1,6 @@
-import React, { useEffect } from 'react';
+import React from 'react';
+import slugify from 'slugify';
+import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
 import { Plus } from '@strapi/icons';
@@ -14,6 +16,7 @@ import S from './styles';
 export const CreatePageButton = () => {
 	const history = useHistory();
 	const { layout, initialData } = useCMEditViewDataManager() as any;
+	const { locales } = useSelector((state: any) => state.i18n_locales);
 
 	const { post, get, put } = useFetchClient();
 	const url = `/content-manager/collectionType/${PAGE_UID}/create`;
@@ -28,8 +31,17 @@ export const CreatePageButton = () => {
 				getRequestUrl(`/collection-types-page-links/${layout.uid}/${mappedLocalizations}`)
 			);
 			const createLocalizedPage = !linkedPages?.data?.find((x) => x.locale === initialData?.locale);
-			const locale = initialData?.locale;
-			const modules = sanitizeModules(pageType?.template?.modules || []);
+			const defaultLocale = locales.find((locale: any) => locale.isDefault);
+			const locale = initialData?.locale || defaultLocale?.code;
+
+			// Get data inside template
+			let templateData;
+
+			if (pageType?.template?.id) {
+				templateData = await get(getRequestUrl(`/template/${pageType.template.id}`));
+			}
+
+			const modules = sanitizeModules(templateData?.data?.modules || [], false);
 
 			const newPage = await createNewPage({
 				title: initialData?.title,
@@ -37,16 +49,15 @@ export const CreatePageButton = () => {
 				post,
 				locale,
 				pageTypeId: pageType.id,
-				platformId: initialData.platform[0]?.id,
 				collectionTypeId: initialData.id,
 				layoutUid: layout.uid,
 				relatedEntityId: createLocalizedPage ? linkedPages.data?.[0]?.id : undefined
 			});
 			if (newPage?.id) {
 				await put(`/content-manager/collection-types/${layout.uid}/${initialData.id}`, {
-					hasPage: true
+					hasPage: false
 				});
-				history.push(`/content-manager/collectionType/${PAGE_UID}/${newPage.id}?plugins[i18n][locale]=${locale}`);
+				history.push(`/content-manager/collection-types/${PAGE_UID}/${newPage.id}?plugins[i18n][locale]=${locale}`);
 			}
 		} catch (error) {
 			console.error(error);
@@ -68,7 +79,6 @@ interface ICreateNewPageProps {
 	modules?: Record<string, any>[];
 	post: any;
 	pageTypeId: number;
-	platformId: number;
 	relatedEntityId?: number;
 }
 
@@ -80,17 +90,25 @@ const createNewPage = async ({
 	layoutUid,
 	modules,
 	pageTypeId,
-	platformId,
 	relatedEntityId
 }: ICreateNewPageProps) => {
 	// Including locale in url is neccesary.
 	const relatedEntityIdQuery = relatedEntityId ? `&plugins[i18n][relatedEntityId]=${relatedEntityId}` : '';
 	const url = `/content-manager/collection-types/${PAGE_UID}?plugins[i18n][locale]=${locale}${relatedEntityIdQuery}`;
+	const slugData = title
+		? {
+				slug: slugify(title, {
+					lower: true,
+					trim: true
+				})
+			}
+		: {};
+
 	const { data: page } = await post(url, {
+		...slugData,
 		title,
 		locale,
 		pageType: { connect: [{ id: pageTypeId }] },
-		platform: { connect: [{ id: platformId }] },
 		collectionTypeData: {
 			id: collectionTypeId,
 			__type: layoutUid,

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import { Flex } from '@strapi/design-system';
@@ -10,14 +10,24 @@ import { PAGE_TYPE_PAGE, PAGE_UID } from '../../../../../shared/utils/constants'
 import S from '../Details/styles';
 
 export const CollectionTypeSettings = () => {
-	const { layout, isCreatingEntry, initialData, onChange } = useCMEditViewDataManager() as any;
+	const { layout, isCreatingEntry, initialData, modifiedData, onChange } = useCMEditViewDataManager() as any;
 
 	const isUserCreatedContentType = layout.uid.startsWith('api::');
-	const linkedPage = initialData.page?.[0];
+	const [linkedPage, setLinkedPage] = useState<Record<string, any> | undefined>(initialData.page?.[0]);
 
 	const showCreatePageButton = isUserCreatedContentType && !isCreatingEntry && !linkedPage;
 	const url = generateLink(linkedPage?.id, initialData?.locale);
 
+	useEffect(() => {
+		if (modifiedData.page?.[0]) {
+			setLinkedPage(modifiedData.page?.[0]);
+		}
+
+		if (modifiedData.page === null) {
+			setLinkedPage(undefined);
+		}
+	}, [modifiedData.page?.[0]]);
+
 	useEffect(() => {
 		if (isCreatingEntry) {
 			onChange({
@@ -44,9 +54,9 @@ export const CollectionTypeSettings = () => {
 							{PAGE_TYPE_PAGE}
 						</S.SubtleType>
 						<S.EntityLinkWrapper variant="pi" textColor="neutral800">
-							<S.EntityLink title={linkedPage.title || '-'} to={url} variant="pi">
+							<S.EntityLink title={linkedPage?.title || '-'} to={url} variant="pi">
 								<Link />
-								{linkedPage.title || '-'}
+								{linkedPage?.title || '-'}
 							</S.EntityLink>
 						</S.EntityLinkWrapper>
 					</Flex>
@@ -60,5 +70,5 @@ const generateLink = (entityId?: string, locale?: string) => {
 	if (!entityId) {
 		return '';
 	}
-	return `/content-manager/collectionType/${PAGE_UID}/${entityId}?plugins[i18n][locale]=${locale}`;
+	return `/content-manager/collection-types/${PAGE_UID}/${entityId}?plugins[i18n][locale]=${locale}`;
 };

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

@@ -43,5 +43,5 @@ const generateLink = ({ locale, pageType, entityId }: Props) => {
 		return '';
 	}
 
-	return `/content-manager/collectionType/${pageType.uid}/${entityId}?plugins[i18n][locale]=${locale}`;
+	return `/content-manager/collection-types/${pageType.uid}/${entityId}?plugins[i18n][locale]=${locale}`;
 };

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

@@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import { Stack, Flex } from '@strapi/design-system';
 import { Cog, Cross } from '@strapi/icons';
-import { getFetchClient } from '@strapi/helper-plugin';
+
 import { TemplateSelect } from '../Template/TemplateSelect';
 import { PageTypeSelect } from '../page-type-select';
 import { CollectionTypeSearch } from '../CollectionTypeSearch';
@@ -11,18 +11,11 @@ import { Wrapper } from '../wrapper';
 import { PageType, useGetPageTypes } from '../../../api/page-type';
 import { Details } from '../Details';
 import S from '../Details/styles';
-import { Platform, useGetPlatforms } from '../../../api/platform';
-import { PlatformSelect } from '../Platform/platform-select';
-import getRequestUrl from '../../../utils/getRequestUrl';
 
 export const PageSettings = () => {
-	const { isCreatingEntry, initialData, onChange, modifiedData, ...rest } = useCMEditViewDataManager() as any;
-	const { data: allPageTypes } = useGetPageTypes({});
-	const { data: platforms } = useGetPlatforms({});
-	const [pageTypes, setPageTypes] = useState(allPageTypes);
+	const { isCreatingEntry, initialData, onChange, modifiedData } = useCMEditViewDataManager() as any;
+	const { data: pageTypes } = useGetPageTypes({});
 	const [selectedPageType, setSelectedPageType] = useState<PageType | undefined | null>(initialData?.initialPageType);
-	const [selectedPlatform, setSelectedPlatform] = useState<Platform | undefined | null>(initialData?.platform?.[0]);
-	const noPlatformSelected = useMemo(() => !Boolean(selectedPlatform), [selectedPlatform]);
 	const [isEditting, setIsEditting] = useState(false);
 	const showEditFields = useMemo(
 		() => isCreatingEntry || !selectedPageType?.id || !initialData.collectionTypeTitle || isEditting,
@@ -42,24 +35,15 @@ export const PageSettings = () => {
 	useEffect(() => {
 		setSelectedPageType(initialData?.initialPageType);
 
-		setSelectedPlatform(initialData?.platform?.[0]);
 		setIsEditting(false);
 	}, [initialData]);
 
-	useEffect(() => {
-		if (selectedPlatform?.title) {
-			setPageTypesByPlatform(selectedPlatform.title);
-		}
-	}, [selectedPlatform, allPageTypes]);
-
 	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);
 	};
 
 	const removePageType = () => {
@@ -86,49 +70,14 @@ export const PageSettings = () => {
 		}
 	};
 
-	const handleSelectPlatform = async (platformId: string) => {
-		const platform = platforms?.find((platform) => platform.id === Number(platformId));
-
-		if (platform && platform.title) {
-			setSelectedPlatform(platform);
-			const formPlatform = {
-				...platform,
-				label: platform.title,
-				value: platform.id
-			};
-			setFormValue('platform', [formPlatform]);
-			setPageTypesByPlatform(platform.title);
-		} else {
-			setFormValue('platform', []);
-			setSelectedPlatform(null);
-			removePageType();
-		}
-	};
-
-	const setPageTypesByPlatform = async (platform: string) => {
-		const pageTypeUrl = getRequestUrl(`/platform/${platform}`);
-		const { get } = getFetchClient();
-		const { data: platFormData } = await get(pageTypeUrl);
-
-		setPageTypes(platFormData[0].pageTypes);
-	};
-
 	return (
 		<Wrapper title="Gekoppelde type">
 			<Flex direction="column" gap={4} width="100%">
 				{showEditFields ? (
 					<Stack spacing={4} width="100%">
-						<PlatformSelect platforms={platforms} selectedPlatform={selectedPlatform} onChange={handleSelectPlatform} />
-						<PageTypeSelect
-							pageTypes={pageTypes}
-							selectedPageType={selectedPageType}
-							onChange={handleSelectPageType}
-							disabled={noPlatformSelected}
-						/>
-						<TemplateSelect disabled={noPlatformSelected} />
-						{selectedPageType?.uid && (
-							<CollectionTypeSearch uid={selectedPageType.uid} platformTitle={selectedPlatform?.title} />
-						)}
+						<PageTypeSelect pageTypes={pageTypes} selectedPageType={selectedPageType} onChange={handleSelectPageType} />
+						<TemplateSelect />
+						{selectedPageType?.uid && <CollectionTypeSearch uid={selectedPageType.uid} />}
 					</Stack>
 				) : (
 					<Details

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { PageTypeFilter } from './page-type-filter';
+import { PAGE_UID } from '../../../../shared/utils/constants';
+
+const PageTypeFilterContainer = () => {
+	const { pathname } = useLocation();
+
+	if (pathname === `/content-manager/collection-type/${PAGE_UID}`) {
+		return <PageTypeFilter />;
+	}
+
+	return null;
+};
+
+export default PageTypeFilterContainer;

package/admin/src/components/PageTypeFilter/page-type-filter.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from 'react';
+import set from 'lodash/set';
+
+import { SingleSelectOption, SingleSelect } from '@strapi/design-system';
+import { useQueryParams } from '@strapi/helper-plugin';
+
+import { useGetPageTypes } from '../../api/page-type';
+import { PAGE_TYPE_NO_FILTER } from '../../constants';
+import { PAGE_TYPE_PAGE } from '../../../../shared/utils/constants';
+
+const PageTypeFilter = () => {
+	const [{ query }, setQuery] = useQueryParams() as any;
+	const { data: pageTypes } = useGetPageTypes({});
+	const initialPageTypeUid = getInitialPageType(query, pageTypes);
+	const [selectedPageTypeUid, setSelectedPageTypeUid] = useState(initialPageTypeUid);
+
+	const removeFilters = () => {
+		const newAndFilters = query.filters?.$and?.filter(
+			(x?: Record<string, any>) => Object.keys(x || {})?.[0] !== 'pageType'
+		);
+		const filters = { ...query.filters, $and: newAndFilters };
+
+		if (newAndFilters && newAndFilters.length === 0) {
+			delete filters.$and;
+		}
+
+		setQuery({
+			page: 1,
+			filters
+		});
+	};
+
+	const handleFilterChange = (filters: Record<string, any>) => {
+		const currentFilters = query.filters?.$and ? query.filters : { ...query.filters, $and: [] }; // Make sure $and exists.
+		const pageTypeFilterIndex = currentFilters.$and.findIndex(
+			(x?: Record<string, any>) => Object.keys(x || {})?.[0] === 'pageType'
+		);
+
+		if (pageTypeFilterIndex > -1) {
+			set(currentFilters, `$and[${pageTypeFilterIndex}]`, filters); // If the pageType filter already exists, replace it
+		} else {
+			currentFilters.$and.push(filters);
+		}
+
+		setQuery({
+			page: 1,
+			filters: currentFilters
+		});
+	};
+
+	const handleSelect = (value: string) => {
+		setSelectedPageTypeUid(value);
+
+		if (value === 'all') {
+			removeFilters();
+			return;
+		}
+
+		if (value === PAGE_TYPE_PAGE) {
+			handleFilterChange(nullPageTypeQueryFilter);
+			return;
+		}
+
+		handleFilterChange(getPageTypeQueryFilter(value));
+	};
+
+	useEffect(() => {
+		setSelectedPageTypeUid(getInitialPageType(query, pageTypes));
+	}, [pageTypes]);
+
+	useEffect(() => {
+		if (!query?.filters) {
+			setSelectedPageTypeUid(null);
+		}
+	}, [query]);
+
+	return (
+		<SingleSelect placeholder="Select page type" onChange={handleSelect} size="S" value={selectedPageTypeUid}>
+			<SingleSelectOption key={PAGE_TYPE_NO_FILTER} value={PAGE_TYPE_NO_FILTER}>
+				Alle Paginatypes
+			</SingleSelectOption>
+			<SingleSelectOption key={PAGE_TYPE_PAGE} value={PAGE_TYPE_PAGE}>
+				Pagina
+			</SingleSelectOption>
+			{pageTypes?.map((pageType) => (
+				<SingleSelectOption key={pageType.uid} value={pageType.uid}>
+					{pageType.title || pageType.uid}
+				</SingleSelectOption>
+			))}
+		</SingleSelect>
+	);
+};
+
+export { PageTypeFilter };
+
+const getPageTypeQueryFilter = (pageType: string) => ({
+	pageType: {
+		uid: {
+			$eq: pageType
+		}
+	}
+});
+
+const nullPageTypeQueryFilter = {
+	pageType: {
+		uid: {
+			$null: true
+		}
+	}
+};
+
+const getInitialPageType = (query: any, pageTypes: any) => {
+	const pageTypeFromQuery = query?.filters?.$and?.find(
+		(x?: Record<string, any>) => Object.keys(x || {})?.[0] === 'pageType'
+	)?.pageType;
+
+	if (pageTypeFromQuery?.uid?.$null === 'true') {
+		return PAGE_TYPE_PAGE;
+	}
+
+	if (pageTypeFromQuery?.uid?.$eq) {
+		const matchingPageType = pageTypes?.find((pageType: any) => pageType?.uid === pageTypeFromQuery.uid.$eq);
+
+		if (matchingPageType) {
+			return matchingPageType.uid;
+		}
+	}
+
+	return PAGE_TYPE_NO_FILTER;
+};

package/admin/src/index.tsx

@@ -3,7 +3,7 @@ import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 import Initializer from './components/Initializer';
-import PageFiltersContainer from './components/PageFilters';
+import PageTypeFilter from './components/PageTypeFilter';
 import { EditView } from './components/EditView';
 import middlewares from './middlewares';
 
@@ -29,7 +29,7 @@ export default {
 		});
 		app.injectContentManagerComponent('listView', 'actions', {
 			name: 'page-filters',
-			Component: PageFiltersContainer
+			Component: PageTypeFilter
 		});
 	},
 

package/admin/src/utils/sanitizeModules.ts

@@ -1,10 +1,93 @@
-export const sanitizeModules = (modules: Record<string, any>[]) => {
-	return modules?.map((module, idx) => {
-		delete module.id;
-
-		return {
-			...module,
-			__temp_key__: idx
-		};
+export const sanitizeModules = (modules: Record<string, any>[], convertToJSON = true) =>
+	modules?.map((module, idx) => {
+		try {
+			const sanitizedModule = sanitizeObject(module, idx, convertToJSON);
+
+			// go through top level properties in the module
+			for (let prop in sanitizedModule) {
+				// Strapi didn't give us the properties in an array when we used the Strapi API to get modules
+				// But it crashes when we try and have single relations not in an array, so we put them into an array.
+				if (
+					sanitizedModule[prop] &&
+					sanitizedModule[prop].hasOwnProperty('__is_array__') &&
+					!Array.isArray(sanitizedModule[prop])
+				) {
+					sanitizedModule[prop] = [{ ...sanitizedModule[prop] }];
+				}
+
+				// If a property is null, Strapi decides it should crash completely so we remove those.
+				if (sanitizedModule[prop] === null) {
+					delete sanitizedModule[prop];
+				}
+			}
+
+			const result = {
+				...sanitizedModule
+			};
+
+			return result;
+		} catch (error) {
+			console.error('ERROR IN SANITIZE MODULES', error);
+		}
 	});
-};
+
+function sanitizeObject(obj: any, idx: number, convertToJSON = true): any {
+	try {
+		for (let key in obj) {
+			try {
+				if (typeof obj[key] === 'object' && obj[key] !== null && obj[key] !== undefined) {
+					sanitizeObject(obj[key], idx);
+				}
+			} catch (error) {
+				console.error('ERROR in loop', error);
+				return undefined;
+			}
+		}
+
+		// We have to remove the id for components, but not for relations to other collection items
+		// We use createdAt to check, only collection items have this property (hopefully)
+		if (obj.hasOwnProperty('id') && !obj.hasOwnProperty('createdAt')) {
+			obj['__temp_key__'] = idx;
+			delete obj['id'];
+		} else if (obj.hasOwnProperty('id') && obj.hasOwnProperty('createdAt')) {
+			// if it's a relation to a collection item, it has to be in an array because it crashes otherwise.
+			// We use this property at the top of this file, only for top level properties.
+			obj['__is_array__'] = true;
+		}
+
+		try {
+			if (obj.hasOwnProperty('defaultModuleOptions')) {
+				delete obj['defaultModuleOptions'].id;
+
+				let spacing = obj['defaultModuleOptions']?.spacing;
+
+				if (convertToJSON && spacing) {
+					spacing = JSON.stringify(spacing);
+				}
+
+				obj['defaultModuleOptions'] = {
+					...obj['defaultModuleOptions'],
+					spacing,
+					__temp_key__: idx
+				};
+			}
+		} catch (error) {
+			console.error('error in defaultmodule options', error);
+		}
+
+		// Strapi doesnt give us the mainfield and label properties when we get the data using the Strapi API
+		// So we add them here using other properties. This might be expanded with more if statements if required,
+		if (obj.hasOwnProperty('name') && !obj.hasOwnProperty('mainField') && !obj.hasOwnProperty('label')) {
+			obj['label'] = obj['name'];
+			obj['mainField'] = obj['name'];
+		}
+		if (obj.hasOwnProperty('title') && !obj.hasOwnProperty('mainField') && !obj.hasOwnProperty('label')) {
+			obj['label'] = obj['title'];
+			obj['mainField'] = obj['title'];
+		}
+
+		return obj;
+	} catch (error) {
+		console.error('error in root sanitize object', error);
+	}
+}