TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-30 21:40:39 +03:00
Code Issues Projects Releases Wiki Activity

Wired up really basic reply pagination

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

Needs input on https://github.com/TryGhost/Team/issues/1689#issuecomment-1190189896
This commit is contained in:
Simon Backx 2022-07-20 14:15:27 +02:00
parent e4d90f7a82
commit e4c9ecc621
2 changed files with 32 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
apps/comments-ui/src/components/Replies.js
View File

@ -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>
);
};

7
apps/comments-ui/src/components/RepliesPagination.js
View File

@ -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>
);