sme typescripty formatting changes

web/pages/components/chart.tsx

@@ -1,27 +1,43 @@
 import { LineChart, XAxis, YAxis, Line, Tooltip, Legend } from "recharts";
 import { timeFormat } from "d3-time-format";
 
-export default function Chart({ data, color, unit }) {
-  const CustomizedTooltip = (props) => {
-    const { active, payload } = props;
-    if (active && payload && payload[0]) {
-      const time = payload[0].payload
-        ? timeFormat("%I:%M")(new Date(payload[0].payload.time), {
-            nearestTo: 1,
-          })
-        : "";
-      return (
-        <div className="custom-tooltip">
-          <p className="label">
-            <strong>{time}</strong> {payload[0].payload.value} %
-          </p>
-        </div>
-      );
-    }
-    return null;
-  };
+interface ToolTipProps {
+  active?: boolean,
+  payload?: object,
+};
+const defaultProps = {
+  active: false,
+  payload: {},
+};
 
-  const timeFormatter = (tick) => {
+interface ChartProps {
+  data: number,
+  color: string,
+  unit: string,
+}
+
+function CustomizedTooltip(props: ToolTipProps) {
+  const { active, payload } = props;
+  if (active && payload && payload[0]) {
+    const time = payload[0].payload
+      ? timeFormat("%I:%M")(new Date(payload[0].payload.time), {
+          nearestTo: 1,
+        })
+      : "";
+    return (
+      <div className="custom-tooltip">
+        <p className="label">
+          <strong>{time}</strong> {payload[0].payload.value} %
+        </p>
+      </div>
+    );
+  }
+  return null;
+}
+CustomizedTooltip.defaultProps = defaultProps;
+
+export default function Chart({ data, color, unit }: ChartProps) {
+  const timeFormatter = (tick: string) => {
     return timeFormat("%I:%M")(new Date(tick), {
       nearestTo: 1,
     });

web/pages/hardware-info.tsx

@@ -1,10 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import { timeFormat } from "d3-time-format";
 import { HARDWARE_STATS, fetchData, FETCH_INTERVAL } from './utils/apis';
-import Chart from './components/chart.tsx'
+import Chart from './components/chart';
 
 export default function HardwareInfo() {
-  const [hardwareStatus, setHardwareStatus] = useState({});
+  const [hardwareStatus, setHardwareStatus] = useState({
+    cpu: 0,
+    memory: 0,
+    disk: 0,
+    message: '',
+  });
 
   const getHardwareStatus = async () => {
     try {
@@ -29,7 +33,6 @@ export default function HardwareInfo() {
   }, []);
 
  
-
   if (!hardwareStatus.cpu) {
     return null;
   }
@@ -61,6 +64,4 @@ export default function HardwareInfo() {
         </div>
       </div>
     );
-  
-  
 }

web/pages/index.tsx

@@ -18,11 +18,18 @@ import {
   fetchData,
   FETCH_INTERVAL,
 } from "./utils/apis";
-import { formatIPAddress } from "./utils/format";
+import { formatIPAddress, isEmptyObject } from "./utils/format";
 
-const { Title} = Typography;
+const { Title } = Typography;
 
-function Item(title: string, value: string, prefix: Jsx.Element) {
+interface ItemProps {
+  title: string, 
+  value: string,
+  prefix: JSX.Element,
+};
+
+function Item(props: ItemProps) {
+  const { title, value, prefix } = props;
   const valueStyle = { color: "#334", fontSize: "1.8rem" };
 
   return (
@@ -39,6 +46,19 @@ function Item(title: string, value: string, prefix: Jsx.Element) {
   );
 }
 
+function Offline() {
+  return (
+    <div>
+      <Empty
+        image={Empty.PRESENTED_IMAGE_SIMPLE}
+        description={
+          <span>There is no stream currently active. Start one.</span>
+        }
+      />
+    </div>
+  );
+}
+
 export default function Stats() {
   const context = useContext(BroadcastStatusContext);
   const { broadcaster } = context || {};
@@ -61,7 +81,8 @@ export default function Stats() {
   const getConfig = async () => {
     try {
       const result = await fetchData(SERVER_CONFIG);
-      setVideoSettings(result.videoSettings.videoQualityVariants);
+      const variants = result && result.videoSettings && result.videoSettings.videoQualityVariants;
+      setVideoSettings(variants);
     } catch (error) {
       console.log(error);
     }
@@ -73,7 +94,7 @@ export default function Stats() {
     getConfig();
   }, []);
 
-  if (!stats) {
+  if (!stats || isEmptyObject(stats)) {
     return (
       <div>
         <Skeleton active />
@@ -84,10 +105,10 @@ export default function Stats() {
   }
 
   if (!broadcaster) {
-    return Offline();
+    return <Offline />;
   }
 
-  const videoQualitySettings = videoSettings.map(function (setting, index) {
+  const videoQualitySettings = videoSettings.map((setting, index) => {
     const audioSetting =
       setting.audioPassthrough || setting.audioBitrate === 0
         ? `${streamDetails.audioBitrate} kpbs (passthrough)`
@@ -95,13 +116,21 @@ export default function Stats() {
     
     return (
       <Row gutter={[16, 16]} key={index}>
-        {Item("Output", `Video variant ${index}`, "")}
-        {Item(
-          "Outbound Video Stream",
-          `${setting.videoBitrate} kbps ${setting.framerate} fps`,
-          ""
-        )}
-        {Item("Outbound Audio Stream", audioSetting, "")}
+        <Item
+          title="Output"
+          value={`Video variant ${index}`}
+          prefix={null}
+        />
+        <Item
+          title="Outbound Video Stream"
+          value={`${setting.videoBitrate} kbps ${setting.framerate} fps`}
+          prefix={null}
+        />
+         <Item
+          title="Outbound Audio Stream"
+          value={audioSetting}
+          prefix={null}
+        />
       </Row>
     );
   });
@@ -114,39 +143,45 @@ export default function Stats() {
     <div>
       <Title>Server Overview</Title>
       <Row gutter={[16, 16]}>
-        {Item(
-          `Stream started ${formatRelative(
+        <Item
+          title={`Stream started ${formatRelative(
             new Date(lastConnectTime),
             new Date()
-          )}`,
-          formatDistanceToNow(new Date(lastConnectTime)),
-          <ClockCircleOutlined />
-        )}
-
-        {Item("Viewers", viewerCount, <UserOutlined />)}
-        {Item("Peak viewer count", sessionMaxViewerCount, <UserOutlined />)}
+          )}`}
+          value={formatDistanceToNow(new Date(lastConnectTime))}
+          prefix={<ClockCircleOutlined />}
+        />
+        <Item
+          title="Viewers"
+          value={viewerCount}
+          prefix={<UserOutlined />}
+        />
+        <Item
+          title="Peak viewer count"
+          value={sessionMaxViewerCount}
+          prefix={<UserOutlined />}
+        />
       </Row>
 
       <Row gutter={[16, 16]}>
-        {Item("Input", formatIPAddress(remoteAddr), "")}
-        {Item("Inbound Video Stream", streamVideoDetailString, "")}
-        {Item("Inbound Audio Stream", streamAudioDetailString, "")}
+        <Item
+          title="Input"
+          value={formatIPAddress(remoteAddr)}
+          prefix={null}
+        />
+        <Item
+          title="Inbound Video Stream"
+          value={streamVideoDetailString}
+          prefix={null}
+        />
+        <Item
+          title="Inbound Audio Stream"
+          value={streamAudioDetailString}
+          prefix={null}
+        />
       </Row>
 
       {videoQualitySettings}
     </div>
   );
 }
-
-function Offline() {
-  return (
-    <div>
-      <Empty
-        image={Empty.PRESENTED_IMAGE_SIMPLE}
-        description={
-          <span>There is no stream currently active. Start one.</span>
-        }
-      />
-    </div>
-  );
-}

web/pages/update-server-config.tsx

@@ -1,10 +1,249 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Table, Typography, Input } from 'antd';
 import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from './utils/apis';
+import { isEmptyObject } from './utils/format';
 
 const { Title } = Typography;
 const { TextArea } = Input;
 
+function KeyValueTable({ title, data }) {
+  const columns = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+    },
+    {
+      title: "Value",
+      dataIndex: "value",
+      key: "value",
+    },
+  ];
+  
+  return (
+    <div>
+      <Title>{title}</Title>
+      <Table pagination={false} columns={columns} dataSource={data} />
+    </div>
+  );
+}
+
+function SocialHandles({ config }) {
+  if (!config) {
+    return null;
+  }
+
+  const columns = [
+    {
+      title: "Platform",
+      dataIndex: "platform",
+      key: "platform",
+    },
+    {
+      title: "URL",
+      dataIndex: "url",
+      key: "url",
+      render: (url) => `<a href="${url}">${url}</a>`
+    },
+  ];
+
+  return (
+    <div>
+      <Title>Social Handles</Title>
+      <Table
+        pagination={false}
+        columns={columns}
+        dataSource={config.instanceDetails.socialHandles}
+      />
+    </div>
+  );
+}
+
+function InstanceDetails({ config }) {
+  console.log(config)
+  if (!config || isEmptyObject(config)) {
+    return null;
+  }
+
+  const { instanceDetails = {}, yp, streamKey, ffmpegPath, webServerPort } = config;
+  
+  const data = [
+    {
+      name: "Server name",
+      value: instanceDetails.name,
+    },
+    {
+      name: "Title",
+      value: instanceDetails.title,
+    },
+    {
+      name: "Summary",
+      value: instanceDetails.summary,
+    },
+    {
+      name: "Logo",
+      value: instanceDetails.logo.large,
+    },
+    {
+      name: "Tags",
+      value: instanceDetails.tags.join(", "),
+    },
+    {
+      name: "NSFW",
+      value: instanceDetails.nsfw.toString(),
+    },
+    {
+      name: "Shows in Owncast directory",
+      value: yp.enabled.toString(),
+    },
+  ];
+
+  const configData = [
+    {
+      name: "Stream key",
+      value: streamKey,
+    },
+    {
+      name: "ffmpeg path",
+      value: ffmpegPath,
+    },
+    {
+      name: "Web server port",
+      value: webServerPort,
+    },
+  ];
+
+  return (
+    <>
+      <KeyValueTable title="Server details" data={data} />
+      <KeyValueTable title="Server configuration" data={configData} />
+    </>
+  );
+}
+
+function VideoVariants({ config }) {
+  if (!config) {
+    return null;
+  }
+
+  const videoQualityColumns = [
+    {
+      title: "Video bitrate",
+      dataIndex: "videoBitrate",
+      key: "videoBitrate",
+      render: (bitrate) =>
+        bitrate === 0 || !bitrate ? "Passthrough" : `${bitrate} kbps`,
+    },
+    {
+      title: "Framerate",
+      dataIndex: "framerate",
+      key: "framerate",
+    },
+    {
+      title: "Encoder preset",
+      dataIndex: "encoderPreset",
+      key: "framerate",
+    },
+    {
+      title: "Audio bitrate",
+      dataIndex: "audioBitrate",
+      key: "audioBitrate",
+      render: (bitrate) =>
+        bitrate === 0 || !bitrate ? "Passthrough" : `${bitrate} kbps`,
+    },
+  ];
+
+  const miscVideoSettingsColumns = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+    },
+    {
+      title: "Value",
+      dataIndex: "value",
+      key: "value",
+    },
+  ];
+
+  const miscVideoSettings = [
+    {
+      name: "Segment length",
+      value: config.videoSettings.segmentLengthSeconds,
+    },
+    {
+      name: "Number of segments",
+      value: config.videoSettings.numberOfPlaylistItems,
+    },
+  ];
+
+  return (
+    <div>
+      <Title>Video configuration</Title>
+      <Table
+        pagination={false}
+        columns={videoQualityColumns}
+        dataSource={config.videoSettings.videoQualityVariants}
+      />
+
+      <Table
+        pagination={false}
+        columns={miscVideoSettingsColumns}
+        dataSource={miscVideoSettings}
+      />
+    </div>
+  );
+}
+
+function Storage({ config }) {
+  if (!config) {
+    return null;
+  }
+
+  const data = [
+    {
+      name: "Enabled",
+      value: config.s3.enabled.toString(),
+    },
+    {
+      name: "Endpoint",
+      value: config.s3.endpoint,
+    },
+    {
+      name: "Access Key",
+      value: config.s3.accessKey,
+    },
+    {
+      name: "Secret",
+      value: config.s3.secret,
+    },
+    {
+      name: "Bucket",
+      value: config.s3.bucket,
+    },
+    {
+      name: "Region",
+      value: config.s3.region,
+    },
+  ];
+  return <KeyValueTable title="External Storage" data={data} />
+}
+
+function PageContent({ config }) {
+  if (!config) {
+    return null;
+  }
+  return (
+    <div>
+      <Title>Page content</Title>
+      <TextArea
+        disabled rows={4}
+        value={config.instanceDetails.extraPageContent}
+      />
+    </div>
+  );
+}
+
 export default function ServerConfig() {  
   const [config, setConfig] = useState();
 
@@ -46,255 +285,15 @@ export default function ServerConfig() {
           overflow: "auto",
         }}
       >
-        <InstanceDetails />
-        <SocialHandles />
-        <VideoVariants />
-        <Storage />
-        <PageContent />
+        <InstanceDetails config={config} />
+        <SocialHandles config={config} />
+        <VideoVariants config={config} />
+        <Storage config={config} />
+        <PageContent config={config} />
 
         {JSON.stringify(config)}
       </div>
     </div>
-  );
-
-  function InstanceDetails() {
-    console.log(config)
-    if (!config) {
-      return null;
-    }
-    
-    const data = [
-      {
-        name: "Server name",
-        value: config.instanceDetails.name,
-      },
-      {
-        name: "Title",
-        value: config.instanceDetails.title,
-      },
-      {
-        name: "Summary",
-        value: config.instanceDetails.summary,
-      },
-      {
-        name: "Logo",
-        value: config.instanceDetails.logo.large,
-      },
-      {
-        name: "Tags",
-        value: config.instanceDetails.tags.join(", "),
-      },
-      {
-        name: "NSFW",
-        value: config.instanceDetails.nsfw.toString(),
-      },
-      {
-        name: "Shows in Owncast directory",
-        value: config.yp.enabled.toString(),
-      },
-    ];
-
-    const configData = [
-      {
-        name: "Stream key",
-        value: config.streamKey,
-      },
-      {
-        name: "ffmpeg path",
-        value: config.ffmpegPath,
-      },
-      {
-        name: "Web server port",
-        value: config.webServerPort,
-      },
-    ];
-
-    return (
-      <>
-        <KeyValueTable title="Server details" data={data} />
-        <KeyValueTable title="Server configuration" data={configData} />
-      </>
-    );
-  }
-
-   function SocialHandles() {
-    if (!config) {
-      return null;
-    }
-
-     const columns = [
-       {
-         title: "Platform",
-         dataIndex: "platform",
-         key: "platform",
-       },
-       {
-         title: "URL",
-         dataIndex: "url",
-         key: "url",
-         render: (url) => `<a href="${url}">${url}</a>`
-       },
-     ];
-
-     return (
-       <div>
-         <Title>Social Handles</Title>
-         <Table
-           pagination={false}
-           columns={columns}
-           dataSource={config.instanceDetails.socialHandles}
-         />
-       </div>
-     );
-   }
-  
-  function VideoVariants() {
-    if (!config) {
-      return null;
-    }
-
-    const videoQualityColumns = [
-      {
-        title: "Video bitrate",
-        dataIndex: "videoBitrate",
-        key: "videoBitrate",
-        render: (bitrate) =>
-          bitrate === 0 || !bitrate ? "Passthrough" : `${bitrate} kbps`,
-      },
-      {
-        title: "Framerate",
-        dataIndex: "framerate",
-        key: "framerate",
-      },
-      {
-        title: "Encoder preset",
-        dataIndex: "encoderPreset",
-        key: "framerate",
-      },
-      {
-        title: "Audio bitrate",
-        dataIndex: "audioBitrate",
-        key: "audioBitrate",
-        render: (bitrate) =>
-          bitrate === 0 || !bitrate ? "Passthrough" : `${bitrate} kbps`,
-      },
-    ];
-
-    const miscVideoSettingsColumns = [
-      {
-        title: "Name",
-        dataIndex: "name",
-        key: "name",
-      },
-      {
-        title: "Value",
-        dataIndex: "value",
-        key: "value",
-      },
-    ];
-
-    const miscVideoSettings = [
-      {
-        name: "Segment length",
-        value: config.videoSettings.segmentLengthSeconds,
-      },
-      {
-        name: "Number of segments",
-        value: config.videoSettings.numberOfPlaylistItems,
-      },
-    ];
-
-    return (
-      <div>
-        <Title>Video configuration</Title>
-        <Table
-          pagination={false}
-          columns={videoQualityColumns}
-          dataSource={config.videoSettings.videoQualityVariants}
-        />
-
-        <Table
-          pagination={false}
-          columns={miscVideoSettingsColumns}
-          dataSource={miscVideoSettings}
-        />
-      </div>
-    );
-  }
-
-  
-  function PageContent() {
-        if (!config) {
-          return null;
-        }
-
-    return (
-      <div>
-        <Title>Page content</Title>
-        <TextArea
-          disabled rows={4}
-          value={config.instanceDetails.extraPageContent}
-        />
-      </div>
-    );
-  }
-
-  function Storage() {
-    if (!config) {
-      return null;
-    }
-
-    const data = [
-      {
-        name: "Enabled",
-        value: config.s3.enabled.toString(),
-      },
-      {
-        name: "Endpoint",
-        value: config.s3.endpoint,
-      },
-      {
-        name: "Access Key",
-        value: config.s3.accessKey,
-      },
-      {
-        name: "Secret",
-        value: config.s3.secret,
-      },
-      {
-        name: "Bucket",
-        value: config.s3.bucket,
-      },
-      {
-        name: "Region",
-        value: config.s3.region,
-      },
-    ];
-
-    return <KeyValueTable title="External Storage" data={data} />
-  }
-
-  function KeyValueTable({ title, data }) {
-        const columns = [
-      {
-        title: "Name",
-        dataIndex: "name",
-        key: "name",
-      },
-      {
-        title: "Value",
-        dataIndex: "value",
-        key: "value",
-      },
-        ];
-    
-    return (
-          <div>
-        <Title>{title}</Title>
-        <Table pagination={false} columns={columns} dataSource={data} />
-        </div>)
-  
-  }
-
+  ); 
 }
 

web/pages/utils/format.ts

@@ -11,4 +11,9 @@ export function formatIPAddress(ipAddress: string): string {
   }
 
   return ip;
-}
+}
+
+// check if obj is {}
+export function isEmptyObject(obj) {
+  return Object.keys(obj).length === 0;
+}

web/pages/viewer-info.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useContext } from 'react';
-import Chart from "./components/chart.tsx";
+import { timeFormat } from "d3-time-format";
+import Chart from "./components/chart";
 import { BroadcastStatusContext } from './utils/broadcast-status-context';
 
 import { VIEWERS_OVER_TIME, fetchData } from './utils/apis';
@@ -43,7 +44,7 @@ export default function ViewersOverTime() {
     return "no info";
   }
 
-  const timeFormatter = (tick) => {return timeFormat('%H:%M')(new Date(tick));};
+  const timeFormatter = (tick) => { return timeFormat('%H:%M')(new Date(tick));};
 
   const CustomizedTooltip = (props) => {
     const { active, payload, label } = props;