Raid Group calendar working

src/pages/protected/RaidGroupPage.tsx

@@ -1,10 +1,60 @@
+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 { useEffect, useState } from "react";
+import { Navigate, useParams } from "react-router";
+
+
 export default function RaidGroupPage(){
-	//TODO:
+	const { raidGroupId } = useParams();
 
 
-	return (
-		<div>
-			Raid Group Page
-		</div>
-	);
+	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!}/>
+			}
+		];
+
+
+		return (
+			<main
+				className="flex flex-col items-center justify-center"
+			>
+				<RaidGroupHeader
+					raidGroup={raidGroup}
+				/>
+				<TabGroup
+					tabs={tabs}
+				/>
+			</main>
+		);
+	}
 }