Games tab on admin page working

src/ui/game/modals/DeleteGameModal.tsx

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

src/ui/game/modals/GameModal.tsx

@@ -0,0 +1,113 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import IconInput from "@/components/input/IconInput";
+import TextInput from "@/components/input/TextInput";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import { useCreateGame, useUpdateGame } from "@/hooks/GameHooks";
+import { Game } from "@/interface/Game";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect, useState } from "react";
+
+
+export default function GameModal({
+	display,
+	close,
+	game
+}:{
+	display: boolean;
+	close: () => void;
+	game?: Game;
+}){
+	const [ gameName, setGameName ] = useState(game?.gameName);
+	const [ gameIcon, setGameIcon ] = useState(game?.gameIcon);
+	const [ iconFile, setIconFile ] = useState<File | null>(null);
+	const modalId = crypto.randomUUID().replace("-", "");
+
+
+	useEffect(() => {
+		setGameName(game?.gameName ?? "");
+		setGameIcon(game?.gameIcon ?? "");
+	}, [ game, setGameName, setGameIcon ]);
+
+
+	const updateGameMutate = useUpdateGame();
+	const createGameMutate = useCreateGame();
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+
+
+	useEffect(() => {
+		if(updateGameMutate.status === "success"){
+			updateGameMutate.reset();
+			addSuccessMessage("Game updated successfully");
+			close();
+		}
+		else if(createGameMutate.status === "success"){
+			createGameMutate.reset();
+			addSuccessMessage("Game created successfully");
+			close();
+		}
+		else if(updateGameMutate.status === "error"){
+			updateGameMutate.reset();
+			addErrorMessage(`Error updating game ${gameName}: ${updateGameMutate.error.message}`);
+			console.log(updateGameMutate.error);
+		}
+		else if(createGameMutate.status === "error"){
+			createGameMutate.reset();
+			addErrorMessage(`Error creating game ${gameName}: ${createGameMutate.error.message}`);
+			console.log(createGameMutate.error);
+		}
+	}, [ updateGameMutate, createGameMutate, gameName, close, addSuccessMessage, addErrorMessage ]);
+
+
+	const updateGame = () => {
+		updateGameMutate.mutate({game: {gameId: game?.gameId, gameName, gameIcon} as Game, iconFile});
+	}
+
+	const createGame = () => {
+		createGameMutate.mutate({gameName: gameName ?? "", iconFile});
+	}
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader={game ? "Update Game" : "Create Game"}
+			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={`gameModalGameName${modalId}`}
+							placeholder="Game Name"
+							value={gameName}
+							onChange={(e) => setGameName(e.target.value)}
+						/>
+					</div>
+					<IconInput
+						file={iconFile}
+						setFile={(file) => {setIconFile(file); setGameIcon(undefined);}}
+						addErrorMessage={addErrorMessage}
+					/>
+				</div>
+			}
+			modalFooter={
+				<>
+					<PrimaryButton
+						onClick={game ? updateGame : createGame}
+					>
+						{game ? "Update" : "Create"}
+					</PrimaryButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}