keep page title editor and page tree in sync

client/src/features/comment/components/comment-list.tsx

@@ -85,12 +85,12 @@ const ChildComments = ({ comments, parentId }) => {
 const CommentEditorWithActions = ({ commentId, onSave, isLoading }) => {
   const [content, setContent] = useState('');
   const { ref, focused } = useFocusWithin();
-  const commentEditorRef = useRef();
+  const commentEditorRef = useRef(null);
 
   const handleSave = () => {
     onSave(commentId, content);
     setContent('');
-    commentEditorRef?.current.clearContent();
+    commentEditorRef.current?.clearContent();
   };
 
   return (

client/src/features/editor/title-editor.tsx

@@ -10,6 +10,8 @@ import { editorAtom, titleEditorAtom } from '@/features/editor/atoms/editorAtom'
 import { useUpdatePageMutation } from '@/features/page/queries/page-query';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useAtom } from 'jotai';
+import { treeDataAtom } from '@/features/page/tree/atoms/tree-data-atom';
+import { updateTreeNodeName } from '@/features/page/tree/utils';
 
 export interface TitleEditorProps {
   pageId: string;
@@ -22,6 +24,7 @@ export function TitleEditor({ pageId, title }: TitleEditorProps) {
   const updatePageMutation = useUpdatePageMutation();
   const contentEditor = useAtomValue(editorAtom);
   const [, setTitleEditor] = useAtom(titleEditorAtom);
+  const [treeData, setTreeData] = useAtom(treeDataAtom);
 
   const titleEditor = useEditor({
     extensions: [
@@ -52,9 +55,19 @@ export function TitleEditor({ pageId, title }: TitleEditorProps) {
   useEffect(() => {
     if (debouncedTitle !== '') {
       updatePageMutation.mutate({ id: pageId, title: debouncedTitle });
+
+      const newTreeData = updateTreeNodeName(treeData, pageId, debouncedTitle);
+      setTreeData(newTreeData);
+
     }
   }, [debouncedTitle]);
 
+  useEffect(() => {
+    if (titleEditor && title !== titleEditor.getText()) {
+      titleEditor.commands.setContent(title);
+    }
+  }, [title, titleEditor]);
+
   function handleTitleKeyDown(event) {
     if (!titleEditor || !contentEditor || event.shiftKey) return;
 

client/src/features/page-history/atoms/history-atoms.ts

@@ -1,4 +1,4 @@
 import { atom } from "jotai";
 
 export const historyAtoms = atom<boolean>(false);
-export const activeHistoryIdAtom = atom(null);
+export const activeHistoryIdAtom = atom<string>('');

client/src/features/page-history/components/history-item.tsx

@@ -26,7 +26,7 @@ function HistoryItem({ historyItem, onSelect, isActive }: HistoryItemProps) {
             <Group gap={4} wrap="nowrap">
               <UserAvatar color="blue" size="sm" avatarUrl={historyItem.lastUpdatedBy.avatarUrl}
                           name={historyItem.lastUpdatedBy.name} />
-              <Text size="sm" c="dimmed" lineClamp={1} fontWeight={400}>
+              <Text size="sm" c="dimmed" lineClamp={1}>
                 {historyItem.lastUpdatedBy.name}
               </Text>
             </Group>

client/src/features/page/atoms/page-atom.ts

@@ -1,5 +0,0 @@
-import { atomFamily } from 'jotai/utils';
-import { atom } from 'jotai';
-import { IPage } from '@/features/page/types/page.types';
-
-export const pageAtom = atomFamily((pageId) => atom<IPage>(null));

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

@@ -35,8 +35,13 @@ export function useCreatePageMutation() {
 }
 
 export function useUpdatePageMutation() {
+  const queryClient = useQueryClient();
+
   return useMutation<IPage, Error, Partial<IPage>>({
     mutationFn: (data) => updatePage(data),
+    onSuccess: (data) => {
+      queryClient.setQueryData(['pages', data.id], data);
+    },
   });
 }
 

client/src/features/page/tree/utils/index.ts

@@ -48,3 +48,15 @@ export function findBreadcrumbPath(tree: TreeNode[], pageId: string, path: TreeN
   }
   return null;
 }
+
+export const updateTreeNodeName = (nodes: TreeNode[], nodeId: string, newName: string): TreeNode[] => {
+  return nodes.map(node => {
+    if (node.id === nodeId) {
+      return { ...node, name: newName };
+    }
+    if (node.children && node.children.length > 0) {
+      return { ...node, children: updateTreeNodeName(node.children, nodeId, newName) };
+    }
+    return node;
+  });
+};

client/src/pages/page/page.tsx

@@ -1,23 +1,12 @@
 import { useParams } from 'react-router-dom';
-import React, { useEffect } from 'react';
-import { useAtom } from 'jotai';
-import { pageAtom } from '@/features/page/atoms/page-atom';
 import { usePageQuery } from '@/features/page/queries/page-query';
 import { FullEditor } from '@/features/editor/full-editor';
 import HistoryModal from '@/features/page-history/components/history-modal';
 
 export default function Page() {
   const { pageId } = useParams();
-  const [, setPage] = useAtom(pageAtom(pageId));
   const { data, isLoading, isError } = usePageQuery(pageId);
 
-  useEffect(() => {
-    if (data) {
-      // @ts-ignore
-      setPage(data);
-    }
-  }, [data, isLoading, setPage, pageId]);
-
   if (isLoading) {
     return <></>;
   }
@@ -30,7 +19,7 @@ export default function Page() {
     data && (
       <div>
         <FullEditor key={pageId} pageId={pageId} title={data.title} />
-        <HistoryModal/>
+        <HistoryModal />
       </div>
     )