|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import { deleteVeggieHistoryPrice } from "@/lib/server-actions/dt/history-price"; |
| 4 | +import { zodResolver } from "@hookform/resolvers/zod"; |
| 5 | +import { Button } from "@mm-app/ui/components/button"; |
| 6 | +import { |
| 7 | + Dialog, |
| 8 | + DialogClose, |
| 9 | + DialogContent, |
| 10 | + DialogDescription, |
| 11 | + DialogHeader, |
| 12 | + DialogTitle, |
| 13 | +} from "@mm-app/ui/components/dialog"; |
| 14 | +import { |
| 15 | + Form, |
| 16 | + FormControl, |
| 17 | + FormField, |
| 18 | + FormItem, |
| 19 | + FormLabel, |
| 20 | +} from "@mm-app/ui/components/form"; |
| 21 | +import { Input } from "@mm-app/ui/components/input"; |
| 22 | +import { useEffect, useState, useTransition } from "react"; |
| 23 | +import { useForm } from "react-hook-form"; |
| 24 | +import { toast } from "sonner"; |
| 25 | +import { z } from "zod"; |
| 26 | +import { useDataManagement } from "../dt-provider"; |
| 27 | +import { useHistoryDataActions } from "./actions-provider"; |
| 28 | + |
| 29 | +const deleteFormSchema = z.object({ |
| 30 | + _id: z.string(), |
| 31 | + id: z.string(), |
| 32 | +}); |
| 33 | + |
| 34 | +type DeleteForm = z.infer<typeof deleteFormSchema>; |
| 35 | + |
| 36 | +export default function HistoryDelete() { |
| 37 | + const { tradingCenter } = useDataManagement(); |
| 38 | + const { action, handleCloseAction } = useHistoryDataActions(); |
| 39 | + |
| 40 | + const [isSet, setIsSet] = useState(false); |
| 41 | + const [isProcessing, startTransition] = useTransition(); |
| 42 | + |
| 43 | + const form = useForm<DeleteForm>({ |
| 44 | + resolver: zodResolver(deleteFormSchema), |
| 45 | + defaultValues: action.isOpen |
| 46 | + ? { |
| 47 | + _id: action.veggiePrice._id, |
| 48 | + id: action.veggiePrice.id, |
| 49 | + } |
| 50 | + : { |
| 51 | + _id: "", |
| 52 | + id: "", |
| 53 | + }, |
| 54 | + }); |
| 55 | + |
| 56 | + const handleSubmit = async (data: DeleteForm) => { |
| 57 | + if (!action.isOpen) return; |
| 58 | + |
| 59 | + if (action.type !== "delete") { |
| 60 | + toast.error("Invalid action type for delete"); |
| 61 | + return; |
| 62 | + } |
| 63 | + |
| 64 | + if (!data.id) { |
| 65 | + toast.error("No ID provided for deletion"); |
| 66 | + return; |
| 67 | + } |
| 68 | + |
| 69 | + const process = toast.loading("Deleting historical price..."); |
| 70 | + |
| 71 | + startTransition(async () => { |
| 72 | + const res = await deleteVeggieHistoryPrice(data._id, tradingCenter); |
| 73 | + if (!res.success) { |
| 74 | + toast.error(res.message || "Failed to delete historical price", { |
| 75 | + id: process, |
| 76 | + }); |
| 77 | + return; |
| 78 | + } |
| 79 | + |
| 80 | + startTransition(() => { |
| 81 | + toast.success("Historical price deleted successfully", { |
| 82 | + id: process, |
| 83 | + }); |
| 84 | + |
| 85 | + handleCloseAction(false); |
| 86 | + }); |
| 87 | + }); |
| 88 | + }; |
| 89 | + |
| 90 | + useEffect(() => { |
| 91 | + if (isSet) return; |
| 92 | + |
| 93 | + if (action.isOpen) { |
| 94 | + form.reset({ |
| 95 | + _id: action.veggiePrice._id, |
| 96 | + id: action.veggiePrice.id, |
| 97 | + }); |
| 98 | + setIsSet(true); |
| 99 | + } |
| 100 | + }, [action, form, isSet]); |
| 101 | + |
| 102 | + return ( |
| 103 | + <Dialog |
| 104 | + open={action.isOpen && action.type === "delete"} |
| 105 | + onOpenChange={(value) => !isProcessing && handleCloseAction(value)} |
| 106 | + > |
| 107 | + <DialogContent |
| 108 | + onInteractOutside={(e) => isProcessing && e.preventDefault()} |
| 109 | + className="max-w-xl" |
| 110 | + > |
| 111 | + <DialogHeader> |
| 112 | + <DialogTitle>Delete Price History</DialogTitle> |
| 113 | + <DialogDescription> |
| 114 | + Are you sure you want to delete this historical price? |
| 115 | + <br /> |
| 116 | + This action cannot be undone. |
| 117 | + </DialogDescription> |
| 118 | + </DialogHeader> |
| 119 | + |
| 120 | + {action.isOpen ? ( |
| 121 | + <div className="border p-2 rounded-lg text-muted-foreground text-sm"> |
| 122 | + <p> |
| 123 | + Vegetable: <strong>{action.veggiePrice.name}</strong> |
| 124 | + </p> |
| 125 | + <p> |
| 126 | + Date:{" "} |
| 127 | + <strong> |
| 128 | + {new Date(action.veggiePrice.dateUnix).toLocaleDateString( |
| 129 | + "en-US", |
| 130 | + { |
| 131 | + year: "numeric", |
| 132 | + month: "long", |
| 133 | + day: "numeric", |
| 134 | + }, |
| 135 | + )} |
| 136 | + </strong> |
| 137 | + </p> |
| 138 | + </div> |
| 139 | + ) : null} |
| 140 | + |
| 141 | + <div> |
| 142 | + <Form {...form}> |
| 143 | + <form |
| 144 | + onSubmit={form.handleSubmit(handleSubmit)} |
| 145 | + className="space-y-4" |
| 146 | + > |
| 147 | + <input type="hidden" {...form.register("_id")} /> |
| 148 | + |
| 149 | + <FormField |
| 150 | + control={form.control} |
| 151 | + name="id" |
| 152 | + render={({ field }) => ( |
| 153 | + <FormItem> |
| 154 | + <FormLabel>Vegetable ID</FormLabel> |
| 155 | + <FormControl> |
| 156 | + <Input |
| 157 | + {...field} |
| 158 | + readOnly |
| 159 | + placeholder="This is the ID of the vegetable" |
| 160 | + /> |
| 161 | + </FormControl> |
| 162 | + </FormItem> |
| 163 | + )} |
| 164 | + /> |
| 165 | + |
| 166 | + <div className="flex items-center justify-end space-x-2"> |
| 167 | + <DialogClose disabled={isProcessing} asChild> |
| 168 | + <Button variant="outline">Cancel</Button> |
| 169 | + </DialogClose> |
| 170 | + |
| 171 | + <Button |
| 172 | + disabled={isProcessing} |
| 173 | + type="submit" |
| 174 | + variant={"destructive"} |
| 175 | + > |
| 176 | + {isProcessing ? "Deleting..." : "Delete"} |
| 177 | + </Button> |
| 178 | + </div> |
| 179 | + </form> |
| 180 | + </Form> |
| 181 | + </div> |
| 182 | + </DialogContent> |
| 183 | + </Dialog> |
| 184 | + ); |
| 185 | +} |
0 commit comments