Moved admin to /admin and created blank placeholder for v2 frontend

2022-04-19 19:57:27 -07:00
parent 75354527f6
commit 79bfa0145f
29 changed files with 323 additions and 281 deletions
--- a/web/pages/admin/federation/actions.tsx
+++ b/web/pages/admin/federation/actions.tsx
@@ -0,0 +1,136 @@
+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 [totalCount, setTotalCount] = useState<number>(0);
+  const [currentPage, setCurrentPage] = useState<number>(0);
+
+  const getActions = async () => {
+    try {
+      const limit = 50;
+      const offset = currentPage * limit;
+      const u = `${FEDERATION_ACTIONS}?offset=${offset}&limit=${limit}`;
+      const result = await fetchData(u, { auth: true });
+      const { results, total } = result;
+      setTotalCount(total);
+      if (isEmptyObject(results)) {
+        setActions([]);
+      } else {
+        setActions(results);
+      }
+    } catch (error) {
+      console.log('==== error', error);
+    }
+  };
+
+  useEffect(() => {
+    getActions();
+  }, [currentPage]);
+
+  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,
+          hideOnSinglePage: true,
+          showSizeChanger: false,
+          total: totalCount,
+        }}
+        onChange={pagination => {
+          const page = pagination.current;
+          setCurrentPage(page);
+        }}
+      />
+    );
+  }
+
+  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>
+  );
+}