Update to next16 and fix lint errors

Signed-off-by: Lukas Schaefer <lukas@lschaefer.xyz>

Author: lukasdotcom

components/Player.js

@@ -30,19 +30,15 @@ function InternalPlayer({ data, children, starred, extraText, condensed }) {
   const t = useContext(TranslateContext);
   const [countdown, setCountown] = useState(0);
   useEffect(() => {
-    const id = setInterval(
-      () => setCountown((countdown) => countdown - 1),
-      60000,
-    );
-    return () => {
-      clearInterval(id);
-    };
-  }, []);
-  // Makes sure that the countdown is up to date
-  useEffect(() => {
-    setCountown(
-      data.game ? Math.ceil((data.game.gameStart - Date.now() / 1000) / 60) : 0,
-    );
+    const check = () =>
+      setCountown(
+        data.game
+          ? Math.ceil((data.game.gameStart - Date.now() / 1000) / 60)
+          : 0,
+      );
+    queueMicrotask(check);
+    const id = setInterval(check, 10000);
+    return () => clearInterval(id);
   }, [data]);
   const theme = useTheme();
   const dark = theme.palette.mode === "dark";

components/Prediction.tsx

@@ -1,6 +1,18 @@
 import { NotifyContext, TranslateContext } from "#/Modules/context";
 import { useContext, useEffect, useState } from "react";
 import { TextField } from "@mui/material";
+
+function GameEndHeader({ gameEnd }: { gameEnd: number }) {
+  const t = useContext(TranslateContext);
+  const [isPastGameEnd, setIsPastGameEnd] = useState(false);
+  useEffect(() => {
+    const check = () => setIsPastGameEnd(Date.now() / 1000 > gameEnd);
+    queueMicrotask(check);
+    const id = setInterval(check, 10000);
+    return () => clearInterval(id);
+  }, [gameEnd]);
+  return <h4>{isPastGameEnd ? t("Final Scores") : t("Current Scores")}</h4>;
+}
 export interface predictions {
   home_team: string;
   home_team_name: string | undefined;
@@ -63,18 +75,14 @@ export function Game({
       notify(t(await response.text()), response.ok ? "success" : "error");
     });
   }
-  const [countdown, setCountown] = useState<number>(
-    Math.ceil((gameStart - Date.now() / 1000) / 60),
-  );
+  const [countdown, setCountown] = useState<number>(0);
   useEffect(() => {
-    const id = setInterval(
-      () => setCountown((countdown) => countdown - 1),
-      60000,
-    );
-    return () => {
-      clearInterval(id);
-    };
-  }, []);
+    const check = () =>
+      setCountown(Math.ceil((gameStart - Date.now() / 1000) / 60));
+    queueMicrotask(check);
+    const id = setInterval(check, 10000);
+    return () => clearInterval(id);
+  }, [gameStart]);
   const t = useContext(TranslateContext);
   const home_team_text = home_team_name || home_team;
   const away_team_text = away_team_name || away_team;
@@ -129,11 +137,7 @@ export function Game({
               </p>
             </>
           )}
-          <h4>
-            {Date.now() / 1000 > gameEnd
-              ? t("Final Scores")
-              : t("Current Scores")}
-          </h4>
+          <GameEndHeader gameEnd={gameEnd} />
           <p>
             {home_score} - {away_score}
           </p>

eslint.config.mjs

@@ -4,6 +4,7 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
 import { FlatCompat } from "@eslint/eslintrc";
+import nextVitals from "eslint-config-next/core-web-vitals";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -32,10 +33,8 @@ export default [
       "next-env.d.ts",
     ],
   },
-  ...compat.extends(
-    "next/core-web-vitals",
-    "plugin:@typescript-eslint/recommended",
-  ),
+  ...nextVitals,
+  ...compat.extends("plugin:@typescript-eslint/recommended"),
   {
     plugins: {
       "@typescript-eslint": typescriptEslint,

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.