Admin social features (#408)

* ActivityPub admin pages for configuration * Fix dev build * Add support for requiring follow approval. Closes https://github.com/owncast/owncast/issues/1208 * Point at admin version of followers endpoint * Add setting for toggling displaying fediverse engagement in admin. https://github.com/owncast/owncast/issues/1404 * Add instance URL textfield to federation config and disable federation if it is empty * If instance URL is not https disable federation * Tweak federation toggle text. Make go live message optional * Add federation info modal. Closes https://github.com/owncast/owncast/issues/1544 * Add support for blocked federated domains. For https://github.com/owncast/owncast/issues/1209 * Simplify fediverse post input * Add placeholder Fediverse icon * Tweak federation logo in admin menu. Closes https://github.com/owncast/owncast/issues/1603 * Add global button for composing a fediverse post. Closes https://github.com/owncast/owncast/issues/1610 * Federation -> Social * Add page for listing federated actions. Closes https://github.com/owncast/owncast/issues/1573 * Auto-close social post modal after success * Make user modal action buttons look nicer * Center and reduce width and center count column. Closes https://github.com/owncast/owncast/issues/1580 * Update the followers table to be clearer * Fix exception thrown when passing undefined * Disable federation settings if feature is disabled * Update enable social modal. For https://github.com/owncast/owncast/issues/1594 * Fix type props * Quiet, linter * Move compose button to the left * Add tooltip for compose button * Add NSFW toggle to federation config. Closes https://github.com/owncast/owncast/issues/1628 * Add support for blocking/removing followers. For https://github.com/owncast/owncast/issues/1630 * Allow editing the server url field even when federation is disabled * Continue to update the copy around the social features * Use relative path to action images. Fixes https://github.com/owncast/owncast/issues/1646 * Link IRIs and make action verbse present tense * Update caniuse
2022-01-12 13:52:37 -08:00
parent 53d60f5127
commit 084a01fb02
18 changed files with 1068 additions and 42 deletions
--- a/web/pages/federation/actions.tsx
+++ b/web/pages/federation/actions.tsx
@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from 'react';
+import { Table, Typography } from 'antd';
+import { ColumnsType } from 'antd/lib/table/interface';
+import format from 'date-fns/format';
+import { FEDERATION_ACTIONS, fetchData } from '../../utils/apis';
+
+import { isEmptyObject } from '../../utils/format';
+
+const { Title, Paragraph } = Typography;
+
+export interface Action {
+  iri: string;
+  actorIRI: string;
+  type: string;
+  timestamp: Date;
+}
+
+export default function FediverseActions() {
+  const [actions, setActions] = useState<Action[]>([]);
+
+  const getActions = async () => {
+    try {
+      const result = await fetchData(FEDERATION_ACTIONS, { auth: true });
+      if (isEmptyObject(result)) {
+        setActions([]);
+      } else {
+        setActions(result);
+      }
+    } catch (error) {
+      console.log('==== error', error);
+    }
+  };
+
+  useEffect(() => {
+    getActions();
+  }, []);
+
+  const columns: ColumnsType<Action> = [
+    {
+      title: 'Action',
+      dataIndex: 'type',
+      key: 'type',
+      width: 50,
+      render: (_, record) => {
+        let image;
+        let title;
+        switch (record.type) {
+          case 'FEDIVERSE_ENGAGEMENT_REPOST':
+            image = '/img/repost.svg';
+            title = 'Share';
+            break;
+          case 'FEDIVERSE_ENGAGEMENT_LIKE':
+            image = '/img/like.svg';
+            title = 'Like';
+            break;
+          case 'FEDIVERSE_ENGAGEMENT_FOLLOW':
+            image = '/img/follow.svg';
+            title = 'Follow';
+            break;
+          default:
+            image = '';
+        }
+
+        return (
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexDirection: 'column',
+            }}
+          >
+            <img src={image} width="70%" alt={title} title={title} />
+            <div style={{ fontSize: '0.7rem' }}>{title}</div>
+          </div>
+        );
+      },
+    },
+    {
+      title: 'From',
+      dataIndex: 'actorIRI',
+      key: 'from',
+      render: (_, record) => <a href={record.actorIRI}>{record.actorIRI}</a>,
+    },
+    {
+      title: 'When',
+      dataIndex: 'timestamp',
+      key: 'timestamp',
+      render: (_, record) => {
+        const dateObject = new Date(record.timestamp);
+        return format(dateObject, 'P pp');
+      },
+    },
+  ];
+
+  function makeTable(data: Action[], tableColumns: ColumnsType<Action>) {
+    return (
+      <Table
+        dataSource={data}
+        columns={tableColumns}
+        size="small"
+        rowKey={row => row.iri}
+        pagination={{ pageSize: 50 }}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <Title level={3}>Fediverse Actions</Title>
+      <Paragraph>
+        Below is a list of actions that were taken by others in response to your posts as well as
+        people who requested to follow you.
+      </Paragraph>
+      {makeTable(actions, columns)}
+    </div>
+  );
+}