128 lines
3.9 KiB
TypeScript
128 lines
3.9 KiB
TypeScript
/**
|
|
* @file components/modals/DeleteServerModal.tsx
|
|
* @description Confirmation modal for permanently deleting a server.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { X, Loader2, AlertTriangle } from "lucide-react";
|
|
|
|
/**
|
|
* Properties for the DeleteServerModal component.
|
|
*
|
|
* @interface DeleteServerModalProps
|
|
* @property {boolean} isOpen - Indicates whether the modal dialog is currently visible.
|
|
* @property {() => void} onClose - Callback function to handle closing the modal dialog.
|
|
* @property {string} serverId - The unique identifier of the server to be deleted.
|
|
* @property {string} serverName - The name of the server displayed in the confirmation message.
|
|
*/
|
|
interface DeleteServerModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
serverId: string;
|
|
serverName: string;
|
|
}
|
|
|
|
/**
|
|
* Renders a confirmation modal allowing users to permanently delete a server.
|
|
*
|
|
* @param {DeleteServerModalProps} props - Component properties.
|
|
* @returns {JSX.Element | null} The modal component or null if not open.
|
|
*/
|
|
export function DeleteServerModal({
|
|
isOpen,
|
|
onClose,
|
|
serverId,
|
|
serverName,
|
|
}: DeleteServerModalProps) {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
/**
|
|
* Sends a DELETE request to remove the server and redirects to the home route upon success.
|
|
*/
|
|
const handleDelete = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
const response = await fetch(`/api/servers/${serverId}`, {
|
|
method: "DELETE",
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Failed to delete server.");
|
|
}
|
|
|
|
onClose();
|
|
|
|
window.location.href = "/";
|
|
} catch (err: unknown) {
|
|
setError(err instanceof Error ? err.message : "Something went wrong.");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
/* Outer Backdrop */
|
|
<div
|
|
onClick={onClose}
|
|
className="fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4"
|
|
>
|
|
{/* Inner Modal Content */}
|
|
<div
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="bg-surface border border-surface/50 rounded-2xl w-full max-w-md p-6 shadow-2xl relative animate-in fade-in zoom-in-95 duration-150"
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
disabled={isLoading}
|
|
className="absolute top-4 right-4 text-muted hover:text-white transition-colors cursor-pointer"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className="p-2 bg-rose-500/10 text-rose-500 rounded-xl">
|
|
<AlertTriangle className="w-6 h-6" />
|
|
</div>
|
|
<h2 className="text-xl font-bold text-white">Delete Server</h2>
|
|
</div>
|
|
|
|
<p className="text-sm text-muted mb-6">
|
|
Are you sure you want to delete{" "}
|
|
<span className="font-semibold text-white">{serverName}</span>? This
|
|
action cannot be undone and will permanently remove all channels and
|
|
messages.
|
|
</p>
|
|
|
|
{error && <p className="text-xs text-rose-400 mb-4">{error}</p>}
|
|
|
|
<div className="flex items-center justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
disabled={isLoading}
|
|
className="px-4 py-2 text-sm font-medium text-muted hover:text-white transition-colors cursor-pointer"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleDelete}
|
|
disabled={isLoading}
|
|
className="px-5 py-2 bg-rose-600 text-white font-medium text-sm rounded-xl hover:bg-rose-700 transition-all disabled:opacity-50 flex items-center gap-2 cursor-pointer"
|
|
>
|
|
{isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
|
|
Delete Server
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|