Add eslint and fix most errors

.eslintrc.js

@@ -0,0 +1,25 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+    root: true,
+    extends: [
+      // By extending from a plugin config, we can get recommended rules without having to add them manually.
+      'eslint:recommended',
+      'plugin:jsx-a11y/recommended',
+      'plugin:@typescript-eslint/recommended',
+      // This disables the formatting rules in ESLint that Prettier is going to be responsible for handling.
+      // Make sure it's always the last config, so it gets the chance to override other configs.
+      'eslint-config-prettier',
+    ],
+    ignorePatterns: ['*.css'],
+    overrides: [
+      {
+        files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
+        parser: '@typescript-eslint/parser',
+      },
+    ],
+    rules: {
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "jsx-a11y/media-has-caption": "off"
+    }
+  };

package.json

@@ -16,8 +16,15 @@
         "@types/react-router-dom": "^5.3.2",
         "@types/styled-components": "^5.1.26",
         "@types/uuid": "^8.3.1",
+        "@typescript-eslint/eslint-plugin": "^6.7.4",
+        "@typescript-eslint/parser": "^6.7.4",
         "@vitejs/plugin-react": "^4.1.0",
         "autoprefixer": "^10.4.13",
+        "eslint": "^8.51.0",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-tailwindcss": "^3.13.0",
         "postcss": "^8.4.31",
         "prettier": "^2.8.4",
         "sass": "^1.58.0",

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import { Link, Outlet } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { ToastContainer } from "react-toastify";

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -7,7 +7,7 @@ class ErrorBoundary extends React.Component {
         hasError: false,
     };
 
-    static getDerivedStateFromError(error: Error) {
+    static getDerivedStateFromError() {
         return {
             hasError: true,
         };
@@ -28,7 +28,7 @@ class ErrorBoundary extends React.Component {
                     <div>
                         <h1>Oh noes! A dead unicorn appears!</h1>
 
-                        <img src="/images/dedicorn.png" />
+                        <img src="/images/dedicorn.png" alt="" />
 
                         {this.state.eventId && (
                             <section>

src/components/MusicPlayer/MusicPlayer.tsx

@@ -15,7 +15,7 @@ export const MusicPlayer = ({ src }: Props) => {
 
     useEffect(() => {
         if (isPlaying) {
-            player.play().catch((e) => {
+            player.play().catch(() => {
                 setPlayerError("Could not play this file");
             });
         } else {

src/components/Textarea/Textarea.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, ChangeEventHandler, forwardRef, InputHTMLAttributes, TextareaHTMLAttributes, useId } from "react";
+import { ChangeEventHandler, forwardRef, TextareaHTMLAttributes, useId } from "react";
 import styled from "styled-components";
 
 interface Props extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {

src/context/Auth.tsx

@@ -174,7 +174,7 @@ export const UserProvider = ({ children }: UserProviderProps) => {
                 dispatch({ type: "SET_FETCH_STATUS", status: "resolved" });
                 dispatch({ type: "SET_ACCESS_TOKEN", token: d.access_token });
             })
-            .catch((e) => {
+            .catch(() => {
                 dispatch({ type: "SET_FETCH_STATUS", status: "rejected" });
                 dispatch({ type: "SET_ACCESS_TOKEN" });
             });
@@ -232,7 +232,7 @@ export const useLogin = (code: string | null) => {
                 dispatch({ type: "SET_ACCESS_TOKEN", token: d.access_token });
                 navigate("/");
             })
-            .catch((e) => {
+            .catch(() => {
                 dispatch({ type: "SET_FETCH_STATUS", status: "rejected" });
                 dispatch({ type: "SET_ACCESS_TOKEN" });
             });

src/features/competitionAdmin/views/CompetitionAdminEdit.tsx

@@ -117,10 +117,12 @@ const CompetitionAdminEdit = () => {
                             required: "You must give the competition a start time",
                         }}
                         render={({ field }) => {
-                            const { value, ref, ...props } = field;
+                            const { value, ...props } = field;
                             return (
                                 <div>
-                                    <label id="runtime-start">Competition start time</label>
+                                    <label id="runtime-start" htmlFor="run_time_start">
+                                        Competition start time
+                                    </label>
                                     {errors.run_time_start && (
                                         <label role="alert" className="block text-red-600" id="description-error-label">
                                             {errors.run_time_start.message}
@@ -153,10 +155,12 @@ const CompetitionAdminEdit = () => {
                             required: "You must give the competition an end time",
                         }}
                         render={({ field }) => {
-                            const { value, ref, ...props } = field;
+                            const { value, ...props } = field;
                             return (
                                 <div>
-                                    <label id="runtime-end">Competition end time</label>
+                                    <label id="runtime-end" htmlFor="run_time_end">
+                                        Competition end time
+                                    </label>
                                     {errors.run_time_end && (
                                         <label role="alert" className="block text-red-600" id="description-error-label">
                                             {errors.run_time_end.message}
@@ -237,10 +241,10 @@ const CompetitionAdminEdit = () => {
                         control={control}
                         name="vote_time_start"
                         render={({ field }) => {
-                            const { value, ref, ...props } = field;
+                            const { value, ...props } = field;
                             return (
                                 <div>
-                                    <label id="votetime-start" className="block mb-1">
+                                    <label id="votetime-start" className="block mb-1" htmlFor="vote_time_start">
                                         Vote start time (optional)
                                     </label>
                                     <div className="block">
@@ -262,10 +266,10 @@ const CompetitionAdminEdit = () => {
                         control={control}
                         name="vote_time_end"
                         render={({ field }) => {
-                            const { value, ref, ...props } = field;
+                            const { value, ...props } = field;
                             return (
                                 <div>
-                                    <label id="votetime-end" className="block mb-1">
+                                    <label id="votetime-end" className="block mb-1" htmlFor="vote_time_end">
                                         Vote end time (optional)
                                     </label>
                                     <div className="block">
@@ -367,10 +371,10 @@ const CompetitionAdminEdit = () => {
                     control={control}
                     name="show_prestart_lock"
                     render={({ field }) => {
-                        const { value, ref, ...props } = field;
+                        const { value, ...props } = field;
                         return (
                             <>
-                                <label id="showtime-lock" className="block mb-1">
+                                <label id="showtime-lock" className="block mb-1" htmlFor="show_prestart_lock">
                                     Pre-show lockdown start (optional)
                                 </label>
                                 <div className="block">
@@ -394,10 +398,10 @@ const CompetitionAdminEdit = () => {
                         control={control}
                         name="show_time_start"
                         render={({ field }) => {
-                            const { value, ref, ...props } = field;
+                            const { value, ...props } = field;
                             return (
                                 <div>
-                                    <label id="showtime-end" className="block mb-1">
+                                    <label id="showtime-end" className="block mb-1" htmlFor="show_time_start">
                                         Stage show start (optional)
                                     </label>
                                     <div className="block">
@@ -420,10 +424,10 @@ const CompetitionAdminEdit = () => {
                         control={control}
                         name="show_time_end"
                         render={({ field }) => {
-                            const { value, ref, ...props } = field;
+                            const { value, ...props } = field;
                             return (
                                 <div>
-                                    <label id="showtime-end" className="block mb-1">
+                                    <label id="showtime-end" className="block mb-1" htmlFor="show_time_end">
                                         Stage show end (optional)
                                     </label>
                                     <div className="block">

src/features/competitionAdmin/views/CompetitionAdminEntry.tsx

@@ -27,10 +27,7 @@ interface IFormData {
 const CompetitionAdminEntry = () => {
     const { id, eid } = useParams<{ id: string; eid: string }>();
     const [showDisqualify, setShowDisqualify] = useState(false);
-    const { data: competition, isValidating: isValidatingCompetition } = useSWR<ICompetition>(
-        "competitions/competitions/" + id,
-        httpGet
-    );
+    const { data: competition } = useSWR<ICompetition>("competitions/competitions/" + id, httpGet);
     const { data: entry, mutate } = useSWR<IEntry>("competitions/entries/" + eid, httpGet);
     const {
         register,
@@ -72,13 +69,13 @@ const CompetitionAdminEntry = () => {
     };
     const handleDisqualify = (formData: IFormData) => {
         if (formData.preselect === true) {
-            httpPatch(`competitions/entries/${eid}`, JSON.stringify({ status: 16 })).then((d) => {
+            httpPatch(`competitions/entries/${eid}`, JSON.stringify({ status: 16 })).then(() => {
                 setShowDisqualify(false);
                 mutate();
             });
         } else {
             httpPatch(`competitions/entries/${eid}`, JSON.stringify({ status: 8, comment: formData.comment }))
-                .then((d) => {
+                .then(() => {
                     setShowDisqualify(false);
                     mutate();
                 })
@@ -168,7 +165,11 @@ const CompetitionAdminEntry = () => {
                         })}
                     </ul>
                     {activeMainFileType === "picture" && (
-                        <img className="col-start-2 row-span-2 row-start-1 rounded-r" src={activeMainFile?.url} />
+                        <img
+                            className="col-start-2 row-span-2 row-start-1 rounded-r"
+                            src={activeMainFile?.url}
+                            alt=""
+                        />
                     )}
                 </section>
             )}

src/features/competitionAdmin/views/CompetitionAdminOverview.tsx

@@ -1,20 +1,12 @@
 import React from "react";
-import { toast } from "react-toastify";
 import useSWR from "swr";
 import { View } from "../../../components/View";
 import { Link } from "../../../components/Link";
-import type { ICompetition, ICompetitionListResponse } from "../../competitions/competition";
-import { httpGet, httpPatch } from "../../../utils/fetcher";
-import { parseError } from "../../../utils/error";
+import type { ICompetitionListResponse } from "../../competitions/competition";
+import { httpGet } from "../../../utils/fetcher";
 
 const CompetitionAdminOverview = () => {
-    const { data: competitions, mutate } = useSWR<ICompetitionListResponse>("competitions/competitions", httpGet);
-
-    const togglePublish = (c: ICompetition) => () => {
-        httpPatch(`competitions/competitions/${c.id}`, JSON.stringify({ published: !c.published }))
-            .then((d) => mutate())
-            .catch((err) => parseError(err).forEach((e: any) => toast.error(e)));
-    };
+    const { data: competitions } = useSWR<ICompetitionListResponse>("competitions/competitions", httpGet);
 
     if (!competitions) {
         return null;

src/features/competitions/CompetitionLinksEdit/CompetitionLinksEdit.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { PrimaryButton, SecondaryButton } from "../../../components/Button";
 import { Input } from "../../../components/Input";
 import { Select } from "../../../components/Select";
-import { Link } from "./Link";
 
 type Destinations = "twitch" | "discord" | "facebook" | "gathering.org";
 
@@ -64,7 +63,7 @@ export const CompetitionLinksEdit = ({ label, onChange, value }: IProps) => {
                                     value={val.href}
                                 />
                             </div>
-                            <SecondaryButton type="button" className="mb-1 ml-6" onClick={(e) => handleRemove(i)}>
+                            <SecondaryButton type="button" className="mb-1 ml-6" onClick={() => handleRemove(i)}>
                                 Remove
                             </SecondaryButton>
                         </li>

src/features/competitions/CompetitionLinksEdit/Link.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 
-interface IProps {}
-
 export const Link = () => {
     return <></>;
 };

src/features/competitions/ContributorEditor/Contributor.tsx

@@ -1,8 +1,8 @@
-import { FormEventHandler, useRef, useState } from "react";
+import { FormEventHandler, useState } from "react";
 import { toast } from "react-toastify";
 import { Input } from "../../../components/Input";
 import type { User } from "../../../context/Auth";
-import { httpDelete, httpPatch, httpPut } from "../../../utils/fetcher";
+import { httpDelete, httpPatch } from "../../../utils/fetcher";
 import type { Contributor as IContributor, IEntry } from "../competition";
 
 interface Props {
@@ -33,7 +33,7 @@ export const Contributor = ({ contributor, contributorExtra, user, entry, revali
             .then(() => {
                 toast.success("Contributor updated");
             })
-            .catch((err) => {
+            .catch(() => {
                 toast.error("Something went wrong updating the contributor");
             });
     };

src/features/competitions/ContributorEditor/ContributorEditor.tsx

@@ -22,7 +22,7 @@ export const ContributorEditor = ({ contributorExtra, entry, competition, revali
     const [searchInput, setSearchInput] = useState("");
     const [addContributorError, setAddContributorError] = useState<Array<string>>();
 
-    const { data, isLoading } = useSWR<{
+    const { data } = useSWR<{
         count: number;
         next: null | number;
         previous: null | number;
@@ -60,7 +60,7 @@ export const ContributorEditor = ({ contributorExtra, entry, competition, revali
                 is_owner: false,
             })
         )
-            .then((res) => {
+            .then(() => {
                 setShowAddContributor(false);
                 revalidate();
             })

src/features/competitions/CreateCompetition/GeneralSettings.tsx

@@ -18,7 +18,7 @@ const initialDate = addHours(new Date(), 1);
 initialDate.setMinutes(0, 0, 0);
 
 export const GeneralSettings = ({ onForward, onPrevious }: IProps) => {
-    const { register, formState, handleSubmit, control, watch } = useFormContext();
+    const { register, formState, handleSubmit, control } = useFormContext();
 
     const onSubmit = () => {
         onForward();
@@ -65,7 +65,7 @@ export const GeneralSettings = ({ onForward, onPrevious }: IProps) => {
                         const { value, ...props } = field;
                         return (
                             <>
-                                <label id="runtime-start" className="dark:text-gray-100">
+                                <label id="runtime-start" className="dark:text-gray-100" htmlFor="run_time_start">
                                     Competition start time
                                 </label>
                                 {formState.errors.run_time_start && (
@@ -108,7 +108,7 @@ export const GeneralSettings = ({ onForward, onPrevious }: IProps) => {
                         const { value, ...props } = field;
                         return (
                             <>
-                                <label id="runtime-end" className="mt-6 dark:text-gray-100">
+                                <label id="runtime-end" className="mt-6 dark:text-gray-100" htmlFor="run_time_end">
                                     Competition end time
                                 </label>
                                 {formState.errors.run_time_end && (