Copy "use client";
import { useState } from "react";
import { zodResolver } from "@hookform/resolvers/zod";
import { Category } from "@prisma/client";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Row } from "@tanstack/react-table";
import { MoreHorizontal } from "lucide-react";
import { useSession } from "next-auth/react";
import { useForm } from "react-hook-form";
import * as z from "zod";
import { LoadingSpinner } from "@/components/shared/icons";
import { Button } from "@/components/ui/button";
import { Dialog, DialogTrigger } from "@/components/ui/dialog";
import {
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { toast, useToast } from "@/components/ui/use-toast";
import { metadata } from "@/data/config/metadata";
interface DataTableRowActionsProps<TData> {
row: Row<TData>;
}
export function DataTableRowActions<TData>({
row,
}: DataTableRowActionsProps<TData>) {
const [open, setOpen] = useState(false);
return (
<Dialog open={open} onOpenChange={setOpen}>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
>
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">Open menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-[160px]">
<DialogTrigger asChild>
<DropdownMenuItem>Edit</DropdownMenuItem>
</DialogTrigger>
<DropdownMenuSeparator />
<TableActionDelete row={row} />
</DropdownMenuContent>
</DropdownMenu>
<TableActionEdit setOpen={setOpen} row={row} />
</Dialog>
);
}
//EDIT
const formSchema = z.object({
title: z.string().min(2).max(150),
owner: z.string().min(2).max(150),
category: z.union([z.string().min(2).max(100).optional(), z.literal("")]),
link: z.union([z.string().min(5).max(255).optional(), z.literal("")]),
comment: z.union([z.string().min(3).max(255).optional(), z.literal("")]),
});
export const TableActionEdit = ({
setOpen,
row,
}: {
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
row: any;
}) => {
const queryClient: any = useQueryClient();
const session = useSession();
const userId = session?.data?.user?.id;
const {
isLoading,
error,
data: categories,
} = useQuery({
queryKey: ["categories"],
queryFn: async () => {
const res = await fetch("/api/categories");
return res.json();
},
});
const { toast } = useToast();
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
title: row.original.title || undefined,
owner: row.original.owner || undefined,
category: row.original.category.slug || undefined,
link: row.original.link || undefined,
comment: row.original.comment || undefined,
},
});
const mutation = useMutation({
mutationFn: async (values: z.infer<typeof formSchema>) => {
const res = await fetch(`/api/suggestions/${row.original.id}`, {
method: "PATCH",
body: JSON.stringify(values),
headers: {
"Content-Type": "application/json",
},
});
return res.json();
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: [`product-sub-${userId}`] });
toast({
title: `Updating ${metadata.productLabel} suggestion`,
description: `Your ${metadata.productLabel} suggestion has been updated before review.`,
});
setOpen(false);
form.reset();
},
onError: () => {
toast({
title: "Error",
description: `An error occurred while submitting your ${metadata.productLabel}.`,
variant: "destructive",
});
},
});
function onSubmit(values: z.infer<typeof formSchema>) {
mutation.mutate(values);
}
return (
<>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Edit a {metadata.productLabel} suggestion</DialogTitle>
<DialogDescription>
You can edit your {metadata.productLabel} suggestion before it is
reviewed.
</DialogDescription>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<div className="grid gap-4 py-4">
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel className="capitalize">
{metadata.productLabel} Title
</FormLabel>
<FormControl>
<Input
placeholder={`An awesome ${metadata.productLabel}`}
defaultValue={field.value}
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="owner"
render={({ field }) => (
<FormItem>
<FormLabel>Owner</FormLabel>
<FormControl>
<Input
placeholder="An awesome guy"
defaultValue={field.value}
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="category"
render={({ field }) => (
<FormItem>
<FormLabel>Category</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select a category" />
</SelectTrigger>
</FormControl>
<SelectContent>
{isLoading && <LoadingSpinner />}
{error && "An error has occurred, please try again."}
{categories?.map((category: Category) => (
<SelectItem key={category.id} value={category.slug}>
{category.name}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="link"
render={({ field }) => (
<FormItem>
<FormLabel>URL</FormLabel>
<FormControl>
<Input
placeholder="https://awesomeproduct.com"
defaultValue={field.value}
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="comment"
render={({ field }) => (
<FormItem>
<FormLabel>Comment</FormLabel>
<FormControl>
<Textarea
maxLength={255}
placeholder={`This ${metadata.productLabel} is a good addition because...`}
defaultValue={field.value}
{...field}
className="resize-none"
/>
</FormControl>
<FormDescription>
This is optional, but it will help us review your{" "}
{metadata.productLabel}
faster.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</div>
<DialogFooter>
<Button type="submit">Suggest {metadata.productLabel}</Button>
</DialogFooter>
</form>
</Form>
</DialogContent>
</>
);
};
// DELETE
function TableActionDelete<TData>({ row }: DataTableRowActionsProps<TData>) {
const queryClient = useQueryClient();
const session = useSession();
const userId = session?.data?.user?.id;
const suggestion: any = row.original;
const deleteMutation = useMutation({
mutationKey: [`suggestion-${suggestion.id}`],
mutationFn: async () => {
const res = await fetch(`/api/suggestions/${suggestion.id}`, {
method: "DELETE",
});
return res.json();
},
onSuccess: () => {
toast({
title: "Suggestion deleted",
description: "The suggestion has been deleted.",
});
queryClient.invalidateQueries({ queryKey: [`product-sub-${userId}`] });
},
onError: () => {
toast({
title: "Error",
description: "Something went wrong. Please try again.",
variant: "destructive",
});
},
});
return (
<DropdownMenuItem onClick={() => deleteMutation.mutate()}>
Delete
</DropdownMenuItem>
);
}
