Raid Group calendar working

src/hooks/RaidGroupHooks.ts

@@ -1,9 +1,27 @@
-import { CalendarEvent } from "@/interface/Calendar";
 import { RaidGroup } from "@/interface/RaidGroup";
 import { api } from "@/util/AxiosUtil";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 
+export function useGetRaidGroup(raidGroupId: string, disabled: boolean){
+	return useQuery({
+		queryKey: ["raidGroups", raidGroupId],
+		queryFn: async () => {
+			const response = await api.get(`/raidGroup/${raidGroupId}`);
+
+			if(response.status !== 200){
+				throw new Error("Failed to get raid group");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+
+			return response.data?.raidGroupId ? response.data as RaidGroup : undefined;
+		},
+		enabled: !disabled
+	});
+}
+
 export function useGetRaidGroups(page: number, pageSize: number, searchTerm?: string){
 	return useQuery({
 		queryKey: ["raidGroups", { page, pageSize, searchTerm }],
@@ -152,24 +170,6 @@ export function useGetRaidGroupsCountByAccount(accountId: string, searchTerm?: s
 
 }
 
-export function useGetRaidGroupCalendar(raidGroupId: string){
-	return useQuery({
-		queryKey: ["raidGroups", raidGroupId, "calendar"],
-		queryFn: async () => {
-			const response = await api.get(`/raidGroup/${raidGroupId}/calendar`);
-
-			if(response.status !== 200){
-				throw new Error("Failed to get raid group calendar");
-			}
-			else if(response.data.errors){
-				throw new Error(response.data.errors.join(", "));
-			}
-
-			return response.data as CalendarEvent[];
-		}
-	});
-}
-
 
 export function useCreateRaidGroup(){
 	const queryClient = useQueryClient();

src/pages/protected/GamePage.tsx

@@ -45,7 +45,7 @@ export default function GamePage(){
 			<div>Error</div>
 		);
 	}
-	else if(gameQuery.status === "success" && (gameQuery.data === undefined || gameQuery.data === undefined)){
+	else if(gameQuery.status === "success" && gameQuery.data === undefined){
 		return (
 			<Navigate to="/game"/>
 		);

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();
+
+
+	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 (
-		<div>
+			<main
-			Raid Group Page
+				className="flex flex-col items-center justify-center"
-		</div>
+			>
+				<RaidGroupHeader
+					raidGroup={raidGroup}
+				/>
+				<TabGroup
+					tabs={tabs}
+				/>
+			</main>
 		);
+	}
 }

src/ui/calendar/CalendarDisplay.tsx

@@ -21,6 +21,7 @@ export default function CalendarDisplay({
 }){
 	const [ displayCalendarEventModal, setDisplayCalendarEventModal ] = useState(false);
 	const [ alterCalendarEvent, setAlterCalendarEvent ] = useState<CalendarEvent>();
+	const [ disableModal, setDisableModal ] = useState(false);
 
 	const createGameCalendarEventMutate = useCreateGameCalendarEvent(gameId ?? "");
 	const updateGameCalendarEventMutate = useUpdateGameCalendarEvent(gameId ?? "");
@@ -34,8 +35,6 @@ export default function CalendarDisplay({
 
 
 	const showAddCalendarEventModal = (dateClickArg: DateClickArg) => {
-		console.log("showAdd()");
-		console.log(dateClickArg.date);
 		setAlterCalendarEvent({
 			eventStartDate: dateClickArg.date,
 			eventEndDate: moment(dateClickArg.date).add(1, "hours").toDate()
@@ -44,13 +43,19 @@ export default function CalendarDisplay({
 	}
 
 	const showEditCalendarEventModal = (eventClickArg: EventClickArg) => {
-		setAlterCalendarEvent(calendarEvents.find((calEvent) => calEvent.calendarEventId === eventClickArg.event.id));
+		const calendarEvent = calendarEvents.find((calEvent) => calEvent.calendarEventId === eventClickArg.event.id);
+		if(raidGroupId && calendarEvent?.gameId){
+			setDisableModal(true);
+		}
+
+		setAlterCalendarEvent(calendarEvent);
 		setDisplayCalendarEventModal(true);
 	}
 
 	const hideCalendarEventModal = () => {
 		setAlterCalendarEvent(undefined);
 		setDisplayCalendarEventModal(false);
+		setDisableModal(false);
 	}
 
 
@@ -71,6 +76,7 @@ export default function CalendarDisplay({
 				display={displayCalendarEventModal}
 				close={hideCalendarEventModal}
 				calendarEvent={alterCalendarEvent}
+				disabled={disableModal}
 				createCalendarEventMutate={gameId ? createGameCalendarEventMutate : createRaidGroupCalendarEventMutate}
 				updateCalendarEventMutate={gameId ? updateGameCalendarEventMutate : updateRaidGroupCalendarEventMutate}
 				deleteCalendarEventMutate={gameId ? deleteGameCalendarEventMutate : deleteRaidGroupCalendarEventMutate}

src/ui/calendar/RaidGroupCalendarDisplay.tsx

@@ -0,0 +1,21 @@
+import RaidGroupCalendarLoader from "./RaidGroupCalendarLoader";
+
+
+export default function RaidGroupCalendarDisplay({
+	gameId,
+	raidGroupId
+}:{
+	gameId: string;
+	raidGroupId: string;
+}){
+	return (
+		<div
+			className="flex flex-col items-center justify-center"
+		>
+			<RaidGroupCalendarLoader
+				gameId={gameId}
+				raidGroupId={raidGroupId}
+			/>
+		</div>
+	);
+}

src/ui/calendar/RaidGroupCalendarLoader.tsx

@@ -0,0 +1,38 @@
+import DangerMessage from "@/components/message/DangerMessage";
+import { useGetGameCalendar, useGetRaidGroupCalendar } from "@/hooks/CalendarHooks";
+import CalendarDisplay from "./CalendarDisplay";
+
+
+export default function RaidGroupCalendarLoader({
+	gameId,
+	raidGroupId
+}:{
+	gameId: string;
+	raidGroupId: string;
+}){
+	const gameCalendarQuery = useGetGameCalendar(gameId);
+	const raidGroupCalendarQuery = useGetRaidGroupCalendar(raidGroupId);
+
+
+	if(raidGroupCalendarQuery.status === "error"){
+		return (<DangerMessage>Error {raidGroupCalendarQuery.error.message}</DangerMessage>);
+	}
+	else if(gameCalendarQuery.status === "error"){
+		return (<DangerMessage>Error {gameCalendarQuery.error.message}</DangerMessage>);
+	}
+	else if((raidGroupCalendarQuery.status === "pending") || (gameCalendarQuery.status === "pending")){
+		return (
+			<div>
+				Loading...
+			</div>
+		);
+	}
+	else{
+		return (
+			<CalendarDisplay
+				raidGroupId={raidGroupId}
+				calendarEvents={[...raidGroupCalendarQuery.data, ...gameCalendarQuery.data]}
+			/>
+		);
+	}
+}

src/ui/calendar/RaidGroupHeader.tsx

@@ -0,0 +1,61 @@
+import { ButtonProps } from "@/components/button/Button";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { useState } from "react";
+import RaidGroupAdminButtons from "../raidGroup/RaidGroupAdminButtons";
+import DeleteRaidGroupModal from "../raidGroup/modals/DeleteRaidGroupModal";
+import RaidGroupModal from "../raidGroup/modals/RaidGroupModal";
+
+
+export default function RaidGroupHeader({
+	raidGroup
+}:{
+	raidGroup: RaidGroup;
+}){
+	const [ displayEditRaidGroupModal, setDisplayEditRaidGroupModal ] = useState(false);
+	const [ displayDeleteRaidGroupModal, setDisplayDeleteRaidGroupModal ] = useState(false);
+
+	const buttonProps: ButtonProps = {
+		variant: "ghost",
+		size: "md",
+		shape: "square"
+	};
+
+
+	return (
+		<h1
+			className="flex flex-col items-center justify-center"
+		>
+			<div
+				className="flex flex-row items-center justify-center text-4xl"
+			>
+				{
+					raidGroup.raidGroupIcon &&
+					<img
+						className="m-auto mr-4"
+						src={`${import.meta.env.VITE_ICON_URL}/raidGroupIcons/${raidGroup.raidGroupIcon}`}
+						height={72}
+						width={72}
+					/>
+				}
+				{raidGroup.raidGroupName}
+			</div>
+			<div>
+				<RaidGroupAdminButtons
+					buttonProps={buttonProps}
+					showEditRaidGroupModal={() => setDisplayEditRaidGroupModal(true)}
+					showDeleteRaidGroupModal={() => setDisplayDeleteRaidGroupModal(true)}
+				/>
+			</div>
+			<RaidGroupModal
+				display={displayEditRaidGroupModal}
+				close={() => setDisplayEditRaidGroupModal(false)}
+				raidGroup={raidGroup}
+			/>
+			<DeleteRaidGroupModal
+				display={displayDeleteRaidGroupModal}
+				close={() => setDisplayDeleteRaidGroupModal(false)}
+				raidGroup={raidGroup}
+			/>
+		</h1>
+	);
+}

src/ui/calendar/modals/CalendarEventModal.tsx

@@ -17,6 +17,7 @@ export default function CalendarEventModal({
 	display,
 	close,
 	calendarEvent,
+	disabled,
 	createCalendarEventMutate,
 	updateCalendarEventMutate,
 	deleteCalendarEventMutate
@@ -24,6 +25,7 @@ export default function CalendarEventModal({
 	display: boolean;
 	close: () => void;
 	calendarEvent?: CalendarEvent;
+	disabled?: boolean;
 	createCalendarEventMutate: UseMutationResult<void, Error, CalendarEvent, unknown>;
 	updateCalendarEventMutate: UseMutationResult<void, Error, CalendarEvent, unknown>;
 	deleteCalendarEventMutate: UseMutationResult<void, Error, CalendarEvent, unknown>;
@@ -117,6 +119,7 @@ export default function CalendarEventModal({
 							placeholder="Event Name"
 							onChange={(e) => setEventName(e.target.value)}
 							value={eventName}
+							disabled={disabled}
 						/>
 					</div>
 					<TextArea
@@ -124,6 +127,7 @@ export default function CalendarEventModal({
 						placeholder="Event Description"
 						onChange={(e) => setEventDescription(e.target.value)}
 						value={eventDescription}
+						disabled={disabled}
 					/>
 					<div
 						className="w-full"
@@ -133,12 +137,14 @@ export default function CalendarEventModal({
 							placeholder="Start Date"
 							value={moment(eventStartDate).format("YYYY-MM-DDTHH:mm")}
 							onChange={(e) => setEventStartDate(moment(e.target.value).toDate())}
+							disabled={disabled}
 						/>
 						<DateInput
 							id={`calendarEventModalEndDateInput${modalId}`}
 							placeholder="End Date"
 							value={moment(eventEndDate).format("YYYY-MM-DDTHH:mm")}
 							onChange={(e) => setEventEndDate(moment(e.target.value).toDate())}
+							disabled={disabled}
 						/>
 					</div>
 				</div>
@@ -157,6 +163,7 @@ export default function CalendarEventModal({
 					>
 						<PrimaryButton
 							onClick={calendarEvent?.calendarEventId ? updateCalendarEvent : createCalendarEvent}
+							disabled={disabled}
 						>
 							{calendarEvent?.calendarEventId ? "Update" : "Create"}
 						</PrimaryButton>
@@ -170,7 +177,7 @@ export default function CalendarEventModal({
 						className="flex flex-row items-center justify-end w-full"
 					>
 						{
-							calendarEvent?.calendarEventId &&
+							calendarEvent?.calendarEventId && !disabled &&
 							<DangerButton
 								variant="ghost"
 								shape="square"