sarlink-portal/components/user/user-verify-dialog.tsx

"use client";
import { VerifyUser } from "@/actions/user-actions";
import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
	AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import type { User } from "@prisma/client";
import { Check, CheckCheck } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";

export function UserVerifyDialog({ user }: { user: User }) {
	const userId = user.id;
	const [disabled, setDisabled] = useState(false);
	return (
		<AlertDialog>
			<AlertDialogTrigger asChild>
				<Button
					variant={user.verified ? "secondary" : "default"}
					disabled={disabled || user.verified}
				>
					{user.verified ? <CheckCheck size={16} /> : <Check size={16} />}
					{user.verified ? "Verified" : "Verify"}
				</Button>
			</AlertDialogTrigger>
			<AlertDialogContent>
				<AlertDialogHeader>
					<AlertDialogTitle>Are you sure?</AlertDialogTitle>
					<AlertDialogDescription>
						Are you sure you want to verify <strong> {user.name}</strong>?
					</AlertDialogDescription>
				</AlertDialogHeader>
				<AlertDialogFooter>
					<AlertDialogCancel>Cancel</AlertDialogCancel>
					<AlertDialogAction
						disabled={disabled}
						onClick={() => {
							setDisabled(true);
							toast.promise(VerifyUser(userId), {
								loading: "Verifying...",
								success: () => {
									setDisabled(false);
									return "User Verified!";
								},
								error: () => {
									setDisabled(false);
									return "Something went wrong";
								},
							});
						}}
					>
						{disabled ? "Verifying..." : "Verify"}
					</AlertDialogAction>
				</AlertDialogFooter>
			</AlertDialogContent>
		</AlertDialog>
	);
}