List moderators in users page. Closes https://github.com/owncast/owncast/issues/1511

web/pages/chat/users.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Typography } from 'antd';
 import { ServerStatusContext } from '../../utils/server-status-context';
-import { CONNECTED_CLIENTS, fetchData, DISABLED_USERS } from '../../utils/apis';
+import { CONNECTED_CLIENTS, fetchData, DISABLED_USERS, MODERATORS } from '../../utils/apis';
 import UserTable from '../../components/user-table';
 import ClientTable from '../../components/client-table';
 
@@ -15,6 +15,7 @@ export default function ChatUsers() {
 
   const [disabledUsers, setDisabledUsers] = useState([]);
   const [clients, setClients] = useState([]);
+  const [moderators, setModerators] = useState([]);
 
   const getInfo = async () => {
     try {
@@ -30,6 +31,13 @@ export default function ChatUsers() {
     } catch (error) {
       console.log('==== error', error);
     }
+
+    try {
+      const result = await fetchData(MODERATORS);
+      setModerators(result);
+    } catch (error) {
+      console.error('error fetching moderators', error);
+    }
   };
 
   useEffect(() => {
@@ -73,6 +81,9 @@ export default function ChatUsers() {
       <br />
       <Title>Banned Users</Title>
       <UserTable data={disabledUsers} />
+
+      <Title>Moderators</Title>
+      <UserTable data={moderators} />
     </>
   );
 }

web/utils/apis.ts

@@ -37,6 +37,8 @@ export const USER_ENABLED_TOGGLE = `${API_LOCATION}chat/users/setenabled`;
 // Disable/enable a single user
 export const USER_SET_MODERATOR = `${API_LOCATION}chat/users/setmoderator`;
 
+// Get list of moderators
+export const MODERATORS = `${API_LOCATION}chat/users/moderators`;
 
 // Get hardware stats
 export const HARDWARE_STATS = `${API_LOCATION}hardwarestats`;