Admin page raid groups tab working

src/ui/raidGroup/modals/DeleteRaidGroupModal.tsx

@@ -0,0 +1,63 @@
+import DangerButton from "@/components/button/DangerButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import { useDeleteRaidGroup } from "@/hooks/RaidGroupHooks";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect } from "react";
+
+
+export default function DeleteRaidGroupModal({
+	display,
+	close,
+	raidGroup
+}:{
+	display: boolean;
+	close: () => void;
+	raidGroup: RaidGroup | undefined;
+}){
+	const deleteRaidGroupMutate = useDeleteRaidGroup();
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+
+
+	const deleteGame = () => {
+		deleteRaidGroupMutate.mutate(raidGroup?.raidGroupId ?? "");
+	}
+
+	useEffect(() => {
+		if(deleteRaidGroupMutate.status === "success"){
+			deleteRaidGroupMutate.reset();
+			addSuccessMessage(`Successfully delete ${raidGroup?.raidGroupName}`);
+			close();
+		}
+		else if(deleteRaidGroupMutate.status === "error"){
+			deleteRaidGroupMutate.reset();
+			addErrorMessage(`Error deleting game ${raidGroup?.raidGroupName}: ${deleteRaidGroupMutate.error.message}`);
+			console.log(deleteRaidGroupMutate.error);
+		}
+	});
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader={`Delete ${raidGroup?.raidGroupName}`}
+			modalBody={`Are you sure you want to delete ${raidGroup?.raidGroupName}`}
+			modalFooter={
+				<>
+					<DangerButton
+						onClick={deleteGame}
+					>
+						Delete
+					</DangerButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}

src/ui/raidGroup/modals/RaidGroupModal.tsx

@@ -0,0 +1,130 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import GameSelector from "@/components/game/GameSelector";
+import IconInput from "@/components/input/IconInput";
+import TextInput from "@/components/input/TextInput";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import { useGetGame } from "@/hooks/GameHooks";
+import { useCreateRaidGroup, useUpdateRaidGroup } from "@/hooks/RaidGroupHooks";
+import { Game } from "@/interface/Game";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect, useState } from "react";
+
+
+export default function RaidGroupModal({
+	display,
+	close,
+	raidGroup
+}:{
+	display: boolean;
+	close: () => void;
+	raidGroup?: RaidGroup;
+}){
+	const [ raidGroupName, setRaidGroupName ] = useState(raidGroup?.raidGroupName);
+	const [ raidGroupIcon, setRaidGroupIcon ] = useState(raidGroup?.raidGroupIcon);
+	const [ iconFile, setIconFile ] = useState<File | null>(null);
+	const [ game, setGame ] = useState<Game>();
+	const modalId = crypto.randomUUID().replace("-", "");
+
+
+	useEffect(() => {
+		setRaidGroupName(raidGroup?.raidGroupName ?? "");
+		setRaidGroupIcon(raidGroup?.raidGroupIcon ?? "");
+	}, [ raidGroup, setRaidGroupName, setRaidGroupIcon ]);
+
+
+	const updateRaidGroupMutate = useUpdateRaidGroup();
+	const createRaidGroupMutate = useCreateRaidGroup();
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+	const gameQuery = useGetGame(raidGroup?.gameId ?? "", raidGroup === undefined);
+	if(gameQuery.status === "success" && !game){
+		setGame(gameQuery.data);
+	}
+
+
+	useEffect(() => {
+		if(updateRaidGroupMutate.status === "success"){
+			updateRaidGroupMutate.reset();
+			addSuccessMessage(`Updated raid group ${raidGroupName}`);
+			close();
+		}
+		else if(updateRaidGroupMutate.status === "error"){
+			updateRaidGroupMutate.reset();
+			addErrorMessage(`Error updating raid group ${raidGroupName}: ${updateRaidGroupMutate.error.message}`);
+			console.log(updateRaidGroupMutate.error);
+		}
+		else if(createRaidGroupMutate.status === "success"){
+			createRaidGroupMutate.reset();
+			addSuccessMessage(`Created raid group ${raidGroupName}`);
+			close();
+		}
+		else if(createRaidGroupMutate.status === "error"){
+			createRaidGroupMutate.reset();
+			addErrorMessage(`Error creating raid group ${raidGroupName}: ${createRaidGroupMutate.error.message}`);
+			console.log(createRaidGroupMutate.error);
+		}
+	}, [ updateRaidGroupMutate, createRaidGroupMutate, raidGroupName, close, addSuccessMessage, addErrorMessage ]);
+
+
+	const updateRaidGroup = () => {
+		updateRaidGroupMutate.mutate({raidGroup: {raidGroupId: raidGroup?.raidGroupId, raidGroupName, gameId: game?.gameId, raidGroupIcon} as RaidGroup, iconFile});
+	}
+
+	const createRaidGroup = () => {
+		createRaidGroupMutate.mutate({raidGroupName: raidGroupName ?? "", gameId: game?.gameId ?? "", iconFile});
+	}
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader={raidGroup ? "Update Raid Group" : "Create Raid Group"}
+			modalBody={
+				<div
+					className="flex flex-col items-center justify-center gap-4"
+				>
+					<div
+						className="flex flex-row items-center justify-center w-full px-4.5"
+					>
+						<TextInput
+							id={`raidGroupModalRaidGroupName${modalId}`}
+							placeholder="Raid Group Name"
+							value={raidGroupName}
+							onChange={(e) => setRaidGroupName(e.target.value)}
+						/>
+					</div>
+					<div
+						className="w-full px-4.5"
+					>
+						<GameSelector
+							game={game}
+							onChange={setGame}
+							disabled={!!raidGroup}
+						/>
+					</div>
+					<IconInput
+						file={iconFile}
+						setFile={(file) => {setIconFile(file); setRaidGroupIcon(undefined);}}
+						addErrorMessage={addErrorMessage}
+					/>
+				</div>
+			}
+			modalFooter={
+				<>
+					<PrimaryButton
+						onClick={raidGroup ? updateRaidGroup : createRaidGroup}
+					>
+						{raidGroup ? "Update" : "Create"}
+					</PrimaryButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}