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 is http://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.