sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-07-15 11:05:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
i701
2025-07-13 22:51:46 +05:00
parent 5809e26593
commit 255c03ae6a
7 changed files with 315 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
components/user/user-reject-dialog.tsx
View File

@ -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>

12
components/user/user-verify-dialog.tsx
View File

@ -1,4 +1,7 @@
"use client";
import { Check, CheckCheck } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { VerifyUser } from "@/actions/user-actions";
import {
AlertDialog,
@ -12,12 +15,9 @@ import {
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import type { User } from "@/lib/types/user";
import { Check, CheckCheck } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import type { UserProfile } from "@/lib/types/user";
export function UserVerifyDialog({ user }: { user: User }) {
export function UserVerifyDialog({ user }: { user: UserProfile }) {
const userId = user.id;
const [disabled, setDisabled] = useState(false);
return (
@ -33,7 +33,7 @@ export function UserVerifyDialog({ user }: { user: User }) {
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
<AlertDialogTitle className="text-muted-foreground">Verify User</AlertDialogTitle>
<AlertDialogDescription>
Are you sure you want to verify the following user?
<span className="inline-block my-4">