131 lines
3.9 KiB
TypeScript
131 lines
3.9 KiB
TypeScript
import DangerMessage from "@/components/message/DangerMessage";
|
|
import TabGroup, { Tab } from "@/components/tab/TabGroup";
|
|
import TutorialComponent from "@/components/TutorialComponent";
|
|
import { useGetRaidGroup } from "@/hooks/RaidGroupHooks";
|
|
import { TutorialStatus } from "@/interface/AccountTutorialStatus";
|
|
import { RaidGroup } from "@/interface/RaidGroup";
|
|
import { useAuth } from "@/providers/AuthProvider";
|
|
import RaidGroupAccountsTab from "@/ui/account/RaidGroupAccountsTab";
|
|
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 RaidGroupRequestTab from "@/ui/raidGroupRequest/RaidGroupRequestTab";
|
|
import RaidInstanceTab from "@/ui/raidInstance/RaidInstanceTab";
|
|
import RaidLayoutTab from "@/ui/raidLayout/RaidLayoutTab";
|
|
import { isRaidGroupAdmin } from "@/util/PermissionUtil";
|
|
import { raidGroupTutorialSteps } from "@/util/TutorialUtil";
|
|
import { useEffect, useState } from "react";
|
|
import { Navigate, useParams } from "react-router";
|
|
|
|
|
|
export default function RaidGroupPage(){
|
|
const { raidGroupId } = useParams();
|
|
const { accountPermissions, raidGroupPermissions, tutorialsStatus, setTutorialsStatus } = useAuth();
|
|
|
|
const [ raidGroup, setRaidGroup ] = useState<RaidGroup>();
|
|
|
|
|
|
const raidGroupQuery = useGetRaidGroup(raidGroupId ?? "", false);
|
|
|
|
useEffect(() => {
|
|
if(raidGroupQuery.status === "success"){
|
|
setRaidGroup(raidGroupQuery.data);
|
|
}
|
|
}, [ raidGroupQuery ]);
|
|
|
|
|
|
const updateRaidGroupTutorialStatus = () => {
|
|
const newTutorialsStatus = { ...tutorialsStatus };
|
|
if(tutorialsStatus.raidGroupTutorialStatus === TutorialStatus.COMPLETED){
|
|
newTutorialsStatus.raidGroupTutorialStatus = TutorialStatus.NOT_COMPLETED;
|
|
}
|
|
else if(tutorialsStatus.raidGroupTutorialStatus === TutorialStatus.NOT_COMPLETED){
|
|
newTutorialsStatus.raidGroupTutorialStatus = TutorialStatus.COMPLETED;
|
|
}
|
|
setTutorialsStatus(newTutorialsStatus);
|
|
}
|
|
|
|
|
|
if(raidGroupQuery.status === "pending"){
|
|
return (
|
|
<div>Loading...</div>
|
|
);
|
|
}
|
|
else if(raidGroupQuery.status === "error"){
|
|
return (
|
|
<DangerMessage>Error {raidGroupQuery.error.message}</DangerMessage>
|
|
);
|
|
}
|
|
else if(raidGroupQuery.status === "success" && raidGroupQuery.data === undefined){
|
|
return (
|
|
<Navigate to="/raidGroup"/>
|
|
);
|
|
}
|
|
else if(raidGroup){
|
|
const tabs: Tab[] = [
|
|
{
|
|
tabId: "calendarTab",
|
|
tabHeader: "Calendar",
|
|
tabContent: <RaidGroupCalendarDisplay gameId={raidGroup?.gameId ?? ""} raidGroupId={raidGroupId!}/>
|
|
},
|
|
{
|
|
tabId: "peopleTab",
|
|
tabHeader: "People",
|
|
tabContent: <PersonTab raidGroup={raidGroup}/>
|
|
},
|
|
{
|
|
tabId: "classGroupsTab",
|
|
tabHeader: "Class Groups",
|
|
tabContent: <ClassGroupsTab raidGroup={raidGroup}/>
|
|
},
|
|
{
|
|
tabId: "raidLayoutsTab",
|
|
tabHeader: "Raid Layout",
|
|
tabContent: <RaidLayoutTab raidGroup={raidGroup}/>
|
|
},
|
|
{
|
|
tabId: "instancesTab",
|
|
tabHeader: "Raid Instances",
|
|
tabContent: <RaidInstanceTab raidGroup={raidGroup}/>
|
|
}
|
|
];
|
|
|
|
if(isRaidGroupAdmin(raidGroupId!, raidGroupPermissions, accountPermissions)){
|
|
tabs.push({
|
|
tabId: "usersTab",
|
|
tabHeader: "Users",
|
|
tabContent: <RaidGroupAccountsTab raidGroup={raidGroup}/>
|
|
});
|
|
tabs.push({
|
|
tabId: "requestsTab",
|
|
tabHeader: "Requests",
|
|
tabContent: <RaidGroupRequestTab raidGroup={raidGroup}/>
|
|
});
|
|
}
|
|
|
|
|
|
return (
|
|
<main
|
|
className="flex flex-col items-center justify-center gap-y-8"
|
|
>
|
|
<TutorialComponent
|
|
steps={raidGroupTutorialSteps}
|
|
run={tutorialsStatus.raidGroupTutorialStatus === TutorialStatus.NOT_COMPLETED}
|
|
showProgress={true}
|
|
showSkipButton={true}
|
|
continuous={true}
|
|
disableScrolling={true}
|
|
updateFunction={updateRaidGroupTutorialStatus}
|
|
/>
|
|
<RaidGroupHeader
|
|
raidGroup={raidGroup}
|
|
/>
|
|
<TabGroup
|
|
tabs={tabs}
|
|
/>
|
|
</main>
|
|
);
|
|
}
|
|
}
|