updates and fixes

* seo friendly urls
* custom client serve-static module
* database fixes
* fix recent pages
* other fixes

apps/client/src/features/editor/full-editor.tsx

@@ -1,20 +1,22 @@
-import classes from '@/features/editor/styles/editor.module.css';
-import React from 'react';
-import { TitleEditor } from '@/features/editor/title-editor';
-import PageEditor from '@/features/editor/page-editor';
+import classes from "@/features/editor/styles/editor.module.css";
+import React from "react";
+import { TitleEditor } from "@/features/editor/title-editor";
+import PageEditor from "@/features/editor/page-editor";
+
+const MemoizedTitleEditor = React.memo(TitleEditor);
+const MemoizedPageEditor = React.memo(PageEditor);
 
 export interface FullEditorProps {
   pageId: string;
-  title: any;
+  slugId: string;
+  title: string;
 }
 
-export function FullEditor({ pageId, title }: FullEditorProps) {
-
+export function FullEditor({ pageId, title, slugId }: FullEditorProps) {
   return (
     <div className={classes.editor}>
-      <TitleEditor pageId={pageId} title={title} />
-      <PageEditor pageId={pageId} />
+      <MemoizedTitleEditor pageId={pageId} slugId={slugId} title={title} />
+      <MemoizedPageEditor pageId={pageId} />
     </div>
-
   );
 }

apps/client/src/features/editor/page-editor.tsx

@@ -36,12 +36,9 @@ export default function PageEditor({
   const [currentUser] = useAtom(currentUserAtom);
   const [, setEditor] = useAtom(pageEditorAtom);
   const [, setAsideState] = useAtom(asideStateAtom);
-
   const [, setActiveCommentId] = useAtom(activeCommentIdAtom);
   const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
-
   const ydoc = useMemo(() => new Y.Doc(), [pageId]);
-
   const [isLocalSynced, setLocalSynced] = useState(false);
   const [isRemoteSynced, setRemoteSynced] = useState(false);
   const documentName = `page.${pageId}`;

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

@@ -10,27 +10,34 @@ import {
   pageEditorAtom,
   titleEditorAtom,
 } from "@/features/editor/atoms/editor-atoms";
-import { useUpdatePageMutation } from "@/features/page/queries/page-query";
+import {
+  usePageQuery,
+  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";
 import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
 import { History } from "@tiptap/extension-history";
+import { buildPageSlug } from "@/features/page/page.utils.ts";
+import { useNavigate } from "react-router-dom";
 
 export interface TitleEditorProps {
   pageId: string;
+  slugId: string;
   title: string;
 }
 
-export function TitleEditor({ pageId, title }: TitleEditorProps) {
-  const [debouncedTitleState, setDebouncedTitleState] = useState("");
+export function TitleEditor({ pageId, slugId, title }: TitleEditorProps) {
+  const [debouncedTitleState, setDebouncedTitleState] = useState(null);
   const [debouncedTitle] = useDebouncedValue(debouncedTitleState, 1000);
   const updatePageMutation = useUpdatePageMutation();
   const pageEditor = useAtomValue(pageEditorAtom);
   const [, setTitleEditor] = useAtom(titleEditorAtom);
   const [treeData, setTreeData] = useAtom(treeDataAtom);
   const emit = useQueryEmit();
+  const navigate = useNavigate();
 
   const titleEditor = useEditor({
     extensions: [
@@ -62,15 +69,23 @@ export function TitleEditor({ pageId, title }: TitleEditorProps) {
   });
 
   useEffect(() => {
-    if (debouncedTitle !== "") {
-      updatePageMutation.mutate({ pageId, title: debouncedTitle });
+    const pageSlug = buildPageSlug(slugId, title);
+    navigate(pageSlug, { replace: true });
+  }, [title]);
+
+  useEffect(() => {
+    if (debouncedTitle !== null) {
+      updatePageMutation.mutate({
+        pageId: pageId,
+        title: debouncedTitle,
+      });
 
       setTimeout(() => {
         emit({
           operation: "updateOne",
           entity: ["pages"],
           id: pageId,
-          payload: { title: debouncedTitle },
+          payload: { title: debouncedTitle, slugId: slugId },
         });
       }, 50);