131 lines
3.7 KiB
TypeScript
131 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import toast from "react-hot-toast";
|
|
import Modal from "@/app/components/Modal/Modal";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { AppDispatch } from "@/app/redux/store";
|
|
import { deleteUser, clearError } from "@/app/redux/user/userSlice";
|
|
import { IUser } from "../../Pages/Admin/Users/interfaces";
|
|
import Spinner from "@/app/components/Spinner/Spinner";
|
|
import { RootState } from "@/app/redux/store";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import "./DeleteUser.scss";
|
|
|
|
interface DeleteUserProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
user: IUser | null;
|
|
}
|
|
|
|
const DeleteUser: React.FC<DeleteUserProps> = ({ open, onClose, user }) => {
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
const router = useRouter();
|
|
const { status, error } = useSelector((state: RootState) => state.user);
|
|
|
|
const loading = status === "loading";
|
|
|
|
const handleDelete = async () => {
|
|
if (!user?.id) {
|
|
toast.error("No user selected for deletion");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const resultAction = await dispatch(deleteUser(user.id));
|
|
|
|
if (deleteUser.fulfilled.match(resultAction)) {
|
|
toast.success(
|
|
resultAction.payload.message || "User deleted successfully"
|
|
);
|
|
dispatch(clearError());
|
|
router.refresh();
|
|
onClose();
|
|
} else if (deleteUser.rejected.match(resultAction)) {
|
|
toast.error(
|
|
(resultAction.payload as string) || "Failed to delete user"
|
|
);
|
|
}
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
} catch (error: any) {
|
|
toast.error(error.message || "An unexpected error occurred");
|
|
}
|
|
};
|
|
|
|
const handleClose = () => {
|
|
if (!loading) {
|
|
dispatch(clearError());
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Modal open={open} onClose={handleClose} title="Delete User">
|
|
<div className="delete-user__content">
|
|
<div className="delete-user__warning">
|
|
<p className="delete-user__warning-text">
|
|
Are you sure you want to delete this user? This action cannot be
|
|
undone.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="delete-user__user-info">
|
|
<div className="delete-user__row">
|
|
<label className="delete-user__label">Username</label>
|
|
<div className="delete-user__value">{user.username}</div>
|
|
</div>
|
|
<div className="delete-user__row">
|
|
<label className="delete-user__label">Name</label>
|
|
<div className="delete-user__value">
|
|
{user.first_name} {user.last_name}
|
|
</div>
|
|
</div>
|
|
<div className="delete-user__row">
|
|
<label className="delete-user__label">Email</label>
|
|
<div className="delete-user__value">{user.email}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="delete-user__error">
|
|
<span>{error}</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="delete-user__actions">
|
|
<button
|
|
type="button"
|
|
onClick={handleClose}
|
|
disabled={loading}
|
|
className="delete-user__button delete-user__button--cancel"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleDelete}
|
|
disabled={loading}
|
|
className="delete-user__button delete-user__button--delete"
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<Spinner size="small" color="#fff" />
|
|
Deleting...
|
|
</>
|
|
) : (
|
|
"Delete User"
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default DeleteUser;
|