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

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>
   );