Raid Group calendar working

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"