Fix TypeScript warnings

frontend/.eslintrc.js

@@ -1,29 +1,30 @@
 module.exports = {
-    "env": {
+  env: {
-        "browser": true,
+    browser: true,
-        "es2021": true
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
     },
-    "extends": [
+    ecmaVersion: 12,
-        "eslint:recommended",
+    sourceType: 'module',
-        "plugin:react/recommended",
+  },
-        "plugin:@typescript-eslint/recommended"
+  plugins: ['react', '@typescript-eslint'],
+  settings: {
+    version: 'detect',
+  },
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      { varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
     ],
-    "parser": "@typescript-eslint/parser",
+  },
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": 12,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react",
-        "@typescript-eslint"
-    ],
-    "settings": {
-      "version": "detect"
-    },
-    "rules": {
-      "react/react-in-jsx-scope": "off"
-    }
 };

frontend/src/App.tsx

@@ -4,7 +4,7 @@ import { Waveform } from './Waveform/Waveform';
 
 const audioContext = new AudioContext();
 
-function App() {
+function App(): JSX.Element {
   return (
     <div className="App">
       <Waveform audioContext={audioContext} />

frontend/src/Waveform/Thumbnails.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
-import { CanvasLogicalWidth, CanvasLogicalHeight, MediaSet } from './Waveform';
+import { CanvasLogicalWidth, MediaSet } from './Waveform';
 
 interface Props {
   mediaSet: MediaSet;
@@ -13,7 +13,7 @@ enum State {
 }
 
 export const Thumbnails: React.FC<Props> = ({ mediaSet, style }: Props) => {
-  const [image, setImage] = useState(new Image());
+  const [image, _setImage] = useState(new Image());
   const [state, setState] = useState(State.Loading);
   const canvasRef = useRef<HTMLCanvasElement>(null);
 

frontend/src/Waveform/Waveform.tsx

@@ -51,7 +51,7 @@ export const Waveform: React.FC<Props> = ({ audioContext }: Props) => {
   const [mediaSet, setMediaSet] = useState<MediaSet | null>(null);
   const [currentTime, setCurrentTime] = useState(0);
   // TODO: extract to player component.
-  const [audio, setAudio] = useState(new Audio());
+  const [audio, _setAudio] = useState(new Audio());
   const [zoomSettings, setZoomSettings] = useState(defaultZoomSettings);
   const [waveformPeaks, setWaveformPeaks] = useState(null);
   const [overviewPeaks, setOverviewPeaks] = useState(null);

frontend/src/reportWebVitals.ts

@@ -1,6 +1,6 @@
 import { ReportHandler } from 'web-vitals';
 
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+const reportWebVitals = (onPerfEntry?: ReportHandler): void => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);