From bc313ae1da3efbff5c2be9729aba2bb2f91aa78a 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/pages/Editor.tsx          | 10 +++----
 src/pages/HomePage.tsx        | 50 ++++++++++++++++++++---------------
 src/pages/NewTacticPage.tsx   |  4 +--
 src/pages/template/Header.tsx |  3 ++-
 4 files changed, 37 insertions(+), 30 deletions(-)

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/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/template/Header.tsx b/src/pages/template/Header.tsx
index c361272..da69cb0 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,6 +12,7 @@ export function Header() {
     )
 
     const navigate = useNavigate()
+    const location = useLocation()
 
     useEffect(() => {
         async function loadUsername() {