Fixed type errors for admin-x-activitypub

We didn't catch these because ci type checks weren't running, but they are now!

apps/admin-x-activitypub/src/api/activitypub.ts

@@ -24,7 +24,7 @@ export class ActivityPubAPI {
 
     private async fetchJSON(url: URL, method: 'GET' | 'POST' = 'GET', body?: object): Promise<object | null> {
         const token = await this.getToken();
-        const options = {
+        const options: RequestInit = {
             method,
             headers: {
                 Authorization: `Bearer ${token}`,
@@ -33,7 +33,7 @@ export class ActivityPubAPI {
         };
         if (body) {
             options.body = JSON.stringify(body);
-            options.headers['Content-Type'] = 'application/json';
+            (options.headers! as Record<string, string>)['Content-Type'] = 'application/json';
         }
         const response = await this.fetch(url, options);
         const json = await response.json();

apps/admin-x-activitypub/src/components/Profile.tsx

@@ -52,6 +52,7 @@ const Profile: React.FC<ProfileProps> = ({}) => {
                                         layout={layout}
                                         object={Object.assign({}, activity.object, {liked: true})}
                                         type={activity.type}
+                                        onCommentClick={() => {}}
                                     />
                                     {index < liked.length - 1 && (
                                         <div className="h-px w-full bg-grey-200"></div>

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

@@ -190,6 +190,7 @@ const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, all
                                         onClick={() => {
                                             navigateForward(comment.object, comment.actor, nestedComments);
                                         }}
+                                        onCommentClick={() => {}}
                                     />
                                     {hasNestedComments && <FeedItemDivider />}
                                     {nestedComments.map((nestedComment, nestedCommentIndex) => {
@@ -206,6 +207,7 @@ const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, all
                                                 onClick={() => {
                                                     navigateForward(nestedComment.object, nestedComment.actor, nestedNestedComments);
                                                 }}
+                                                onCommentClick={() => {}}
                                             />
                                         );
                                     })}

apps/admin-x-activitypub/src/components/feed/FeedItem.tsx

@@ -207,7 +207,7 @@ interface FeedItemProps {
     comments?: Activity[];
     last?: boolean;
     onClick?: () => void;
-    onCommentClick?: () => void;
+    onCommentClick: () => void;
 }
 
 const noop = () => {};

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

@@ -2,11 +2,11 @@ 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 {Activity} from '../activities/ActivityItem';
+import {ActorProperties, ObjectProperties} from '@tryghost/admin-x-framework/api/activitypub';
 import {Button, showToast} from '@tryghost/admin-x-design-system';
-import {ObjectProperties} from '@tryghost/admin-x-framework/api/activitypub';
 import {useReplyMutationForUser, useUserDataForUser} from '../../hooks/useActivityPubQueries';
 // import {useFocusContext} from '@tryghost/admin-x-design-system/types/providers/DesignSystemProvider';
 
@@ -55,14 +55,19 @@ const APReplyBox: React.FC<APTextAreaProps> = ({
     }, [focused]);
 
     async function handleClick() {
+        if (!textValue) {
+            return;
+        }
         await replyMutation.mutate({id: object.id, content: textValue}, {
-            onSuccess(activity) {
+            onSuccess(activity: Activity) {
                 setTextValue('');
                 showToast({
                     message: 'Reply sent',
                     type: 'success'
                 });
-                onNewReply(activity);
+                if (onNewReply) {
+                    onNewReply(activity);
+                }
             }
         });
     }
@@ -91,9 +96,16 @@ const APReplyBox: React.FC<APTextAreaProps> = ({
     // We disable the button if either the textbox isn't focused, or the reply is currently being sent.
     const buttonDisabled = !isFocused || replyMutation.isLoading;
 
+    let placeholder = 'Reply...';
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const attributedTo = (object.attributedTo || {}) as any;
+    if (typeof attributedTo.preferredUsername === 'string' && typeof attributedTo.id === 'string') {
+        placeholder = `Reply to ${getUsername(attributedTo)}...`;
+    }
+
     return (
         <div className='flex w-full gap-x-3 py-6'>
-            <APAvatar author={user} />
+            <APAvatar author={user as ActorProperties} />
             <div className='relative w-full'>
                 <FormPrimitive.Root asChild>
                     <div className='flex w-full flex-col'>
@@ -105,7 +117,7 @@ const APReplyBox: React.FC<APTextAreaProps> = ({
                                     disabled={replyMutation.isLoading}
                                     id={id}
                                     maxLength={maxLength}
-                                    placeholder={`Reply to ${getUsername(object.attributedTo)}...`}
+                                    placeholder={placeholder}
                                     rows={isFocused ? 3 : rows}
                                     value={textValue}
                                     onBlur={handleBlur}

apps/admin-x-activitypub/src/hooks/useActivityPubQueries.ts

@@ -1,3 +1,4 @@
+import {Activity} from '../components/activities/ActivityItem';
 import {ActivityPubAPI} from '../api/activitypub';
 import {useBrowseSite} from '@tryghost/admin-x-framework/api/site';
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
@@ -30,8 +31,8 @@ export function useReplyMutationForUser(handle: string) {
     const siteUrl = useSiteUrl();
     const api = createActivityPubAPI(handle, siteUrl);
     return useMutation({
-        mutationFn({id, content}: {id: string, content: string}) {
+        async mutationFn({id, content}: {id: string, content: string}) {
-            return api.reply(id, content);
+            return await api.reply(id, content) as Activity;
         }
     });
 }