@griddo/ax 12.6.1 → 12.6.2

package/src/modules/Analytics/index.tsx

@@ -1,25 +1,22 @@
-import React, { memo, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
 
-import { ErrorToast, FieldsBehavior, Loading, MainWrapper } from "@ax/components";
-import { analyticsActions } from "@ax/containers/Analytics";
+import type { IAnalytics, IDimension, IDimensionsGroup, IRootState } from "@ax/types";
 import { appActions } from "@ax/containers/App";
+import { analyticsActions } from "@ax/containers/Analytics";
+import { MainWrapper, ErrorToast, Loading, FieldsBehavior } from "@ax/components";
 import { RouteLeavingGuard } from "@ax/guards";
-import { useIsDirty, useModal } from "@ax/hooks";
-import { useAppDispatch, useAppSelector } from "@ax/store";
-import type { IDimension, IDimensionsGroup } from "@ax/types";
+import { useIsDirty } from "@ax/hooks";
+import { useModal } from "@ax/hooks";
 
 import DimensionItem from "./DimensionItem";
 import DimensionPanel from "./DimensionPanel";
 import GroupItem from "./GroupItem";
 import GroupPanel from "./GroupPanel";
-
 import * as S from "./style";
 
-const Analytics = (): JSX.Element => {
-	const dispatch = useAppDispatch();
-	const isSaving = useAppSelector((state) => state.app.isSaving);
-	const isLoading = useAppSelector((state) => state.app.isLoading);
-	const analytics = useAppSelector((state) => state.analytics);
+const Analytics = (props: IProps): JSX.Element => {
+	const { isSaving, isLoading, analytics, getAnalytics, setHistoryPush, updateAnalytics } = props;
 
 	const [analyticsState, setAnalyticsState] = useState(analytics);
 	const { isDirty, resetDirty } = useIsDirty(analyticsState);
@@ -34,27 +31,16 @@ const Analytics = (): JSX.Element => {
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		// `null` is the global scope, which the API spells "global".
-		dispatch(analyticsActions.getAnalytics(null));
+		const handleGetAnalytics = async () => await getAnalytics();
+		handleGetAnalytics();
 	}, []);
 
-	// `resetDirty()`, not `setIsDirty(false)`: it also moves useIsDirty's baseline to the
-	// state being hydrated here. useIsDirty snapshots its baseline during render, so on
-	// the first visit — nothing persisted for this scope — the store is still the initial
-	// state and the empty→loaded hop reads as an edit: Save enabled and the leave guard
-	// armed before the user touches anything, against this screen's own AC6. Same mine as
-	// Settings/Social (docs/RTK-MIGRATION.md §5).
 	useEffect(() => {
 		setAnalyticsState(analytics);
-		resetDirty();
-	}, [analytics, resetDirty]);
+	}, [analytics]);
 
 	const handleSave = async () => {
-		// `.unwrap()` is what hands over handleRequest's boolean: the dispatch itself
-		// resolves to the fulfilled action, which would be truthy even on failure.
-		const isSaved = await dispatch(
-			analyticsActions.updateAnalytics({ analytics: analyticsState, siteId: null }),
-		).unwrap();
+		const isSaved = await updateAnalytics(analyticsState);
 		if (isSaved) resetDirty();
 	};
 
@@ -123,7 +109,7 @@ const Analytics = (): JSX.Element => {
 		changeGroups(updatedGroups);
 	};
 
-	const setRoute = (path: string) => dispatch(appActions.setHistoryPush(path));
+	const setRoute = (path: string) => setHistoryPush(path);
 	const modalText = (
 		<>
 			Some analytics <strong>are not saved</strong>.{" "}
@@ -137,7 +123,7 @@ const Analytics = (): JSX.Element => {
 	return (
 		<>
 			<RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
-			<MainWrapper backLink={false} title="Analytics Settings" rightButton={rightButtonProps} screen="analytics-global">
+			<MainWrapper backLink={false} title="Analytics Settings" rightButton={rightButtonProps}>
 				<ErrorToast />
 				<S.Wrapper>
 					<S.FormWrapper>
@@ -200,7 +186,30 @@ const Analytics = (): JSX.Element => {
 	);
 };
 
-// This screen is the global scope of the analytics settings: it reads everything
-// from the store and takes no props. `connect` memoised it implicitly; `memo` keeps
-// that now it is gone.
-export default memo(Analytics);
+const mapStateToProps = (state: IRootState) => ({
+	isSaving: state.app.isSaving,
+	isLoading: state.app.isLoading,
+	analytics: state.analytics,
+});
+
+const mapDispatchToProps = {
+	setHistoryPush: appActions.setHistoryPush,
+	getAnalytics: analyticsActions.getAnalytics,
+	updateAnalytics: analyticsActions.updateAnalytics,
+};
+
+interface IAnalyticsProps {
+	isSaving: boolean;
+	isLoading: boolean;
+	analytics: IAnalytics;
+}
+
+interface IDispatchProps {
+	getAnalytics(siteId?: number | null): Promise<void>;
+	setHistoryPush(path: string, isEditor?: boolean): void;
+	updateAnalytics(analyticsState: IAnalytics, siteId?: number | null): Promise<boolean>;
+}
+
+type IProps = IAnalyticsProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(Analytics);

package/src/modules/App/Routing/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
-import { Switch, Route, matchPath, useLocation } from "react-router-dom";
+import { Switch, Route, matchPath } from "react-router-dom";
 
 import { ErrorGuard } from "@ax/guards";
 import type { IRootState, IUser } from "@ax/types";
@@ -17,10 +17,7 @@ import Logout from "./Logout";
 import * as S from "./style";
 
 const Routing = (props: IProps) => {
-	const { token, currentUser, globalSettings, setHistoryPush, logout } = props;
-
-	// Was `state.router.location.pathname` from connected-react-router's router slice.
-	const { pathname: path } = useLocation();
+	const { path, token, currentUser, globalSettings, setHistoryPush, logout } = props;
 
 	const { useForms } = globalSettings;
 
@@ -115,6 +112,7 @@ const Routing = (props: IProps) => {
 };
 
 const mapStateToProps = (state: IRootState) => ({
+	path: state.router.location.pathname,
 	token: state.app.token,
 	currentUser: state.users.currentUser,
 	globalSettings: state.app.globalSettings,
@@ -126,6 +124,7 @@ interface IDispatchProps {
 }
 
 interface IStateProps {
+	path?: string;
 	token: string;
 	currentUser: IUser | null;
 	globalSettings: IGlobalSettings;

package/src/modules/FileDrive/index.tsx

@@ -605,7 +605,7 @@ const FileDrive = (props: IProps) => {
 	);
 
 	return (
-		<MainWrapper backLink={false} title="File Drive Manager" rightButton={rightButtonProps} screen="file-drive">
+		<MainWrapper backLink={false} title="File Drive Manager" rightButton={rightButtonProps}>
 			<S.Wrapper ref={wrapperRef}>
 				<S.FolderPanel
 					isOpen={isPanelOpen}

package/src/modules/GlobalEditor/index.tsx

@@ -26,7 +26,7 @@ import { structuredDataActions } from "@ax/containers/StructuredData";
 import { usersActions } from "@ax/containers/Users";
 import { RouteLeavingGuard } from "@ax/guards";
 import { dateToString, getDefaultTheme } from "@ax/helpers";
-import { useIsDirty, useModals, usePermissionsForPage } from "@ax/hooks";
+import { useEditingHeartbeat, useIsDirty, useModals, usePermissionsForPage } from "@ax/hooks";
 import type {
 	HeadingFilter,
 	IErrorItem,
@@ -77,6 +77,7 @@ const GlobalEditor = (props: IProps) => {
 		schemaVersion,
 		updatePageAccessGrants,
 		accessGrants,
+		sendPagePing,
 	} = props;
 
 	const isAllowedTo = usePermissionsForPage(
@@ -153,7 +154,7 @@ const GlobalEditor = (props: IProps) => {
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		const { pageID, getPage, sendPagePing, setStructuredDataFilter } = props;
+		const { setStructuredDataFilter } = props;
 
 		editorContent?.structuredData && setStructuredDataFilter(editorContent.structuredData);
 		const handleGetPage = async () => await getPage(pageID, true);
@@ -163,13 +164,10 @@ const GlobalEditor = (props: IProps) => {
 		if (!pageID) {
 			setIsDirty(false);
 		}
-
-		const interval = setInterval(() => {
-			pageID && sendPagePing(pageID);
-		}, 30000);
-		return () => clearInterval(interval);
 	}, []);
 
+	useEditingHeartbeat(pageID, sendPagePing);
+
 	useEffect(() => {
 		setSelectedTab(defaultTab);
 	}, [defaultTab]);
@@ -181,7 +179,7 @@ const GlobalEditor = (props: IProps) => {
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		const { pageID, sendPagePing, currentUserID } = props;
+		const { currentUserID } = props;
 		if (userEditing && userEditing.id !== currentUserID) {
 			setIsReadOnly(true);
 			!isOpen("userEditing") && toggleModal("userEditing");

package/src/modules/GlobalSettings/Robots/index.tsx

@@ -1,31 +1,35 @@
-import { memo, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import { connect } from "react-redux";
 
 import { ErrorToast, Loading, MainWrapper, Nav } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { domainsActions } from "@ax/containers/Domains";
 import { RouteLeavingGuard } from "@ax/guards";
 import { useIsDirty } from "@ax/hooks";
-import { useAppDispatch, useAppSelector } from "@ax/store";
-import type { IDomainRobot, INavItem } from "@ax/types";
+import type { IDomainRobot, INavItem, IRootState } from "@ax/types";
 
 import Item from "./Item";
 
 import * as S from "./style";
 
 const Robots = (props: IProps): JSX.Element => {
-	const { navItems, currentNavItem } = props;
-
-	const dispatch = useAppDispatch();
-	const isSaving = useAppSelector((state) => state.app.isSaving);
-	const isLoading = useAppSelector((state) => state.app.isLoading);
-	const robots = useAppSelector((state) => state.domains.robots);
+	const {
+		isSaving,
+		isLoading,
+		navItems,
+		currentNavItem,
+		robots,
+		getDomainsRobots,
+		setHistoryPush,
+		updateDomainRobots,
+	} = props;
 
 	const [robotItems, setRobotItems] = useState(robots);
 	const { isDirty, setIsDirty, resetDirty } = useIsDirty(robotItems);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		dispatch(domainsActions.getDomainsRobots());
+		getDomainsRobots();
 		resetDirty();
 	}, []);
 
@@ -34,7 +38,7 @@ const Robots = (props: IProps): JSX.Element => {
 	}, [robots]);
 
 	const handleSave = async () => {
-		const isSaved = await dispatch(domainsActions.updateDomainsRobots(robotItems)).unwrap();
+		const isSaved = await updateDomainRobots(robotItems);
 		if (isSaved) {
 			setIsDirty(false);
 		}
@@ -47,23 +51,22 @@ const Robots = (props: IProps): JSX.Element => {
 	};
 
 	const handleMenuClick = (path: string) => {
-		dispatch(appActions.setHistoryPush(path));
+		setHistoryPush(path);
 	};
 
 	const mapItemList = (items: IDomainRobot[]) =>
 		Array.isArray(items) &&
 		items.map((item: IDomainRobot, i: number) => {
-			// Replaces the item instead of assigning onto it: the list comes from the
-			// store, so the previous `newItems[i].content = …` on a shallow copy was
-			// mutating state — and now that the slice runs through Immer, the object
-			// is frozen and that assignment would throw.
-			const handleSetItem = (newContent: string) =>
-				setRobotItems((current) => current.map((it, index) => (index === i ? { ...it, content: newContent } : it)));
+			const handleSetItem = (newContent: string) => {
+				const newItems = [...robotItems];
+				newItems[i].content = newContent;
+				setRobotItems(newItems);
+			};
 
 			return <Item key={`${item.path}${i}`} item={item} setItemContent={handleSetItem} />;
 		});
 
-	const setRoute = (path: string) => dispatch(appActions.setHistoryPush(path));
+	const setRoute = (path: string) => setHistoryPush(path);
 	const modalText = (
 		<>
 			Some robots <strong>are not saved</strong>.{" "}
@@ -73,7 +76,7 @@ const Robots = (props: IProps): JSX.Element => {
 	return (
 		<>
 			<RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
-			<MainWrapper backLink={false} title="SEO Settings" rightButton={rightButtonProps} screen="robots">
+			<MainWrapper backLink={false} title="SEO Settings" rightButton={rightButtonProps}>
 				<S.Wrapper>
 					<Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
 					<S.ContentWrapper>
@@ -90,11 +93,31 @@ const Robots = (props: IProps): JSX.Element => {
 	);
 };
 
-interface IProps {
+const mapStateToProps = (state: IRootState) => ({
+	isSaving: state.app.isSaving,
+	isLoading: state.app.isLoading,
+	robots: state.domains.robots,
+});
+
+const mapDispatchToProps = {
+	setHistoryPush: appActions.setHistoryPush,
+	getDomainsRobots: domainsActions.getDomainsRobots,
+	updateDomainRobots: domainsActions.updateDomainsRobots,
+};
+interface IRobotsProps {
+	isSaving: boolean;
+	isLoading: boolean;
 	navItems: INavItem[];
 	currentNavItem: INavItem;
+	robots: IDomainRobot[];
 }
 
-// `connect` memoised this screen implicitly; `memo` keeps that now that its props
-// come from the parent instead of the store.
-export default memo(Robots);
+interface IDispatchProps {
+	getDomainsRobots(): void;
+	setHistoryPush(path: string, isEditor?: boolean): void;
+	updateDomainRobots(robots: IDomainRobot[]): Promise<boolean>;
+}
+
+type IProps = IRobotsProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(Robots);

package/src/modules/MediaGallery/index.tsx

@@ -623,7 +623,7 @@ const MediaGallery = (props: IProps) => {
 	);
 
 	return (
-		<MainWrapper backLink={false} title="Media Gallery" rightButton={rightButtonProps} screen="gallery">
+		<MainWrapper backLink={false} title="Media Gallery" rightButton={rightButtonProps}>
 			<S.Wrapper ref={wrapperRef}>
 				<S.FolderPanel
 					isOpen={isPanelOpen}

package/src/modules/PageEditor/index.tsx

@@ -24,7 +24,7 @@ import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 import { RouteLeavingGuard } from "@ax/guards";
 import { dateToString, getDeactivatedModules, isModuleDisabled } from "@ax/helpers";
-import { useIsDirty, useModals, usePermissionsForPage } from "@ax/hooks";
+import { useEditingHeartbeat, useIsDirty, useModals, usePermissionsForPage } from "@ax/hooks";
 import type {
 	HeadingFilter,
 	IErrorItem,
@@ -80,6 +80,7 @@ const PageEditor = (props: IProps) => {
 		currentSiteInfo,
 		updatePageAccessGrants,
 		accessGrants,
+		sendPagePing,
 	} = props;
 
 	const isAllowedTo = usePermissionsForPage(
@@ -158,8 +159,6 @@ const PageEditor = (props: IProps) => {
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		const { pageID, getPage, sendPagePing } = props;
-
 		const handleGetPage = async () => {
 			if (isNewTranslation) {
 				await getDefaults();
@@ -175,20 +174,17 @@ const PageEditor = (props: IProps) => {
 		if (!pageID) {
 			setIsDirty(false);
 		}
-
-		const interval = setInterval(() => {
-			pageID && sendPagePing(pageID);
-		}, 30000);
-		return () => clearInterval(interval);
 	}, []);
 
+	useEditingHeartbeat(pageID, sendPagePing);
+
 	useEffect(() => {
 		setSelectedTab(defaultTab);
 	}, [defaultTab]);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		const { pageID, sendPagePing, currentUserID } = props;
+		const { currentUserID } = props;
 		if (userEditing && userEditing.id !== currentUserID) {
 			setIsReadOnly(true);
 			!isOpen("userEditing") && toggleModal("userEditing");

package/src/modules/Redirects/RedirectItem/index.tsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
+import { connect } from "react-redux";
 
 import { CheckField, ContextMenu, ElementsTooltip } from "@ax/components";
 import { redirectsActions } from "@ax/containers/Redirects";
 import { useContextMenu, useModals } from "@ax/hooks";
-import { useAppDispatch, useAppSelector } from "@ax/store";
-import type { ICheck, IRedirect } from "@ax/types";
+import type { ICheck, IRedirect, IRootState } from "@ax/types";
 
 import { format } from "date-fns";
 
@@ -13,11 +13,12 @@ import RedirectPanel from "../RedirectPanel";
 
 import * as S from "./style";
 
-const RedirectItem = (props: IProps): JSX.Element => {
+const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
 	const {
 		redirect,
 		isSelected,
 		onChange,
+		deleteRedirect,
 		toggleToast,
 		setFormValues,
 		formValues,
@@ -25,10 +26,9 @@ const RedirectItem = (props: IProps): JSX.Element => {
 		currentFilter,
 		isSiteItem,
 		hoverCheck,
+		isSaving,
 	} = props;
 
-	const dispatch = useAppDispatch();
-	const isSaving = useAppSelector((state) => state.app.isSaving);
 	const { isOpen, toggleModal } = useModals(["edit", "delete"]);
 	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 	const [isOpenedSecond, setIsOpenedSecond] = useState(false);
@@ -47,9 +47,7 @@ const RedirectItem = (props: IProps): JSX.Element => {
 	const removeItem = async () => {
 		try {
 			if (redirect.id) {
-				const deleted = await dispatch(
-					redirectsActions.deleteRedirect({ redirectID: redirect.id, filter: currentFilter }),
-				).unwrap();
+				const deleted = await deleteRedirect(redirect.id, currentFilter);
 				if (deleted) {
 					toggleToast();
 				}
@@ -150,6 +148,21 @@ interface IProps {
 	currentFilter: string;
 	isSiteItem: boolean;
 	hoverCheck: boolean;
+	isSaving: boolean;
 }
 
-export default RedirectItem;
+interface IDispatchProps {
+	deleteRedirect(redirectID: number, filter?: string): Promise<boolean>;
+}
+
+type IRedirectItemProps = IProps & IDispatchProps;
+
+const mapStateToProps = (state: IRootState) => ({
+	isSaving: state.app.isSaving,
+});
+
+const mapDispatchToProps = {
+	deleteRedirect: redirectsActions.deleteRedirect,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(RedirectItem);

package/src/modules/Redirects/RedirectPanel/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
+import { connect } from "react-redux";
 
 import type { IRedirect } from "@ax/types";
 import { Button, FieldsBehavior, FloatingPanel } from "@ax/components";
 import { redirectsActions } from "@ax/containers/Redirects";
-import { useAppDispatch } from "@ax/store";
 
 import * as S from "./style";
 
@@ -15,13 +15,12 @@ const RedirectPanel = (props: IProps): JSX.Element => {
 		isOpenedSecond,
 		toggleSecondaryPanel,
 		addRedirect,
+		updateRedirect,
 		formValues,
 		setFormValues,
 		currentFilter,
 	} = props;
 
-	const dispatch = useAppDispatch();
-
 	const handleOldUrl = (newValue: string) => setFormValues({ ...formValues, from: newValue });
 
 	const handleNewUrl = (newValue: any) => {
@@ -35,14 +34,7 @@ const RedirectPanel = (props: IProps): JSX.Element => {
 
 	const editItemAction = async () => {
 		const toPage = formValues.to.pageId ? formValues.to.pageId : formValues.to.url;
-		formValues.id &&
-			(await dispatch(
-				redirectsActions.updateRedirect({
-					redirect: { from: formValues.from, to: toPage },
-					redirectID: formValues.id,
-					filter: currentFilter,
-				}),
-			));
+		formValues.id && (await updateRedirect({ from: formValues.from, to: toPage }, formValues.id, currentFilter));
 		toggleModal();
 	};
 
@@ -105,7 +97,10 @@ const RedirectPanel = (props: IProps): JSX.Element => {
 	);
 };
 
-interface IProps {
+const mapDispatchToProps = {
+	updateRedirect: redirectsActions.updateRedirect,
+};
+interface ICategoryPanelProps {
 	isOpen: boolean;
 	isOpenedSecond: boolean;
 	toggleSecondaryPanel(): any;
@@ -114,7 +109,13 @@ interface IProps {
 	formValues: IRedirect;
 	setFormValues(redirect: IRedirect): void;
 	currentFilter: string;
+}
+
+interface IDispatchProps {
 	addRedirect(force?: boolean): void;
+	updateRedirect(redirect: { from: string; to: string | number }, redirectID: number, filter?: string): Promise<void>;
 }
 
-export default RedirectPanel;
+type IProps = ICategoryPanelProps & IDispatchProps;
+
+export default connect(null, mapDispatchToProps)(RedirectPanel);