include server config fetch in serverstatus context hook so config data can be provided across multiple views

web/pages/index.tsx

@@ -18,47 +18,32 @@ import LogTable from "./components/log-table";
 import Offline from './offline-notice';
 
 import {
-  SERVER_CONFIG,
   LOGS_WARN,
   fetchData,
   FETCH_INTERVAL,
 } from "../utils/apis";
 import { formatIPAddress, isEmptyObject } from "../utils/format";
-import { INITIAL_SERVER_CONFIG_STATE } from "./update-server-config";
 
 const { Title } = Typography;
 
 
 export default function Home() {
   const serverStatusData = useContext(ServerStatusContext);
-  const { broadcaster } = serverStatusData || {};
+  const { broadcaster, serverConfig: configData } = serverStatusData || {};
   const { remoteAddr, streamDetails } = broadcaster || {};
 
-  // Pull in the server config so we can show config overview.
-  const [configData, setServerConfig] = useState(INITIAL_SERVER_CONFIG_STATE);
-  const getConfig = async () => {
-    try {
-      const result = await fetchData(SERVER_CONFIG);
-      setServerConfig(result);
-      console.log("CONFIG", result);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
   const [logsData, setLogs] = useState([]);
   const getLogs = async () => {
     try {
       const result = await fetchData(LOGS_WARN);
       setLogs(result);
-      console.log("LOGS", result);
     } catch (error) {
       console.log("==== error", error);
     }
   };
   const getMoreStats = () => {
     getLogs();
-    getConfig();
+    // getConfig();
   }
   useEffect(() => {
     let intervalId = null;

web/pages/storage.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
-import React, { useState, useEffect } from "react";
-import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from "../utils/apis";
+import React, { useContext } from "react";
 import KeyValueTable from "./components/key-value-table";
+import { ServerStatusContext } from '../utils/server-status-context';
 
 function Storage({ config }) {
   if (!config || !config.s3) {
@@ -47,30 +47,8 @@ function Storage({ config }) {
 }
 
 export default function ServerConfig() {
-  const [config, setConfig] = useState({});
-
-  const getInfo = async () => {
-    try {
-      const result = await fetchData(SERVER_CONFIG);
-      console.log("viewers result", result);
-
-      setConfig({ ...result });
-    } catch (error) {
-      setConfig({ ...config, message: error.message });
-    }
-  };
-
-  useEffect(() => {
-    let getStatusIntervalId = null;
-
-    getInfo();
-    getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
-
-    // returned function will be called on component unmount
-    return () => {
-      clearInterval(getStatusIntervalId);
-    };
-  }, []);
+  const serverStatusData = useContext(ServerStatusContext);
+  const { serverConfig: config } = serverStatusData || {};
 
   return (
     <div>

web/pages/update-server-config.tsx

@@ -1,30 +1,13 @@
 /* eslint-disable react/prop-types */
-import React, { useState, useEffect } from 'react';
+import React, { useContext } from 'react';
 import { Table, Typography, Input } from 'antd';
-import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from '../utils/apis';
 import { isEmptyObject } from '../utils/format';
 import KeyValueTable from "./components/key-value-table";
+import { ServerStatusContext } from '../utils/server-status-context';
 
 const { Title } = Typography;
 const { TextArea } = Input;
 
-export const INITIAL_SERVER_CONFIG_STATE = {
-  streamKey: '',
-  yp: {
-    enabled: false,
-  },
-  videoSettings: {
-    videoQualityVariants: [
-      {
-        audioPassthrough: false,
-        videoBitrate: 0,
-        audioBitrate: 0,
-        framerate: 0,
-      },
-    ],
-  }
-};
-
 function SocialHandles({ config }) {
   if (!config) {
     return null;
@@ -136,23 +119,9 @@ function PageContent({ config }) {
   );
 }
 
-export default function ServerConfig() {  
-  const [config, setConfig] = useState(INITIAL_SERVER_CONFIG_STATE);
-
-  const getInfo = async () => {
-    try {
-      const result = await fetchData(SERVER_CONFIG);
-      console.log("SERVER_CONFIG", result)
-
-      setConfig({ ...result });
-
-    } catch (error) {
-      setConfig({ ...config, message: error.message });
-    }
-  };
-  useEffect(() => {
-    getInfo();
-  }, []);  
+export default function ServerConfig() {
+  const serverStatusData = useContext(ServerStatusContext);
+  const { serverConfig: config } = serverStatusData || {};
 
   return (
     <div>

web/pages/upgrade.tsx

@@ -5,6 +5,29 @@ import { getGithubRelease } from "../utils/apis";
 
 const { Title } = Typography;
 
+function AssetTable(assets) {
+  const data = Object.values(assets);
+
+  const columns = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+      render: (text, entry) =>
+        <a href={entry.browser_download_url}>{text}</a>,
+    },
+    {
+      title: "Size",
+      dataIndex: "size",
+      key: "size",
+      render: (text) => (`${(text/1024/1024).toFixed(2)} MB`),
+    },
+  ];
+
+  return <Table dataSource={data} columns={columns} rowKey="id" size="large" pagination={false} />
+}
+
+
 export default function Logs() {
   const [release, setRelease] = useState({
     html_url: "",
@@ -44,30 +67,3 @@ export default function Logs() {
   );
 }
 
-function AssetTable(assets) {
-  const data = [];
-
-  for (const key in assets) {
-    data.push(assets[key]);
-  }
-
-  const columns = [
-    {
-      title: "Name",
-      dataIndex: "name",
-      key: "name",
-      render: (text, entry) =>
-        <a href={entry.browser_download_url}>{text}</a>,
-    },
-    {
-      title: "Size",
-      dataIndex: "size",
-      key: "size",
-      render: (text, entry) =>
-        `${(text/1024/1024).toFixed(2)} MB`
-    },
-  ];
-
-  return <Table dataSource={data} columns={columns} rowKey="id" size="large" pagination={false} />
-}
-

web/pages/video-config.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
-import React, { useState, useEffect } from 'react';
+import React, { useContext } from 'react';
 import { Table, Typography } from 'antd';
-import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from '../utils/apis';
+import { ServerStatusContext } from '../utils/server-status-context';
 
 const { Title } = Typography;
 
@@ -81,31 +81,8 @@ function VideoVariants({ config }) {
 }
 
 export default function VideoConfig() {  
-  const [config, setConfig] = useState({});
-
-  const getInfo = async () => {
-    try {
-      const result = await fetchData(SERVER_CONFIG);
-      console.log("viewers result", result)
-
-      setConfig({ ...result });
-
-    } catch (error) {
-      setConfig({ ...config, message: error.message });
-    }
-  };
-  
-  useEffect(() => {
-    let getStatusIntervalId = null;
-
-    getInfo();
-    getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
-  
-    // returned function will be called on component unmount 
-    return () => {
-      clearInterval(getStatusIntervalId);
-    }
-  }, []);
+  const serverStatusData = useContext(ServerStatusContext);
+  const { serverConfig: config } = serverStatusData || {};
 
   return (
     <div>

web/utils/apis.ts

@@ -121,4 +121,4 @@ function upToDate(local, remote) {
     } 
         return local >= remote;
     
-}
+}

web/utils/server-status-context.tsx

@@ -1,9 +1,26 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-import { STATUS, fetchData, FETCH_INTERVAL } from './apis';
+import { STATUS, fetchData, FETCH_INTERVAL, SERVER_CONFIG } from './apis';
 
-const initialState = {
+export const initialServerConfigState = {
+  streamKey: '',
+  yp: {
+    enabled: false,
+  },
+  videoSettings: {
+    videoQualityVariants: [
+      {
+        audioPassthrough: false,
+        videoBitrate: 0,
+        audioBitrate: 0,
+        framerate: 0,
+      },
+    ],
+  }
+};
+
+const initialServerStatusState = {
   broadcastActive: false,
   broadcaster: null,
   online: false,
@@ -15,10 +32,14 @@ const initialState = {
   versionNumber: '0.0.0',
 };
 
-export const ServerStatusContext = React.createContext(initialState);
+export const ServerStatusContext = React.createContext({
+  ...initialServerStatusState,
+  serverConfig: initialServerConfigState,
+});
 
 const ServerStatusProvider = ({ children }) => {
-  const [status, setStatus] = useState(initialState);
+  const [status, setStatus] = useState(initialServerStatusState);
+  const [config, setConfig] = useState(initialServerConfigState);
 
   const getStatus = async () => {
     try {
@@ -29,21 +50,36 @@ const ServerStatusProvider = ({ children }) => {
       // todo
     }
   };
+  const getConfig = async () => {
+    try {
+      const result = await fetchData(SERVER_CONFIG);
+      setConfig(result);
+    } catch (error) {
+      // todo
+    }
+  };
+
   
   useEffect(() => {
     let getStatusIntervalId = null;
 
     getStatus();
     getStatusIntervalId = setInterval(getStatus, FETCH_INTERVAL);
-  
+
+    getConfig();
+
     // returned function will be called on component unmount 
     return () => {
       clearInterval(getStatusIntervalId);
     }
   }, [])
 
+  const providerValue = {
+      ...status,
+      serverConfig: config,
+  };
   return (
-    <ServerStatusContext.Provider value={status}>
+    <ServerStatusContext.Provider value={providerValue}>
       {children}
     </ServerStatusContext.Provider>
   );