From 6cd1687916718918b5e13c2ebc96fa558829e705 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sun, 6 Mar 2022 17:24:01 -0800
Subject: [PATCH] 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   | 11 +++++++++--
 web/pages/federation/actions.tsx | 26 +++++++++++++++++++++-----
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/web/components/main-layout.tsx b/web/components/main-layout.tsx
index f36b1f9a6..94a1a6eda 100644
--- a/web/components/main-layout.tsx
+++ b/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 }}>
diff --git a/web/pages/federation/actions.tsx b/web/pages/federation/actions.tsx
index b0c61a7ec..d67a5ea6e 100644
--- a/web/pages/federation/actions.tsx
+++ b/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 });
-      if (isEmptyObject(result)) {
+      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(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);
+        }}
       />
     );
   }