DN-5: load more comments and other comments improvements

client/src/components/ui/CommentsSection/Comments.tsx

@@ -41,9 +41,7 @@ export function Comments({ postSlug }: CommentsProps) {
     useEffect(() => {
         async function fetchComments() {
             try {
-                const res = await api.get(
-                    `/comments/post/${encodeURIComponent(postSlug)}?depth=2`
-                );
+                const res = await api.get(`/comments/post/${postSlug}?depth=2`);
                 setComments(res.data);
             } catch (error) {
                 console.error('Error fetching comments:', error);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "derecksnotes.com",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "type": "module",
   "repository": "[email protected]:dereckdemezquita/derecksnotes.com.git",
   "scripts": {

scripts/syncPostsToDB.ts

@@ -30,6 +30,9 @@ function deriveSlug(fullPath: string): string {
     // If it's a blog post under /blog/posts/, remove the "posts" segment
     // For example: /blog/posts/20210730_something -> /blog/20210730_something
     const finalSlug = withoutExt.replace('/posts/', '/');
+    if (finalSlug.startsWith('/')) {
+        return finalSlug.slice(1);
+    }
     return finalSlug;
 }
 

server/src/routes/comments/comments.ts

@@ -94,16 +94,21 @@ router.get('/comments/post/:postSlug', async (req: Request, res: Response) => {
     try {
         const { postSlug } = req.params;
         const depth = parseInt(req.query.depth as string, 10) || 1;
+        const limit = parseInt(req.query.limit as string, 10) || 5; // Default limit
+        const skip = parseInt(req.query.skip as string, 10) || 0; // Default skip
 
         const post = await Post.findOne({ slug: postSlug }).lean();
         if (!post) return res.status(404).json({ error: 'Post not found' });
 
+        // Apply limit & skip for top-level comments
         const topLevelComments = await Comment.find({
             post: post._id,
             parentComment: null
         })
             .populate('author', 'username')
             .sort({ createdAt: -1 })
+            .skip(skip)
+            .limit(limit)
             .lean<IComment[]>();
 
         const commentTree = await fetchCommentTree(topLevelComments, depth);
@@ -114,6 +119,28 @@ router.get('/comments/post/:postSlug', async (req: Request, res: Response) => {
     }
 });
 
+// Get more replies for a single comment subtree
+router.get('/comments/:id/children', async (req: Request, res: Response) => {
+    try {
+        const { id } = req.params;
+        const depth = parseInt(req.query.depth as string, 10) || 1;
+
+        const comment = await Comment.findById(id)
+            .populate('author', 'username')
+            .lean<IComment>();
+        if (!comment)
+            return res.status(404).json({ error: 'Comment not found' });
+
+        // Treat this comment as a parent and fetch its children at the given depth
+        const tree = await fetchCommentTree([comment], depth);
+        // tree[0] now has the updated replies
+        return res.json(tree[0].replies || []);
+    } catch (error: any) {
+        console.error(error);
+        return res.status(500).json({ error: 'Internal server error' });
+    }
+});
+
 // Get a single comment by ID (with optional depth)
 router.get('/comments/:id', async (req: Request, res: Response) => {
     try {