68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
import TabGroup, { Tab } from "@/components/tab/TabGroup";
|
|
import { useGetGame } from "@/hooks/GameHooks";
|
|
import { Game } from "@/interface/Game";
|
|
import GameCalendarDisplay from "@/ui/calendar/GameCalendarDisplay";
|
|
import GameHeader from "@/ui/game/GameHeader";
|
|
import GameClassDisplay from "@/ui/gameClass/GameClassDisplay";
|
|
import RaidGroupsByGameDisplay from "@/ui/raidGroup/RaidGroupsByGameDisplay";
|
|
import { useEffect, useState } from "react";
|
|
import { Navigate, useParams } from "react-router";
|
|
|
|
|
|
export default function GamePage(){
|
|
const { gameId } = useParams();
|
|
const tabs: Tab[] = [
|
|
{
|
|
tabHeader: "Calendar",
|
|
tabContent: <GameCalendarDisplay gameId={gameId!}/>
|
|
},
|
|
{
|
|
tabHeader: "Raid Groups",
|
|
tabContent: <RaidGroupsByGameDisplay gameId={gameId!}/>
|
|
},
|
|
{
|
|
tabHeader: "Classes",
|
|
tabContent: <GameClassDisplay gameId={gameId!}/>
|
|
}
|
|
];
|
|
|
|
const [ game, setGame ] = useState<Game>();
|
|
const gameQuery = useGetGame(gameId ?? "", false);
|
|
useEffect(() => {
|
|
if(gameQuery.status === "success"){
|
|
setGame(gameQuery.data);
|
|
}
|
|
}, [ gameQuery ]);
|
|
|
|
|
|
if(gameQuery.status === "pending"){
|
|
return (
|
|
<div>Loading...</div>
|
|
);
|
|
}
|
|
else if(gameQuery.status === "error"){
|
|
return (
|
|
<div>Error</div>
|
|
);
|
|
}
|
|
else if(gameQuery.status === "success" && gameQuery.data === undefined){
|
|
return (
|
|
<Navigate to="/game"/>
|
|
);
|
|
}
|
|
else if(game){
|
|
return (
|
|
<main
|
|
className="flex flex-col items-center justify-center"
|
|
>
|
|
<GameHeader
|
|
game={game}
|
|
/>
|
|
<TabGroup
|
|
tabs={tabs}
|
|
/>
|
|
</main>
|
|
);
|
|
}
|
|
}
|