Skip to content

Instantly share code, notes, and snippets.

@nitishmahawar

nitishmahawar/delete-dialog.tsx

Last active June 14, 2025 07:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nitishmahawar/e232e21f36bcac4f848724f3f37e0807 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nitishmahawar/e232e21f36bcac4f848724f3f37e0807 to your computer and use it in GitHub Desktop.
Download ZIP
Register dialog
Raw
delete-dialog.tsx
"use client";
import React, { useState } from "react";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { useRouter } from "next/navigation";
import { useMutation } from "@tanstack/react-query";
import { toast } from "sonner";
import Spinner from "@/components/ui/spinner";
const formSchema = z.object({
email: z.string().email({ message: "Invalid email" }),
password: z.string().min(1, { message: "Password is required" }),
});
const RegisterDialog = () => {
const [open, setOpen] = useState(false);
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
email: "",
password: "",
},
});
const router = useRouter();
const { mutate, isLoading } = useMutation({
mutationFn: async () => {},
onSuccess(data, variables, context) {
setOpen(false);
},
onError(error: any, variables, context) {
toast.error(error.message);
},
onSettled(data, error, variables, context) {
router.refresh();
},
});
const onSubmit = (values: z.infer<typeof formSchema>) => {
mutate();
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button>Register</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Register</DialogTitle>
<DialogDescription>
Please fill following details to create new account.
</DialogDescription>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="email"
disabled={isLoading}
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input placeholder="[email protected]" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
disabled={isLoading}
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input placeholder="Password" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex justify-end gap-2 pt-2">
<DialogClose asChild>
<Button disabled={isLoading} type="button" variant="outline">
Cancel
</Button>
</DialogClose>
<Button disabled={isLoading} type="submit">
{isLoading && <Spinner size={20} className="mr-2" />} Register
</Button>
</div>
</form>
</Form>
</DialogContent>
</Dialog>
);
};
export default RegisterDialog;
Raw
register-dialog.tsx
"use client";
import React, { useState } from "react";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { useRouter } from "next/navigation";
import { useMutation } from "@tanstack/react-query";
import { toast } from "sonner";
import Spinner from "@/components/ui/spinner";
const formSchema = z.object({
email: z.string().email({ message: "Invalid email" }),
password: z.string().min(1, { message: "Password is required" }),
});
const RegisterDialog = () => {
const [open, setOpen] = useState(false);
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
email: "",
password: "",
},
});
const router = useRouter();
const { mutate, isLoading } = useMutation({
mutationFn: async () => {},
onSuccess(data, variables, context) {
setOpen(false);
},
onError(error: any, variables, context) {
toast.error(error.message);
},
onSettled(data, error, variables, context) {
router.refresh();
},
});
const onSubmit = (values: z.infer<typeof formSchema>) => {
mutate();
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button>Register</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Register</DialogTitle>
<DialogDescription>
Please fill following details to create new account.
</DialogDescription>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="email"
disabled={isLoading}
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input placeholder="[email protected]" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
disabled={isLoading}
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input placeholder="Password" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex justify-end gap-2 pt-2">
<DialogClose asChild>
<Button disabled={isLoading} type="button" variant="outline">
Cancel
</Button>
</DialogClose>
<Button disabled={isLoading} type="submit">
{isLoading && <Spinner size={20} className="mr-2" />} Register
</Button>
</div>
</form>
</Form>
</DialogContent>
</Dialog>
);
};
export default RegisterDialog;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment