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>
+				</>
+			}
+		/>
+	);
+}