Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Added nested comment rendering in admin-x-activitypub app (#20980)

Browse source 
refs
[AP-279](https://linear.app/tryghost/issue/AP-279/handle-incoming-replies)

Added nested comment rendering in admin-x-activitypub app so that
replies to posts and replies to replies can be viewed by the user
This commit is contained in:
Michael Barrett 2024-09-12 08:20:39 +01:00 • committed by GitHub
parent ba74785250
commit 2fc6634573
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 38 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/admin-x-activitypub/src/components/Inbox.tsx
View file

@ -50,7 +50,7 @@ const Inbox: React.FC<InboxProps> = ({}) => {
const handleViewContent = (object: ObjectProperties, actor: ActorProperties, comments: Activity[]) => {
setArticleContent(object);
setArticleActor(actor);
NiceModal.show(ArticleModal, {object, actor, comments});
NiceModal.show(ArticleModal, {object, actor, comments, allComments: commentsMap});
};
const handleLayoutChange = (newLayout: string) => {

48
apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx
View file

@ -15,6 +15,7 @@ interface ArticleModalProps {
object: ObjectProperties;
actor: ActorProperties;
comments: Activity[];
allComments: Map<string, Activity[]>;
}
const ArticleBody: React.FC<{heading: string, image: string|undefined, html: string}> = ({heading, image, html}) => {
@ -68,7 +69,11 @@ ${image &&
);
};
const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments}) => {
const FeedItemDivider: React.FC = () => (
<div className="mx-[-32px] my-4 h-px w-[120%] bg-grey-200"></div>
);
const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, allComments}) => {
const modal = useModal();
return (
<Modal
@ -109,16 +114,37 @@ const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments}) =>
<FeedItem actor={actor} last={false} layout='reply' object={object} type='Note'/>
<FeedItem actor={actor} last={false} layout='reply' object={object} type='Note'/>
<FeedItem actor={actor} last={true} layout='reply' object={object} type='Note'/> */}
{comments.map((comment, index) => (
<FeedItem
actor={comment.actor}
last={index === comments.length - 1}
layout='reply'
object={comment.object}
type='Note'
/>
))}
</div>)}
{comments.map((comment, index) => {
const showDivider = index !== comments.length - 1;
const nestedComments = allComments.get(comment.object.id) ?? [];
const hasNestedComments = nestedComments.length > 0;
return (
<>
<FeedItem
actor={comment.actor}
comments={nestedComments}
last={true}
layout='reply'
object={comment.object}
type='Note'
/>
{hasNestedComments && <FeedItemDivider />}
{nestedComments.map((nestedComment, nestedCommentIndex) => (
<FeedItem
actor={nestedComment.actor}
last={nestedComments.length === nestedCommentIndex + 1}
layout='reply'
object={nestedComment.object}
type='Note'
/>
))}
{showDivider && <FeedItemDivider />}
</>
);
})}
</div>
)}
{object.type === 'Article' && (
<ArticleBody heading={object.name} html={object.content} image={object?.image} />
)}