Updated ActivityPub Admin X to work with Fedify API

This commit is contained in:
Fabien O'Carroll 2024-06-20 11:26:57 +07:00 committed by Djordje Vlaisavljevic
parent 725ebc3e9f
commit b81839f2fe
5 changed files with 25 additions and 26 deletions

View File

@ -16,7 +16,7 @@ const ActivityPubComponent: React.FC = () => {
const {updateRoute} = useRouting();
// TODO: Replace with actual user ID
const {data: {orderedItems: activities = []} = {}} = useBrowseInboxForUser('index');
const {data: {items: activities = []} = {}} = useBrowseInboxForUser('index');
const {data: {totalItems: followingCount = 0} = {}} = useBrowseFollowingForUser('index');
const {data: {totalItems: followersCount = 0} = {}} = useBrowseFollowersForUser('index');

View File

@ -1,8 +1,8 @@
import {} from '@tryghost/admin-x-framework/api/activitypub';
import NiceModal from '@ebay/nice-modal-react';
import getUsernameFromFollowing from '../utils/get-username-from-following';
import getUsername from '../utils/get-username';
import {Avatar, Button, List, ListItem, Modal} from '@tryghost/admin-x-design-system';
import {FollowingResponseData, useBrowseFollowersForUser, useUnfollow} from '@tryghost/admin-x-framework/api/activitypub';
import {FollowingResponseData, useBrowseFollowersForUser, useFollow} from '@tryghost/admin-x-framework/api/activitypub';
import {RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
interface ViewFollowersModalProps {
@ -13,10 +13,11 @@ interface ViewFollowersModalProps {
const ViewFollowersModal: React.FC<RoutingModalProps & ViewFollowersModalProps> = ({}) => {
const {updateRoute} = useRouting();
// const modal = NiceModal.useModal();
const mutation = useUnfollow();
const mutation = useFollow();
const {data: {orderedItems: followers = []} = {}} = useBrowseFollowersForUser('inbox');
const {data: {items = []} = {}} = useBrowseFollowersForUser('inbox');
const followers = Array.isArray(items) ? items : [items];
return (
<Modal
afterClose={() => {
@ -33,7 +34,7 @@ const ViewFollowersModal: React.FC<RoutingModalProps & ViewFollowersModalProps>
<div className='mt-3 flex flex-col gap-4 pb-12'>
<List>
{followers.map(item => (
<ListItem action={<Button color='grey' label='Follow back' link={true} onClick={() => mutation.mutate({username: item.username})} />} avatar={<Avatar image={item.icon} size='sm' />} detail={getUsernameFromFollowing(item)} id='list-item' title={item.name}></ListItem>
<ListItem action={<Button color='grey' label='Follow back' link={true} onClick={() => mutation.mutate({username: getUsername(item)})} />} avatar={<Avatar image={item.icon} size='sm' />} detail={getUsername(item)} id='list-item' title={item.name}></ListItem>
))}
</List>
</div>

View File

@ -1,6 +1,6 @@
import {} from '@tryghost/admin-x-framework/api/activitypub';
import NiceModal from '@ebay/nice-modal-react';
import getUsernameFromFollowing from '../utils/get-username-from-following';
import getUsername from '../utils/get-username';
import {Avatar, Button, List, ListItem, Modal} from '@tryghost/admin-x-design-system';
import {FollowingResponseData, useBrowseFollowingForUser, useUnfollow} from '@tryghost/admin-x-framework/api/activitypub';
import {RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
@ -14,8 +14,9 @@ const ViewFollowingModal: React.FC<RoutingModalProps & ViewFollowingModalProps>
const {updateRoute} = useRouting();
const mutation = useUnfollow();
const {data: {orderedItems: following = []} = {}} = useBrowseFollowingForUser('inbox');
const {data: {items = []} = {}} = useBrowseFollowingForUser('inbox');
const following = Array.isArray(items) ? items : [items];
return (
<Modal
afterClose={() => {
@ -32,7 +33,7 @@ const ViewFollowingModal: React.FC<RoutingModalProps & ViewFollowingModalProps>
<div className='mt-3 flex flex-col gap-4 pb-12'>
<List>
{following.map(item => (
<ListItem action={<Button color='grey' label='Unfollow' link={true} onClick={() => mutation.mutate({username: getUsernameFromFollowing(item)})} />} avatar={<Avatar image={item.icon} size='sm' />} detail={getUsernameFromFollowing(item)} id='list-item' title={item.name}></ListItem>
<ListItem action={<Button color='grey' label='Unfollow' link={true} onClick={() => mutation.mutate({username: getUsername(item)})} />} avatar={<Avatar image={item.icon} size='sm' />} detail={getUsername(item)} id='list-item' title={item.name}></ListItem>
))}
</List>
{/* <Table>

View File

@ -1,12 +0,0 @@
function getUsernameFromFollowing(followItem: {username: string; id: string|null;}) {
if (!followItem.username || !followItem.id) {
return '@unknown@unknown';
}
try {
return `@${followItem.username}@${(new URL(followItem.id)).hostname}`;
} catch (err) {
return '@unknown@unknown';
}
}
export default getUsernameFromFollowing;

View File

@ -2,7 +2,7 @@ import {createMutation, createQueryWithId} from '../utils/api/hooks';
export type FollowItem = {
id: string;
username: string,
preferredUsername: string,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
[x: string]: any
};
@ -63,7 +63,7 @@ export type InboxResponseData = {
summary: string;
type: 'OrderedCollection';
totalItems: number;
orderedItems: Activity[];
items: Activity[];
}
export type FollowingResponseData = {
@ -72,7 +72,7 @@ export type FollowingResponseData = {
summary: string;
type: string;
totalItems: number;
orderedItems: FollowItem[];
items: FollowItem[];
}
type FollowRequestProps = {
@ -82,19 +82,22 @@ type FollowRequestProps = {
export const useFollow = createMutation<object, FollowRequestProps>({
method: 'POST',
useActivityPub: true,
path: data => `/follow/${data.username}`
path: data => `/actions/follow/${data.username}`
});
export const useUnfollow = createMutation<object, FollowRequestProps>({
method: 'POST',
useActivityPub: true,
path: data => `/unfollow/${data.username}`
path: data => `/actions/unfollow/${data.username}`
});
// This is a frontend root, not using the Ghost admin API
export const useBrowseInboxForUser = createQueryWithId<InboxResponseData>({
dataType: 'InboxResponseData',
useActivityPub: true,
headers: {
Accept: 'application/activity+json'
},
path: id => `/inbox/${id}`
});
@ -102,6 +105,9 @@ export const useBrowseInboxForUser = createQueryWithId<InboxResponseData>({
export const useBrowseFollowingForUser = createQueryWithId<FollowingResponseData>({
dataType: 'FollowingResponseData',
useActivityPub: true,
headers: {
Accept: 'application/activity+json'
},
path: id => `/following/${id}`
});
@ -109,5 +115,8 @@ export const useBrowseFollowingForUser = createQueryWithId<FollowingResponseData
export const useBrowseFollowersForUser = createQueryWithId<FollowingResponseData>({
dataType: 'FollowingResponseData',
useActivityPub: true,
headers: {
Accept: 'application/activity+json'
},
path: id => `/followers/${id}`
});