add token renewal

src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom"
+import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom"
 
 import loadable from "@loadable/component"
 import { Header } from "./pages/template/Header.tsx"
@@ -13,20 +13,23 @@ const TeamPanelPage = loadable(() => import("./pages/TeamPanel.tsx"))
 const NewTacticPage = loadable(() => import("./pages/NewTacticPage.tsx"))
 const Editor = loadable(() => import("./pages/Editor.tsx"))
 
+import './style/app.css'
 
 export default function App() {
-
-
     return (
-        <div style={{ height: "100vh", width: "100vw" }}>
+        <div id="app">
             <BrowserRouter>
-                <Header/>
+                <Outlet/>
 
                 <Routes>
-                    <Route path={"/"} element={<HomePage />} />
+
                     <Route path={"/login"} element={<LoginPage />} />
                     <Route path={"/register"} element={<RegisterPage />} />
 
+
+                    <Route path={"/"} element={<AppLayout/>}>
+                        <Route path={"/"} element={<HomePage />} />
+
                         <Route path={"/team/new"} element={<CreateTeamPage />} />
                         <Route path={"/team/:teamId"} element={<TeamPanelPage />} />
                         <Route path={"/tactic/new"} element={<NewTacticPage />} />
@@ -34,8 +37,17 @@ export default function App() {
                         <Route path={"/tactic/new/half"} element={<Editor courtType={"HALF"} />} />
 
                         <Route path={"*"} element={<NotFoundPage />} />
+                    </Route>
+
                 </Routes>
             </BrowserRouter>
         </div>
     )
 }
+
+function AppLayout() {
+    return <>
+        <Header/>
+        <Outlet/>
+    </>
+}

src/Fetcher.ts

@@ -1,18 +1,18 @@
 import { API, BASE } from "./Constants"
-import { Session } from "./api/session.ts"
+import { getSession, saveSession, Session } from "./api/session.ts"
 
 
 export function redirect(url: string) {
     location.pathname = BASE + url
 }
 
-export function fetchAPI(
+export async function fetchAPI(
     url: string,
     payload: unknown,
     method = "POST",
-    session?: Session,
 ): Promise<Response> {
 
+    const session = getSession()
     const token = session?.auth?.token
 
     const headers = {
@@ -24,19 +24,21 @@ export function fetchAPI(
         headers.Authorization = token
     }
 
-    return fetch(`${API}/${url}`, {
+    const response = await fetch(`${API}/${url}`, {
         method,
         headers,
         body: JSON.stringify(payload),
     })
+
+    return await handleResponse(session, response)
 }
 
 
-export function fetchAPIGet(
+export async function fetchAPIGet(
     url: string,
-    session?: Session,
 ): Promise<Response> {
 
+    const session = getSession()
     const token = session?.auth?.token
 
     const headers = {
@@ -48,10 +50,25 @@ export function fetchAPIGet(
         headers.Authorization = token
     }
 
-    return fetch(`${API}/${url}`, {
+    const response = await fetch(`${API}/${url}`, {
         method: "GET",
         headers,
     })
+
+    return await handleResponse(session, response)
 }
 
+async function handleResponse(session: Session, response: Response): Promise<Response> {
+    // if we provided a token but still unauthorized, the token has expired
+    if (response.status == 401) {
+        redirect("/login")
+        saveSession({...session, urlTarget: location.pathname})
+        return response
+    }
 
+    const nextToken = response.headers.get("Next-Authorization")!
+    const expirationDate = Date.parse(response.headers.get("Next-Authorization-Expiration-Date")!)
+    saveSession({...session, auth: {token: nextToken, expirationDate}})
+
+    return response
+}

src/api/session.ts

@@ -1,12 +1,11 @@
-import { createContext } from "react"
-
 export interface Session {
     auth?: Authentication
+    urlTarget?: string
 }
 
 export interface Authentication {
     token: string
-    expirationDate: Date
+    expirationDate: number
 }
 
 const SESSION_KEY = "session"

src/pages/Editor.tsx

@@ -49,6 +49,7 @@ import { Action, ActionKind } from "../model/tactic/Action"
 import BallAction from "../components/actions/BallAction"
 import { changePlayerBallState, getOrigin, removePlayer } from "../editor/PlayerDomains"
 import { CourtBall } from "../components/editor/CourtBall"
+import { getSession } from "../api/session.ts"
 
 const ERROR_STYLE: CSSProperties = {
     borderColor: "red",
@@ -56,6 +57,7 @@ const ERROR_STYLE: CSSProperties = {
 
 const GUEST_MODE_CONTENT_STORAGE_KEY = "guest_mode_content"
 const GUEST_MODE_TITLE_STORAGE_KEY = "guest_mode_title"
+const DEFAULT_TACTIC_NAME = "Nouvelle tactique"
 
 export interface EditorViewProps {
     tactic: Tactic
@@ -70,12 +72,29 @@ export interface EditorPageProps {
 }
 
 export default function EditorPage({ courtType }: EditorPageProps) {
+
+    const [id, setId] = useState<number>()
+
+    useEffect(() => {
+        async function initialize() {
+            const response = await fetchAPI("tactics", { name: DEFAULT_TACTIC_NAME }, "POST", getSession())
+            const { id } = await response.json()
+            setId(id)
+        }
+
+        initialize()
+    }, [])
+
+    if (id) {
         return <Editor
-        id={-1}
+            id={id}
             courtType={courtType}
             content={JSON.stringify({ components: [] })}
-        name={"Nouvelle Tactique"}
+            name={DEFAULT_TACTIC_NAME}
         />
+    }
+
+    return <div>Loading Editor, please wait...</div>
 }
 
 export interface EditorProps {
@@ -111,7 +130,7 @@ function Editor({ id, name, courtType, content }: EditorProps) {
                     )
                     return SaveStates.Guest
                 }
-                return fetchAPI(`tactic/${id}/save`, { content }).then((r) =>
+                return fetchAPI(`tactics/${id}/1`, { content }, "PUT", getSession()).then((r) =>
                     r.ok ? SaveStates.Ok : SaveStates.Err,
                 )
             }}
@@ -120,7 +139,7 @@ function Editor({ id, name, courtType, content }: EditorProps) {
                     localStorage.setItem(GUEST_MODE_TITLE_STORAGE_KEY, name)
                     return true //simulate that the name has been changed
                 }
-                return fetchAPI(`tactic/${id}/edit/name`, { name }).then(
+                return fetchAPI(`tactics/${id}/name`, { name }, "PUT", getSession()).then(
                     (r) => r.ok,
                 )
             }}

src/pages/HomePage.tsx

@@ -10,7 +10,7 @@ import { User } from "../model/User.ts"
 interface Tactic {
     id: number
     name: string
-    creationDate: Date
+    creationDate: number
 }
 
 interface Team {
@@ -37,7 +37,7 @@ export default function HomePage() {
         }
 
         async function getUser() {
-            const response = await fetchAPIGet("user-data", session)
+            const response = await fetchAPIGet("user-data")
             setInfo(await response.json())
         }
 
@@ -45,7 +45,7 @@ export default function HomePage() {
     }, [])
 
 
-    const lastTactics = tactics!.sort((a, b) => a.creationDate.getMilliseconds() - b.creationDate.getMilliseconds()).slice(0, 5)
+    const lastTactics = tactics!.sort((a, b) => a.creationDate - b.creationDate).slice(0, 5)
     return <Home teams={teams!} allTactics={tactics!} lastTactics={lastTactics}/>
 }
 

src/pages/LoginPage.tsx

@@ -2,7 +2,7 @@ import { FormEvent, useRef, useState } from "react"
 import { BASE } from "../Constants.ts"
 import { fetchAPI, redirect } from "../Fetcher.ts"
 import { Failure } from "../api/failure.ts"
-import { saveSession } from "../api/session.ts"
+import { getSession, saveSession } from "../api/session.ts"
 import "../style/form.css"
 
 export default function LoginApp() {
@@ -22,9 +22,10 @@ export default function LoginApp() {
         const response = await fetchAPI("auth/token", {email, password})
 
         if (response.ok) {
+            const session = getSession()
             const { token, expirationDate } = await response.json()
-            saveSession({ auth: { token, expirationDate } })
+            saveSession({...session, auth: { token, expirationDate } })
-            redirect("/")
+            redirect(session.urlTarget ?? "/")
             return
         }
 

src/pages/RegisterPage.tsx

@@ -4,7 +4,7 @@ import { BASE } from "../Constants.ts"
 import "../style/form.css"
 import { Failure } from "../api/failure.ts"
 import { fetchAPI, redirect } from "../Fetcher.ts"
-import { saveSession } from "../api/session.ts"
+import { getSession, saveSession } from "../api/session.ts"
 
 export default function RegisterPage() {
 
@@ -36,8 +36,9 @@ export default function RegisterPage() {
 
         if (response.ok) {
             const { token, expirationDate } = await response.json()
-            saveSession({ auth: { token, expirationDate } })
+            const session = getSession()
-            redirect("/")
+            saveSession({...session, auth: { token, expirationDate } })
+            redirect(session.urlTarget ?? "/")
             return
         }
 

src/pages/template/Header.tsx

@@ -3,20 +3,15 @@ import accountSvg from "../../assets/account.svg"
 import "../../style/template/header.css"
 import { useEffect, useState } from "react"
 import { fetchAPIGet } from "../../Fetcher.ts"
-import { getSession } from "../../api/session.ts"
 
-/**
+
- *
- * @param param0 username
- * @returns Header
- */
 export function Header() {
 
     const [username, setUsername] = useState("")
 
     useEffect(() => {
         async function getUsername() {
-            const response = await fetchAPIGet("user", getSession())
+            const response = await fetchAPIGet("user")
             //TODO check if the response is ok and handle errors
             const {name} = await response.json()
             setUsername(name)

src/style/app.css

@@ -0,0 +1,6 @@
+#app {
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+}

src/style/home/home.css

@@ -5,7 +5,6 @@
 
 body {
     /* background-color: #303030; */
-    overflow-x: hidden;
 }
 
 #main {

src/style/template/header.css

@@ -2,6 +2,7 @@
     text-align: center;
     background-color: var(--home-main-color);
     margin: 0;
+
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -9,6 +10,7 @@
 
     font-family: var(--font-title);
 
+
     height: 50px;
 }