updates and fixes

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

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useCallback, memo } from "react";
 import { useParams } from "react-router-dom";
 import { Divider, Paper } from "@mantine/core";
 import CommentListItem from "@/features/comment/components/comment-list-item";
@@ -11,16 +11,67 @@ import CommentEditor from "@/features/comment/components/comment-editor";
 import CommentActions from "@/features/comment/components/comment-actions";
 import { useFocusWithin } from "@mantine/hooks";
 import { IComment } from "@/features/comment/types/comment.types.ts";
+import { usePageQuery } from "@/features/page/queries/page-query.ts";
+import { IPagination } from "@/lib/types.ts";
 
 function CommentList() {
-  const { pageId } = useParams();
+  const { slugId } = useParams();
+  const { data: page } = usePageQuery(slugId);
   const {
     data: comments,
     isLoading: isCommentsLoading,
     isError,
-  } = useCommentsQuery({ pageId, limit: 100 });
-  const [isLoading, setIsLoading] = useState(false);
+  } = useCommentsQuery({ pageId: page?.id, limit: 100 });
   const createCommentMutation = useCreateCommentMutation();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleAddReply = useCallback(
+    async (commentId: string, content: string) => {
+      try {
+        setIsLoading(true);
+        const commentData = {
+          pageId: page?.id,
+          parentCommentId: commentId,
+          content: JSON.stringify(content),
+        };
+
+        await createCommentMutation.mutateAsync(commentData);
+      } catch (error) {
+        console.error("Failed to post comment:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [createCommentMutation, page?.id],
+  );
+
+  const renderComments = useCallback(
+    (comment: IComment) => (
+      <Paper
+        shadow="sm"
+        radius="md"
+        p="sm"
+        mb="sm"
+        withBorder
+        key={comment.id}
+        data-comment-id={comment.id}
+      >
+        <div>
+          <CommentListItem comment={comment} />
+          <MemoizedChildComments comments={comments} parentId={comment.id} />
+        </div>
+
+        <Divider my={4} />
+
+        <CommentEditorWithActions
+          commentId={comment.id}
+          onSave={handleAddReply}
+          isLoading={isLoading}
+        />
+      </Paper>
+    ),
+    [comments, handleAddReply, isLoading],
+  );
 
   if (isCommentsLoading) {
     return <></>;
@@ -34,50 +85,6 @@ function CommentList() {
     return <>No comments yet.</>;
   }
 
-  const renderComments = (comment: IComment) => {
-    const handleAddReply = async (commentId: string, content: string) => {
-      try {
-        setIsLoading(true);
-        const commentData = {
-          pageId: comment.pageId,
-          parentCommentId: comment.id,
-          content: JSON.stringify(content),
-        };
-
-        await createCommentMutation.mutateAsync(commentData);
-      } catch (error) {
-        console.error("Failed to post comment:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    return (
-      <Paper
-        shadow="sm"
-        radius="md"
-        p="sm"
-        mb="sm"
-        withBorder
-        key={comment.id}
-        data-comment-id={comment.id}
-      >
-        <div>
-          <CommentListItem comment={comment} />
-          <ChildComments comments={comments} parentId={comment.id} />
-        </div>
-
-        <Divider my={4} />
-
-        <CommentEditorWithActions
-          commentId={comment.id}
-          onSave={handleAddReply}
-          isLoading={isLoading}
-        />
-      </Paper>
-    );
-  };
-
   return (
     <>
       {comments.items
@@ -87,35 +94,46 @@ function CommentList() {
   );
 }
 
-const ChildComments = ({ comments, parentId }) => {
-  const getChildComments = (parentId: string) => {
-    return comments.items.filter(
-      (comment: IComment) => comment.parentCommentId === parentId,
-    );
-  };
+interface ChildCommentsProps {
+  comments: IPagination<IComment>;
+  parentId: string;
+}
+const ChildComments = ({ comments, parentId }: ChildCommentsProps) => {
+  const getChildComments = useCallback(
+    (parentId: string) =>
+      comments.items.filter(
+        (comment: IComment) => comment.parentCommentId === parentId,
+      ),
+    [comments.items],
+  );
 
   return (
     <div>
       {getChildComments(parentId).map((childComment) => (
         <div key={childComment.id}>
           <CommentListItem comment={childComment} />
-          <ChildComments comments={comments} parentId={childComment.id} />
+          <MemoizedChildComments
+            comments={comments}
+            parentId={childComment.id}
+          />
         </div>
       ))}
     </div>
   );
 };
 
+const MemoizedChildComments = memo(ChildComments);
+
 const CommentEditorWithActions = ({ commentId, onSave, isLoading }) => {
   const [content, setContent] = useState("");
   const { ref, focused } = useFocusWithin();
   const commentEditorRef = useRef(null);
 
-  const handleSave = () => {
+  const handleSave = useCallback(() => {
     onSave(commentId, content);
     setContent("");
     commentEditorRef.current?.clearContent();
-  };
+  }, [commentId, content, onSave]);
 
   return (
     <div ref={ref}>