From 00f4588c21316e6de541e61687b4e79a0e7202c5 Mon Sep 17 00:00:00 2001
From: fuscodev <stefano.fusco88@gmail.com>
Date: Fri, 16 May 2025 17:11:29 +0200
Subject: [PATCH] fix title update (#1154)

---
 .../src/features/editor/title-editor.tsx      | 10 +++--
 .../src/features/page/queries/page-query.ts   | 44 +++++++++++--------
 2 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/apps/client/src/features/editor/title-editor.tsx b/apps/client/src/features/editor/title-editor.tsx
index 9cb17aa0..e5ac7da6 100644
--- a/apps/client/src/features/editor/title-editor.tsx
+++ b/apps/client/src/features/editor/title-editor.tsx
@@ -10,7 +10,7 @@ import {
   pageEditorAtom,
   titleEditorAtom,
 } from "@/features/editor/atoms/editor-atoms";
-import { useUpdatePageMutation } from "@/features/page/queries/page-query";
+import { updatePageData, useUpdateTitlePageMutation } from "@/features/page/queries/page-query";
 import { useDebouncedCallback } from "@mantine/hooks";
 import { useAtom } from "jotai";
 import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
@@ -38,7 +38,7 @@ export function TitleEditor({
   editable,
 }: TitleEditorProps) {
   const { t } = useTranslation();
-  const { mutateAsync: updatePageMutationAsync } = useUpdatePageMutation();
+  const { mutateAsync: updateTitlePageMutationAsync } = useUpdateTitlePageMutation();
   const pageEditor = useAtomValue(pageEditorAtom);
   const [, setTitleEditor] = useAtom(titleEditorAtom);
   const emit = useQueryEmit();
@@ -94,7 +94,7 @@ export function TitleEditor({
       return;
     }
 
-    updatePageMutationAsync({
+    updateTitlePageMutationAsync({
       pageId: pageId,
       title: titleEditor.getText(),
     }).then((page) => {
@@ -106,6 +106,10 @@ export function TitleEditor({
         payload: { title: page.title, slugId: page.slugId },
       };
 
+      if (page.title !== titleEditor.getText()) return;
+
+      updatePageData(page);
+
       localEmitter.emit("message", event);
       emit(event);
     });
diff --git a/apps/client/src/features/page/queries/page-query.ts b/apps/client/src/features/page/queries/page-query.ts
index 1e41b519..6842cc9e 100644
--- a/apps/client/src/features/page/queries/page-query.ts
+++ b/apps/client/src/features/page/queries/page-query.ts
@@ -63,28 +63,36 @@ export function useCreatePageMutation() {
   });
 }
 
-export function useUpdatePageMutation() {
-  const queryClient = useQueryClient();
+export function updatePageData(data: IPage) {
+  const pageBySlug = queryClient.getQueryData<IPage>([
+    "pages",
+    data.slugId,
+  ]);
+  const pageById = queryClient.getQueryData<IPage>(["pages", data.id]);
 
+  if (pageBySlug) {
+    queryClient.setQueryData(["pages", data.slugId], {
+      ...pageBySlug,
+      ...data,
+    });
+  }
+
+  if (pageById) {
+    queryClient.setQueryData(["pages", data.id], { ...pageById, ...data });
+  }
+}
+
+export function useUpdateTitlePageMutation() {
+  return useMutation<IPage, Error, Partial<IPageInput>>({
+    mutationFn: (data) => updatePage(data),
+  });
+}
+
+export function useUpdatePageMutation() {
   return useMutation<IPage, Error, Partial<IPageInput>>({
     mutationFn: (data) => updatePage(data),
     onSuccess: (data) => {
-      const pageBySlug = queryClient.getQueryData<IPage>([
-        "pages",
-        data.slugId,
-      ]);
-      const pageById = queryClient.getQueryData<IPage>(["pages", data.id]);
-
-      if (pageBySlug) {
-        queryClient.setQueryData(["pages", data.slugId], {
-          ...pageBySlug,
-          ...data,
-        });
-      }
-
-      if (pageById) {
-        queryClient.setQueryData(["pages", data.id], { ...pageById, ...data });
-      }
+      updatePage(data);
     },
   });
 }