sme typescripty formatting changes

2020-10-28 00:53:24 -07:00
parent f802c1a073
commit 87d69e1665
6 changed files with 372 additions and 315 deletions
--- a/web/pages/components/chart.tsx
+++ b/web/pages/components/chart.tsx
@@ -1,8 +1,22 @@
 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) => {
+interface ToolTipProps {
+  active?: boolean,
+  payload?: object,
+};
+const defaultProps = {
+  active: false,
+  payload: {},
+};
+
+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
@@ -19,9 +33,11 @@ export default function Chart({ data, color, unit }) {
    );
  }
  return null;
-  };
+}
+CustomizedTooltip.defaultProps = defaultProps;

-  const timeFormatter = (tick) => {
+export default function Chart({ data, color, unit }: ChartProps) {
+  const timeFormatter = (tick: string) => {
    return timeFormat("%I:%M")(new Date(tick), {
      nearestTo: 1,
    });
--- a/web/pages/hardware-info.tsx
+++ b/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>
    );
-  
-  
 }
--- a/web/pages/index.tsx
+++ b/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>
-  );
-}
--- a/web/pages/update-server-config.tsx
+++ b/web/pages/update-server-config.tsx
@@ -1,123 +1,34 @@
-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;

-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);
-    }
-  }, []);
+function KeyValueTable({ title, data }) {
+  const columns = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+    },
+    {
+      title: "Value",
+      dataIndex: "value",
+      key: "value",
+    },
+  ];
  
  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",
-          width: "100%",
-          overflow: "auto",
-        }}
-      >
-        <InstanceDetails />
-        <SocialHandles />
-        <VideoVariants />
-        <Storage />
-        <PageContent />
-
-        {JSON.stringify(config)}
-      </div>
+      <Title>{title}</Title>
+      <Table pagination={false} columns={columns} dataSource={data} />
    </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() {
+function SocialHandles({ config }) {
  if (!config) {
    return null;
  }
@@ -146,9 +57,71 @@ export default function ServerConfig() {
      />
    </div>
  );
+}
+
+function InstanceDetails({ config }) {
+  console.log(config)
+  if (!config || isEmptyObject(config)) {
+    return null;
  }

-  function VideoVariants() {
+  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;
  }
@@ -220,26 +193,9 @@ export default function ServerConfig() {
      />
    </div>
  );
-  }
+}

-  
-  function PageContent() {
-        if (!config) {
-          return null;
-        }
-
-    return (
-      <div>
-        <Title>Page content</Title>
-        <TextArea
-          disabled rows={4}
-          value={config.instanceDetails.extraPageContent}
-        />
-      </div>
-    );
-  }
-
-  function Storage() {
+function Storage({ config }) {
  if (!config) {
    return null;
  }
@@ -270,31 +226,74 @@ export default function ServerConfig() {
      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",
-      },
-        ];
+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();
+
+  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);
+    }
+  }, []);

  return (
    <div>
-        <Title>{title}</Title>
-        <Table pagination={false} columns={columns} dataSource={data} />
-        </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",
+          width: "100%",
+          overflow: "auto",
+        }}
+      >
+        <InstanceDetails config={config} />
+        <SocialHandles config={config} />
+        <VideoVariants config={config} />
+        <Storage config={config} />
+        <PageContent config={config} />

+        {JSON.stringify(config)}
+      </div>
+    </div>
+  ); 
 }

--- a/web/pages/utils/format.ts
+++ b/web/pages/utils/format.ts
@@ -12,3 +12,8 @@ export function formatIPAddress(ipAddress: string): string {

  return ip;
 }
+
+// check if obj is {}
+export function isEmptyObject(obj) {
+  return Object.keys(obj).length === 0;
+}
--- a/web/pages/viewer-info.tsx
+++ b/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;