From e554a2a87771c0bf948e3f0757d4d17ff972f2a9 Mon Sep 17 00:00:00 2001
From: Ginger Wong <ginger@philo.com>
Date: Thu, 8 Oct 2020 00:26:24 -0700
Subject: [PATCH] add connectedclients endpoint

---
 web/pages/components/connected-clients.tsx | 39 ++++++++++++++++++++++
 web/pages/home.tsx                         |  5 ++-
 web/pages/utils/apis.ts                    |  4 +++
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 web/pages/components/connected-clients.tsx

diff --git a/web/pages/components/connected-clients.tsx b/web/pages/components/connected-clients.tsx
new file mode 100644
index 000000000..4261949e1
--- /dev/null
+++ b/web/pages/components/connected-clients.tsx
@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react';
+import { CONNECTED_CLIENTS, fetchData, FETCH_INTERVAL } from '../utils/apis';
+
+export default function HardwareInfo() {
+  const [clients, setClients] = useState({});
+
+  const getInfo = async () => {
+    try {
+      const result = await fetchData(CONNECTED_CLIENTS);
+      console.log("viewers result", result)
+
+      setClients({ ...result });
+
+    } catch (error) {
+      setClients({ ...clients, message: error.message });
+    }
+  };
+  
+  useEffect(() => {
+    let getStatusIntervalId = null;
+
+    getInfo();
+    getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
+  
+    // returned function will be called on component unmount 
+    return () => {
+      clearInterval(getStatusIntervalId);
+    }
+  }, []);
+
+  return (
+    <div>
+      <h2>Connected Clients</h2>
+      <div style={{border: '1px solid purple', height: '300px', width: '100%', overflow:'auto'}}>
+        {JSON.stringify(clients)}
+      </div>
+    </div>
+  );
+}
diff --git a/web/pages/home.tsx b/web/pages/home.tsx
index f30572156..530a9e721 100644
--- a/web/pages/home.tsx
+++ b/web/pages/home.tsx
@@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react';
 import BroadcastInfo from './components/broadcast-info';
 import HardwareInfo from './components/hardware-info';
 import ViewerInfo from './components/viewer-info';
+import ConnectedClients from './components/connected-clients';
 
 export default function HomeView(props) {
   const { broadcastActive, broadcaster, message } = props;
@@ -12,6 +13,7 @@ export default function HomeView(props) {
       <BroadcastInfo {...broadcaster} />
       <HardwareInfo />
       <ViewerInfo />
+      <ConnectedClients />
     </>
   ) : null;
 
@@ -24,7 +26,8 @@ export default function HomeView(props) {
       </p>
 
       <h2>Utilities</h2>
-      (these dont do anything yet)
+      <p>(these dont do anything yet)</p>
+      
       {disconnectButton}
       <button type="button">Change Stream Key</button>
       <button type="button">Server Config</button>
diff --git a/web/pages/utils/apis.ts b/web/pages/utils/apis.ts
index af85c89bc..891ad6b64 100644
--- a/web/pages/utils/apis.ts
+++ b/web/pages/utils/apis.ts
@@ -22,6 +22,10 @@ export const SERVER_CONFIG = `${API_LOCATION}serverconfig`;
 // Get viewer count over time
 export const VIEWERS_OVER_TIME = `${API_LOCATION}viewersOverTime`;
 
+// Get currently connected clients
+export const CONNECTED_CLIENTS = `${API_LOCATION}clients`;
+
+
 // Get hardware stats
 export const HARDWARE_STATS = `${API_LOCATION}hardwarestats`;