From defd53c9bcb8db3c461c44fb9a51503c8dd06f77 Mon Sep 17 00:00:00 2001
From: maxime <maximebatista18@gmail.com>
Date: Wed, 21 Feb 2024 17:31:20 +0100
Subject: [PATCH] fix redirections

---
 src/index.css                 |  2 --
 src/pages/Editor.tsx          | 10 +++----
 src/pages/HomePage.tsx        | 50 ++++++++++++++++++++---------------
 src/pages/LoginPage.tsx       |  5 ++--
 src/pages/NewTacticPage.tsx   |  4 +--
 src/pages/RegisterPage.tsx    |  8 +++++-
 src/pages/template/Header.tsx |  8 +++---
 src/style/form.css            |  4 +--
 src/style/template/header.css |  6 ++---
 src/style/title_input.css     |  2 ++
 10 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/src/index.css b/src/index.css
index d7d83a6..0e1eb7b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,8 +3,6 @@
     line-height: 1.5;
     font-weight: 400;
 
-    color-scheme: light dark;
-
     font-synthesis: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx
index 11df02c..1a1e177 100644
--- a/src/pages/Editor.tsx
+++ b/src/pages/Editor.tsx
@@ -2,7 +2,7 @@ import {
     CSSProperties,
     Dispatch,
     RefObject,
-    SetStateAction,
+    SetStateAction, startTransition,
     useCallback,
     useEffect,
     useMemo,
@@ -196,9 +196,9 @@ function Editor({ id, name, courtType, content }: EditorProps) {
                     { content },
                     "PUT",
                 )
-                if (response.status == 401) {
+                if (response.status == 401) startTransition(() =>  {
                     navigate("/login")
-                }
+                })
                 return response.ok ? SaveStates.Ok : SaveStates.Err
             }}
             onNameChange={async (name: string) => {
@@ -212,9 +212,9 @@ function Editor({ id, name, courtType, content }: EditorProps) {
                     { name },
                     "PUT",
                 )
-                if (response.status == 401) {
+                if (response.status == 401) startTransition(() => {
                     navigate("/login")
-                }
+                })
                 return response.ok
             }}
         />
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 1ec9647..8579e19 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,7 +1,7 @@
 import "../style/home/home.css"
 import { getSession } from "../api/session.ts"
 import { useNavigate } from "react-router-dom"
-import { startTransition, useLayoutEffect, useState } from "react"
+import { startTransition, useEffect, useState } from "react"
 import { User } from "../model/User.ts"
 import { fetchAPIGet } from "../Fetcher.ts"
 
@@ -28,7 +28,7 @@ export default function HomePage() {
 
     const navigate = useNavigate()
 
-    useLayoutEffect(() => {
+    useEffect(() => {
         const session = getSession()
 
         if (!session.auth) {
@@ -59,10 +59,10 @@ export default function HomePage() {
 }
 
 function Home({
-    lastTactics,
-    allTactics,
-    teams,
-}: {
+                  lastTactics,
+                  allTactics,
+                  teams,
+              }: {
     lastTactics: Tactic[]
     allTactics: Tactic[]
     teams: Team[]
@@ -79,10 +79,10 @@ function Home({
 }
 
 function Body({
-    lastTactics,
-    allTactics,
-    teams,
-}: {
+                  lastTactics,
+                  allTactics,
+                  teams,
+              }: {
     lastTactics: Tactic[]
     allTactics: Tactic[]
     teams: Team[]
@@ -102,10 +102,10 @@ function Body({
 }
 
 function SideMenu({
-    width,
-    lastTactics,
-    teams,
-}: {
+                      width,
+                      lastTactics,
+                      teams,
+                  }: {
     width: number
     lastTactics: Tactic[]
     teams: Team[]
@@ -125,9 +125,9 @@ function SideMenu({
 }
 
 function PersonalSpace({
-    width,
-    allTactics,
-}: {
+                           width,
+                           allTactics,
+                       }: {
     width: number
     allTactics: Tactic[]
 }) {
@@ -177,7 +177,9 @@ function TableData({ allTactics }: { allTactics: Tactic[] }) {
                 key={tactic.id}
                 className="data"
                 onClick={() => {
-                    navigate("/tactic/" + tactic.id + "/edit")
+                    startTransition(() => {
+                        navigate("/tactic/" + tactic.id + "/edit")
+                    })
                 }}>
                 {truncateString(tactic.name, 25)}
             </td>
@@ -221,7 +223,7 @@ function Team({ teams }: { teams: Team[] }) {
         <div id="teams">
             <div className="titre-side-menu">
                 <h2 className="title">Mes équipes</h2>
-                <button className="new" onClick={() => navigate("/team/new")}>
+                <button className="new" onClick={() => startTransition(() => navigate("/team/new"))}>
                     +
                 </button>
             </div>
@@ -240,7 +242,7 @@ function Tactic({ lastTactics }: { lastTactics: Tactic[] }) {
                 <button
                     className="new"
                     id="create-tactic"
-                    onClick={() => navigate("/tactic/new")}>
+                    onClick={() => startTransition(() => navigate("/tactic/new"))}>
                     +
                 </button>
             </div>
@@ -273,7 +275,9 @@ function ButtonTeam({ team }: { team: Team }) {
                 id={"button-team" + team.id}
                 className="button-side-menu data"
                 onClick={() => {
-                    navigate("/team/" + team.id)
+                    startTransition(() => {
+                        navigate("/team/" + team.id)
+                    })
                 }}>
                 {name}
             </div>
@@ -290,7 +294,9 @@ function ButtonLastTactic({ tactic }: { tactic: Tactic }) {
             id={"button" + tactic.id}
             className="button-side-menu data"
             onClick={() => {
-                navigate("/tactic/" + tactic.id + "/edit")
+                startTransition(() => {
+                    navigate("/tactic/" + tactic.id + "/edit")
+                })
             }}>
             {name}
         </div>
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index ae83a9b..1314d7d 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -85,17 +85,18 @@ export default function LoginApp() {
             <form onSubmit={handleSubmit}>
                 <div className="form-group">
                     <label htmlFor="email">Email :</label>
-                    <input type="text" id="email" name="email" required />
+                    <input className="text-input" type="text" id="email" name="email" required />
 
                     <label htmlFor="password">Mot de passe :</label>
                     <input
+                        className="password-input"
                         type="password"
                         id="password"
                         name="password"
                         required
                     />
 
-                    <Link to={"register"} className="inscr">
+                    <Link to={"/register"} className="inscr">
                         Vous n'avez pas de compte ?
                     </Link>
                     <br />
diff --git a/src/pages/NewTacticPage.tsx b/src/pages/NewTacticPage.tsx
index c390f0e..149f6e8 100644
--- a/src/pages/NewTacticPage.tsx
+++ b/src/pages/NewTacticPage.tsx
@@ -66,11 +66,11 @@ function CourtKindButton({
                     "POST",
                 )
 
-                if (response.status === 401) {
+                if (response.status === 401) startTransition(() => {
                     // if unauthorized
                     navigate("/login")
                     return
-                }
+                })
 
                 const { id } = await response.json()
                 startTransition(() => {
diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx
index baffa09..1c6eb40 100644
--- a/src/pages/RegisterPage.tsx
+++ b/src/pages/RegisterPage.tsx
@@ -95,6 +95,7 @@ export default function RegisterPage() {
                     <label htmlFor="username">Nom d'utilisateur :</label>
                     <input
                         ref={usernameField}
+                        className="text-input"
                         type="text"
                         id="username"
                         name="username"
@@ -104,6 +105,7 @@ export default function RegisterPage() {
                     <label htmlFor="password">Mot de passe :</label>
                     <input
                         ref={passwordField}
+                        className="password-input"
                         type="password"
                         id="password"
                         name="password"
@@ -115,6 +117,7 @@ export default function RegisterPage() {
                     </label>
                     <input
                         ref={confirmpasswordField}
+                        className="password-input"
                         type="password"
                         id="confirmpassword"
                         name="confirmpassword"
@@ -124,6 +127,7 @@ export default function RegisterPage() {
                     <label htmlFor="email">Email :</label>
                     <input
                         ref={emailField}
+                        className="text-input"
                         type="text"
                         id="email"
                         name="email"
@@ -131,7 +135,9 @@ export default function RegisterPage() {
                     />
 
                     <label className="consentement">
-                        <input type="checkbox" name="consentement" required />
+                        <input type="checkbox"
+                               name="consentement"
+                               required />
                         En cochant cette case, j'accepte que mes données
                         personnelles, tel que mon adresse e-mail, soient
                         collectées et traitées conformément à la politique de
diff --git a/src/pages/template/Header.tsx b/src/pages/template/Header.tsx
index c361272..7ffecd2 100644
--- a/src/pages/template/Header.tsx
+++ b/src/pages/template/Header.tsx
@@ -3,7 +3,7 @@ import "../../style/template/header.css"
 import { startTransition, useEffect, useState } from "react"
 import { fetchAPIGet } from "../../Fetcher.ts"
 import { getSession, saveSession } from "../../api/session.ts"
-import { useNavigate } from "react-router-dom"
+import { useLocation, useNavigate } from "react-router-dom"
 
 export function Header() {
     const session = getSession()
@@ -12,13 +12,15 @@ export function Header() {
     )
 
     const navigate = useNavigate()
+    const location = useLocation()
 
     useEffect(() => {
         async function loadUsername() {
             const response = await fetchAPIGet("user")
 
-            if (response.status != 401) {
-                //if unauthorized
+            if (response.status === 401) {
+                //if unauthorized, the header will display a login button instead,
+                //based on the nullity of username
                 return
             }
 
diff --git a/src/style/form.css b/src/style/form.css
index c950f7d..4550172 100644
--- a/src/style/form.css
+++ b/src/style/form.css
@@ -25,8 +25,8 @@ label {
     margin-bottom: 5px;
 }
 
-input[type="text"],
-input[type="password"] {
+.text-input,
+.password-input {
     width: 95%;
     padding: 10px;
     border: 1px solid #ccc;
diff --git a/src/style/template/header.css b/src/style/template/header.css
index 46607aa..a0a0a1d 100644
--- a/src/style/template/header.css
+++ b/src/style/template/header.css
@@ -32,7 +32,8 @@
 
 #username {
     color: var(--main-contrast-color);
-    margin: 0 0 0 10px;
+    margin-right: 20px;
+    margin-left: 10px;
 }
 
 #clickable-header-right:hover #username {
@@ -41,9 +42,8 @@
 
 #clickable-header-right {
     border-radius: 1cap;
-    padding: 2%;
 
-    margin-right: 20px;
+
     display: flex;
     align-items: center;
     justify-content: space-evenly;
diff --git a/src/style/title_input.css b/src/style/title_input.css
index 6d28238..afccff1 100644
--- a/src/style/title_input.css
+++ b/src/style/title_input.css
@@ -1,3 +1,5 @@
+
+
 .title-input {
     background: transparent;
     border-top: none;