@webbio/strapi-plugin-page-builder 0.4.0-platform → 0.4.2-platform

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

@@ -0,0 +1,40 @@
+import { useQuery } from 'react-query';
+
+import { useFetchClient } from '@strapi/helper-plugin';
+
+export type Platform = {
+	id: number;
+	title?: string;
+};
+
+const QUERY_KEY = 'platformRelations';
+
+const fetchPlatformRelation = async ({
+	fetchClient,
+	id,
+	uid
+}: Record<string, any> & UseGetPlatformRelationParams): Promise<Platform | undefined> => {
+	try {
+		const { get } = fetchClient;
+		const result = await get(`/content-manager/relations/${uid}/${id}/platform?page=1&pageSize=5`);
+
+		return result?.data?.data;
+	} catch {
+		return undefined;
+	}
+};
+
+type UseGetPlatformRelationParams = {
+	uid: string;
+	id: string;
+};
+
+export const useGetPlatformRelation = (params: Record<string, any> & UseGetPlatformRelationParams) => {
+	const fetchClient = useFetchClient();
+	params = {
+		...params,
+		fetchClient
+	};
+
+	return useQuery<Platform | undefined, Error>([QUERY_KEY, params.uid, params.id], () => fetchPlatformRelation(params));
+};

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

@@ -1,24 +1,23 @@
 import React, { useEffect, useState } from 'react';
 
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-import { Flex, Box } from '@strapi/design-system';
+import { Flex } from '@strapi/design-system';
 import { Link } from '@strapi/icons';
 
 import { Wrapper } from '../wrapper';
 import { CreatePageButton } from './CreatePageButton';
 import { PAGE_TYPE_PAGE, PAGE_UID } from '../../../../../shared/utils/constants';
+import { usePlatformFormData } from '../../../utils/hooks/usePlatformFormData';
 import S from '../Details/styles';
-import { PlatformSelect } from '../Platform/platform-select';
-import { Platform, useGetPlatforms } from '../../../api/platform';
 
 interface CollectionTypeSettingsProps {
 	onlyPlatform?: boolean;
 }
 
 export const CollectionTypeSettings = ({ onlyPlatform }: CollectionTypeSettingsProps) => {
-	const { layout, isCreatingEntry, initialData, modifiedData, onChange } = useCMEditViewDataManager() as any;
-	const { data: platforms } = useGetPlatforms({});
-	const [selectedPlatform, setSelectedPlatform] = useState<Platform | undefined | null>(initialData?.platform?.[0]);
+	const form = (useCMEditViewDataManager() || {}) as Record<string, any>;
+	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]);
 
@@ -46,59 +45,11 @@ export const CollectionTypeSettings = ({ onlyPlatform }: CollectionTypeSettingsP
 		}
 	}, []);
 
-	useEffect(() => {
-		setSelectedPlatform(initialData?.platform?.[0]);
-	}, [initialData]);
-
-	const setFormValue = (name: string, value?: string | Record<string, any>[]) => {
-		onChange({
-			target: {
-				name,
-				value
-			},
-			shouldSetInitialValue: true
-		});
-	};
-
-	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]);
-		} else {
-			setFormValue('platform', []);
-			setSelectedPlatform(null);
-		}
-	};
-
 	return (
 		<>
-			{(isCreatingEntry || onlyPlatform) && (
-				<Wrapper title="Platform">
-					<PlatformSelect
-						platforms={platforms}
-						selectedPlatform={selectedPlatform}
-						onChange={handleSelectPlatform}
-						noLabel
-					/>
-				</Wrapper>
-			)}
 			{!isCreatingEntry && !onlyPlatform && (
 				<Wrapper title="Gekoppelde pagina">
 					<Flex direction="column" gap={4} width="100%" alignItems="start">
-						<Box width="100%">
-							<PlatformSelect
-								platforms={platforms}
-								selectedPlatform={selectedPlatform}
-								onChange={handleSelectPlatform}
-							/>
-						</Box>
 						{showCreatePageButton && <CreatePageButton />}
 
 						{url && (

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

@@ -16,22 +16,12 @@ interface Props {
 }
 
 const Details = (props: Props) => {
-	const { entityTitle, pageType, platformTitle } = props;
+	const { entityTitle, pageType } = props;
 
 	const url = generateLink(props);
 
 	return (
 		<Flex gap={4} width="100%" direction="column">
-			{platformTitle && (
-				<Flex direction="column" alignItems="start" width="100%" gap={1}>
-					<S.SubtleType variant="omega" fontWeight="bold" textColor="neutral800">
-						Platform
-					</S.SubtleType>
-					<S.SubtleType variant="pi" textColor="neutral600">
-						{platformTitle}
-					</S.SubtleType>
-				</Flex>
-			)}
 			<Flex direction="column" alignItems="start" width="100%" gap={1}>
 				<S.SubtleType variant="omega" fontWeight="bold" textColor="neutral800">
 					{pageType?.title || PAGE_TYPE_PAGE}

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

@@ -3,25 +3,26 @@ 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';
 import { Wrapper } from '../wrapper';
-import { PageType, useGetPageTypes } from '../../../api/page-type';
+import { PageType } from '../../../api/page-type';
 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';
-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 } = useCMEditViewDataManager() as any;
-	const { data: allPageTypes } = useGetPageTypes({});
-	const { data: platforms } = useGetPlatforms({});
-	const [pageTypes, setPageTypes] = useState(allPageTypes);
+	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 { data: pageTypesForPlatform } = useGetPageTypesForPlatform({
+		id: selectedPlatform?.id
+	});
 	const noPlatformSelected = useMemo(() => !Boolean(selectedPlatform), [selectedPlatform]);
 	const [isEditting, setIsEditting] = useState(false);
 	const showEditFields = useMemo(
@@ -41,16 +42,15 @@ export const PageSettings = () => {
 
 	useEffect(() => {
 		setSelectedPageType(initialData?.initialPageType);
-
 		setSelectedPlatform(initialData?.platform?.[0]);
 		setIsEditting(false);
 	}, [initialData]);
 
 	useEffect(() => {
-		if (selectedPlatform?.title) {
-			setPageTypesByPlatform(selectedPlatform.title);
+		if (!initialData?.platform?.[0] && defaultPlatform) {
+			setSelectedPlatform(defaultPlatform);
 		}
-	}, [selectedPlatform, allPageTypes]);
+	}, [initialData, defaultPlatform]);
 
 	const cancelEdit = () => {
 		setIsEditting(false);
@@ -70,7 +70,7 @@ export const PageSettings = () => {
 	};
 
 	const handleSelectPageType = (pageTypeId: string) => {
-		const pageType = pageTypes?.find((pageType) => pageType.id === Number(pageTypeId));
+		const pageType = pageTypesForPlatform?.find((pageType) => pageType.id === Number(pageTypeId));
 
 		if (pageType) {
 			setSelectedPageType(pageType);
@@ -86,45 +86,13 @@ 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);
-
-		const filterPageTypeByPlatform = platFormData[0].pageTypes.filter(
-			(data) => allPageTypes?.find((pageData) => pageData.uid === data.uid)
-		);
-
-		setPageTypes(filterPageTypeByPlatform);
-	};
-
 	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}
+							pageTypes={pageTypesForPlatform}
 							selectedPageType={selectedPageType}
 							onChange={handleSelectPageType}
 							disabled={noPlatformSelected}

package/admin/src/components/EditView/Platform/platform-select.tsx

@@ -16,11 +16,10 @@ export const PlatformSelect = ({ onChange, platforms, selectedPlatform, noLabel
 	return (
 		<SingleSelect
 			label={!noLabel && 'Platform'}
-			placeholder="Choose a platform"
+			placeholder="Kies een platform"
 			value={selectedPlatform?.id || PLATFORM}
 			onChange={onChange}
 		>
-			<SingleSelectOption value={PLATFORM}>Platform</SingleSelectOption>
 			{platforms?.map((pageType: Platform) => (
 				<SingleSelectOption key={pageType?.id} value={pageType?.id}>
 					{pageType?.title}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+
+import PlatformFilter from '../PageFilters/PlatformFilter';
+import { Platform, useGetPlatforms } from '../../api/platform';
+import { useDefaultPlatformFromLocalStorage } from '../../utils/hooks/useDefaultPlatformFromLocalStorage';
+
+import S from './styles';
+
+export interface IGlobalPlatformSelectProps {
+	small?: boolean;
+}
+
+const GlobalPlatformSelect = ({ small }: IGlobalPlatformSelectProps) => {
+	const { pathname } = useLocation();
+	const { push } = useHistory();
+
+	const { data: platforms, isLoading } = useGetPlatforms({});
+	const { selectedPlatform, setSelectedPlatform } = useDefaultPlatformFromLocalStorage();
+
+	const handlePlatformChange = (platform: Platform) => {
+		setSelectedPlatform(platform);
+
+		if (typeof window !== 'undefined' && pathname.split('/').filter(Boolean).length > 3) {
+			push('/');
+		}
+	};
+
+	if (isLoading || (platforms || [])?.length < 2) {
+		return null;
+	}
+
+	return (
+		<S.Wrapper small={small}>
+			<PlatformFilter platforms={platforms} onChange={handlePlatformChange} selectedPlatform={selectedPlatform} />
+		</S.Wrapper>
+	);
+};
+
+export { GlobalPlatformSelect };

package/admin/src/components/GlobalPlatformSelect/styles.ts

@@ -0,0 +1,27 @@
+import styled, { css } from 'styled-components';
+
+const Wrapper = styled.div<{ small?: boolean }>`
+	${({ theme, small }) => {
+		return css`
+			width: ${small ? '72px' : '224px'};
+			&:hover {
+				width: 224px;
+				transition: ${small ? 'width 0.15s ease-in-out' : 'none'};
+			}
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+			position: fixed;
+			top: 64px;
+			left: 0;
+			z-index: 1000;
+			padding: 0 8px 0 12px;
+		`;
+	}}
+`;
+
+const GlobalPlatformSelectStyles = {
+	Wrapper
+};
+
+export default GlobalPlatformSelectStyles;

package/admin/src/components/PageFilters/PlatformFilter/index.tsx

@@ -2,22 +2,26 @@ import React from 'react';
 
 import { SingleSelectOption, SingleSelect } from '@strapi/design-system';
 import { Platform } from '../../../api/platform';
-import { PLATFORM_NO_FILTER } from '../../../constants';
 
 interface Props {
-	onChange?: (platformId: string) => void;
-	selectedPlatform?: string;
+	onChange?: (platform: Platform) => void;
+	selectedPlatform?: Platform;
 	platforms?: Platform[];
 }
 
 const PlatformFilter = ({ onChange, platforms, selectedPlatform }: Props) => {
+	const handleChange = (platformId?: string) => {
+		const foundPlatform = platforms?.find((platform) => platform?.id === Number(platformId));
+
+		if (foundPlatform) {
+			onChange?.(foundPlatform);
+		}
+	};
+
 	return (
-		<SingleSelect placeholder="Select platform" onChange={onChange} size="S" value={selectedPlatform}>
-			<SingleSelectOption key={PLATFORM_NO_FILTER} value={PLATFORM_NO_FILTER}>
-				All Platforms
-			</SingleSelectOption>
+		<SingleSelect placeholder="Selecteer platform" onChange={handleChange} size="S" value={selectedPlatform?.id}>
 			{platforms?.map((platform: Platform) => (
-				<SingleSelectOption key={platform?.id} value={platform?.title}>
+				<SingleSelectOption key={platform?.id} value={platform?.id}>
 					{platform?.title}
 				</SingleSelectOption>
 			))}

package/admin/src/components/PageFilters/filters.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import set from 'lodash/set';
 
 import { Stack } from '@strapi/design-system';
@@ -6,11 +6,12 @@ import { useQueryParams } from '@strapi/helper-plugin';
 
 import PageTypeFilter from './PageTypeFilter';
 import { PAGE_TYPE_PAGE, PLATFORM } from '../../../../shared/utils/constants';
-import PlatformFilter from './PlatformFilter';
 import { Platform, useGetPlatforms } from '../../api/platform';
 import { PAGE_TYPE, PAGE_TYPE_NO_FILTER, PLATFORM_NO_FILTER } from '../../constants';
 import { PageType } from '../../api/page-type';
 import { useGetPageTypesForPlatform } from '../../api/platform-page-types';
+import { useDefaultPlatformFromLocalStorage } from '../../utils/hooks/useDefaultPlatformFromLocalStorage';
+import { useHideOverviewFilterTags } from '../../utils/hooks/useHideOverviewFilterTags';
 
 interface PageFiltersProps {
 	hidePageType?: boolean;
@@ -18,16 +19,18 @@ interface PageFiltersProps {
 
 const PageFilters = ({ hidePageType }: PageFiltersProps) => {
 	const [{ query }, setQuery] = useQueryParams() as any;
-
+	const { selectedPlatform: globalSelectedPlatform } = useDefaultPlatformFromLocalStorage();
+	useHideOverviewFilterTags();
 	const { data: platforms } = useGetPlatforms({});
 
-	const selectedPlatformTitle = useMemo(() => getPlatformFromQuery(query, platforms), [query, platforms]);
-
 	const { data: pageTypesForPlatform } = useGetPageTypesForPlatform({
-		id: platforms?.find((p) => p.title === selectedPlatformTitle)?.id
+		id: globalSelectedPlatform?.id
 	});
 
-	const selectedPageTypeUid = useMemo(() => getPageTypeFromQuery(query, []), [query, platforms, selectedPlatformTitle]);
+	const selectedPageTypeUid = useMemo(
+		() => getPageTypeFromQuery(query, []),
+		[query, platforms, globalSelectedPlatform]
+	);
 
 	const handleFilterChange = (
 		filters: Record<string, any>,
@@ -62,13 +65,13 @@ const PageFilters = ({ hidePageType }: PageFiltersProps) => {
 		});
 	};
 
-	const handlePlatformSelect = (platformId: string) => {
-		if (platformId === PLATFORM_NO_FILTER) {
+	const handlePlatformSelect = (platformTitle: string) => {
+		if (platformTitle === PLATFORM_NO_FILTER) {
 			removeFilters(PLATFORM);
 			return;
 		}
 
-		handleFilterChange(getPlatformQueryFilter(platformId), PLATFORM, PAGE_TYPE);
+		handleFilterChange(getPlatformQueryFilter(platformTitle), PLATFORM, PAGE_TYPE);
 	};
 
 	const handlePageTypeSelect = (pageType: string) => {
@@ -85,9 +88,15 @@ const PageFilters = ({ hidePageType }: PageFiltersProps) => {
 		handleFilterChange(getPageTypeQueryFilter(pageType), PAGE_TYPE);
 	};
 
+	useEffect(() => {
+		const selectedPlatformFromQuery = getPlatformFromQuery(query, platforms);
+		if (globalSelectedPlatform?.title && globalSelectedPlatform.title !== selectedPlatformFromQuery) {
+			handlePlatformSelect(globalSelectedPlatform.title);
+		}
+	}, [query, platforms, globalSelectedPlatform]);
+
 	return (
 		<Stack horizontal spacing={2}>
-			<PlatformFilter onChange={handlePlatformSelect} platforms={platforms} selectedPlatform={selectedPlatformTitle} />
 			{!hidePageType && (
 				<PageTypeFilter
 					onChange={handlePageTypeSelect}

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

@@ -4,11 +4,91 @@
  *
  */
 
-import React from 'react';
-import { Puzzle } from '@strapi/icons';
+import React, { useLayoutEffect, useRef } from 'react';
+
+import { GlobalPlatformSelect } from '../GlobalPlatformSelect';
+import { Portal } from '@strapi/design-system';
+import { findElementParent } from '../../utils/findElementParent';
+import { findDomElement } from '../../utils/findDomElement';
+import { useDefaultPlatformFromLocalStorage } from '../../utils/hooks/useDefaultPlatformFromLocalStorage';
 
 const PluginIcon = () => {
-	return <button onClick={() => console.log('ho')}>hooi</button>;
+	const ref = useRef<HTMLDivElement>(null);
+	const [smallNav, setSmallNav] = React.useState<boolean>();
+	const { selectedPlatform, platforms } = useDefaultPlatformFromLocalStorage();
+
+	const setHrStyles = () => {
+		const hr = findNavHr();
+
+		if (hr) {
+			hr.style.marginTop = '40px';
+			const navW = hr?.getBoundingClientRect().width;
+			setSmallNav(navW < 100 ? true : false);
+		}
+	};
+
+	useLayoutEffect(() => {
+		if (platforms && platforms.length > 1) {
+			setHrStyles();
+		}
+	}, [platforms]);
+
+	useLayoutEffect(() => {
+		removePluginLink(ref);
+	}, [ref]);
+
+	useLayoutEffect(() => {
+		changeStrapiTitle(selectedPlatform?.title);
+	}, [selectedPlatform]);
+
+	return (
+		<div ref={ref}>
+			<Portal>
+				<GlobalPlatformSelect small={smallNav} />
+			</Portal>
+		</div>
+	);
 };
 
 export default PluginIcon;
+
+const changeStrapiTitle = (selectedPlatformTitle?: string) => {
+	let element = findDomElement(`//nav//a//p[contains(., 'Workplace')]`);
+
+	if (element) {
+		// If element is found, make sure to add a data attribute, so we can find it later
+		element.dataset.strapiWorkplace = 'platformTitle';
+	}
+
+	if (!element) {
+		element = findDomElement(`//nav//a//p[@data-strapi-workplace="platformTitle"]`);
+	}
+
+	if (element && selectedPlatformTitle) {
+		element.textContent = selectedPlatformTitle;
+	}
+};
+
+const removePluginLink = (ref?: React.RefObject<HTMLDivElement>) => {
+	if (ref?.current) {
+		const anchorParent = findElementParent(ref.current, 'LI');
+		if (anchorParent) {
+			anchorParent?.remove();
+		}
+	}
+};
+
+const findNavHr = (): HTMLElement | undefined => {
+	if (typeof window === 'undefined') {
+		return;
+	}
+
+	let hrNode: HTMLElement | undefined;
+	document.querySelector('nav')?.childNodes.forEach((node) => {
+		if (node?.nodeName === 'HR') {
+			hrNode = node as HTMLElement;
+		}
+	});
+
+	return hrNode;
+};

package/admin/src/index.tsx

@@ -22,12 +22,16 @@ export default {
 
 		app.addMenuLink({
 			to: '/plugins/strapi-plugin-page-builder',
-			icon: PluginIcon,
+			icon: PluginIcon, // This really is a plugin icon, I promise!
 			intlLabel: {
 				id: pluginId,
-				defaultMessage: 'My plugin'
+				defaultMessage: ' '
+			},
+			Component: async () => {
+				const component = await import(/* webpackChunkName: "[request]" */ './pages/app');
+
+				return component;
 			},
-			Component: PluginIcon,
 			permissions: [] // permissions to apply to the link
 		});
 

package/admin/src/pages/app/index.tsx

@@ -0,0 +1,14 @@
+import React, { useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+
+const App = () => {
+	const { push } = useHistory();
+
+	useEffect(() => {
+		push('/');
+	}, []);
+
+	return <></>;
+};
+
+export default App;

package/admin/src/utils/findDomElement.ts

@@ -0,0 +1,6 @@
+export const findDomElement = (expression: string): HTMLElement => {
+	const xPathResult = document.evaluate(expression, document, null, XPathResult.ANY_TYPE, null);
+	const element = xPathResult.iterateNext();
+
+	return element as HTMLElement;
+};

package/admin/src/utils/findElementParent.ts

@@ -0,0 +1,20 @@
+export const findElementParent = (rootEl: HTMLElement, element?: string, maxDepth = 10): HTMLElement | undefined => {
+	let found = false;
+	let el = rootEl;
+	let depth = 0;
+
+	while (!found && depth <= maxDepth) {
+		if (el?.tagName === element) {
+			found = true;
+		} else {
+			el = el?.parentElement as HTMLElement;
+			depth++;
+		}
+	}
+
+	if (!found) {
+		return;
+	}
+
+	return el;
+};

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

@@ -0,0 +1,30 @@
+import { useLocalStorage } from '@mantine/hooks';
+import { Platform, useGetPlatforms } from '../../api/platform';
+import { useEffect } from 'react';
+
+const useDefaultPlatformFromLocalStorage = () => {
+	const { data: platforms, isLoading } = useGetPlatforms({});
+	const [selectedPlatform, setSelectedPlatform] = useLocalStorage<Platform | undefined>({
+		key: 'selectedPlatform',
+		defaultValue: undefined,
+		getInitialValueInEffect: false
+	});
+
+	useEffect(() => {
+		if (
+			!isLoading &&
+			platforms?.[0]?.title &&
+			(!selectedPlatform?.id || !platforms.find((platform) => platform.id === selectedPlatform.id))
+		) {
+			setSelectedPlatform(platforms[0]);
+		}
+
+		if (!isLoading && (platforms || []).length === 0) {
+			setSelectedPlatform(undefined);
+		}
+	}, [isLoading, selectedPlatform]);
+
+	return { selectedPlatform, setSelectedPlatform, platforms };
+};
+
+export { useDefaultPlatformFromLocalStorage };