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>

web/components/chart.tsx

@@ -1,7 +1,10 @@
-import { LineChart } from 'react-chartkick';
-import 'chartkick/chart.js'
-
+import ChartJs from 'chart.js/auto';
+import Chartkick from 'chartkick';
 import format from 'date-fns/format';
+import { LineChart } from 'react-chartkick';
+
+// from https://github.com/ankane/chartkick.js/blob/master/chart.js/chart.esm.js
+Chartkick.use(ChartJs);
 
 interface TimedValue {
   time: Date;

web/components/config/edit-custom-css.tsx

@@ -86,13 +86,10 @@ export default function EditCustomStyles() {
       <p className="description">
         Customize the look and feel of your Owncast instance by overriding the CSS styles of various
         components on the page. Refer to the{' '}
-        <a
-          href="https://owncast.online/docs/website/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
+        <a href="https://owncast.online/docs/website/" rel="noopener noreferrer" target="_blank">
           CSS &amp; Components guide
-        </a>.
+        </a>
+        .
       </p>
       <p className="description">
         Please input plain CSS text, as this will be directly injected onto your page during load.

web/components/config/edit-logo.tsx

@@ -91,7 +91,7 @@ export default function EditLogo() {
     }
   };
 
-  const logoDisplayUrl = NEXT_PUBLIC_API_HOST + 'logo?random=' + logoCachedbuster;
+  const logoDisplayUrl = `${NEXT_PUBLIC_API_HOST}logo?random=${logoCachedbuster}`;
 
   return (
     <div className="formfield-container logo-upload-container">

web/components/config/edit-social-links.tsx

@@ -3,7 +3,7 @@ import { Typography, Table, Button, Modal, Input } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { DeleteOutlined } from '@ant-design/icons';
 import SocialDropdown from './social-icons-dropdown';
-import { fetchData, SOCIAL_PLATFORMS_LIST } from '../../utils/apis';
+import { fetchData, SOCIAL_PLATFORMS_LIST, NEXT_PUBLIC_API_HOST } from '../../utils/apis';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import {
   API_SOCIAL_HANDLES,
@@ -17,7 +17,6 @@ import isValidUrl, { DEFAULT_TEXTFIELD_URL_PATTERN } from '../../utils/urls';
 import TextField from './form-textfield';
 import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../utils/input-statuses';
 import FormStatusIndicator from './form-status-indicator';
-import { NEXT_PUBLIC_API_HOST } from '../../utils/apis';
 
 const { Title } = Typography;
 
@@ -62,9 +61,8 @@ export default function EditSocialLinks() {
     }
   };
 
-  const isPredefinedSocial = (platform: string) => {
-    return availableIconsList.find(item => item.key === platform) || false;
-  };
+  const isPredefinedSocial = (platform: string) =>
+    availableIconsList.find(item => item.key === platform) || false;
 
   const selectedOther =
     modalDataState.platform !== '' &&
@@ -192,7 +190,7 @@ export default function EditSocialLinks() {
           );
         }
         const { icon, platform: platformName } = platformInfo;
-        const iconUrl = NEXT_PUBLIC_API_HOST + `${icon.slice(1)}`;
+        const iconUrl = `${NEXT_PUBLIC_API_HOST}${icon.slice(1)}`;
 
         return (
           <div className="social-handle-cell">

web/components/config/edit-tags.tsx

@@ -37,11 +37,12 @@ export default function EditInstanceTags() {
 
   let resetTimer = null;
 
-  useEffect(() => {
-    return () => {
+  useEffect(
+    () => () => {
       clearTimeout(resetTimer);
-    };
-  }, []);
+    },
+    [],
+  );
 
   const resetStates = () => {
     setSubmitStatus(null);

web/components/config/form-textfield-with-submit.tsx

@@ -1,10 +1,8 @@
-import React, { useEffect, useState, useContext } from 'react';
 import { Button } from 'antd';
 import classNames from 'classnames';
-import { RESET_TIMEOUT, postConfigUpdateToAPI } from '../../utils/config-constants';
-
-import { ServerStatusContext } from '../../utils/server-status-context';
-import TextField, { TextFieldProps } from './form-textfield';
+import React, { useContext, useEffect, useState } from 'react';
+import { UpdateArgs } from '../../types/config-section';
+import { postConfigUpdateToAPI, RESET_TIMEOUT } from '../../utils/config-constants';
 import {
   createInputStatus,
   StatusState,
@@ -12,8 +10,9 @@ import {
   STATUS_PROCESSING,
   STATUS_SUCCESS,
 } from '../../utils/input-statuses';
-import { UpdateArgs } from '../../types/config-section';
+import { ServerStatusContext } from '../../utils/server-status-context';
 import FormStatusIndicator from './form-status-indicator';
+import TextField, { TextFieldProps } from './form-textfield';
 
 export const TEXTFIELD_TYPE_TEXT = 'default';
 export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -72,13 +71,15 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
   // if field is required but value is empty, or equals initial value, then don't show submit/update button. otherwise clear out any result messaging and display button.
   const handleChange = ({ fieldName: changedFieldName, value: changedValue }: UpdateArgs) => {
     if (onChange) {
+      let newValue: string = changedValue;
+      if (useTrim) {
+        newValue = changedValue.trim();
+      } else if (useTrimLead) {
+        newValue = changedValue.replace(/^\s+/g, '');
+      }
       onChange({
         fieldName: changedFieldName,
-        value: useTrim
-          ? changedValue.trim()
-          : useTrimLead
-          ? changedValue.replace(/^\s+/g, '')
-          : changedValue,
+        value: newValue,
       });
     }
   };

web/components/config/social-icons-dropdown.tsx

@@ -39,7 +39,7 @@ export default function SocialDropdown({ iconList, selectedOption, onSelected }:
           >
             {iconList.map(item => {
               const { platform, icon, key } = item;
-              const iconUrl = NEXT_PUBLIC_API_HOST + `${icon.slice(1)}`;
+              const iconUrl = `${NEXT_PUBLIC_API_HOST}${icon.slice(1)}`;
 
               return (
                 <Select.Option className="social-option" key={`platform-${key}`} value={key}>

web/components/config/video-codec-selector.tsx

@@ -1,19 +1,18 @@
-import React, { useContext, useState, useEffect } from 'react';
-import { Typography, Select, Popconfirm } from 'antd';
-import { ServerStatusContext } from '../../utils/server-status-context';
+import { Popconfirm, Select, Typography } from 'antd';
+import React, { useContext, useEffect, useState } from 'react';
 import { AlertMessageContext } from '../../utils/alert-message-context';
 import {
   API_VIDEO_CODEC,
-  RESET_TIMEOUT,
   postConfigUpdateToAPI,
+  RESET_TIMEOUT,
 } from '../../utils/config-constants';
 import {
   createInputStatus,
   StatusState,
   STATUS_ERROR,
-  STATUS_PROCESSING,
   STATUS_SUCCESS,
 } from '../../utils/input-statuses';
+import { ServerStatusContext } from '../../utils/server-status-context';
 import FormStatusIndicator from './form-status-indicator';
 
 export default function CodecSelector() {
@@ -76,8 +75,8 @@ export default function CodecSelector() {
     });
   }
 
-  const items = supportedCodecs.map(function (codec) {
-    var title = codec;
+  const items = supportedCodecs.map(codec => {
+    let title = codec;
     if (title === 'libx264') {
       title = 'Default (libx264)';
     } else if (title === 'h264_nvenc') {
@@ -97,7 +96,7 @@ export default function CodecSelector() {
     );
   });
 
-  var description = '';
+  let description = '';
   if (selectedCodec === 'libx264') {
     description =
       'libx264 is the default codec and generally the only working choice for shared VPS enviornments. This is likely what you should be using unless you know you have set up other options.';
@@ -138,10 +137,10 @@ export default function CodecSelector() {
         <Popconfirm
           title={`Are you sure you want to change your video codec to ${pendingSaveCodec} and understand what this means?`}
           visible={confirmPopupVisible}
-          placement={'leftBottom'}
+          placement="leftBottom"
           onConfirm={save}
-          okText={'Yes'}
-          cancelText={'No'}
+          okText="Yes"
+          cancelText="No"
         >
           <Select
             defaultValue={selectedCodec}

web/components/config/video-variants-table.tsx

@@ -149,8 +149,8 @@ export default function CurrentVariantsTable() {
       title: '',
       dataIndex: '',
       key: 'edit',
-      render: (data: VideoVariant) => {
-        const index = data.key - 1;
+      render: ({ key }: VideoVariant) => {
+        const index = key - 1;
         return (
           <span className="actions">
             <Button

web/components/main-layout.tsx

@@ -79,7 +79,7 @@ export default function MainLayout(props) {
   const upgradeVersionString = `${upgradeVersion}` || '';
   const upgradeMessage = `Upgrade to v${upgradeVersionString}`;
 
-  const chatMenuItemStyle = 'block'; //upgradeVersion ? 'block' : 'none';
+  const chatMenuItemStyle = 'block'; // upgradeVersion ? 'block' : 'none';
 
   const clearAlertMessage = () => {
     alertMessage.setMessage(null);

web/components/message-visiblity-toggle.tsx

@@ -38,10 +38,8 @@ export default function MessageVisiblityToggle({
     }, OUTCOME_TIMEOUT);
   };
 
-  useEffect(() => {
-    return () => {
-      clearTimeout(outcomeTimeout);
-    };
+  useEffect(() => () => {
+    clearTimeout(outcomeTimeout);
   });
 
   const updateChatMessage = async () => {

web/components/news-feed.tsx

@@ -61,7 +61,7 @@ export default function NewsFeed() {
     getFeed();
   }, []);
 
-  const loadingSpinner = loading ? <Skeleton loading={true} active /> : null;
+  const loadingSpinner = loading ? <Skeleton loading active /> : null;
   const noNews = !loading && feed.length === 0 ? <div>No news.</div> : null;
 
   return (