From 5f59ddaacc30c72df5f05b7c536c13329f5fcb3f Mon Sep 17 00:00:00 2001 From: Michael Barrett Date: Thu, 31 Oct 2024 09:38:52 +0000 Subject: [PATCH] Updated replies implementation to use thread mechanism in admin-x-activitypub (#21465) refs: - https://linear.app/ghost/issue/AP-439/seeing-parent-post-for-replies - https://linear.app/ghost/issue/AP-481/reply-ui - https://linear.app/ghost/issue/AP-482/replies-to-a-post-should-be-visible-when-opening-it Updated the replies implementation to make use of the new thread mechanism. This allows for a more sane approach to handling replies as well as making it possible to show the parent of a reply in the UI --------- Co-authored-by: Djordje Vlaisavljevic --- apps/admin-x-activitypub/package.json | 2 +- .../src/api/activitypub.ts | 10 + .../src/components/Activities.tsx | 18 +- .../src/components/Inbox.tsx | 30 +-- .../components/activities/ActivityItem.tsx | 2 + .../src/components/feed/ArticleModal.tsx | 179 ++++++++++++------ .../src/components/feed/FeedItem.tsx | 31 ++- .../components/global/ViewProfileModal.tsx | 2 +- .../src/hooks/useActivityPubQueries.ts | 62 +++++- 9 files changed, 227 insertions(+), 109 deletions(-) diff --git a/apps/admin-x-activitypub/package.json b/apps/admin-x-activitypub/package.json index 5a768e7395..074d0f9e3a 100644 --- a/apps/admin-x-activitypub/package.json +++ b/apps/admin-x-activitypub/package.json @@ -1,6 +1,6 @@ { "name": "@tryghost/admin-x-activitypub", - "version": "0.3.4", + "version": "0.3.5", "license": "MIT", "repository": { "type": "git", diff --git a/apps/admin-x-activitypub/src/api/activitypub.ts b/apps/admin-x-activitypub/src/api/activitypub.ts index 569775c8de..c28f065a7e 100644 --- a/apps/admin-x-activitypub/src/api/activitypub.ts +++ b/apps/admin-x-activitypub/src/api/activitypub.ts @@ -32,6 +32,10 @@ export interface GetFollowingForProfileResponse { next: string | null; } +export interface ActivityThread { + items: Activity[]; +} + export class ActivityPubAPI { constructor( private readonly apiUrl: URL, @@ -509,4 +513,10 @@ export class ActivityPubAPI { const json = await this.fetchJSON(url); return json as Profile; } + + async getThread(id: string): Promise { + const url = new URL(`.ghost/activitypub/thread/${btoa(id)}`, this.apiUrl); + const json = await this.fetchJSON(url); + return json as ActivityThread; + } } diff --git a/apps/admin-x-activitypub/src/components/Activities.tsx b/apps/admin-x-activitypub/src/components/Activities.tsx index 708dc918fe..cd66e4ce9e 100644 --- a/apps/admin-x-activitypub/src/components/Activities.tsx +++ b/apps/admin-x-activitypub/src/components/Activities.tsx @@ -91,13 +91,7 @@ const getActivityBadge = (activity: Activity): AvatarBadge => { const Activities: React.FC = ({}) => { const user = 'index'; - const { - data, - fetchNextPage, - hasNextPage, - isFetchingNextPage, - isLoading - } = useActivitiesForUser({ + const {getActivitiesQuery} = useActivitiesForUser({ handle: user, includeOwn: true, includeReplies: true, @@ -105,7 +99,7 @@ const Activities: React.FC = ({}) => { type: ['Follow', 'Like', `Create:Note:isReplyToOwn`] } }); - + const {data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading} = getActivitiesQuery; const activities = (data?.pages.flatMap(page => page.data) ?? []); const observerRef = useRef(null); @@ -144,16 +138,16 @@ const Activities: React.FC = ({}) => { switch (activity.type) { case ACTVITY_TYPE.CREATE: NiceModal.show(ArticleModal, { + activityId: activity.id, object: activity.object, - actor: activity.actor, - comments: activity.object.replies + actor: activity.actor }); break; case ACTVITY_TYPE.LIKE: NiceModal.show(ArticleModal, { + activityId: activity.id, object: activity.object, - actor: activity.object.attributedTo as ActorProperties, - comments: activity.object.replies + actor: activity.object.attributedTo as ActorProperties }); break; case ACTVITY_TYPE.FOLLOW: diff --git a/apps/admin-x-activitypub/src/components/Inbox.tsx b/apps/admin-x-activitypub/src/components/Inbox.tsx index c47027d1e5..7df9d8db25 100644 --- a/apps/admin-x-activitypub/src/components/Inbox.tsx +++ b/apps/admin-x-activitypub/src/components/Inbox.tsx @@ -21,20 +21,14 @@ const Inbox: React.FC = ({}) => { const [, setArticleActor] = useState(null); const {layout, setFeed, setInbox} = useLayout(); - const { - data, - fetchNextPage, - hasNextPage, - isFetchingNextPage, - isLoading - } = useActivitiesForUser({ + const {getActivitiesQuery, updateActivity} = useActivitiesForUser({ handle: 'index', - includeReplies: true, excludeNonFollowers: true, filter: { - type: ['Create:Article:notReply', 'Create:Note:notReply', 'Announce:Note'] + type: ['Create:Article', 'Create:Note', 'Announce:Note'] } }); + const {data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading} = getActivitiesQuery; const {updateRoute} = useRouting(); @@ -45,10 +39,16 @@ const Inbox: React.FC = ({}) => { return !activity.object.inReplyTo; }); - const handleViewContent = (object: ObjectProperties, actor: ActorProperties, comments: Activity[], focusReply = false) => { + const handleViewContent = (activityId: string, object: ObjectProperties, actor: ActorProperties, focusReply = false) => { setArticleContent(object); setArticleActor(actor); - NiceModal.show(ArticleModal, {object, actor, comments, focusReply}); + NiceModal.show(ArticleModal, { + activityId, + object, + actor, + focusReply, + updateActivity + }); }; function getContentAuthor(activity: Activity) { @@ -121,21 +121,21 @@ const Inbox: React.FC = ({}) => { key={activity.id} data-test-view-article onClick={() => handleViewContent( + activity.id, activity.object, - getContentAuthor(activity), - activity.object.replies + getContentAuthor(activity) )} > handleViewContent( + activity.id, activity.object, getContentAuthor(activity), - activity.object.replies, true )} /> diff --git a/apps/admin-x-activitypub/src/components/activities/ActivityItem.tsx b/apps/admin-x-activitypub/src/components/activities/ActivityItem.tsx index 0b40b69c87..a5ecbbfc40 100644 --- a/apps/admin-x-activitypub/src/components/activities/ActivityItem.tsx +++ b/apps/admin-x-activitypub/src/components/activities/ActivityItem.tsx @@ -3,11 +3,13 @@ import React, {ReactNode} from 'react'; import {ActorProperties, ObjectProperties} from '@tryghost/admin-x-framework/api/activitypub'; export type Activity = { + id: string, type: string, actor: ActorProperties, object: ObjectProperties & { inReplyTo: ObjectProperties | string | null replies: Activity[] + replyCount: number } } diff --git a/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx b/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx index 2759d0f3ed..c6e89fa14e 100644 --- a/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx +++ b/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx @@ -2,20 +2,28 @@ import React, {useEffect, useRef, useState} from 'react'; import NiceModal, {useModal} from '@ebay/nice-modal-react'; import {ActorProperties, ObjectProperties} from '@tryghost/admin-x-framework/api/activitypub'; -import {Button, Modal} from '@tryghost/admin-x-design-system'; +import {Button, LoadingIndicator, Modal} from '@tryghost/admin-x-design-system'; import {useBrowseSite} from '@tryghost/admin-x-framework/api/site'; -import FeedItem from './FeedItem'; - -import APReplyBox from '../global/APReplyBox'; -import articleBodyStyles from '../articleBodyStyles'; import {type Activity} from '../activities/ActivityItem'; +import APReplyBox from '../global/APReplyBox'; +import FeedItem from './FeedItem'; +import articleBodyStyles from '../articleBodyStyles'; + +import {useThreadForUser} from '../../hooks/useActivityPubQueries'; + interface ArticleModalProps { + activityId: string; object: ObjectProperties; actor: ActorProperties; - comments: Activity[]; focusReply: boolean; + updateActivity: (id: string, updated: Partial) => void; + history: { + activityId: string; + object: ObjectProperties; + actor: ActorProperties; + }[]; } const ArticleBody: React.FC<{heading: string, image: string|undefined, excerpt: string|undefined, html: string}> = ({heading, image, excerpt, html}) => { @@ -146,9 +154,15 @@ const FeedItemDivider: React.FC = () => (
); -const ArticleModal: React.FC = ({object, actor, comments, focusReply}) => { +const ArticleModal: React.FC = ({ + activityId, + object, + actor, + focusReply, + updateActivity = () => {}, + history = [] +}) => { const MODAL_SIZE_SM = 640; - const [commentsState, setCommentsState] = useState(comments); const [isFocused, setFocused] = useState(focusReply ? 1 : 0); function setReplyBoxFocused(focused: boolean) { if (focused) { @@ -158,43 +172,69 @@ const ArticleModal: React.FC = ({object, actor, comments, foc } } + const {threadQuery, addToThread} = useThreadForUser('index', activityId); + const {data: activityThread, isLoading: isLoadingThread} = threadQuery; + const activtyThreadActivityIdx = (activityThread?.items ?? []).findIndex(item => item.id === activityId); + const activityThreadChildren = (activityThread?.items ?? []).slice(activtyThreadActivityIdx + 1); + const activityThreadParents = (activityThread?.items ?? []).slice(0, activtyThreadActivityIdx); + const [modalSize] = useState(MODAL_SIZE_SM); const modal = useModal(); - // Navigation stack to navigate between comments - This could probably use a - // more robust solution, but for now, thanks to the fact modal.show() updates - // the existing modal instead of creating a new one (i think 😅) we can use - // a stack to navigate between comments pretty easily - // - // @TODO: Look into a more robust solution for navigation - const [navigationStack, setNavigationStack] = useState<[ObjectProperties, ActorProperties, Activity[]][]>([]); - const [canNavigateBack, setCanNavigateBack] = useState(false); + const canNavigateBack = history.length > 0; const navigateBack = () => { - const [previousObject, previousActor, previousComments] = navigationStack.pop() ?? []; + const prevProps = history.pop(); - if (navigationStack.length === 0) { - setCanNavigateBack(false); + // This shouldn't happen, but if it does, just remove the modal + if (!prevProps) { + modal.remove(); + + return; } modal.show({ - object: previousObject, - actor: previousActor, - comments: previousComments + activityId: prevProps.activityId, + object: prevProps.object, + actor: prevProps.actor, + updateActivity, + history }); }; - const navigateForward = (nextObject: ObjectProperties, nextActor: ActorProperties, nextComments: Activity[]) => { - setCanNavigateBack(true); - setNavigationStack([...navigationStack, [object, actor, commentsState]]); - + const navigateForward = (nextActivityId: string, nextObject: ObjectProperties, nextActor: ActorProperties) => { + // Trigger the modal to show the next activity and add the existing + // activity to the history so we can navigate back modal.show({ + activityId: nextActivityId, object: nextObject, actor: nextActor, - comments: nextComments + updateActivity, + history: [ + ...history, + { + activityId: activityId, + object: object, + actor: actor + } + ] }); }; function handleNewReply(activity: Activity) { - setCommentsState(prev => [activity].concat(prev)); + // Add the new reply to the thread + addToThread(activity); + + // Update the replyCount on the activity outside of the context + // of this component + updateActivity(activityId, { + object: { + ...object, + replyCount: object.replyCount + 1 + } + } as Partial); + + // Update the replyCount on the current activity loaded in the modal + // This is used for when we navigate via the history + object.replyCount = object.replyCount + 1; } return ( @@ -223,62 +263,79 @@ const ArticleModal: React.FC = ({object, actor, comments, foc
-
+
+ {activityThreadParents.map((item) => { + return ( + <> + {item.object.type === 'Article' ? ( + + ) : ( + { + navigateForward(item.id, item.object, item.actor); + }} + onCommentClick={() => {}} + /> + )} + + ); + })} + {object.type === 'Note' && ( 0 ? 'modal' : 'modal'} object={object} type='Note' onCommentClick={() => { setReplyBoxFocused(true); }} - />)} - {object.type === 'Article' && ( - + /> )} + {object.type === 'Article' && ( + + )} + - {commentsState.map((comment, index) => { - const showDivider = index !== comments.length - 1; - const nestedComments = comment.object.replies ?? []; - const hasNestedComments = nestedComments.length > 0; + {isLoadingThread && } + + {activityThreadChildren.map((item, index) => { + const showDivider = index !== activityThreadChildren.length - 1; return ( <> { - navigateForward(comment.object, comment.actor, nestedComments); + navigateForward(item.id, item.object, item.actor); }} onCommentClick={() => {}} /> - {hasNestedComments && } - {nestedComments.map((nestedComment, nestedCommentIndex) => { - const nestedNestedComments = nestedComment.object.replies ?? []; - - return ( - { - navigateForward(nestedComment.object, nestedComment.actor, nestedNestedComments); - }} - onCommentClick={() => {}} - /> - ); - })} {showDivider && } ); diff --git a/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx b/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx index 60ae03d731..66fc2e0d46 100644 --- a/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx +++ b/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx @@ -7,7 +7,6 @@ import APAvatar from '../global/APAvatar'; import getRelativeTimestamp from '../../utils/get-relative-timestamp'; import getUsername from '../../utils/get-username'; import stripHtml from '../../utils/strip-html'; -import {type Activity} from '../activities/ActivityItem'; import {useLikeMutationForUser, useUnlikeMutationForUser} from '../../hooks/useActivityPubQueries'; function getAttachment(object: ObjectProperties) { @@ -203,7 +202,7 @@ const FeedItemStats: React.FC<{ /> {isLiked && (layout !== 'inbox') && {new Intl.NumberFormat().format(likeCount)}}
- {(layout !== 'modal') && (
+
)} +
); }; @@ -228,7 +227,7 @@ interface FeedItemProps { object: ObjectProperties; layout: string; type: string; - comments?: Activity[]; + commentCount?: number; last?: boolean; onClick?: () => void; onCommentClick: () => void; @@ -236,7 +235,7 @@ interface FeedItemProps { const noop = () => {}; -const FeedItem: React.FC = ({actor, object, layout, type, comments = [], last, onClick = noop, onCommentClick}) => { +const FeedItem: React.FC = ({actor, object, layout, type, commentCount = 0, last, onClick = noop, onCommentClick}) => { const timestamp = new Date(object?.published ?? new Date()).toLocaleDateString('default', {year: 'numeric', month: 'short', day: '2-digit'}) + ', ' + new Date(object?.published ?? new Date()).toLocaleTimeString('default', {hour: '2-digit', minute: '2-digit'}); @@ -302,7 +301,7 @@ const FeedItem: React.FC = ({actor, object, layout, type, comment return ( <> {object && ( -
+
{(type === 'Announce' && object.type === 'Note') &&
{actor.name} reposted @@ -338,7 +337,7 @@ const FeedItem: React.FC = ({actor, object, layout, type, comment
= ({actor, object, layout, type, comment <> {object && (
-
+
{(type === 'Announce' && object.type === 'Note') &&
{actor.name} reposted
} -
+
@@ -384,7 +383,7 @@ const FeedItem: React.FC = ({actor, object, layout, type, comment {renderFeedAttachment(object, layout)}
= ({actor, object, layout, type, comment return ( <> {object && ( -
+
{(type === 'Announce' && object.type === 'Note') &&
{actor.name} reposted @@ -433,7 +432,7 @@ const FeedItem: React.FC = ({actor, object, layout, type, comment {renderFeedAttachment(object, layout)}
= ({actor, object, layout, type, comment return ( <> {object && ( -
+
@@ -470,8 +469,8 @@ const FeedItem: React.FC = ({actor, object, layout, type, comment {object.name ? object.name : ( 30 - ? stripHtml(object.content).substring(0, 50) + '...' + __html: object.content.length > 30 + ? stripHtml(object.content).substring(0, 50) + '...' : stripHtml(object.content) }}> )} @@ -481,7 +480,7 @@ const FeedItem: React.FC = ({actor, object, layout, type, comment {renderInboxAttachment(object)}
= ({
) => { + queryClient.setQueryData(queryKey, (current: {pages: {data: Activity[]}[]} | undefined) => { + if (!current) { + return current; + } + + return { + ...current, + pages: current.pages.map((page: {data: Activity[]}) => { + return { + ...page, + data: page.data.map((item: Activity) => { + if (item.id === id) { + return {...item, ...updated}; + } + return item; + }) + }; + }) + }; + }); + }; + + return {getActivitiesQuery, updateActivity}; } export function useSearchForUser(handle: string, query: string) { @@ -374,3 +402,31 @@ export function useOutboxForUser(handle: string) { } }); } + +export function useThreadForUser(handle: string, id: string) { + const queryClient = useQueryClient(); + const queryKey = ['thread', {id}]; + + const threadQuery = useQuery({ + queryKey, + async queryFn() { + const siteUrl = await getSiteUrl(); + const api = createActivityPubAPI(handle, siteUrl); + return api.getThread(id); + } + }); + + const addToThread = (activity: Activity) => { + queryClient.setQueryData(queryKey, (current: ActivityThread | undefined) => { + if (!current) { + return current; + } + + return { + items: [...current.items, activity] + }; + }); + }; + + return {threadQuery, addToThread}; +}