apply suggestions

.env

@@ -1,2 +1 @@
-VITE_API_ENDPOINT=http://localhost:5254
-VITE_BASE=
+VITE_API_ENDPOINT=https://iqball.maxou.dev/api/dotnet-master

.eslintrc.cjs

@@ -5,6 +5,8 @@ module.exports = {
         "eslint:recommended",
         "plugin:@typescript-eslint/recommended",
         "plugin:react-hooks/recommended",
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
     ],
     ignorePatterns: ["dist", ".eslintrc.cjs"],
     parser: "@typescript-eslint/parser",

src/Constants.ts

@@ -6,4 +6,4 @@ export const API = import.meta.env.VITE_API_ENDPOINT
 /**
  * This constant defines the base app's endpoint.
  */
-export const BASE = import.meta.env.VITE_BASE
+export const BASE = import.meta.env.BASE_URL.slice(0, import.meta.env.BASE_URL.length - 1)

src/Fetcher.ts

@@ -1,9 +1,6 @@
-import { API, BASE } from "./Constants"
+import { API } from "./Constants"
 import { getSession, saveSession, Session } from "./api/session.ts"
-
-export function redirect(url: string) {
-    location.pathname = BASE + url
-}
+import { redirect } from "react-router-dom"
 
 export async function fetchAPI(
     url: string,

src/pages/Editor.tsx

@@ -99,20 +99,23 @@ interface EditorPageProps {
 }
 
 export default function EditorPage({ guestMode }: EditorPageProps) {
-    const [tactic, setTactic] = useState<TacticDto>()
-    const { tacticId: idStr } = useParams()
-    const id = guestMode ? -1 : parseInt(idStr!)
-
-    useEffect(() => {
+    const [tactic, setTactic] = useState<TacticDto | null>(() => {
         if (guestMode) {
-            setTactic({
+            return {
                 id: -1,
                 courtType: "PLAIN",
                 content: '{"components": []}',
                 name: DEFAULT_TACTIC_NAME,
+            }
+        }
+        return null;
     })
+    const { tacticId: idStr } = useParams()
+    const id = guestMode ? -1 : parseInt(idStr!)
+
+    useEffect(() => {
+        if (guestMode)
             return
-        }
 
         async function initialize() {
             const infoResponse = fetchAPIGet(`tactics/${id}`)

src/pages/HomePage.tsx

@@ -1,11 +1,11 @@
 import "../style/home/home.css"
 
-// import AccountSvg from "../assets/account.svg?react"
 import { BASE } from "../Constants"
 import { getSession } from "../api/session.ts"
-import { fetchAPIGet, redirect } from "../Fetcher.ts"
+import { redirect } from "react-router-dom"
 import { useLayoutEffect, useState } from "react"
 import { User } from "../model/User.ts"
+import { fetchAPIGet } from "../Fetcher.ts"
 
 interface Tactic {
     id: number

src/pages/LoginPage.tsx

@@ -1,21 +1,21 @@
 import { FormEvent, useRef, useState } from "react"
 import { BASE } from "../Constants.ts"
-import { fetchAPI, redirect } from "../Fetcher.ts"
+import { fetchAPI } from "../Fetcher.ts"
 import { Failure } from "../api/failure.ts"
 import { getSession, saveSession } from "../api/session.ts"
 import "../style/form.css"
+import { redirect } from "react-router-dom"
 
 export default function LoginApp() {
     const [errors, setErrors] = useState<Failure[]>([])
 
-    const emailRef = useRef<HTMLInputElement>(null)
-    const passwordRef = useRef<HTMLInputElement>(null)
 
     async function handleSubmit(e: FormEvent) {
         e.preventDefault()
 
-        const email = emailRef.current!.value
-        const password = passwordRef.current!.value
+        const { email, password } = Object.fromEntries(
+            new FormData(e.target as HTMLFormElement),
+        )
 
         const response = await fetchAPI(
             "auth/token",
@@ -38,7 +38,7 @@ export default function LoginApp() {
                 {
                     type: "Non autorisé",
                     messages: [
-                        "L'adresse email ou le mot de passe sont invalide.",
+                        "L'adresse email ou le mot de passe sont invalides.",
                     ],
                 },
             ])
@@ -81,7 +81,6 @@ export default function LoginApp() {
                 <div className="form-group">
                     <label htmlFor="email">Email :</label>
                     <input
-                        ref={emailRef}
                         type="text"
                         id="email"
                         name="email"
@@ -90,7 +89,6 @@ export default function LoginApp() {
 
                     <label htmlFor="password">Mot de passe :</label>
                     <input
-                        ref={passwordRef}
                         type="password"
                         id="password"
                         name="password"

src/pages/Visualizer.tsx

@@ -2,22 +2,22 @@
 // import "../style/visualizer.css"
 // import Court from "../assets/court/full_court.svg"
 //
-// // export default function Visualizer({ id, name }: { id: number; name: string }) {
-// //     const [style, setStyle] = useState<CSSProperties>({})
-// //
-// //     return (
-// //         <div id="main">
-// //             <div id="topbar">
-// //                 <h1>{name}</h1>
-// //             </div>
-// //             <div id="court-container">
-// //                 <img
-// //                     id="court"
-// //                     src={Court}
-// //                     style={style}
-// //                     alt="Basketball Court"
-// //                 />
-// //             </div>
-// //         </div>
-// //     )
-// // }
+// export default function Visualizer({ id, name }: { id: number; name: string }) {
+//     const [style, setStyle] = useState<CSSProperties>({})
+//
+//     return (
+//         <div id="main">
+//             <div id="topbar">
+//                 <h1>{name}</h1>
+//             </div>
+//             <div id="court-container">
+//                 <img
+//                     id="court"
+//                     src={Court}
+//                     style={style}
+//                     alt="Basketball Court"
+//                 />
+//             </div>
+//         </div>
+//     )
+// }

src/pages/template/Header.tsx

@@ -1,8 +1,9 @@
 import AccountSvg from "../../assets/account.svg?react"
 import "../../style/template/header.css"
 import { useEffect, useState } from "react"
-import { fetchAPIGet, redirect } from "../../Fetcher.ts"
+import { fetchAPIGet } from "../../Fetcher.ts"
 import { getSession, saveSession } from "../../api/session.ts"
+import { redirect } from "react-router-dom"
 
 export function Header() {
     const session = getSession()

vite.config.ts

@@ -13,8 +13,6 @@ export default defineConfig({
         cssInjectedByJsPlugin({
             relativeCSSInjection: true,
         }),
-        svgr({
-            include: "**/*.svg?react",
-        }),
+        svgr(),
     ],
 })