People tab working

src/ui/person/modals/DeletePersonModal.tsx

@@ -0,0 +1,65 @@
+import DangerButton from "@/components/button/DangerButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import { useDeletePerson } from "@/hooks/PersonHooks";
+import { Person } from "@/interface/Person";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect } from "react";
+
+
+export default function DeletePersonModal({
+	display,
+	close,
+	raidGroupId,
+	person
+}:{
+	display: boolean;
+	close: () => void;
+	raidGroupId: string;
+	person?: Person;
+}){
+	const deletePersonMutate = useDeletePerson();
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+
+
+	const deletePerson = () => {
+		deletePersonMutate.mutate({raidGroupId, personId: person?.personId ?? ""});
+	}
+
+	useEffect(() => {
+		if(deletePersonMutate.status === "success"){
+			deletePersonMutate.reset();
+			addSuccessMessage(`Person ${person?.personName} deleted`);
+			close();
+		}
+		else if(deletePersonMutate.status === "error"){
+			deletePersonMutate.reset();
+			addErrorMessage(`Error deleting person ${person?.personName}: ${deletePersonMutate.error.message}`);
+			console.log(deletePersonMutate.error);
+		}
+	})
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader={`Delete Person ${person?.personName}`}
+			modalBody={`Are you sure you want to delete ${person?.personName}`}
+			modalFooter={
+				<>
+					<DangerButton
+						onClick={deletePerson}
+					>
+						Delete
+					</DangerButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}

src/ui/person/modals/PersonModal.tsx

@@ -0,0 +1,110 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import TextInput from "@/components/input/TextInput";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import { useCreatePerson, useUpdatePerson } from "@/hooks/PersonHooks";
+import { Person } from "@/interface/Person";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect, useState } from "react";
+
+
+export default function PersonModal({
+	display,
+	close,
+	person,
+	raidGroupId
+}:{
+	display: boolean;
+	close: () => void;
+	person: Person | undefined;
+	raidGroupId: string;
+}){
+	const [ personName, setPersonName ] = useState<string>(person?.personName ?? "");
+	const [ discordId, setDiscordId ] = useState<string>(person?.discordId ?? "");
+	const modalId = crypto.randomUUID().replaceAll("-", "");
+
+
+	useEffect(() => {
+		setPersonName(person?.personName ?? "");
+		setDiscordId(person?.discordId ?? "");
+	}, [ person, raidGroupId, setPersonName, setDiscordId ]);
+
+
+	const createPersonMutate = useCreatePerson();
+	const updatePersonMutate = useUpdatePerson();
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+
+
+	useEffect(() => {
+		if(createPersonMutate.status === "success"){
+			createPersonMutate.reset();
+			addSuccessMessage("Person created successfully");
+			close();
+		}
+		else if(updatePersonMutate.status === "success"){
+			updatePersonMutate.reset();
+			addSuccessMessage("Person updated successfully");
+			close();
+		}
+		else if(createPersonMutate.status === "error"){
+			createPersonMutate.reset();
+			addErrorMessage(`Error creating person ${personName}: ${createPersonMutate.error.message}`);
+			console.log(createPersonMutate.error);
+		}
+		else if(updatePersonMutate.status === "error"){
+			updatePersonMutate.reset();
+			addErrorMessage(`Error updating person ${personName}: ${updatePersonMutate.error.message}`);
+			console.log(updatePersonMutate.error);
+		}
+	});
+
+
+	const updatePerson = () => {
+		updatePersonMutate.mutate({raidGroupId, personId: person?.personId, personName, discordId} as Person);
+	}
+
+	const createPerson = () => {
+		createPersonMutate.mutate({raidGroupId, personName, discordId} as Person);
+	}
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader={person ? "Update Person" : "Create Person"}
+			modalBody={
+				<div
+					className="flex flex-col items-center justify-center gap-4"
+				>
+					<TextInput
+						id={`personModalName${modalId}`}
+						placeholder="Person Name"
+						value={personName}
+						onChange={(e) => setPersonName(e.target.value)}
+					/>
+					<TextInput
+						id={`personModalDiscordId${modalId}`}
+						placeholder="Discord ID"
+						value={discordId}
+						onChange={(e) => setDiscordId(e.target.value)}
+					/>
+				</div>
+			}
+			modalFooter={
+				<>
+					<PrimaryButton
+						onClick={person ? updatePerson : createPerson}
+					>
+						{person ? "Update" : "Create"}
+					</PrimaryButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}