sme typescripty formatting changes

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