@griddo/ax 11.13.2 → 11.13.3-rc.1

package/src/modules/Navigation/Defaults/DefaultsEditor/index.tsx

@@ -1,8 +1,17 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { connect } from "react-redux";
 import { withErrorBoundary } from "react-error-boundary";
 
-import { IRootState, ISite, INotification, ILanguage, INavigationLanguage } from "@ax/types";
+import type {
+	IRootState,
+	ISite,
+	INotification,
+	ILanguage,
+	INavigationLanguage,
+	IHeader,
+	IFooter,
+	INavigation,
+} from "@ax/types";
 import { useIsDirty, useModal, usePermission } from "@ax/hooks";
 import { RouteLeavingGuard } from "@ax/guards";
 
@@ -41,65 +50,67 @@ const DefaultsEditor = (props: IProps) => {
 	const { isOpen, toggleModal } = useModal();
 	const { isOpen: isRestoreOpen, toggleModal: toggleRestoreModal } = useModal();
 	const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
-	const currentDefaultNav = currentDefaultsContent.find((item: any) => item.setAsDefault);
+	const currentDefaultNav = currentDefaultsContent.find((item) => item.setAsDefault);
 	const isNew = !editorContent?.id;
 	const isDeleted = !!editorContent?.deleted;
 
-	const deletedNotificationText = `This ${editorContent?.type} has been deleted and can’t be edited. It will be permanently removed from the trash after 30 days.`;
+	const deletedNotificationText = `This ${editorContent?.type} has been deleted and can't be edited. It will be permanently removed from the trash after 30 days.`;
 
-	const currentLanguages: ILanguage[] = [];
-	navLanguages?.forEach((navLang) => {
-		const currentLang = siteLanguages.find((lang) => lang.id === navLang.languageId);
-		if (currentLang) {
-			currentLanguages.push(currentLang);
-		}
-	});
+	const currentLanguages = useMemo(() => {
+		if (!navLanguages) return [];
+		return navLanguages
+			.map((navLang) => siteLanguages.find((siteLang) => siteLang.id === navLang.languageId))
+			.filter((siteLang): siteLang is ILanguage => !!siteLang);
+	}, [navLanguages, siteLanguages]);
 
-	const isSetAsDefault = editorContent && editorContent.setAsDefault;
+	const isSetAsDefault = editorContent?.setAsDefault;
 	const browserRef = useRef<HTMLDivElement>(null);
 
-	const isAllowedToCreateHeaders = usePermission("navigation.createSiteHeaders") && selectedDefault === "Headers";
-	const isAllowedToCreateFooters = usePermission("navigation.createSiteFooters") && selectedDefault === "Footers";
+	const isAllowedToCreate = usePermission(`navigation.createSite${selectedDefault}`);
+
+	useEffect(() => {
+		const init = async () => await getValues();
+		init();
+	}, [getValues]);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		const handleGetValues = async () => await getValues();
-		handleGetValues();
 		if (isNew) {
 			setIsDirty(false);
 		}
-	}, []);
+	}, [isNew, setIsDirty]);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
+	// biome-ignore lint/correctness/useExhaustiveDependencies: resetDirty is not referentially stable (not wrapped in useCallback)
 	useEffect(() => {
 		resetDirty();
 	}, [lang]);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		const navigationModuleComponent = currentSiteInfo && currentSiteInfo.navigationModules?.[editorContent?.type];
-		const currentNavigation = currentDefaultsContent?.find((item: any) => item.id === editorContent?.id);
+		const editorType = editorContent?.type;
+		const navigationModuleComponent = editorType ? currentSiteInfo?.navigationModules?.[editorType] : undefined;
+		const currentNavigation = currentDefaultsContent?.find((item: IHeader | IFooter) => item.id === editorContent?.id);
 		if (navigationModuleComponent && editorContent && currentNavigation) {
 			const isNavigationModuleChanged = navigationModuleComponent !== currentNavigation.component;
-			isNavigationModuleChanged && setIsDirty(true);
+			if (isNavigationModuleChanged) setIsDirty(true);
 		}
-	}, [currentSiteInfo, editorContent?.id]);
+	}, [currentSiteInfo, editorContent, currentDefaultsContent, setIsDirty]);
 
 	const save = async () => {
 		const isSaved =
 			isNew || isNewTranslation
 				? await createNavigation(browserRef?.current)
-				: await updateNavigation(editorContent.id, editorContent, true, browserRef?.current);
+				: editorContent?.id
+					? await updateNavigation(editorContent.id, editorContent, true, browserRef?.current)
+					: false;
 		if (isSaved) resetDirty();
 	};
 
-	const saveAsDefault = () => {
-		save();
+	const saveAsDefault = async () => {
+		await save();
 		toggleModal();
 	};
 
 	const saveButtonAction = () => {
-		const isCurrentDefault = currentDefaultNav && currentDefaultNav.id === editorContent.id;
+		const isCurrentDefault = currentDefaultNav && currentDefaultNav.id === editorContent?.id;
 		const isNewDefault = isNew || !isCurrentDefault;
 		isSetAsDefault && isNewDefault && !isNewTranslation ? toggleModal() : save();
 	};
@@ -107,15 +118,13 @@ const DefaultsEditor = (props: IProps) => {
 	const rightButtonProps = {
 		label: !isDirty && !isNewTranslation && !isNew ? "Saved" : isSaving ? "Saving" : "Save",
 		disabled: (!isDirty && !isNewTranslation && !isNew) || isSaving,
-		action: () => saveButtonAction(),
+		action: saveButtonAction,
 	};
 
-	const getNavigation = (id: number): Promise<void> => {
-		return new Promise(() => {
-			const isHeader = selectedDefault === "Headers";
-			isHeader ? setHeader(id) : setFooter(id);
-			getValues();
-		});
+	const getNavigation = async (id: number) => {
+		const isHeader = selectedDefault === "Headers";
+		isHeader ? setHeader(id) : setFooter(id);
+		await getValues();
 	};
 
 	const getSelectedNavLanguage = (language: ILanguage) =>
@@ -135,14 +144,15 @@ const DefaultsEditor = (props: IProps) => {
 			setIsDirty(true);
 			createTranslation(true);
 			await getMenus();
-			editorContent && (await getNavigation(editorContent.id));
+			editorContent?.id && (await getNavigation(editorContent.id));
 		}
 	};
 
 	const handleRestorePage = async () => {
+		if (!editorContent?.id) return;
 		const isRestored = await restoreNavigation(editorContent.id, editorContent.type);
 		if (isRestored) {
-			isRestoreOpen && toggleRestoreModal();
+			if (isRestoreOpen) toggleRestoreModal();
 			await getValues();
 		}
 	};
@@ -161,8 +171,7 @@ const DefaultsEditor = (props: IProps) => {
 	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
 	const goBack = (path: string) => setHistoryPush(path, true);
 
-	const availableLanguages =
-		(isAllowedToCreateHeaders || isAllowedToCreateFooters) && !isDeleted ? siteLanguages : currentLanguages;
+	const availableLanguages = isAllowedToCreate && !isDeleted ? siteLanguages : currentLanguages;
 
 	const backLinkRoute = "/sites/navigations/modules";
 
@@ -172,7 +181,7 @@ const DefaultsEditor = (props: IProps) => {
 		<>
 			<RouteLeavingGuard when={isDirty || isSaving} action={goBack} text={leavingGuardText} />
 			<MainWrapper
-				title={editorContent?.title}
+				title={editorContent?.title ?? ""}
 				backLink={backLinkRoute}
 				rightButton={rightButtonProps}
 				fixedAppBar={true}
@@ -251,9 +260,9 @@ interface IStateProps {
 	isLoading: boolean;
 	lang: { locale: string; id: number | null };
 	siteLanguages: ILanguage[];
-	currentDefaultsContent: any;
-	selectedDefault: any;
-	editorContent: any;
+	currentDefaultsContent: (IHeader | IFooter)[];
+	selectedDefault: string;
+	editorContent: INavigation | null;
 	header: number | null;
 	footer: number | null;
 	navLanguages: INavigationLanguage[];
@@ -265,7 +274,6 @@ const mapDispatchToProps = {
 	setHistoryPush: appActions.setHistoryPush,
 	setLanguage: appActions.setLanguage,
 	getValues: navigationActions.getValues,
-	setSchema: navigationActions.setSchema,
 	createNavigation: navigationActions.createNavigation,
 	updateNavigation: navigationActions.updateNavigation,
 	createTranslation: navigationActions.createNewTranslation,
@@ -280,7 +288,12 @@ interface IDispatchProps {
 	setLanguage(lang: { locale: string; id: number | null }): void;
 	getValues(): Promise<void>;
 	createNavigation(navHtml?: HTMLDivElement | null): Promise<boolean>;
-	updateNavigation(navID: number, data: any, fromEditor?: boolean, navHtml?: HTMLDivElement | null): Promise<boolean>;
+	updateNavigation(
+		navID: number,
+		data: INavigation,
+		fromEditor?: boolean,
+		navHtml?: HTMLDivElement | null,
+	): Promise<boolean>;
 	createTranslation(isNewTranslation: boolean): void;
 	setHeader(id: number | null): void;
 	setFooter(id: number | null): void;

package/src/modules/Navigation/Defaults/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { connect } from "react-redux";
 
 import { ErrorToast, MainWrapper, Notification, TableList, Toast } from "@ax/components";
@@ -16,6 +16,9 @@ import ReplaceNavModal from "./ReplaceNavModal";
 
 import * as S from "./style";
 
+const ITEMS_PER_PAGE = 50;
+const DEFAULT_TYPES = ["Headers", "Footers"];
+
 const DefaultsList = (props: IProps): JSX.Element => {
 	const {
 		currentDefaultsContent,
@@ -48,12 +51,13 @@ const DefaultsList = (props: IProps): JSX.Element => {
 	const [isNavigationNotificationOpen, setIsNavigationNotificationOpen] = useState(false);
 	const { isOpen: isReplaceOpened, toggleModal: toggleReplaceModal } = useModal();
 
-	const isAllowedToCreateHeaders = usePermission("navigation.createSiteHeaders") && selectedDefault === "Headers";
-	const isAllowedToCreateFooters = usePermission("navigation.createSiteFooters") && selectedDefault === "Footers";
-	const isAllowedToDeleteHeaders = usePermission("navigation.deleteSiteHeaders") && selectedDefault === "Headers";
-	const isAllowedToDeleteFooters = usePermission("navigation.deleteSiteFooters") && selectedDefault === "Footers";
+	const isAllowedToCreate = usePermission(`navigation.createSite${selectedDefault}`);
+	const isAllowedToDelete = usePermission(`navigation.deleteSite${selectedDefault}`);
 
-	const navIds = currentDefaultsContent?.map((nav: any) => nav.id);
+	const navIds = useMemo(
+		() => currentDefaultsContent?.map((nav: IHeader | IFooter) => nav.id),
+		[currentDefaultsContent],
+	);
 
 	const {
 		resetBulkSelection,
@@ -66,99 +70,87 @@ const DefaultsList = (props: IProps): JSX.Element => {
 		setHoverCheck,
 	} = useBulkSelection(navIds);
 
-	const itemsPerPage = 50;
-	const defaultTypes = ["Headers", "Footers"];
-
 	const currentType = selectedDefault === "Headers" ? "header" : "footer";
 
 	const showNavigationModulesWarning = isMultipleNavigationModules();
 
-	const getParams = useCallback(() => {
-		return {
-			page,
-			itemsPerPage,
-			pagination: true,
-			deleted: false,
-			include_draft: false,
-		};
-	}, [page]);
-
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
-	const getContents = useCallback((selectedDefault: string) => {
-		const params: any = getParams();
-		params.selectedDefault = selectedDefault;
-		selectedDefault === "Headers" ? getHeaders(params) : getFooters(params);
-		setSelectedDefault(selectedDefault);
-	}, []);
-
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		getContents(selectedDefault);
+		const fetchDefaults = async () => {
+			const params = {
+				page,
+				itemsPerPage: ITEMS_PER_PAGE,
+				pagination: true,
+				deleted: false,
+				include_draft: false,
+				selectedDefault,
+				lang,
+			};
+			selectedDefault === "Headers" ? await getHeaders(params) : await getFooters(params);
+		};
+		fetchDefaults();
 		if (tableRef.current) {
 			tableRef.current.scrollTo(0, 0);
 		}
-	}, [lang]);
-
-	const memoizedGetMenus = useCallback(() => getMenus(), [getMenus]);
+	}, [lang, page, selectedDefault, getHeaders, getFooters]);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		resetDefaultsValues();
-		memoizedGetMenus();
-	}, []);
+		const init = async (_lang: typeof lang) => {
+			await resetDefaultsValues();
+			await getMenus();
+		};
+		init(lang);
+	}, [lang, resetDefaultsValues, getMenus]);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		const isNavigationModulesChanged =
+		const isNavigationModulesChanged = Boolean(
 			currentSiteInfo?.navigationModules?.[currentType] &&
-			currentDefaultsContent.some(
-				(navigation) => navigation.component !== currentSiteInfo?.navigationModules[currentType],
-			);
+				currentDefaultsContent.some(
+					(navigation) => navigation.component !== currentSiteInfo?.navigationModules[currentType],
+				),
+		);
 		setIsNavigationNotificationOpen(isNavigationModulesChanged);
-	}, [currentDefaultsContent]);
+	}, [currentDefaultsContent, currentSiteInfo, currentType]);
 
-	const handleClick = (selectedDefault: string) => {
-		unselectAllItems();
-		getContents(selectedDefault);
+	const handleClick = (newDefault: string) => {
+		resetBulkSelection();
+		setPage(1);
+		setSelectedDefault(newDefault);
 	};
 
-	const setContent = (item: any) => {
+	const setContent = (item: IHeader | IFooter) => {
 		const { type, id } = item;
-		const isHeader = type === "header";
-		isHeader ? setHeader(id) : setFooter(id);
+		type === "header" ? setHeader(id) : setFooter(id);
 	};
 
 	const addNewDefault = () => {
 		setHeader(null);
 		setFooter(null);
-		const path = "/sites/navigations/editor";
-		setHistoryPush(path, true);
+		setHistoryPush("/sites/navigations/editor", true);
 	};
 
-	const rightButtonProps =
-		isAllowedToCreateHeaders || isAllowedToCreateFooters
-			? {
-					label: "New",
-					action: () => addNewDefault(),
-				}
-			: undefined;
+	const rightButtonProps = isAllowedToCreate
+		? {
+				label: "New",
+				action: addNewDefault,
+			}
+		: undefined;
 
 	const pagination = {
 		setPage,
-		itemsPerPage,
+		itemsPerPage: ITEMS_PER_PAGE,
 		totalItems,
 		currPage: page,
 	};
 
-	const undoAction = () => {
+	const undoAction = async () => {
 		if (deletedNav) {
-			restoreNavigation(deletedNav, currentType);
+			await restoreNavigation(deletedNav, currentType);
 		}
 		setIsVisible(false);
 	};
 
 	const toastProps = {
-		action: () => undoAction(),
+		action: undoAction,
 		setIsVisible,
 		message: deletedNav ? `${capitalize(currentType)} deleted` : "",
 	};
@@ -173,11 +165,9 @@ const DefaultsList = (props: IProps): JSX.Element => {
 		togglePagesToast();
 	};
 
-	const handleErrorAction = () => toggleReplaceModal();
-
 	const bulkDelete = async () => {
 		setIsBulkLoading(true);
-		const deleted = await deleteNavigation(selectedItems.all, currentType, handleErrorAction);
+		const deleted = await deleteNavigation(selectedItems.all, currentType, toggleReplaceModal);
 		setDeletedNav(selectedItems.all);
 		if (deleted) {
 			toggleToast();
@@ -185,44 +175,53 @@ const DefaultsList = (props: IProps): JSX.Element => {
 		setIsBulkLoading(false);
 	};
 
-	const unselectAllItems = () => resetBulkSelection();
-
-	const selectItems = () => (checkState.isAllSelected ? unselectAllItems() : handleSelectAll());
-
-	const handleSelectAll = () => selectAllItems();
-
-	const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
-
-	const bulkActions =
-		isAllowedToDeleteFooters || isAllowedToDeleteHeaders
-			? [
-					{
-						icon: "delete",
-						text: "delete",
-						action: bulkDelete,
-					},
-				]
-			: [];
-
-	const TableHeader = (
-		<BulkHeader
-			showBulk={areItemsSelected(navIds)}
-			bulkActions={bulkActions}
-			selectAllItems={handleSelectAll}
-			totalItems={totalItems}
-			selectItems={selectItems}
-			selectedItems={selectedItems}
-			checkState={checkState}
-			isScrolling={isScrolling}
-			setHoverCheck={setHoverCheck}
-			isLoading={isBulkLoading}
-		/>
+	const onScroll = (e: React.UIEvent<HTMLDivElement>) => setIsScrolling((e.target as HTMLDivElement).scrollTop > 0);
+
+	const bulkActions = isAllowedToDelete
+		? [
+				{
+					icon: "delete",
+					text: "delete",
+					action: bulkDelete,
+				},
+			]
+		: [];
+
+	const TableHeader = useMemo(
+		() => (
+			<BulkHeader
+				showBulk={areItemsSelected(navIds)}
+				bulkActions={bulkActions}
+				selectAllItems={selectAllItems}
+				totalItems={totalItems}
+				selectItems={() => (checkState.isAllSelected ? resetBulkSelection() : selectAllItems())}
+				selectedItems={selectedItems}
+				checkState={checkState}
+				isScrolling={isScrolling}
+				setHoverCheck={setHoverCheck}
+				isLoading={isBulkLoading}
+			/>
+		),
+		[
+			areItemsSelected,
+			navIds,
+			bulkActions,
+			selectAllItems,
+			resetBulkSelection,
+			totalItems,
+			selectedItems,
+			checkState,
+			isScrolling,
+			setHoverCheck,
+			isBulkLoading,
+		],
 	);
 
 	const goToSiteSettings = () => setHistoryPush("/sites/settings/globals");
 
 	const handleLanguage = (language: ILanguage) => {
 		const { locale, id } = language;
+		setPage(1);
 		setLanguage({ locale, id });
 	};
 
@@ -235,7 +234,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
 			languageAction={handleLanguage}
 		>
 			<S.DefaultListWrapper>
-				<DefaultNav current={selectedDefault} defaultTypes={defaultTypes} onClick={handleClick} />
+				<DefaultNav current={selectedDefault} defaultTypes={DEFAULT_TYPES} onClick={handleClick} />
 				<S.TableWrapper>
 					<ErrorToast />
 					{isNavigationNotificationOpen && (
@@ -300,21 +299,21 @@ const mapStateToProps = (state: IRootState) => ({
 
 interface IDispatchProps {
 	setLanguage(lang: { locale: string; id: number | null }): void;
-	getHeaders(params: any): void;
-	getFooters(params: any): void;
+	getHeaders(params: Record<string, unknown>): Promise<void>;
+	getFooters(params: Record<string, unknown>): Promise<void>;
 	setSelectedDefault(id: string): void;
-	setHistoryPush(path: string, isEditor?: boolean): any;
+	setHistoryPush(path: string, isEditor?: boolean): void;
 	setHeader(id: number | null): void;
 	setFooter(id: number | null): void;
-	restoreNavigation(navID: number | number[], type: string): void;
+	restoreNavigation(navID: number | number[], type: string): Promise<boolean>;
 	deleteNavigation(navID: number[], type: string, errorAction: () => void): Promise<boolean>;
-	getMenus(): void;
-	resetDefaultsValues(): void;
+	getMenus(): Promise<void>;
+	resetDefaultsValues(): Promise<void>;
 }
 
 interface IDefaultsProps {
 	lang: { locale: string; id: number | null };
-	siteLanguages: any[];
+	siteLanguages: ILanguage[];
 	selectedDefault: string;
 	currentDefaultsContent: (IHeader | IFooter)[];
 	totalItems: number;

package/src/modules/PageEditor/index.tsx

@@ -73,6 +73,7 @@ const PageEditor = (props: IProps) => {
 		setCurrentPageID,
 		restorePage,
 		schemaVersion,
+		setIsLoading,
 		updateEditorContent,
 	} = props;
 
@@ -145,6 +146,9 @@ const PageEditor = (props: IProps) => {
 		const { pageID, getPage, sendPagePing } = props;
 
 		const handleGetPage = async () => {
+			if (isNewTranslation) {
+				await getDefaults();
+			}
 			await getPage(pageID);
 		};
 
@@ -501,7 +505,7 @@ const PageEditor = (props: IProps) => {
 		const { getPage } = props;
 		const pageID = isDraft ? editorContent.draftFromPage : editorContent.haveDraftPage;
 		await getPage(pageID);
-		resetDirty(true, true);
+		resetDirty();
 	};
 
 	const toggleDraftPage = () => {
@@ -614,6 +618,7 @@ const PageEditor = (props: IProps) => {
 		pageLanguages.find((pageLang) => pageLang.languageId === language.id);
 
 	const handleLanguage = async (language: ILanguage) => {
+		setIsLoading(true);
 		const { locale, id } = language;
 		setLanguage({ locale, id });
 
@@ -631,6 +636,7 @@ const PageEditor = (props: IProps) => {
 			createNewTranslation(true);
 			await getPage(pageID);
 		}
+		setIsLoading(false);
 	};
 
 	const handleRestorePage = async () => {
@@ -945,6 +951,7 @@ const mapDispatchToProps = {
 	updatePageStatus: pageEditorActions.updatePageStatus,
 	setHistoryPush: appActions.setHistoryPush,
 	setLanguage: appActions.setLanguage,
+	setIsLoading: appActions.setIsLoading,
 	createNewTranslation: pageEditorActions.createNewTranslation,
 	setTab: pageEditorActions.setTab,
 	getSiteDataPackbyTemplate: dataPacksActions.getSiteDataPackbyTemplate,
@@ -985,6 +992,7 @@ interface IPageEditorDispatchProps {
 	schedulePublication(date: string | null, isDraft: boolean): Promise<boolean>;
 	setCurrentPageID: (currentPageID: number | null) => void;
 	restorePage(id: number | number[]): Promise<boolean>;
+	setIsLoading(loading: boolean): void;
 	updateEditorContent(selectedEditorID: number, key: string, value: any): void;
 }
 

package/src/modules/PublicPreview/index.tsx

@@ -39,8 +39,9 @@ const PublicPreview = () => {
 					setShareEndDate(shareResponse.data.endDate);
 				}
 			} else {
-				setTokenError(response.status === 404 ? "404" : response.status === 400 ? "linkExpired" : "wrong");
+				setTokenError(response.status === 404 ? "404" : response.status === 410 ? "linkExpired" : "wrong");
 			}
+
 			setIsLoading(false);
 		};