import "../style/home/home.css" // import AccountSvg from "../assets/account.svg?react" import { Header } from "./template/Header" import { BASE } from "../Constants" import { getSession } from "../api/session.ts" import { fetchAPIGet, redirect } from "../Fetcher.ts" import { useLayoutEffect, useState } from "react" import { User } from "../model/User.ts" interface Tactic { id: number name: string creationDate: Date } interface Team { id: number name: string picture: string main_color: string second_color: string } export default function HomePage() { type UserDataResponse = {user?: User, tactics: Tactic[], teams: Team[]} const [{ user, tactics, teams }, setInfo] = useState({tactics: [], teams: []}) useLayoutEffect(() => { const session = getSession() if (!session.auth) { redirect("/register") return } async function getUser() { const response = await fetchAPIGet("user-data", session) setInfo(await response.json()) } getUser() }, []) console.log(user) const lastTactics = tactics!.sort((a, b) => a.creationDate.getMilliseconds() - b.creationDate.getMilliseconds()).slice(0, 5) return } function Home({ lastTactics, allTactics, teams, username, }: { lastTactics: Tactic[] allTactics: Tactic[] teams: Team[] username: string }) { return (

) } function Body({ lastTactics, allTactics, teams, }: { lastTactics: Tactic[] allTactics: Tactic[] teams: Team[] }) { const widthPersonalSpace = 78 const widthSideMenu = 100 - widthPersonalSpace return (

) } function SideMenu({ width, lastTactics, teams, }: { width: number lastTactics: Tactic[] teams: Team[] }) { return ( ) } function PersonalSpace({ width, allTactics, }: { width: number allTactics: Tactic[] }) { return (

) } function TitlePersonalSpace() { return (

Espace Personnel

) } function TableData({ allTactics }: { allTactics: Tactic[] }) { const nbRow = Math.floor(allTactics.length / 3) + 1 let listTactic = Array(nbRow) for (let i = 0; i < nbRow; i++) { listTactic[i] = Array(0) } let i = 0 let j = 0 allTactics.forEach((tactic) => { listTactic[i].push(tactic) j++ if (j === 3) { i++ j = 0 } }) i = 0 while (i < nbRow) { listTactic[i] = listTactic[i].map((tactic: Tactic) => ( { location.pathname = BASE + "/tactic/" + tactic.id + "/edit" }}> {truncateString(tactic.name, 25)} )) i++ } if (nbRow == 1) { if (listTactic[0].length < 3) { for (let i = 0; i <= 3 - listTactic[0].length; i++) { listTactic[0].push() } } } const data = 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}

) } function Team({ teams }: { teams: Team[] }) { return (

Mes équipes

) } function Tactic({ lastTactics }: { lastTactics: Tactic[] }) { return (

Mes dernières stratégies

) } function SetButtonTactic({ tactics }: { tactics: Tactic[] }) { const lastTactics = tactics.map((tactic) => ( )) return

{lastTactics}

} function SetButtonTeam({ teams }: { teams: Team[] }) { const listTeam = teams.map((teams) => ) return

{listTeam}

} function ButtonTeam({ team }: { team: Team }) { const name = truncateString(team.name, 20) return (

{ location.pathname = BASE + "/team/" + team.id }}> {name}

) } function ButtonLastTactic({ tactic }: { tactic: Tactic }) { const name = truncateString(tactic.name, 20) return (

{ location.pathname = BASE + "/tactic/" + tactic.id + "/edit" }}> {name}

) } function truncateString(name: string, limit: number): string { if (name.length > limit) { name = name.substring(0, limit) + "..." } return name }