feat: implement user verification and rejection functionality with improved error handling ✨

components/user/user-reject-dialog.tsx

@@ -1,6 +1,10 @@
 "use client";
 
-import { Rejectuser } from "@/actions/user-actions";
+import { UserX } from "lucide-react";
+import { useActionState, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { rejectUser } from "@/actions/user-actions";
+// import { Rejectuser } from "@/actions/user-actions";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -12,68 +16,55 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
-import type { User } from "@/lib/types/user";
+import type { UserProfile } from "@/lib/types/user";
 import { cn } from "@/lib/utils";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { UserX } from "lucide-react";
-import { useState } from "react";
-import { type SubmitHandler, useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { Textarea } from "../ui/textarea";
 
-const validationSchema = z.object({
-	reason: z.string().min(5, { message: "Reason is required" }),
-});
 
-export default function UserRejectDialog({ user }: { user: User }) {
-	const [disabled, setDisabled] = useState(false);
-	const [open, setOpen] = useState(false);
-	const {
-		register,
-		handleSubmit,
-		formState: { errors },
-	} = useForm<z.infer<typeof validationSchema>>({
-		resolver: zodResolver(validationSchema),
-	});
-
-	const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => {
-		setDisabled(true);
-		console.log(data);
-		toast.promise(
-			Rejectuser({
-				userId: String(user.id),
-				reason: data.reason,
-			}),
-			{
-				loading: "Rejecting...",
-				success: () => {
-					setDisabled(false);
-					setOpen((prev) => !prev);
-					return "Rejected!";
-				},
-				error: (error) => {
-					setDisabled(false);
-					return error.message || "Something went wrong";
-				},
-			},
-		);
-		setDisabled(false);
+export type RejectUserFormState = {
+	message: string;
+	fieldErrors?: {
+		rejection_details?: string[];
 	};
+	payload?: FormData;
+};
+
+export const initialState: RejectUserFormState = {
+	message: "",
+	fieldErrors: {},
+};
+
+export default function UserRejectDialog({ user }: { user: UserProfile }) {
+	const [open, setOpen] = useState(false);
+
+	const [state, formAction, isPending] = useActionState(rejectUser, initialState);
+
+	useEffect(() => {
+		if (state.message && state !== initialState) {
+			if (state.fieldErrors && Object.keys(state.fieldErrors).length > 0) {
+				toast.error(state.message);
+			} else if (!state.fieldErrors) {
+				toast.success("User rejected successfully!");
+				setOpen(false);
+			} else {
+				toast.error(state.message);
+			}
+		}
+	}, [state]);
+
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger asChild>
-				<Button disabled={disabled} variant="destructive">
+				<Button disabled={isPending} variant="destructive">
 					<UserX />
 					Reject
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-[425px]">
 				<DialogHeader>
-					<DialogTitle>
-						Are you sure you want to{" "}
-						<span className="text-red-500">reject</span> this user?
+					<DialogTitle className="text-muted-foreground">
+						Are you sure?
 					</DialogTitle>
 					<DialogDescription className="py-2">
 						<li>
@@ -92,28 +83,30 @@ export default function UserRejectDialog({ user }: { user: User }) {
 						<li>Phone Number: {user.mobile}</li>
 					</DialogDescription>
 				</DialogHeader>
-				<form onSubmit={handleSubmit(onSubmit)}>
+				<form action={formAction}>
 					<div className="grid gap-4 py-4">
-						<div className="flex flex-col items-start gap-1">
-							<Label htmlFor="reason" className="text-right">
+						<div className="flex flex-col items-start gap-2">
+							<input type="hidden" name="userId" value={user.id} />
+							<Label htmlFor="reason" className="text-right text-muted-foreground">
 								Rejection details
 							</Label>
 							<Textarea
 								rows={10}
-								{...register("reason")}
+								name="rejection_details"
 								id="reason"
+								defaultValue={state.payload?.get("rejection_details") as string}
 								className={cn(
 									"col-span-5",
-									errors.reason && "ring-2 ring-red-500",
+									state.fieldErrors?.rejection_details && "ring-2 ring-red-500",
 								)}
 							/>
 							<span className="text-sm text-red-500">
-								{errors.reason?.message}
+								{state.fieldErrors?.rejection_details?.[0]}
 							</span>
 						</div>
 					</div>
 					<DialogFooter>
-						<Button variant={"destructive"} disabled={disabled} type="submit">
+						<Button variant={"destructive"} disabled={isPending} type="submit">
 							Reject
 						</Button>
 					</DialogFooter>