Update nextjs to v16, enable react compiler, and fix tests

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>

cypress.config.js

@@ -3,6 +3,7 @@ const { defineConfig } = require("cypress");
 module.exports = defineConfig({
   video: false,
   e2e: {
+    baseUrl: "http://localhost:3000",
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },

cypress/e2e/download.cy.js

@@ -42,7 +42,6 @@ describe("Download Bundesliga data as JSON and CSV", () => {
   });
 
   it("downloads JSON and verifies format", () => {
-    cy.visit("http://localhost:3000");
     cy.request({
       method: "GET",
       url: `/api/download`,
@@ -82,7 +81,6 @@ describe("Download Bundesliga data as JSON and CSV", () => {
   });
 
   it("downloads CSV and verifies format", () => {
-    cy.visit("http://localhost:3000");
     cy.request({
       method: "GET",
       url: `/api/download`,

cypress/e2e/invite.cy.js

@@ -12,9 +12,7 @@ describe("Invite User into league and change some league Settings and run throug
     let user2;
     let matchdays = [];
     // Signs in
-    cy.visit("http://localhost:3000");
-    cy.get("#login").click();
-    cy.contains("Click here for creating an account").click();
+    cy.visit("/signup");
     cy.get("#username").type("Invite 1");
     cy.get("#password").type("password");
     cy.get(".center > .MuiButtonBase-root").click();

cypress/e2e/predictions.cy.js

@@ -7,9 +7,7 @@ describe("Create Predictions league and do some simple predictions.", () => {
   // Used to signup change username and password and login again
   it("invite", () => {
     // Signs in
-    cy.visit("http://localhost:3000");
-    cy.get("#login").click();
-    cy.contains("Click here for creating an account").click();
+    cy.visit("/signup");
     cy.get("#username").type("Predictions 1");
     cy.get("#password").type("password");
     cy.get(".center > .MuiButtonBase-root").click();

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.

next.config.js

@@ -8,6 +8,7 @@ const nextConfig = {
   images: {
     minimumCacheTTL: 60 * 60 * 24 * 365, // There are no dynamic images used here.
   },
+  reactCompiler: true,
 };
 
 module.exports = nextConfig;