Skip to main content

ActivityPub Components

Installation

npm install @semapps/activitypub-components

Components

CollectionList

Load an ActivityStreams Collection from its URL and display it in a list of type Datagrid, SimpleList, etc.

import { Show, SimpleList } from 'react-admin';
import { CollectionList } from '@semapps/activitypub-components';

export const MyPage = (props) => (
<div>
<CollectionList collectionUrl="http://localhost:3000/alice/followers" resource="Actor">
<SimpleList primaryText="name" />
</CollectionList>
</div>
);

CommentsField

Display a form to attach comments to the current resource, as well as the list of existing comments (located in the replies collection). A comment is an ActivityPub Note and it is linked to the original resource with the inReplyOf property.

import { Show, SimpleShowLayout } from 'react-admin';
import { CommentsField } from '@semapps/activitypub-components';

const DocumentShow = props => {
const mentions = useMentions('Person');
return (
<Show {...props}>
<SimpleShowLayout>
<CommentsField
userResource="Person"
mentions={mentions}
/>
</SimpleShowLayout>
</Show>
);
}
PropertyTypeDefaultDescription
userResourceStringrequiredReact-Admin resource ID for users
labelString"Commentaires"The label to use for the field
mentionsObjectA tiptap suggestion object. If present, it allows to mention users.

To display the users' avatars, the fieldsMapping.image property must be defined in the data model of the user resource.

ReferenceCollectionField

This component can be used like React-Admin ReferenceField. It fetches the collection associated with a resource, and display it in a list. Internally, it uses the CollectionList component.

import { Show, SimpleList } from 'react-admin';
import { ReferenceCollectionField } from '@semapps/activitypub-components';

export const ActorShow = (props) => (
<Show {...props}>
<SimpleForm>
<ReferenceCollectionField reference="Actor" source="followers">
<SimpleList primaryText="name" />
</ReferenceCollectionField>
</SimpleForm>
</Show>
);

Hooks

useCollection

This hook allows you to load data from an ActivityStreams Collection.

It takes as a parameter a full URL or a predicate. In the latter case, it will look for the properties of the logged-in actor. Typically, you could use useCollection("followers") to get the list of followers of the logged-in actor.

const {
items, // an array listing the items of the collection
loaded, // boolean that is false until the data is available
loading, // boolean that is true on mount, and false once the data was fetched
error, // error message if there was an error loading the collection
refetch, // a callback to refresh the data
url, // url of the loaded collection (useful if only a predicate was passed)
} = useCollection("http://localhost:3000/alice/followers");

useInbox

This hook allows you to fetch activities from the logged-in user's inbox.

import { useEffect } from 'react';
import { useInbox } from '@semapps/activitypub-components';

export const MyPage = (props) => {
const inbox = useInbox();
useEffect(() => {
inbox.fetch().then(activities => console.log(activities))
}, [inbox]);
return null;
};

useOutbox

This hook allows you to fetch activities from the logged-in user's outbox, and also to post new activities.

import { useEffect, useCallback } from 'react';
import { useOutbox, ACTIVITY_TYPES } from '@semapps/activitypub-components';

export const MyPage = (props) => {
const outbox = useOutbox();

useEffect(() => {
outbox.fetch().then(activities => console.log(activities))
}, [outbox]);

const follow = useCallback(actorUrl => {
outbox.post({
type: ACTIVITY_TYPES.FOLLOW,
actor: outbox.owner,
object: actorUrl,
to: actorUrl,
});
}, [outbox]);

return (
<button onClick={() => follow("http://localhost:3000/alice")}>
Follow Alice
</button>
);
};

useWebfinger

This hook allows you to get an actor URL from its Webfinger account

import { useCallback } from 'react';
import { useWebfinger } from '@semapps/activitypub-components';

export const MyPage = (props) => {
const webfinger = useWebfinger();

const showActorUrl = useCallback(actorAccount => {
webfinger.fetch(actorAccount).then(actorUrl => alert(actorUrl));
}, [webfinger]);

return (
<button onClick={() => showActorUrl("@alice@localhost:3000")}>
Show Alice URL
</button>
);
};

useMentions

Returns a tiptap suggestion object, allowing to mention users.

See the CommentsField component above for an example.