From e4c9ecc6212b34914944790bb21e016a19d3a50f Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Wed, 20 Jul 2022 14:15:27 +0200
Subject: [PATCH] Wired up really basic reply pagination

refs https://github.com/TryGhost/Team/issues/1689

Needs input on https://github.com/TryGhost/Team/issues/1689#issuecomment-1190189896
---
 apps/comments-ui/src/components/Replies.js    | 32 +++++++++++++++++--
 .../src/components/RepliesPagination.js       |  7 ++--
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/apps/comments-ui/src/components/Replies.js b/apps/comments-ui/src/components/Replies.js
index 7e4968f761..530a35124b 100644
--- a/apps/comments-ui/src/components/Replies.js
+++ b/apps/comments-ui/src/components/Replies.js
@@ -1,13 +1,39 @@
+import {useState, useEffect} from 'react';
 import Comment from './Comment';
-// import RepliesPagination from './RepliesPagination';
+import RepliesPagination from './RepliesPagination';
 
 const Replies = (props) => {
     const comment = props.comment;
 
+    // Very basic pagination right now
+    const MAX_VISIBLE_INITIAL = 3; // Show 3 first comments
+    const PAGE_LENGTH = 5; // Load 5 extra when clicking more
+    const [visibleReplies, setVisibleReplies] = useState([]);
+
+    // This piece of code detects when new replies have been added to the comment
+    // If that is the case, it makes sure all replies are visible (need design input here)
+    useEffect(function () {
+        setVisibleReplies((_visibleReplies) => {
+            if (_visibleReplies.length === 0) {
+                // Initial load
+                return comment.replies.slice(0, MAX_VISIBLE_INITIAL);
+            } else {
+                return comment.replies.slice(0, comment.replies.length);
+            }
+        });
+    }, [comment.replies]);
+
+    const repliesLeft = comment.replies.length - visibleReplies.length;
+
+    const loadMore = () => {
+        const maxLength = visibleReplies.length + PAGE_LENGTH;
+        setVisibleReplies(comment.replies.slice(0, maxLength));
+    };
+
     return (
         <div>
-            {comment.replies.map((reply => <Comment comment={reply} parent={comment} key={reply.id} isReply={true} />))}
-            {/* <RepliesPagination /> */}
+            {visibleReplies.map((reply => <Comment comment={reply} parent={comment} key={reply.id} isReply={true} />))}
+            {!!repliesLeft && <RepliesPagination count={repliesLeft} loadMore={loadMore}/>}
         </div>
     );
 };
diff --git a/apps/comments-ui/src/components/RepliesPagination.js b/apps/comments-ui/src/components/RepliesPagination.js
index 514cc5328e..979e39cd53 100644
--- a/apps/comments-ui/src/components/RepliesPagination.js
+++ b/apps/comments-ui/src/components/RepliesPagination.js
@@ -1,13 +1,12 @@
 import React from 'react';
 
 const RepliesPagination = (props) => {
-    const loadMore = () => {
-        // dispatchAction('loadMoreReplies');
-    };
+    const loadMore = props.loadMore;
+    const count = props.count;
 
     return (
         <button className="w-full text-neutral-700 font-semibold px-3 py-3.5 mb-8 font-sans text-md text-left dark:text-white flex items-center " onClick={loadMore}>
-            <span className="whitespace-nowrap mr-4">↓ Show 3 more replies</span>
+            <span className="whitespace-nowrap mr-4">↓ Show {count} more replies</span>
             <span className="inline-block w-full bg-neutral-100 dark:bg-[rgba(255,255,255,0.08)] rounded h-[3px] mt-[3px]" />
         </button>
     );