71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
import TabGroup, { Tab } from "@/components/tab/TabGroup";
|
|
import { useGetRaidGroup } from "@/hooks/RaidGroupHooks";
|
|
import { RaidGroup } from "@/interface/RaidGroup";
|
|
import RaidGroupCalendarDisplay from "@/ui/calendar/RaidGroupCalendarDisplay";
|
|
import RaidGroupHeader from "@/ui/calendar/RaidGroupHeader";
|
|
import ClassGroupsTab from "@/ui/classGroup/ClassGroupsTab";
|
|
import PersonTab from "@/ui/person/PersonTab";
|
|
import { useEffect, useState } from "react";
|
|
import { Navigate, useParams } from "react-router";
|
|
|
|
|
|
export default function RaidGroupPage(){
|
|
const { raidGroupId } = useParams();
|
|
|
|
|
|
const [ raidGroup, setRaidGroup ] = useState<RaidGroup>();
|
|
const raidGroupQuery = useGetRaidGroup(raidGroupId ?? "", false);
|
|
useEffect(() => {
|
|
if(raidGroupQuery.status === "success"){
|
|
setRaidGroup(raidGroupQuery.data);
|
|
}
|
|
}, [ raidGroupQuery ]);
|
|
|
|
|
|
if(raidGroupQuery.status === "pending"){
|
|
return (
|
|
<div>Loading...</div>
|
|
);
|
|
}
|
|
else if(raidGroupQuery.status === "error"){
|
|
return (
|
|
<div>Error</div>
|
|
);
|
|
}
|
|
else if(raidGroupQuery.status === "success" && raidGroupQuery.data === undefined){
|
|
return (
|
|
<Navigate to="/raidGroup"/>
|
|
);
|
|
}
|
|
else if(raidGroup){
|
|
const tabs: Tab[] = [
|
|
{
|
|
tabHeader: "Calendar",
|
|
tabContent: <RaidGroupCalendarDisplay gameId={raidGroup?.gameId ?? ""} raidGroupId={raidGroupId!}/>
|
|
},
|
|
{
|
|
tabHeader: "People",
|
|
tabContent: <PersonTab raidGroup={raidGroup}/>
|
|
},
|
|
{
|
|
tabHeader: "Class Groups",
|
|
tabContent: <ClassGroupsTab raidGroup={raidGroup}/>
|
|
}
|
|
];
|
|
|
|
|
|
return (
|
|
<main
|
|
className="flex flex-col items-center justify-center"
|
|
>
|
|
<RaidGroupHeader
|
|
raidGroup={raidGroup}
|
|
/>
|
|
<TabGroup
|
|
tabs={tabs}
|
|
/>
|
|
</main>
|
|
);
|
|
}
|
|
}
|