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>
);
};
Property | Type | Default | Description |
---|---|---|---|
userResource | String | required | React-Admin resource ID for users |
label | String | "Commentaires" | The label to use for the field |
placeholder | String | "Commencez à taper votre commentaire..." | A placeholder to show before the user starts typing text. |
mentions | Object | A 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>;
};
useNodeinfo
This hook allows you to get the nodeinfo schema of an instance.
import { useNodeinfo } from '@semapps/activitypub-components';
export const MyComponent = () => {
const nodeinfo = useNodeinfo('mastodon.social');
console.log('Nodeinfo schema: ', nodeinfo);
return null;
};
You can pass as a second argument the
rel
you want to fetch. By default, it ishttp://nodeinfo.diaspora.software/ns/schema/2.1
.
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.