From be5243f5f85f03459bf7f8cc39d690a1c2ad4664 Mon Sep 17 00:00:00 2001 From: Jannik Date: Fri, 9 Jul 2021 20:42:01 +0200 Subject: [PATCH] Update Next to 11.0.1 (including lint & import fixes) (#248) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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] * :rotating_light: apply automatic linting * :art: remove unused imports * :mute: allow console.* to give more debugging options * :art: move stuff around to reduce linter messages * :rotating_light: use destructuring so lint won't complain * :pushpin: 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/.eslintrc.js | 1 + web/components/chart.tsx | 7 +- web/components/config/edit-custom-css.tsx | 9 +- web/components/config/edit-logo.tsx | 2 +- web/components/config/edit-social-links.tsx | 10 +- web/components/config/edit-tags.tsx | 9 +- .../config/form-textfield-with-submit.tsx | 23 +- .../config/social-icons-dropdown.tsx | 2 +- .../config/video-codec-selector.tsx | 21 +- .../config/video-variants-table.tsx | 4 +- web/components/main-layout.tsx | 2 +- web/components/message-visiblity-toggle.tsx | 6 +- web/components/news-feed.tsx | 2 +- web/package-lock.json | 261 ++++++------------ web/package.json | 3 +- web/pages/access-tokens.tsx | 43 +-- web/pages/actions.tsx | 154 +++++------ web/pages/config-chat.tsx | 24 +- web/pages/config-video.tsx | 9 +- web/pages/offline-notice.tsx | 22 +- web/pages/webhooks.tsx | 94 +++---- web/types/config-section.ts | 2 +- 22 files changed, 304 insertions(+), 406 deletions(-) diff --git a/web/.eslintrc.js b/web/.eslintrc.js index 960aa2bb7..c5f1d70fe 100644 --- a/web/.eslintrc.js +++ b/web/.eslintrc.js @@ -21,6 +21,7 @@ module.exports = { 'no-unused-vars': 'off', '@typescript-eslint/no-unused-vars': 'error', + 'no-console': 'off', 'no-use-before-define': [0], '@typescript-eslint/no-use-before-define': [1], diff --git a/web/components/chart.tsx b/web/components/chart.tsx index 6fcc06806..a97520c34 100644 --- a/web/components/chart.tsx +++ b/web/components/chart.tsx @@ -1,7 +1,10 @@ +import ChartJs from 'chart.js/auto'; +import Chartkick from 'chartkick'; +import format from 'date-fns/format'; import { LineChart } from 'react-chartkick'; -import 'chartkick/chart.js' -import format from 'date-fns/format'; +// from https://github.com/ankane/chartkick.js/blob/master/chart.js/chart.esm.js +Chartkick.use(ChartJs); interface TimedValue { time: Date; diff --git a/web/components/config/edit-custom-css.tsx b/web/components/config/edit-custom-css.tsx index d309c35f1..8134a9759 100644 --- a/web/components/config/edit-custom-css.tsx +++ b/web/components/config/edit-custom-css.tsx @@ -86,13 +86,10 @@ export default function EditCustomStyles() {

Customize the look and feel of your Owncast instance by overriding the CSS styles of various components on the page. Refer to the{' '} - + CSS & Components guide - . + + .

Please input plain CSS text, as this will be directly injected onto your page during load. diff --git a/web/components/config/edit-logo.tsx b/web/components/config/edit-logo.tsx index ca1bdeecb..c92189e3d 100644 --- a/web/components/config/edit-logo.tsx +++ b/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 (

diff --git a/web/components/config/edit-social-links.tsx b/web/components/config/edit-social-links.tsx index dc00563e3..d92c8f351 100644 --- a/web/components/config/edit-social-links.tsx +++ b/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 (
diff --git a/web/components/config/edit-tags.tsx b/web/components/config/edit-tags.tsx index 5cfeeb46d..27441945c 100644 --- a/web/components/config/edit-tags.tsx +++ b/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); diff --git a/web/components/config/form-textfield-with-submit.tsx b/web/components/config/form-textfield-with-submit.tsx index 63ed87495..23a9175ad 100644 --- a/web/components/config/form-textfield-with-submit.tsx +++ b/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, }); } }; diff --git a/web/components/config/social-icons-dropdown.tsx b/web/components/config/social-icons-dropdown.tsx index cb2bc4e55..feb540655 100644 --- a/web/components/config/social-icons-dropdown.tsx +++ b/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 ( diff --git a/web/components/config/video-codec-selector.tsx b/web/components/config/video-codec-selector.tsx index 6a9489f39..bbd9bef8f 100644 --- a/web/components/config/video-codec-selector.tsx +++ b/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() {