diff --git a/client/src/features/comment/components/comment-list.tsx b/client/src/features/comment/components/comment-list.tsx index 3faad2e7..abb8738d 100644 --- a/client/src/features/comment/components/comment-list.tsx +++ b/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 ( diff --git a/client/src/features/editor/title-editor.tsx b/client/src/features/editor/title-editor.tsx index 44721e21..3e9ec1e6 100644 --- a/client/src/features/editor/title-editor.tsx +++ b/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; diff --git a/client/src/features/page-history/atoms/history-atoms.ts b/client/src/features/page-history/atoms/history-atoms.ts index 36c3fe08..023aaa36 100644 --- a/client/src/features/page-history/atoms/history-atoms.ts +++ b/client/src/features/page-history/atoms/history-atoms.ts @@ -1,4 +1,4 @@ import { atom } from "jotai"; export const historyAtoms = atom(false); -export const activeHistoryIdAtom = atom(null); +export const activeHistoryIdAtom = atom(''); diff --git a/client/src/features/page-history/components/history-item.tsx b/client/src/features/page-history/components/history-item.tsx index 223e7ffb..999697d7 100644 --- a/client/src/features/page-history/components/history-item.tsx +++ b/client/src/features/page-history/components/history-item.tsx @@ -26,7 +26,7 @@ function HistoryItem({ historyItem, onSelect, isActive }: HistoryItemProps) { - + {historyItem.lastUpdatedBy.name} diff --git a/client/src/features/page/atoms/page-atom.ts b/client/src/features/page/atoms/page-atom.ts deleted file mode 100644 index fe98ed6a..00000000 --- a/client/src/features/page/atoms/page-atom.ts +++ /dev/null @@ -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(null)); diff --git a/client/src/features/page/queries/page-query.ts b/client/src/features/page/queries/page-query.ts index dee7a7ab..65ecf838 100644 --- a/client/src/features/page/queries/page-query.ts +++ b/client/src/features/page/queries/page-query.ts @@ -35,8 +35,13 @@ export function useCreatePageMutation() { } export function useUpdatePageMutation() { + const queryClient = useQueryClient(); + return useMutation>({ mutationFn: (data) => updatePage(data), + onSuccess: (data) => { + queryClient.setQueryData(['pages', data.id], data); + }, }); } diff --git a/client/src/features/page/tree/utils/index.ts b/client/src/features/page/tree/utils/index.ts index 093280fa..4205f05f 100644 --- a/client/src/features/page/tree/utils/index.ts +++ b/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; + }); +}; diff --git a/client/src/pages/page/page.tsx b/client/src/pages/page/page.tsx index 0b96fe94..871bf66f 100644 --- a/client/src/pages/page/page.tsx +++ b/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 && (
- +
)