import "../style/home/home.css" import { useNavigate } from "react-router-dom" import { useEffect, useState } from "react" import { User } from "../model/User.ts" import { useAppFetcher } from "../App.tsx" interface Tactic { id: number name: string creationDate: number } 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 [{ tactics, teams }, setInfo] = useState({ tactics: [], teams: [], }) const navigate = useNavigate() const fetcher = useAppFetcher() useEffect(() => { async function initUserData() { const response = await fetcher.fetchAPIGet("user-data") if (response.status == 401) { navigate("/login") return // if unauthorized } setInfo(await response.json()) } initUserData() }, [fetcher, navigate]) tactics!.sort((a, b) => b.creationDate - a.creationDate) const lastTactics = tactics.slice(0, 5) return ( ) } function Home({ lastTactics, allTactics, teams, }: { lastTactics: Tactic[] allTactics: Tactic[] teams: Team[] }) { 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 const 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 } }) const navigate = useNavigate() i = 0 while (i < nbRow) { listTactic[i] = listTactic[i].map((tactic: Tactic) => ( { navigate("/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() } } } return listTactic.map((tactic, rowIndex) => ( {tactic} )) } function BodyPersonalSpace({ allTactics }: { allTactics: Tactic[] }) { return (
{allTactics.length == 0 ? (

Aucune tactique créée !

) : (
)}
) } function Team({ teams }: { teams: Team[] }) { const navigate = useNavigate() return (

Mes équipes

) } function Tactic({ lastTactics }: { lastTactics: Tactic[] }) { const navigate = useNavigate() return (

Mes dernières tactiques

) } function SetButtonTactic({ tactics }: { tactics: Tactic[] }) { const lastTactics = tactics.map((tactic) => ( )) return
{lastTactics}
} function SetButtonTeam({ teams }: { teams: Team[] }) { const listTeam = teams.map((team) => ( )) return
{listTeam}
} function ButtonTeam({ team }: { team: Team }) { const name = truncateString(team.name, 20) const navigate = useNavigate() return (
{ navigate("/team/" + team.id) }}> {name}
) } function ButtonLastTactic({ tactic }: { tactic: Tactic }) { const name = truncateString(tactic.name, 20) const navigate = useNavigate() return (
{ navigate("/tactic/" + tactic.id + "/edit") }}> {name}
) } function truncateString(name: string, limit: number): string { if (name.length > limit) { name = name.substring(0, limit) + "..." } return name }