From 73dfa0077dae89ac0172581ba1bb03e6fb7e1328 Mon Sep 17 00:00:00 2001 From: maxime Date: Thu, 22 Feb 2024 16:16:14 +0100 Subject: [PATCH] apply suggestions --- src/App.tsx | 41 ++++++++++++++++++-------- src/pages/Editor.tsx | 16 +++++------ src/pages/HomePage.tsx | 46 ++++++++++++------------------ src/pages/LoginPage.tsx | 14 +++++---- src/pages/NewTacticPage.tsx | 14 ++++----- src/pages/RegisterPage.tsx | 10 ++----- src/pages/template/Header.tsx | 12 +++----- src/style/home/personnal_space.css | 4 +++ src/style/template/header.css | 1 - src/style/title_input.css | 2 -- 10 files changed, 81 insertions(+), 79 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index f28f8a9..c277daa 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,7 @@ import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom" import { Header } from "./pages/template/Header.tsx" import "./style/app.css" -import { lazy } from "react" +import { lazy, ReactNode, Suspense } from "react" import { BASE } from "./Constants.ts" const HomePage = lazy(() => import("./pages/HomePage.tsx")) @@ -15,41 +15,58 @@ const NewTacticPage = lazy(() => import("./pages/NewTacticPage.tsx")) const Editor = lazy(() => import("./pages/Editor.tsx")) export default function App() { + function suspense(node: ReactNode) { + return ( + Loading, please wait...suspense(

}> + {node} + + ) + } + return (
- } /> - } /> + )} /> + )} + /> - }> - } /> - } /> + )}> + )} /> + )} + /> } + element={suspense()} /> } + element={suspense()} /> } + element={suspense()} /> } + element={suspense()} /> } + element={suspense()} /> - } /> + )} + /> diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx index 1a1e177..7f2b797 100644 --- a/src/pages/Editor.tsx +++ b/src/pages/Editor.tsx @@ -2,7 +2,7 @@ import { CSSProperties, Dispatch, RefObject, - SetStateAction, startTransition, + SetStateAction, useCallback, useEffect, useMemo, @@ -119,7 +119,7 @@ export default function EditorPage({ guestMode }: EditorPageProps) { async function initialize() { const infoResponsePromise = fetchAPIGet(`tactics/${id}`) - const contentResponsePromise = fetchAPIGet(`tactics/${id}/1`) + const contentResponsePromise = fetchAPIGet(`tactics/${id}/steps/1`) const infoResponse = await infoResponsePromise const contentResponse = await contentResponsePromise @@ -130,7 +130,7 @@ export default function EditorPage({ guestMode }: EditorPageProps) { } const { name, courtType } = await infoResponse.json() - const { content } = await contentResponse.json() + const content = await contentResponse.text() setTactic({ id, name, courtType, content }) } @@ -192,13 +192,13 @@ function Editor({ id, name, courtType, content }: EditorProps) { return SaveStates.Guest } const response = await fetchAPI( - `tactics/${id}/1`, + `tactics/${id}/steps/1`, { content }, "PUT", ) - if (response.status == 401) startTransition(() => { + if (response.status == 401) { 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) startTransition(() => { + if (response.status == 401) { navigate("/login") - }) + } return response.ok }} /> diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 8579e19..2a6bb64 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, useEffect, useState } from "react" +import { useEffect, useState } from "react" import { User } from "../model/User.ts" import { fetchAPIGet } from "../Fetcher.ts" @@ -32,9 +32,7 @@ export default function HomePage() { const session = getSession() if (!session.auth) { - startTransition(() => { - navigate("/login") - }) + navigate("/login") return } @@ -177,9 +175,7 @@ function TableData({ allTactics }: { allTactics: Tactic[] }) { key={tactic.id} className="data" onClick={() => { - startTransition(() => { - navigate("/tactic/" + tactic.id + "/edit") - }) + navigate("/tactic/" + tactic.id + "/edit") }}> {truncateString(tactic.name, 25)} @@ -194,25 +190,25 @@ function TableData({ allTactics }: { allTactics: Tactic[] }) { } } - const data = listTactic.map((tactic, rowIndex) => ( + return listTactic.map((tactic, rowIndex) => ( {tactic} )) - return data } function BodyPersonalSpace({ allTactics }: { allTactics: Tactic[] }) { - let data - if (allTactics.length == 0) { - data =

Aucune tactique créée !

- } else { - data = - } - return (
- - {data} -
+ { + allTactics.length == 0 + ?

Aucune tactique créée !

+ : + + + + +
+ } +
) } @@ -223,7 +219,7 @@ function Team({ teams }: { teams: Team[] }) {

Mes équipes

-
@@ -242,7 +238,7 @@ function Tactic({ lastTactics }: { lastTactics: Tactic[] }) {
@@ -275,9 +271,7 @@ function ButtonTeam({ team }: { team: Team }) { id={"button-team" + team.id} className="button-side-menu data" onClick={() => { - startTransition(() => { - navigate("/team/" + team.id) - }) + navigate("/team/" + team.id) }}> {name}
@@ -294,9 +288,7 @@ function ButtonLastTactic({ tactic }: { tactic: Tactic }) { id={"button" + tactic.id} className="button-side-menu data" onClick={() => { - startTransition(() => { - navigate("/tactic/" + tactic.id + "/edit") - }) + navigate("/tactic/" + tactic.id + "/edit") }}> {name} diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx index 1314d7d..baae23d 100644 --- a/src/pages/LoginPage.tsx +++ b/src/pages/LoginPage.tsx @@ -1,4 +1,4 @@ -import { FormEvent, startTransition, useState } from "react" +import { FormEvent, useState } from "react" import { fetchAPI } from "../Fetcher.ts" import { Failure } from "../api/failure.ts" import { getSession, saveSession } from "../api/session.ts" @@ -31,9 +31,7 @@ export default function LoginApp() { auth: { token, expirationDate }, urlTarget: undefined, }) - startTransition(() => { - navigate(session.urlTarget ?? "/") - }) + navigate(session.urlTarget ?? "/") return } @@ -85,7 +83,13 @@ export default function LoginApp() {
- + { // if user is not authenticated if (!getSession().auth) { - startTransition(() => { - navigate(`/tactic/edit-guest`) - }) + navigate(`/tactic/edit-guest`) } const response = await fetchAPI( @@ -66,16 +64,14 @@ function CourtKindButton({ "POST", ) - if (response.status === 401) startTransition(() => { + if (response.status === 401) { // if unauthorized navigate("/login") return - }) + } const { id } = await response.json() - startTransition(() => { - navigate(`/tactic/${id}/edit`) - }) + navigate(`/tactic/${id}/edit`) }, [courtType, navigate])}>
diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx index 1c6eb40..7fda79e 100644 --- a/src/pages/RegisterPage.tsx +++ b/src/pages/RegisterPage.tsx @@ -1,4 +1,4 @@ -import { FormEvent, startTransition, useRef, useState } from "react" +import { FormEvent, useRef, useState } from "react" import "../style/form.css" import { Failure } from "../api/failure.ts" @@ -50,9 +50,7 @@ export default function RegisterPage() { auth: { token, expirationDate }, urlTarget: undefined, }) - startTransition(() => { - navigate(session.urlTarget ?? "/") - }) + navigate(session.urlTarget ?? "/") return } @@ -135,9 +133,7 @@ export default function RegisterPage() { />
@@ -51,9 +51,7 @@ export function Header() { id="clickable-header-right" onClick={() => { if (username) { - startTransition(() => { - navigate("/settings") - }) + navigate("/settings") return } saveSession({ @@ -61,9 +59,7 @@ export function Header() { urlTarget: location.pathname, }) - startTransition(() => { - navigate("/login") - }) + navigate("/login") }}> {/* */} diff --git a/src/style/home/personnal_space.css b/src/style/home/personnal_space.css index 8598a0e..6dc71b1 100644 --- a/src/style/home/personnal_space.css +++ b/src/style/home/personnal_space.css @@ -18,6 +18,10 @@ align-self: center; } +#body-personal-space > p { + text-align: center; +} + #body-personal-space table { width: 100%; border-collapse: separate; diff --git a/src/style/template/header.css b/src/style/template/header.css index a0a0a1d..3c276b8 100644 --- a/src/style/template/header.css +++ b/src/style/template/header.css @@ -43,7 +43,6 @@ #clickable-header-right { border-radius: 1cap; - display: flex; align-items: center; justify-content: space-evenly; diff --git a/src/style/title_input.css b/src/style/title_input.css index afccff1..6d28238 100644 --- a/src/style/title_input.css +++ b/src/style/title_input.css @@ -1,5 +1,3 @@ - - .title-input { background: transparent; border-top: none;