@griddo/ax 12.6.0 → 12.6.2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "12.6.0",
+	"version": "12.6.2",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -201,5 +201,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5b898e9cbe8af3916311b072f42b1014150c331f"
+	"gitHead": "1e6a3ad08eb17a4c57f80fffb65193a82a577969"
 }

package/src/__tests__/hooks/heartbeat.test.tsx

@@ -0,0 +1,88 @@
+import "@testing-library/jest-dom";
+
+import { useEditingHeartbeat } from "@ax/hooks";
+
+import { renderHook } from "@testing-library/react";
+
+const HEARTBEAT = 30000;
+
+const ORIGINAL = 213;
+const TRANSLATION = 214;
+
+describe("useEditingHeartbeat hook", () => {
+	beforeEach(() => {
+		vi.useFakeTimers();
+	});
+
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
+	const renderHeartbeat = (pageID: number | null, sendPagePing: (id: number) => void) =>
+		renderHook(({ pageID }) => useEditingHeartbeat(pageID, sendPagePing), { initialProps: { pageID } });
+
+	it("locks the page on mount, without waiting for the first interval", () => {
+		const sendPagePing = vi.fn();
+
+		renderHeartbeat(ORIGINAL, sendPagePing);
+
+		expect(sendPagePing).toHaveBeenCalledTimes(1);
+		expect(sendPagePing).toHaveBeenCalledWith(ORIGINAL);
+	});
+
+	it("renews the lock every 30 seconds", () => {
+		const sendPagePing = vi.fn();
+
+		renderHeartbeat(ORIGINAL, sendPagePing);
+		vi.advanceTimersByTime(HEARTBEAT * 2);
+
+		// t+0 (mount) + t+30s + t+60s
+		expect(sendPagePing).toHaveBeenCalledTimes(3);
+		expect(sendPagePing.mock.calls.every(([id]) => id === ORIGINAL)).toBe(true);
+	});
+
+	// sc-118275: creating a translation from inside the editor changes pageID in the store without
+	// remounting. The heartbeat used to be pinned to the id it captured on mount, so it kept
+	// renewing the lock of the original page and left the translation unlocked.
+	it("follows the page when its id changes under an editor that never remounts", () => {
+		const sendPagePing = vi.fn();
+
+		const { rerender } = renderHeartbeat(ORIGINAL, sendPagePing);
+		vi.advanceTimersByTime(HEARTBEAT);
+		sendPagePing.mockClear();
+
+		rerender({ pageID: TRANSLATION });
+
+		// No 30 second gap: the page actually being edited is locked as soon as it exists.
+		expect(sendPagePing).toHaveBeenCalledTimes(1);
+		expect(sendPagePing).toHaveBeenCalledWith(TRANSLATION);
+
+		vi.advanceTimersByTime(HEARTBEAT * 2);
+
+		expect(sendPagePing).toHaveBeenCalledTimes(3);
+		// The original is left alone so its lock expires; renewing it would block the rest of the
+		// team on a page nobody is touching.
+		expect(sendPagePing).not.toHaveBeenCalledWith(ORIGINAL);
+	});
+
+	it("does not ping while there is no page yet", () => {
+		const sendPagePing = vi.fn();
+
+		renderHeartbeat(null, sendPagePing);
+		vi.advanceTimersByTime(HEARTBEAT * 2);
+
+		expect(sendPagePing).not.toHaveBeenCalled();
+	});
+
+	it("stops renewing the lock once the editor is closed", () => {
+		const sendPagePing = vi.fn();
+
+		const { unmount } = renderHeartbeat(ORIGINAL, sendPagePing);
+		unmount();
+		sendPagePing.mockClear();
+
+		vi.advanceTimersByTime(HEARTBEAT * 2);
+
+		expect(sendPagePing).not.toHaveBeenCalled();
+	});
+});

package/src/hooks/heartbeat.ts

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+
+/**
+ * Keeps the edit lock of the page being edited alive, renewing it every 30 seconds.
+ *
+ * sc-118275: this used to live inside each editor's mount effect, whose dependency list is empty,
+ * so the interval kept pinging whichever id it captured on mount. Creating a translation from
+ * inside the editor moves the store to the new page but never remounts, so the lock stayed on the
+ * original page for as long as the editor was open — and the translation, the one actually being
+ * edited, was left unlocked. Keeping pageID in the dependency list is what makes the heartbeat
+ * follow the page.
+ *
+ * The leading ping is not redundant with the interval: on a page switch the new id would otherwise
+ * sit unlocked for 30 seconds, because savePage dispatches setUserEditing(page.editing) with a null
+ * payload when nobody else holds the page, and the editors' [userEditing] effect only pings when
+ * that reference changes.
+ *
+ * sendPagePing has to keep a stable reference across renders; both editors get it from an object
+ * literal mapDispatchToProps, so connect binds it once. If it ever started changing on every
+ * render the effect would re-run, the cleanup would clear the interval before it could fire and
+ * there would be no heartbeat at all.
+ */
+const useEditingHeartbeat = (pageID: number | null, sendPagePing: (pageID: number) => void): void => {
+	useEffect(() => {
+		if (!pageID) return;
+		sendPagePing(pageID);
+		const interval = setInterval(() => sendPagePing(pageID), 30000);
+		return () => clearInterval(interval);
+	}, [pageID, sendPagePing]);
+};
+
+export { useEditingHeartbeat };

package/src/hooks/index.tsx

@@ -8,6 +8,7 @@ import {
 	usePrevious,
 	useShouldBeSaved,
 } from "./forms";
+import { useEditingHeartbeat } from "./heartbeat";
 import { useOnMessageReceivedFromIframe, useOnMessageReceivedFromOutside } from "./iframe";
 import { useURLSearchParam } from "./location";
 import { useContextMenu, useHandleClickOutside, useModal, useModals, useToast } from "./modals";
@@ -29,6 +30,7 @@ export {
 	useContextMenu,
 	useDebounce,
 	useDebouncedCallback,
+	useEditingHeartbeat,
 	useEmptyState,
 	useEqualStructured,
 	useFirefoxScrollLock,

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/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");