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

Added new reply to the comments state

Browse source 
ref https://linear.app/tryghost/issue/AP-395

This is a stopgap solution, because currently we don't have any of our own
reply data in the frontend, so this will show the new reply, but it won't be
present on page reload. Should be enough for a demo video, but I think we need
to either fetch our outbox, or make a new replies endpoint and fetch from there
This commit is contained in:
Fabien O'Carroll 2024-09-19 15:35:49 +07:00 committed by Fabien 'egg' O'Carroll
parent 8cc3646c29
commit bd2a0369ed
2 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -78,6 +78,7 @@ const FeedItemDivider: React.FC = () => (
const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, allComments, focusReply}) => {
const MODAL_SIZE_SM = 640;
const MODAL_SIZE_LG = 2800;
const [commentsState, setCommentsState] = useState(comments);
const [isFocused, setFocused] = useState(focusReply ? 1 : 0);
function setReplyBoxFocused(focused: boolean) {
if (focused) {
@ -114,7 +115,7 @@ const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, all
};
const navigateForward = (nextObject: ObjectProperties, nextActor: ActorProperties, nextComments: Activity[]) => {
setCanNavigateBack(true);
setNavigationStack([...navigationStack, [object, actor, comments]]);
setNavigationStack([...navigationStack, [object, actor, commentsState]]);
modal.show({
object: nextObject,
@ -127,6 +128,10 @@ const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, all
setModalSize(modalSize === MODAL_SIZE_SM ? MODAL_SIZE_LG : MODAL_SIZE_SM);
};
function handleNewReply(activity: Activity) {
setCommentsState(prev => [activity].concat(prev));
}
return (
<Modal
align='right'
@ -164,7 +169,7 @@ const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, all
setReplyBoxFocused(true);
}}
/>
<APReplyBox focused={isFocused} object={object}/>
<APReplyBox focused={isFocused} object={object} onNewReply={handleNewReply}/>
<FeedItemDivider />
{/* {object.content && <div dangerouslySetInnerHTML={({__html: object.content})} className='ap-note-content text-pretty text-[1.5rem] text-grey-900'></div>} */}
@ -175,8 +180,8 @@ const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, all
<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) => {
const showDivider = index !== comments.length - 1;
{commentsState.map((comment, index) => {
const showDivider = index !== commentsState.length - 1;
const nestedComments = allComments.get(comment.object.id) ?? [];
const hasNestedComments = nestedComments.length > 0;

6
apps/admin-x-activitypub/src/components/global/APReplyBox.tsx
View file

@ -2,6 +2,7 @@ import React, {HTMLProps, useEffect, useId, useRef, useState} from 'react';
import * as FormPrimitive from '@radix-ui/react-form';
import APAvatar from './APAvatar';
import Activity from '../activities/ActivityItem';
import clsx from 'clsx';
import getUsername from '../../utils/get-username';
import {Button, showToast} from '@tryghost/admin-x-design-system';
@ -18,6 +19,7 @@ export interface APTextAreaProps extends HTMLProps<HTMLTextAreaElement> {
hint?: React.ReactNode;
className?: string;
onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
onNewReply?: (activity: Activity) => void;
object: ObjectProperties;
focused: number;
}
@ -32,6 +34,7 @@ const APReplyBox: React.FC<APTextAreaProps> = ({
className,
object,
focused,
onNewReply,
// onChange,
// onFocus,
// onBlur,
@ -61,12 +64,13 @@ const APReplyBox: React.FC<APTextAreaProps> = ({
async function handleClick(event: React.MouseEvent) {
event.preventDefault();
await replyMutation.mutate({id: object.id, content: textValue}, {
onSuccess() {
onSuccess(activity) {
setTextValue('');
showToast({
message: 'Reply sent',
type: 'success'
});
onNewReply(activity);
}
});
}