refactor(client): parameterize history restore by version id

apps/client/src/features/page-history/components/history-list.tsx

@@ -159,7 +159,7 @@ function HistoryList({ pageId }: Props) {
             >
               {t("Cancel")}
             </Button>
-            <Button size="compact-md" onClick={confirmRestore}>
+            <Button size="compact-md" onClick={() => confirmRestore()}>
               {t("Restore")}
             </Button>
           </Group>

apps/client/src/features/page-history/components/history-modal-mobile.tsx

@@ -166,7 +166,7 @@ export default function HistoryModalMobile({ pageId, pageTitle }: Props) {
           <Button variant="default" onClick={() => setHistoryModalOpen(false)}>
             {t("Cancel")}
           </Button>
-          <Button onClick={confirmRestore}>{t("Restore")}</Button>
+          <Button onClick={() => confirmRestore()}>{t("Restore")}</Button>
         </Group>
       )}
 

apps/client/src/features/page-history/hooks/use-history-restore.tsx

@@ -1,4 +1,4 @@
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Text } from "@mantine/core";
@@ -9,7 +9,8 @@ import {
   activeHistoryIdAtom,
   historyAtoms,
 } from "@/features/page-history/atoms/history-atoms";
-import { usePageHistoryQuery } from "@/features/page-history/queries/page-history-query";
+import { fetchPageHistory } from "@/features/page-history/queries/page-history-query";
+import { IPageHistory } from "@/features/page-history/types/page.types";
 import {
   pageEditorAtom,
   titleEditorAtom,
@@ -25,8 +26,6 @@ export function useHistoryRestore() {
   const { t } = useTranslation();
 
   const activeHistoryId = useAtomValue(activeHistoryIdAtom);
-  const { data: activeHistoryData } = usePageHistoryQuery(activeHistoryId);
-
   const mainEditor = useAtomValue(pageEditorAtom);
   const mainEditorTitle = useAtomValue(titleEditorAtom);
   const setHistoryModalOpen = useSetAtom(historyAtoms);
@@ -40,47 +39,66 @@ export function useHistoryRestore() {
     SpaceCaslSubject.Page,
   );
 
-  const handleRestore = useCallback(() => {
+  const handleRestore = useCallback(
-    if (!activeHistoryData) return;
+    async (historyId: string) => {
-    if (
+      let historyData: IPageHistory;
-      !mainEditor ||
+      try {
-      mainEditor.isDestroyed ||
+        historyData = await fetchPageHistory(historyId);
-      !mainEditorTitle ||
+      } catch {
-      mainEditorTitle.isDestroyed
+        notifications.show({
-    ) {
+          message: t("Error fetching page data."),
-      return;
+          color: "red",
-    }
+        });
+        return;
+      }
 
-    mainEditorTitle
+      if (
-      .chain()
+        !mainEditor ||
-      .clearContent()
+        mainEditor.isDestroyed ||
-      .setContent(activeHistoryData.title, { emitUpdate: true })
+        !mainEditorTitle ||
-      .run();
+        mainEditorTitle.isDestroyed
+      ) {
+        return;
+      }
 
-    mainEditor
+      mainEditorTitle
-      .chain()
+        .chain()
-      .clearContent()
+        .clearContent()
-      .setContent(activeHistoryData.content)
+        .setContent(historyData.title, { emitUpdate: true })
-      .run();
+        .run();
 
-    setHistoryModalOpen(false);
+      mainEditor
-    notifications.show({ message: t("Successfully restored") });
+        .chain()
-  }, [activeHistoryData, mainEditor, mainEditorTitle, setHistoryModalOpen, t]);
+        .clearContent()
+        .setContent(historyData.content)
+        .run();
 
-  const confirmRestore = useCallback(() => {
+      setHistoryModalOpen(false);
-    modals.openConfirmModal({
+      notifications.show({ message: t("Successfully restored") });
-      title: t("Please confirm your action"),
+    },
-      children: (
+    [mainEditor, mainEditorTitle, setHistoryModalOpen, t],
-        <Text size="sm">
+  );
-          {t(
+
-            "Are you sure you want to restore this version? Any changes not versioned will be lost.",
+  const confirmRestore = useCallback(
-          )}
+    (historyId?: string) => {
-        </Text>
+      const targetId = historyId ?? activeHistoryId;
-      ),
+      if (!targetId) return;
-      labels: { confirm: t("Confirm"), cancel: t("Cancel") },
+
-      onConfirm: handleRestore,
+      modals.openConfirmModal({
-    });
+        title: t("Please confirm your action"),
-  }, [t, handleRestore]);
+        children: (
+          <Text size="sm">
+            {t(
+              "Are you sure you want to restore this version? Any changes not versioned will be lost.",
+            )}
+          </Text>
+        ),
+        labels: { confirm: t("Confirm"), cancel: t("Cancel") },
+        onConfirm: () => handleRestore(targetId),
+      });
+    },
+    [t, handleRestore, activeHistoryId],
+  );
 
   return { canRestore, confirmRestore };
 }

apps/client/src/features/page-history/queries/page-history-query.ts

@@ -23,6 +23,14 @@ export function prefetchPageHistory(historyId: string) {
   });
 }
 
+export function fetchPageHistory(historyId: string): Promise<IPageHistory> {
+  return queryClient.fetchQuery({
+    queryKey: ["page-history", historyId],
+    queryFn: () => getPageHistoryById(historyId),
+    staleTime: HISTORY_STALE_TIME,
+  });
+}
+
 export function usePageHistoryListQuery(
   pageId: string,
 ): UseInfiniteQueryResult<InfiniteData<IPagination<IPageHistory>, unknown>> {