feat: upgrade to nextjs 15 and fix eslint errors

julienc91 · julienc91 · commit 5c909f6f7bf1 · 2024-11-24T18:10:29.000+01:00
diff --git a/frontend/app/debug/page.tsx b/frontend/app/debug/page.tsx
@@ -3,8 +3,8 @@
 import { getCookie } from "cookies-next/client";
 import React, { useState } from "react";
 
+import { VERSION } from "@caviardeul/utils/config";
 import SaveManagement from "@caviardeul/utils/save";
-import {VERSION} from "@caviardeul/utils/config";
 
 const Page = () => {
   const [ready, setReady] = useState(false);
diff --git a/frontend/app/login/page.tsx b/frontend/app/login/page.tsx
@@ -1,12 +1,13 @@
 "use client";
 
 import { redirect } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import React, { use, useEffect, useRef, useState } from "react";
 
 import Loader from "@caviardeul/components/utils/loader";
 import { sendLoginRequest } from "@caviardeul/lib/queries";
 
-const Page = ({ searchParams }: { searchParams: { user?: string } }) => {
+const Page = (props: { searchParams: Promise<{ user?: string }> }) => {
+  const searchParams = use(props.searchParams);
   const [loggedIn, setLoggedIn] = useState(false);
   const userIdRef = useRef<string | null>(null);
   const userId = searchParams?.user ?? "";
diff --git a/frontend/components/game/article.tsx b/frontend/components/game/article.tsx
@@ -17,7 +17,7 @@ import {
   standardizeText,
 } from "@caviardeul/utils/caviarding";
 
-const _WordContainer: React.FC<{ word: string }> = ({ word }) => {
+const WordContainer_: React.FC<{ word: string }> = ({ word }) => {
   const { revealedWords, isOver, selection } = useContext(GameContext);
   if (word === undefined) {
     return null;
@@ -40,7 +40,7 @@ const _WordContainer: React.FC<{ word: string }> = ({ word }) => {
   }
 };
 
-const WordContainer = React.memo(_WordContainer);
+const WordContainer = React.memo(WordContainer_);
 
 const parseHTML = (content: string): ReactNode => {
   const doc = parse(content);
diff --git a/frontend/components/game/gameManager.tsx b/frontend/components/game/gameManager.tsx
@@ -34,8 +34,8 @@ export const GameContext = createContext<{
   userScore?: UserScore;
   canPlay: boolean;
   // callbacks
-  updateSelection: (word: string | null) => void;
-  makeAttempt: (word: string) => void;
+  updateSelection: (_word: string | null) => void;
+  makeAttempt: (_word: string) => void;
 }>({
   isOver: false,
   canPlay: false,
diff --git a/frontend/components/settings/manager.tsx b/frontend/components/settings/manager.tsx
@@ -13,7 +13,7 @@ const getInitialSettings = (): Settings => {
   let settings;
   try {
     settings = SaveManagement.getSettings();
-  } catch (e) {
+  } catch (_e) {
     return defaultSettings;
   }
   return {
@@ -24,7 +24,7 @@ const getInitialSettings = (): Settings => {
 
 export const SettingsContext = createContext<{
   settings: Settings;
-  onChangeSettings: (newSettings: Partial<Settings>) => void;
+  onChangeSettings: (_newSettings: Partial<Settings>) => void;
 }>({
   settings: defaultSettings,
   onChangeSettings: () => {},
diff --git a/frontend/components/utils/error.tsx b/frontend/components/utils/error.tsx
@@ -1,15 +1,20 @@
-import React from "react";
 import Error from "next/error";
+import React from "react";
 
-
-const CustomError: React.FC<{ statusCode?: number, text?: string }> = ({statusCode, text}) => {
+const CustomError: React.FC<{ statusCode?: number; text?: string }> = ({
+  statusCode,
+  text,
+}) => {
   return (
     <main>
       <div className="error">
-        <Error statusCode={statusCode ?? 500} title={text ?? "Une erreur est survenue"}/>
+        <Error
+          statusCode={statusCode ?? 500}
+          title={text ?? "Une erreur est survenue"}
+        />
       </div>
     </main>
-  )
-}
+  );
+};
 
-export default CustomError
+export default CustomError;
diff --git a/frontend/env.d.ts b/frontend/env.d.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 namespace NodeJS {
   interface ProcessEnv {
     NEXT_PUBLIC_API_URL?: string;
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
@@ -14,7 +14,7 @@ const compat = new FlatCompat({
   allConfig: js.configs.all,
 });
 
-export default [
+const config = [
   {
     ignores: ["**/.next/*", "**/node_modules/*"],
   },
@@ -34,6 +34,17 @@ export default [
 
     rules: {
       "prettier/prettier": "error",
+      "no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
+      ],
     },
   },
 ];
+
+export default config;
diff --git a/frontend/lib/article.ts b/frontend/lib/article.ts
@@ -1,6 +1,6 @@
+import { APIError } from "@caviardeul/lib/queries";
 import { ArticleId, EncodedArticle } from "@caviardeul/types";
 import { API_URL } from "@caviardeul/utils/config";
-import {APIError} from "@caviardeul/lib/queries";
 
 export const getEncodedArticle = async (
   articleId?: ArticleId,
@@ -24,7 +24,7 @@ export const getEncodedArticle = async (
 
   const data = await res.json();
   if (!res.ok) {
-    throw new APIError(res.status, data.details ?? "")
+    throw new APIError(res.status, data.details ?? "");
   }
 
   return {
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,11 +14,11 @@
     "cookies-next": "^5.0.0",
     "fernet": "^0.3.2",
     "latinize": "^2.0.0",
-    "next": "^14.2.10",
+    "next": "^15.0.3",
     "node-html-parser": "^6.1.8",
     "qrcode.react": "^4.0.1",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "19.0.0-rc.1",
+    "react-dom": "19.0.0-rc.1",
     "react-icons": "^5.0.1",
     "swr": "^2.2.4"
   },
@@ -29,15 +29,19 @@
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/latinize": "^0.2.15",
     "@types/node": "^22.5.4",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.4",
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "eslint": "^9.9.1",
-    "eslint-config-next": "^14.2.5",
+    "eslint-config-next": "^15.0.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
     "prettier": "^3.0.3",
     "sass": "^1.52.1",
     "typescript": "^5.0.2"
+  },
+  "resolutions": {
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
   }
 }
diff --git a/frontend/pages/404.tsx b/frontend/pages/404.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import CustomError from "@caviardeul/components/utils/error";
 
 const NotFoundPage: React.FC = () => {
diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
@@ -1,4 +1,5 @@
 import type { AppProps } from "next/app";
+import React from "react";
 
 import Layout from "@caviardeul/components/layout";
 
diff --git a/frontend/pages/archives/[articleId].tsx b/frontend/pages/archives/[articleId].tsx
@@ -1,20 +1,20 @@
-import type { GetServerSideProps, NextPage } from "next";
+import type { GetServerSideProps } from "next";
 import Head from "next/head";
 import React from "react";
 
 import Game from "@caviardeul/components/game/game";
+import CustomError from "@caviardeul/components/utils/error";
 import { getEncodedArticle } from "@caviardeul/lib/article";
+import { APIError, isAPIError } from "@caviardeul/lib/queries";
 import { EncodedArticle } from "@caviardeul/types";
 import { decodeArticle } from "@caviardeul/utils/encryption";
-import CustomError from "@caviardeul/components/utils/error";
-import {APIError, isAPIError} from "@caviardeul/lib/queries";
 
-const ArchiveGame: NextPage<{
+const ArchiveGame: React.FC<{
   encodedArticle: EncodedArticle | null;
-  error?: APIError,
+  error?: APIError;
 }> = ({ encodedArticle, error, ...props }) => {
   if (!encodedArticle) {
-    return <CustomError statusCode={error!.status} text={error!.details} />
+    return <CustomError statusCode={error!.status} text={error!.details} />;
   }
 
   const article = decodeArticle(encodedArticle);
@@ -39,17 +39,22 @@ export const getServerSideProps: GetServerSideProps = async ({
 }) => {
   const { userId } = req.cookies;
   const articleId = parseInt(params?.articleId as string);
-  let encodedArticle = null
+  let encodedArticle = null;
   try {
     encodedArticle = await getEncodedArticle(articleId, false, userId);
   } catch (error) {
-    let apiError
+    let apiError;
     if (isAPIError(error)) {
-      apiError = error
+      apiError = error;
     } else {
-      apiError = new APIError(500, "Une erreur est survenue")
+      apiError = new APIError(500, "Une erreur est survenue");
     }
-    return {props: {encodedArticle, error: {status: apiError.status, details: apiError.details}}}
+    return {
+      props: {
+        encodedArticle,
+        error: { status: apiError.status, details: apiError.details },
+      },
+    };
   }
 
   const { userScore } = encodedArticle;
diff --git a/frontend/pages/archives/index.tsx b/frontend/pages/archives/index.tsx
@@ -46,7 +46,7 @@ type SortType = "date" | "difficulty" | "score";
 const SortSelection: React.FC<{
   sortBy: SortType;
   sortOrder: boolean;
-  onChange: (value: SortType) => void;
+  onChange: (_value: SortType) => void;
 }> = ({ sortBy, sortOrder, onChange }) => {
   return (
     <>
@@ -74,7 +74,7 @@ type FilterType = "finished" | "not_finished" | "";
 
 const FilterSelection: React.FC<{
   filterBy: FilterType;
-  onChange: (value: FilterType) => void;
+  onChange: (_value: FilterType) => void;
 }> = ({ filterBy, onChange }) => {
   return (
     <div className="filter-selection">
diff --git a/frontend/pages/custom/[articleId].tsx b/frontend/pages/custom/[articleId].tsx
@@ -1,4 +1,4 @@
-import type { GetServerSideProps, NextPage } from "next";
+import type { GetServerSideProps } from "next";
 import Head from "next/head";
 import React from "react";
 
@@ -7,7 +7,7 @@ import { getEncodedArticle } from "@caviardeul/lib/article";
 import { EncodedArticle } from "@caviardeul/types";
 import { decodeArticle } from "@caviardeul/utils/encryption";
 
-const CustomGame: NextPage<{
+const CustomGame: React.FC<{
   encodedArticle: EncodedArticle;
 }> = ({ encodedArticle }) => {
   const article = decodeArticle(encodedArticle);
@@ -35,7 +35,7 @@ export const getServerSideProps: GetServerSideProps = async ({
   try {
     const data = await getEncodedArticle(articleId, true, userId);
     return { props: { encodedArticle: data } };
-  } catch (error) {
+  } catch (_e) {
     return { notFound: true };
   }
 };
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
@@ -1,31 +1,26 @@
-import type { GetServerSideProps, NextPage } from "next";
+import type { GetServerSideProps } from "next";
 import React from "react";
 
 import Game from "@caviardeul/components/game/game";
+import CustomError from "@caviardeul/components/utils/error";
 import { getEncodedArticle } from "@caviardeul/lib/article";
+import { APIError, isAPIError } from "@caviardeul/lib/queries";
 import { EncodedArticle } from "@caviardeul/types";
 import { decodeArticle } from "@caviardeul/utils/encryption";
-import CustomError from "@caviardeul/components/utils/error";
-import {APIError, isAPIError} from "@caviardeul/lib/queries";
 
-const Home: NextPage<{
+const Home: React.FC<{
   encodedArticle: EncodedArticle | null;
   userScore?: { nbAttempts: number; nbCorrect: number };
-  error?: APIError,
-}> = ({ encodedArticle, userScore, error }
-) => {
+  error?: APIError;
+}> = ({ encodedArticle, userScore, error }) => {
   if (!encodedArticle) {
-    return <CustomError statusCode={error!.status} text={error!.details} />
+    return <CustomError statusCode={error!.status} text={error!.details} />;
   }
 
   const article = decodeArticle(encodedArticle);
   return (
-    <Game
-      key={article.articleId}
-      article={article}
-      userScore={userScore}
-    />
-  )
+    <Game key={article.articleId} article={article} userScore={userScore} />
+  );
 };
 
 export default Home;
@@ -36,13 +31,18 @@ export const getServerSideProps: GetServerSideProps = async ({ req }) => {
   try {
     encodedArticle = await getEncodedArticle(undefined, undefined, userId);
   } catch (error) {
-    let apiError
+    let apiError;
     if (isAPIError(error)) {
-      apiError = error
+      apiError = error;
     } else {
-      apiError = new APIError(500, "Une erreur est survenue")
+      apiError = new APIError(500, "Une erreur est survenue");
     }
-    return {props: {encodedArticle, error: {status: apiError.status, details: apiError.details}}}
+    return {
+      props: {
+        encodedArticle,
+        error: { status: apiError.status, details: apiError.details },
+      },
+    };
   }
 
   const { userScore } = encodedArticle;
diff --git a/frontend/utils/caviarding.ts b/frontend/utils/caviarding.ts
@@ -93,7 +93,7 @@ export const countOccurrences = (word: string, text: string): number => {
   text = standardizeText(text);
   const allowedSuffixes = `(${closeAlternativesSuffixes.join("|")})?`;
   const regex = new RegExp(
-    `\([${punctuationList}]|^)(${word})${allowedSuffixes}([${punctuationList}]|$)`,
+    `([${punctuationList}]|^)(${word})${allowedSuffixes}([${punctuationList}]|$)`,
     "gim",
   );
   const matches = Array.from(text.matchAll(regex));
@@ -104,7 +104,7 @@ export const countOccurrences = (word: string, text: string): number => {
   count -= relatedCommonWords
     .map((commonWord) => {
       const regex = new RegExp(
-        `\([${punctuationList}]|^)(${commonWord})([${punctuationList}]|$)`,
+        `([${punctuationList}]|^)(${commonWord})([${punctuationList}]|$)`,
         "gim",
       );
       return Array.from(text.matchAll(regex)).length;
diff --git a/frontend/utils/encryption.ts b/frontend/utils/encryption.ts
@@ -10,7 +10,7 @@ make cheating too easy.
 export const checkEncryptionKey = (key: string): boolean => {
   try {
     new fernet.Secret(key);
-  } catch (e) {
+  } catch (_e) {
     return false;
   }
   return true;
diff --git a/frontend/utils/save.ts b/frontend/utils/save.ts
@@ -60,7 +60,7 @@ class SaveManagement {
         return null;
       }
       return history;
-    } catch (e) {
+    } catch (_e) {
       SaveManagement.clearProgress(!archive && !custom, archive, custom);
       return null;
     }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+/* eslint-disable no-unused-vars */`
`1`	`2`	`namespace NodeJS {`
`2`	`3`	`interface ProcessEnv {`
`3`	`4`	`NEXT_PUBLIC_API_URL?: string;`