a bit of refactor, use context for overall broacast status; move files around for routing

web/pages/update-server-config.tsx

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from './utils/apis';
+
+export default function ServerConfig() {
+  const [clients, setClients] = useState({});
+
+  const getInfo = async () => {
+    try {
+      const result = await fetchData(SERVER_CONFIG);
+      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>Server Config</h2>
+      <p>Display this data all pretty, most things will be editable in the future, not now.</p>
+      <div style={{border: '1px solid pink', height: '300px', width: '100%', overflow:'auto'}}>
+        {JSON.stringify(clients)}
+      </div>
+    </div>
+  );
+}