Game Classes tab working

2025-03-06 22:31:31 -05:00
parent 28462776ac
commit a463bb734f
13 changed files with 646 additions and 3 deletions
--- a/src/ui/gameClass/modals/GameClassModal.tsx
+++ b/src/ui/gameClass/modals/GameClassModal.tsx
@@ -0,0 +1,116 @@
+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 { useCreateGameClass, useUpdateGameClass } from "@/hooks/GameClassHooks";
+import { GameClass } from "@/interface/GameClass";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect, useState } from "react";
+
+
+export default function GameClassModal({
+	display,
+	close,
+	gameId,
+	gameClass
+}:{
+	display: boolean;
+	close: () => void;
+	gameId: string;
+	gameClass?: GameClass | null;
+}){
+	const [ gameClassName, setGameClassName ] = useState(gameClass?.gameClassName ?? "");
+	const [ gameClassIcon, setGameClassIcon ] = useState(gameClass?.gameClassIcon);
+	const [ iconFile, setIconFile ] = useState<File | null>(null);
+	const modalId = crypto.randomUUID().replaceAll("-", "");
+
+
+	useEffect(() => {
+		setGameClassName(gameClass?.gameClassName ?? "");
+		setGameClassIcon(gameClass?.gameClassIcon);
+		setIconFile(null);
+	}, [ gameClass, setGameClassName, setGameClassIcon, setIconFile ]);
+
+
+	const updateGameClassMutate = useUpdateGameClass();
+	const createGameClassMutate = useCreateGameClass();
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+
+
+	useEffect(() => {
+		if(updateGameClassMutate.status === "success"){
+			updateGameClassMutate.reset();
+			addSuccessMessage(`Updated game class ${gameClassName}`);
+			close();
+		}
+		else if(updateGameClassMutate.status === "error"){
+			updateGameClassMutate.reset();
+			addErrorMessage(`Error updating game class ${gameClassName}: ${updateGameClassMutate.error.message}`);
+			console.log(updateGameClassMutate.error);
+		}
+		else if(createGameClassMutate.status === "success"){
+			createGameClassMutate.reset();
+			addSuccessMessage(`Deleted game class ${gameClassName}`);
+			close();
+		}
+		else if(createGameClassMutate.status === "error"){
+			createGameClassMutate.reset();
+			addErrorMessage(`Error deleting game class ${gameClassName}: ${createGameClassMutate.error.message}`);
+			console.log(createGameClassMutate.error);
+		}
+	}, [ updateGameClassMutate, createGameClassMutate, gameClassName, close, addSuccessMessage, addErrorMessage ]);
+
+
+	const updateGameClass = () => {
+		updateGameClassMutate.mutate({ gameClass: {gameClassId: gameClass?.gameClassId, gameId, gameClassName, gameClassIcon}, iconFile});
+	}
+
+	const createGameClass = () => {
+		createGameClassMutate.mutate({ gameId, gameClassName, iconFile});
+	}
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader={gameClass ? "Update Game Class" : "Create Game Class"}
+			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={`gameClassModalGameClassName${modalId}`}
+							placeholder="Game Class Name"
+							value={gameClassName}
+							onChange={(e) => setGameClassName(e.target.value)}
+						/>
+					</div>
+					<IconInput
+						file={iconFile}
+						setFile={(file) => {setIconFile(file); setGameClassIcon(undefined);}}
+						addErrorMessage={addErrorMessage}
+					/>
+				</div>
+			}
+			modalFooter={
+				<>
+					<PrimaryButton
+						onClick={gameClass ? updateGameClass : createGameClass}
+					>
+						{gameClass ? "Update" : "Create"}
+					</PrimaryButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}