Update Next to 11.0.1 (including lint & import fixes) (#248)

* Bump next from 10.2.3 to 11.0.1 Bumps [next](https://github.com/vercel/next.js) from 10.2.3 to 11.0.1. - [Release notes](https://github.com/vercel/next.js/releases) - [Changelog](https://github.com/vercel/next.js/blob/canary/release.js) - [Commits](https://github.com/vercel/next.js/compare/v10.2.3...v11.0.1) --- updated-dependencies: - dependency-name: next dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * 🚨 apply automatic linting * 🎨 remove unused imports * 🔇 allow console.* to give more debugging options * 🎨 move stuff around to reduce linter messages * 🚨 use destructuring so lint won't complain * 📌 link Chartkick and Chart.js Commit uses the linking code which was previously imported with `import "chartkick/chart.js" [1]. Next did not like the import path, but this does works now. ¯\_(ツ)_/¯ [1]: https://github.com/ankane/chartkick.js/blob/master/chart.js/chart.esm.js Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2021-07-09 20:42:01 +02:00
parent 865c7eb08f
commit be5243f5f8
22 changed files with 322 additions and 424 deletions
--- a/web/pages/access-tokens.tsx
+++ b/web/pages/access-tokens.tsx
@@ -1,5 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography, Tooltip, Row, Col } from 'antd';
+import {
+  Table,
+  Tag,
+  Space,
+  Button,
+  Modal,
+  Checkbox,
+  Input,
+  Typography,
+  Tooltip,
+  Row,
+  Col,
+} from 'antd';
 import { DeleteOutlined } from '@ant-design/icons';

 import format from 'date-fns/format';
@@ -26,7 +38,7 @@ const availableScopes = {
  },
 };

-function convertScopeStringToTag(scopeString) {
+function convertScopeStringToTag(scopeString: string) {
  if (!scopeString || !availableScopes[scopeString]) {
    return null;
  }
@@ -50,9 +62,10 @@ function NewTokenModal(props: Props) {
  const [selectedScopes, setSelectedScopes] = useState([]);
  const [name, setName] = useState('');

-  const scopes = Object.keys(availableScopes).map(key => {
-    return { value: key, label: availableScopes[key].description };
-  });
+  const scopes = Object.keys(availableScopes).map(key => ({
+    value: key,
+    label: availableScopes[key].description,
+  }));

  function onChange(checkedValues) {
    setSelectedScopes(checkedValues);
@@ -73,9 +86,11 @@ function NewTokenModal(props: Props) {
  function selectAll() {
    setSelectedScopes(Object.keys(availableScopes));
  }
-  const checkboxes = scopes.map(function (singleEvent) {
-    return (<Col span={8} key={singleEvent.value}><Checkbox value={singleEvent.value}>{singleEvent.label}</Checkbox></Col>)
-  });
+  const checkboxes = scopes.map(singleEvent => (
+    <Col span={8} key={singleEvent.value}>
+      <Checkbox value={singleEvent.value}>{singleEvent.label}</Checkbox>
+    </Col>
+  ));

  return (
    <Modal
@@ -98,9 +113,7 @@ function NewTokenModal(props: Props) {
        created.
      </p>
      <Checkbox.Group style={{ width: '100%' }} value={selectedScopes} onChange={onChange}>
-        <Row>
-          {checkboxes}
-        </Row>
+        <Row>{checkboxes}</Row>
      </Checkbox.Group>

      <p>
@@ -182,13 +195,7 @@ export default function AccessTokens() {
      title: 'Scopes',
      dataIndex: 'scopes',
      key: 'scopes',
-      render: scopes => (
-        <>
-          {scopes.map(scope => {
-            return convertScopeStringToTag(scope);
-          })}
-        </>
-      ),
+      render: ({ map }: string[]) => <>{map(scope => convertScopeStringToTag(scope))}</>,
    },
    {
      title: 'Last Used',
--- a/web/pages/actions.tsx
+++ b/web/pages/actions.tsx
@@ -1,24 +1,15 @@
-// comment
-
-import React, { useState, useEffect, useContext } from 'react';
-import { Table, Space, Button, Modal, Checkbox, Input, Typography } from 'antd';
-import { ServerStatusContext } from '../utils/server-status-context';
 import { DeleteOutlined } from '@ant-design/icons';
-import isValidUrl, { DEFAULT_TEXTFIELD_URL_PATTERN } from '../utils/urls';
+import { Button, Checkbox, Input, Modal, Space, Table, Typography } from 'antd';
+import React, { useContext, useEffect, useState } from 'react';
 import FormStatusIndicator from '../components/config/form-status-indicator';
 import {
-  createInputStatus,
-  StatusState,
-  STATUS_ERROR,
-  STATUS_PROCESSING,
-  STATUS_SUCCESS,
-} from '../utils/input-statuses';
-
-import {
-  postConfigUpdateToAPI,
  API_EXTERNAL_ACTIONS,
+  postConfigUpdateToAPI,
  RESET_TIMEOUT,
 } from '../utils/config-constants';
+import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../utils/input-statuses';
+import { ServerStatusContext } from '../utils/server-status-context';
+import isValidUrl, { DEFAULT_TEXTFIELD_URL_PATTERN } from '../utils/urls';

 const { Title, Paragraph } = Typography;
 let resetTimer = null;
@@ -156,6 +147,81 @@ export default function Actions() {
    setActions(externalActions || []);
  }, [externalActions]);

+  async function save(actionsData) {
+    await postConfigUpdateToAPI({
+      apiPath: API_EXTERNAL_ACTIONS,
+      data: { value: actionsData },
+      onSuccess: () => {
+        setFieldInConfigState({ fieldName: 'externalActions', value: actionsData, path: '' });
+        setSubmitStatus(createInputStatus(STATUS_SUCCESS, 'Updated.'));
+        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+      },
+      onError: (message: string) => {
+        console.log(message);
+        setSubmitStatus(createInputStatus(STATUS_ERROR, message));
+        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+      },
+    });
+  }
+
+  async function handleDelete(action) {
+    const actionsData = [...actions];
+    const index = actions.findIndex(item => item.url === action.url);
+    actionsData.splice(index, 1);
+
+    try {
+      setActions(actionsData);
+      save(actionsData);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  async function handleSave(
+    url: string,
+    title: string,
+    description: string,
+    icon: string,
+    color: string,
+    openExternally: boolean,
+  ) {
+    try {
+      const actionsData = [...actions];
+      const updatedActions = actionsData.concat({
+        url,
+        title,
+        description,
+        icon,
+        color,
+        openExternally,
+      });
+      setActions(updatedActions);
+      await save(updatedActions);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  const showCreateModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const handleModalSaveButton = (
+    actionUrl: string,
+    actionTitle: string,
+    actionDescription: string,
+    actionIcon: string,
+    actionColor: string,
+    openExternally: boolean,
+  ) => {
+    setIsModalVisible(false);
+    handleSave(actionUrl, actionTitle, actionDescription, actionIcon, actionColor, openExternally);
+  };
+
+  const handleModalCancelButton = () => {
+    setIsModalVisible(false);
+  };
+
  const columns = [
    {
      title: '',
@@ -185,103 +251,23 @@ export default function Actions() {
      title: 'Icon',
      dataIndex: 'icon',
      key: 'icon',
-      render: (url: string) => {
-        return url ? <img style={{ width: '2vw' }} src={url} /> : null;
-      },
+      render: (url: string) => (url ? <img style={{ width: '2vw' }} src={url} alt="" /> : null),
    },
    {
      title: 'Color',
      dataIndex: 'color',
      key: 'color',
-      render: (color: string) => {
-        return color ? <div style={{ backgroundColor: color, height: '30px' }}>{color}</div> : null;
-      },
+      render: (color: string) =>
+        color ? <div style={{ backgroundColor: color, height: '30px' }}>{color}</div> : null,
    },
    {
      title: 'Opens',
      dataIndex: 'openExternally',
      key: 'openExternally',
-      render: (openExternally: boolean) => {
-        return openExternally ? 'In a new tab' : 'In a modal';
-      },
+      render: (openExternally: boolean) => (openExternally ? 'In a new tab' : 'In a modal'),
    },
  ];

-  async function handleDelete(action) {
-    let actionsData = [...actions];
-    const index = actions.findIndex(item => item.url === action.url);
-    actionsData.splice(index, 1);
-
-    setActions(actionsData);
-    save(actionsData);
-    try {
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  async function handleSave(
-    url: string,
-    title: string,
-    description: string,
-    icon: string,
-    color: string,
-    openExternally: boolean,
-  ) {
-    try {
-      let actionsData = [...actions];
-      const updatedActions = actionsData.concat({
-        url,
-        title,
-        description,
-        icon,
-        color,
-        openExternally,
-      });
-      setActions(updatedActions);
-      await save(updatedActions);
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  async function save(actionsData) {
-    await postConfigUpdateToAPI({
-      apiPath: API_EXTERNAL_ACTIONS,
-      data: { value: actionsData },
-      onSuccess: () => {
-        setFieldInConfigState({ fieldName: 'externalActions', value: actionsData, path: '' });
-        setSubmitStatus(createInputStatus(STATUS_SUCCESS, 'Updated.'));
-        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
-      },
-      onError: (message: string) => {
-        console.log(message);
-        setSubmitStatus(createInputStatus(STATUS_ERROR, message));
-        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
-      },
-    });
-  }
-
-  const showCreateModal = () => {
-    setIsModalVisible(true);
-  };
-
-  const handleModalSaveButton = (
-    actionUrl: string,
-    actionTitle: string,
-    actionDescription: string,
-    actionIcon: string,
-    actionColor: string,
-    openExternally: boolean,
-  ) => {
-    setIsModalVisible(false);
-    handleSave(actionUrl, actionTitle, actionDescription, actionIcon, actionColor, openExternally);
-  };
-
-  const handleModalCancelButton = () => {
-    setIsModalVisible(false);
-  };
-
  return (
    <div>
      <Title>External Actions</Title>
--- a/web/pages/config-chat.tsx
+++ b/web/pages/config-chat.tsx
@@ -1,14 +1,14 @@
-import React, { useState, useContext, useEffect } from 'react';
 import { Typography } from 'antd';
+import React, { useContext, useEffect, useState } from 'react';
+import { TEXTFIELD_TYPE_TEXTAREA } from '../components/config/form-textfield';
+import TextFieldWithSubmit from '../components/config/form-textfield-with-submit';
+import ToggleSwitch from '../components/config/form-toggleswitch';
+import { UpdateArgs } from '../types/config-section';
 import {
  FIELD_PROPS_DISABLE_CHAT,
  TEXTFIELD_PROPS_CHAT_USERNAME_BLOCKLIST,
 } from '../utils/config-constants';
 import { ServerStatusContext } from '../utils/server-status-context';
-import ToggleSwitch from '../components/config/form-toggleswitch';
-import { UpdateArgs } from '../types/config-section';
-import { TEXTFIELD_TYPE_TEXTAREA } from '../components/config/form-textfield';
-import TextFieldWithSubmit from '../components/config/form-textfield-with-submit';

 export default function ConfigChat() {
  const { Title } = Typography;
@@ -19,6 +19,13 @@ export default function ConfigChat() {
  const { chatDisabled } = serverConfig;
  const { usernameBlocklist } = serverConfig;

+  const handleFieldChange = ({ fieldName, value }: UpdateArgs) => {
+    setFormDataValues({
+      ...formDataValues,
+      [fieldName]: value,
+    });
+  };
+
  function handleChatDisableChange(disabled: boolean) {
    handleFieldChange({ fieldName: 'chatDisabled', value: disabled });
  }
@@ -38,13 +45,6 @@ export default function ConfigChat() {
    return null;
  }

-  const handleFieldChange = ({ fieldName, value }: UpdateArgs) => {
-    setFormDataValues({
-      ...formDataValues,
-      [fieldName]: value,
-    });
-  };
-
  return (
    <div className="config-server-details-form">
      <Title>Chat Settings</Title>
--- a/web/pages/config-video.tsx
+++ b/web/pages/config-video.tsx
@@ -1,11 +1,10 @@
+import { Col, Collapse, Row, Typography } from 'antd';
 import React from 'react';
-import { Typography, Row, Col, Collapse } from 'antd';
-
-import VideoVariantsTable from '../components/config/video-variants-table';
-import VideoLatency from '../components/config/video-latency';
 import VideoCodecSelector from '../components/config/video-codec-selector';
-const { Panel } = Collapse;
+import VideoLatency from '../components/config/video-latency';
+import VideoVariantsTable from '../components/config/video-variants-table';

+const { Panel } = Collapse;
 const { Title } = Typography;

 export default function ConfigVideoSettings() {
--- a/web/pages/offline-notice.tsx
+++ b/web/pages/offline-notice.tsx
@@ -1,28 +1,34 @@
-import Link from 'next/link';
-import { Card, Row, Col, Input, Collapse, Typography } from 'antd';
 import {
-  MessageTwoTone,
-  QuestionCircleTwoTone,
  BookTwoTone,
+  MessageTwoTone,
  PlaySquareTwoTone,
  ProfileTwoTone,
+  QuestionCircleTwoTone,
 } from '@ant-design/icons';
-import OwncastLogo from '../components/logo';
-import LogTable from '../components/log-table';
-import NewsFeed from '../components/news-feed';
+import { Card, Col, Row, Typography } from 'antd';
+import Link from 'next/link';
 import { useContext } from 'react';
+import LogTable from '../components/log-table';
+import OwncastLogo from '../components/logo';
+import NewsFeed from '../components/news-feed';
+import { ConfigDetails } from '../types/config-section';
 import { ServerStatusContext } from '../utils/server-status-context';
+
 const { Paragraph, Text } = Typography;

 const { Title } = Typography;
 const { Meta } = Card;
-const { Panel } = Collapse;

 function generateStreamURL(serverURL, rtmpServerPort) {
  return `rtmp://${serverURL.replace(/(^\w+:|^)\/\//, '')}:${rtmpServerPort}/live/`;
 }

-export default function Offline({ logs = [], config }) {
+type OfflineProps = {
+  logs: any[];
+  config: ConfigDetails;
+};
+
+export default function Offline({ logs = [], config }: OfflineProps) {
  const serverStatusData = useContext(ServerStatusContext);

  const { serverConfig } = serverStatusData || {};
--- a/web/pages/webhooks.tsx
+++ b/web/pages/webhooks.tsx
@@ -1,22 +1,21 @@
-import React, { useState, useEffect } from 'react';
+import { DeleteOutlined } from '@ant-design/icons';
 import {
+  Button,
+  Checkbox,
+  Col,
+  Input,
+  Modal,
+  Row,
+  Space,
  Table,
  Tag,
-  Space,
-  Button,
-  Modal,
-  Checkbox,
-  Input,
-  Typography,
  Tooltip,
-  Row,
-  Col,
+  Typography,
 } from 'antd';
-import { DeleteOutlined } from '@ant-design/icons';
+import React, { useEffect, useState } from 'react';
+import { CREATE_WEBHOOK, DELETE_WEBHOOK, fetchData, WEBHOOKS } from '../utils/apis';
 import isValidUrl, { DEFAULT_TEXTFIELD_URL_PATTERN } from '../utils/urls';

-import { fetchData, DELETE_WEBHOOK, CREATE_WEBHOOK, WEBHOOKS } from '../utils/apis';
-
 const { Title, Paragraph } = Typography;

 const availableEvents = {
@@ -36,7 +35,7 @@ const availableEvents = {
  STREAM_STOPPED: { name: 'Stream stopped', description: 'When a stream stops', color: 'cyan' },
 };

-function convertEventStringToTag(eventString) {
+function convertEventStringToTag(eventString: string) {
  if (!eventString || !availableEvents[eventString]) {
    return null;
  }
@@ -61,9 +60,10 @@ function NewWebhookModal(props: Props) {
  const [selectedEvents, setSelectedEvents] = useState([]);
  const [webhookUrl, setWebhookUrl] = useState('');

-  const events = Object.keys(availableEvents).map(key => {
-    return { value: key, label: availableEvents[key].description };
-  });
+  const events = Object.keys(availableEvents).map(key => ({
+    value: key,
+    label: availableEvents[key].description,
+  }));

  function onChange(checkedValues) {
    setSelectedEvents(checkedValues);
@@ -85,13 +85,11 @@ function NewWebhookModal(props: Props) {
    disabled: selectedEvents?.length === 0 || !isValidUrl(webhookUrl),
  };

-  const checkboxes = events.map(function (singleEvent) {
-    return (
-      <Col span={8} key={singleEvent.value}>
-        <Checkbox value={singleEvent.value}>{singleEvent.label}</Checkbox>
-      </Col>
-    );
-  });
+  const checkboxes = events.map(singleEvent => (
+    <Col span={8} key={singleEvent.value}>
+      <Checkbox value={singleEvent.value}>{singleEvent.label}</Checkbox>
+    </Col>
+  ));

  return (
    <Modal
@@ -128,35 +126,6 @@ export default function Webhooks() {
  const [webhooks, setWebhooks] = useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false);

-  const columns = [
-    {
-      title: '',
-      key: 'delete',
-      render: (text, record) => (
-        <Space size="middle">
-          <Button onClick={() => handleDelete(record.id)} icon={<DeleteOutlined />} />
-        </Space>
-      ),
-    },
-    {
-      title: 'URL',
-      dataIndex: 'url',
-      key: 'url',
-    },
-    {
-      title: 'Events',
-      dataIndex: 'events',
-      key: 'events',
-      render: events => (
-        <>
-          {events.map(event => {
-            return convertEventStringToTag(event);
-          })}
-        </>
-      ),
-    },
-  ];
-
  function handleError(error) {
    console.error('error', error);
    alert(error);
@@ -209,6 +178,29 @@ export default function Webhooks() {
    setIsModalVisible(false);
  };

+  const columns = [
+    {
+      title: '',
+      key: 'delete',
+      render: (text, record) => (
+        <Space size="middle">
+          <Button onClick={() => handleDelete(record.id)} icon={<DeleteOutlined />} />
+        </Space>
+      ),
+    },
+    {
+      title: 'URL',
+      dataIndex: 'url',
+      key: 'url',
+    },
+    {
+      title: 'Events',
+      dataIndex: 'events',
+      key: 'events',
+      render: ({ map }: string[]) => <>{map(event => convertEventStringToTag(event))}</>,
+    },
+  ];
+
  return (
    <div>
      <Title>Webhooks</Title>