build(deps): update dependency typescript to v4.3.2 (#353)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

next-env.d.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/triple-slash-reference */
-
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />

next.config.js

@@ -1,5 +1,6 @@
 /* eslint-disable unicorn/prefer-module */
 
+const process = require('process');
 const withPlugins = require('next-compose-plugins');
 const withPWA = require('next-pwa');
 

package.json

@@ -8,7 +8,7 @@
 		"@lazy-http/content-disposition": "1.0.2",
 		"@material-ui/core": "4.12.3",
 		"@material-ui/icons": "4.11.2",
-		"@types/node": "14.17.20",
+		"@types/node": "16.10.2",
 		"@types/react": "17.0.26",
 		"file-type": "16.5.3",
 		"firebase": "8.10.0",
@@ -17,16 +17,16 @@
 		"next-pwa": "5.3.1",
 		"react": "17.0.2",
 		"react-dom": "17.0.2",
-		"typescript": "4.2.4",
+		"typescript": "4.4.3",
 		"ytdl-core": "4.9.1"
 	},
 	"devDependencies": {
 		"eslint-config-xo-react": "0.25.0",
 		"eslint-plugin-react": "7.26.1",
 		"eslint-plugin-react-hooks": "4.2.0",
-		"prettier": "2.3.0",
+		"prettier": "2.4.1",
 		"prettier-config-xo": "2.0.0",
-		"xo": "0.40.3"
+		"xo": "0.45.0"
 	},
 	"homepage": "https://maroon.jonah.pw",
 	"name": "maroon",
@@ -48,6 +48,9 @@
 			"xo/browser",
 			"xo-react"
 		],
+		"ignore": [
+			"./next-env.d.ts"
+		],
 		"overrides": [
 			{
 				"extends": [
@@ -73,7 +76,8 @@
 				}
 			],
 			"react/no-unescaped-entities": "off",
-			"react/prop-types": "off"
+			"react/prop-types": "off",
+			"unicorn/prefer-node-protocol": "off"
 		}
 	}
 }

prettier.config.cjs

@@ -1,5 +1,3 @@
-/* eslint-disable unicorn/prefer-module */
-
 module.exports = {
 	...require('prettier-config-xo'),
 	printWidth: 160,

src/components/seo.tsx

@@ -14,6 +14,7 @@ export function generateFullTitle(pageTitle: string): string {
 /**
  * A collection of SEO tags that use values from a site-wide or page specific config.
  */
+// eslint-disable-next-line @typescript-eslint/naming-convention
 const Seo: FC<{theme: Theme; pageTitle: string}> = props => {
 	const fullTitle = generateFullTitle(props.pageTitle);
 

src/config.ts

@@ -1,2 +1,4 @@
+import process from 'process';
+
 /** Base URL to use. */
 export const baseUrl = process.env.BASE_URL ?? process.env.VERCEL_URL ?? '';

src/pages/404.tsx

@@ -8,6 +8,7 @@ import Seo from '../components/seo';
 /**
  * 404 page not found page.
  */
+// eslint-disable-next-line @typescript-eslint/naming-convention
 const NotFoundPage: FC = () => {
 	const theme = useTheme();
 	return (

src/pages/_app.tsx

@@ -14,7 +14,7 @@ export default class MyApp extends App {
 	}
 
 	render() {
-		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/naming-convention
 		const {Component, pageProps} = this.props;
 
 		return (

src/pages/index.tsx

@@ -3,7 +3,7 @@ import React, {ChangeEvent, useState} from 'react';
 import Seo from '../components/seo';
 import {downloadUrl} from '../config/api';
 import {checkVideo} from '../util/validate';
-import {getVideoID} from '../util/yt';
+import {getVideoId} from '../util/yt';
 import woah from '../woah.module.css';
 
 // Export const config = {amp: 'hybrid'};
@@ -13,6 +13,7 @@ const animations = false;
 /**
  * Home page.
  */
+// eslint-disable-next-line @typescript-eslint/naming-convention
 const Home: React.FC = () => {
 	const theme = useTheme();
 
@@ -25,7 +26,7 @@ const Home: React.FC = () => {
 
 	if (errorMessage === null) {
 		try {
-			videoDownloadUrl = [downloadUrl, 'dl', audioOnly ? 'audio' : 'video', getVideoID(url)].join('/');
+			videoDownloadUrl = [downloadUrl, 'dl', audioOnly ? 'audio' : 'video', getVideoId(url)].join('/');
 		} catch {}
 	}
 

src/template.tsx

@@ -1,18 +1,19 @@
-import {Container, createMuiTheme, CssBaseline, Fab, Grid, responsiveFontSizes, ThemeProvider, useMediaQuery, colors} from '@material-ui/core';
+import {colors, Container, createTheme, CssBaseline, Fab, Grid, responsiveFontSizes, ThemeProvider, useMediaQuery} from '@material-ui/core';
 import {FlashOnRounded} from '@material-ui/icons';
 import {useAmp} from 'next/amp';
 import Link from 'next/link';
 import React, {FC, useMemo} from 'react';
 import Seo from './components/seo';
 import {siteMetadata} from './config/site-metadata';
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
 export const MaroonTemplate: FC = props => {
 	const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-	const isAMP = useAmp();
+	const isAmp = useAmp();
 
 	const theme = useMemo(() => {
 		return responsiveFontSizes(
-			createMuiTheme({
+			createTheme({
 				spacing: 12,
 				palette: {
 					type: prefersDarkMode ? 'dark' : 'light',
@@ -28,7 +29,7 @@ export const MaroonTemplate: FC = props => {
 			<CssBaseline />
 			<Container>
 				{props.children}
-				{isAMP && (
+				{isAmp && (
 					<Grid container direction='row' justify='flex-end' alignItems='flex-end' spacing={1}>
 						<Grid item>
 							<Link passHref href='/'>

src/util/firebase.ts

@@ -1,10 +1,9 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import firebase from 'firebase/app';
 import 'firebase/performance';
 import 'firebase/analytics';
-/* eslint-enable import/no-extraneous-dependencies */
 
 export const firebaseConfig = {
+	/* eslint-disable @typescript-eslint/naming-convention */
 	apiKey: 'AIzaSyDSVQuKbk94g-uBqksUKAuaBoaDwI7gPiM',
 	authDomain: 'maroon-node.firebaseapp.com',
 	databaseURL: 'https://maroon-node.firebaseio.com',
@@ -13,6 +12,7 @@ export const firebaseConfig = {
 	messagingSenderId: '777436616784',
 	appId: '1:777436616784:web:b61005b6d11e65c3ffd955',
 	measurementId: 'G-FGVVCP54FS',
+	/* eslint-enable @typescript-eslint/naming-convention */
 };
 
 // Only keep a single app initialized

src/util/validate.ts

@@ -1,18 +1,18 @@
 import {downloadUrl} from '../config/api';
-import {getVideoID, validateURL} from './yt';
+import {getVideoId, validateUrl} from './yt';
 
 /**
  * Check if a video URL is good to download.
  * @param video Video to check
  * @returns The human-readable error message, or `null` if everything is fine
  */
 export async function checkVideo(video: string): Promise<string | null> {
-	if (!validateURL(video)) {
+	if (!validateUrl(video)) {
 		return 'invalid video url';
 	}
 
 	try {
-		const response = await fetch(`${downloadUrl}/validate/${getVideoID(video)}`);
+		const response = await fetch(`${downloadUrl}/validate/${getVideoId(video)}`);
 		if (!response.ok) {
 			return 'the server says that video is maybe not exist???';
 		}

src/util/yt.ts

@@ -10,11 +10,11 @@ const idRegex = /^[\w-]{11}$/i;
  * @param id
  * @return
  */
-export function validateID(id: string): boolean {
+export function validateId(id: string): boolean {
 	return idRegex.test(id);
 }
 
-export function getURLVideoID(link: string): string {
+export function getUrlVideoId(link: string): string {
 	const parsed = new URL(link);
 	let id = parsed.searchParams.get('v');
 	if (validPathDomains.test(link) && id === null) {
@@ -29,7 +29,7 @@ export function getURLVideoID(link: string): string {
 	}
 
 	id = id.slice(0, 11);
-	if (!validateID(id)) {
+	if (!validateId(id)) {
 		throw new TypeError(`Video id (${id}) does not match expected format (${idRegex.toString()})`);
 	}
 
@@ -40,7 +40,7 @@ export function getURLVideoID(link: string): string {
  * @param link The link to use
  * @returns `true` if the link was valid
  */
-export function validateURL(link: string): boolean {
+export function validateUrl(link: string): boolean {
 	let parsed;
 	try {
 		parsed = new URL(link);
@@ -69,10 +69,10 @@ export function validateURL(link: string): boolean {
  * Get a video ID from a string.
  * @param string String to get the video ID from
  */
-export function getVideoID(string: string): string {
-	if (validateID(string)) {
+export function getVideoId(string: string): string {
+	if (validateId(string)) {
 		return string;
 	}
 
-	return getURLVideoID(string);
+	return getUrlVideoId(string);
 }