Paginated actions & followers API usage (#446)

* Hide social config if disabled

* Use paginated APIs. For https://github.com/owncast/owncast/issues/1654

web/components/main-layout.tsx

@@ -193,7 +193,10 @@ export default function MainLayout(props) {
             <Menu.Item key="config-chat">
               <Link href="/config-chat">Chat</Link>
             </Menu.Item>
-            <Menu.Item key="config-federation">
+            <Menu.Item
+              key="config-federation"
+              style={{ display: federationEnabled ? 'block' : 'none' }}
+            >
               <Link href="/config-federation">Social</Link>
             </Menu.Item>
 
@@ -209,7 +212,11 @@ export default function MainLayout(props) {
             <Menu.Item key="logs">
               <Link href="/logs">Logs</Link>
             </Menu.Item>
-            <Menu.Item key="federation-activities" title="Social Actions">
+            <Menu.Item
+              key="federation-activities"
+              title="Social Actions"
+              style={{ display: federationEnabled ? 'block' : 'none' }}
+            >
               <Link href="/federation/actions">Social Actions</Link>
             </Menu.Item>
             <Menu.Item key="upgrade" style={{ display: upgradeMenuItemStyle }}>

web/pages/federation/actions.tsx

@@ -17,14 +17,21 @@ export interface Action {
 
 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 result = await fetchData(FEDERATION_ACTIONS, { auth: true });
+      const limit = 50;
-      if (isEmptyObject(result)) {
+      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(result);
+        setActions(results);
       }
     } catch (error) {
       console.log('==== error', error);
@@ -33,7 +40,7 @@ export default function FediverseActions() {
 
   useEffect(() => {
     getActions();
-  }, []);
+  }, [currentPage]);
 
   const columns: ColumnsType<Action> = [
     {
@@ -102,7 +109,16 @@ export default function FediverseActions() {
         columns={tableColumns}
         size="small"
         rowKey={row => row.iri}
-        pagination={{ pageSize: 50 }}
+        pagination={{
+          pageSize: 50,
+          hideOnSinglePage: true,
+          showSizeChanger: false,
+          total: totalCount,
+        }}
+        onChange={pagination => {
+          const page = pagination.current;
+          setCurrentPage(page);
+        }}
       />
     );
   }