Clear when re-opening form

This commit is contained in:
Daniel Hougaard
2023-11-28 00:48:08 +04:00
parent 5ae3b66e2e
commit 33ea019d70
@@ -9,8 +9,6 @@ import { z } from "zod";
import { Button, FormControl, Input, Modal, ModalContent, TextArea } from "@app/components/v2"; import { Button, FormControl, Input, Modal, ModalContent, TextArea } from "@app/components/v2";
export type TReminderFormSchema = z.infer<typeof ReminderFormSchema>;
const ReminderFormSchema = z.object({ const ReminderFormSchema = z.object({
note: z.string().optional(), note: z.string().optional(),
days: z days: z
@@ -19,6 +17,7 @@ const ReminderFormSchema = z.object({
.max(365, { message: "Must be less than 365 days" }), .max(365, { message: "Must be less than 365 days" }),
cron: z.string().refine(isValidCron, { message: "Invalid cron expression" }) cron: z.string().refine(isValidCron, { message: "Invalid cron expression" })
}); });
export type TReminderFormSchema = z.infer<typeof ReminderFormSchema>;
interface ReminderFormProps { interface ReminderFormProps {
isOpen: boolean; isOpen: boolean;
@@ -29,6 +28,7 @@ export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps)
const { const {
register, register,
watch, watch,
reset,
setValue, setValue,
handleSubmit, handleSubmit,
formState: { errors, isSubmitting } formState: { errors, isSubmitting }
@@ -46,8 +46,16 @@ export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps)
useEffect(() => { useEffect(() => {
if (!daysWatch) return; if (!daysWatch) return;
setValue("cron", `0 0 */${daysWatch} * *`); setValue("cron", `0 0 */${daysWatch} * *`);
setValue("days", parseInt(String(daysWatch), 10));
console.count("daysWatch");
}, [daysWatch]); }, [daysWatch]);
useEffect(() => {
if (isOpen) {
reset();
}
}, [isOpen]);
return ( return (
<Modal isOpen={isOpen} onOpenChange={onOpenChange}> <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
<ModalContent <ModalContent
@@ -71,9 +79,9 @@ export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps)
errorText={errors?.days?.message || ""} errorText={errors?.days?.message || ""}
> >
<Input <Input
onChange={(el) => setValue("days", parseInt(el.target.value, 10))}
type="number" type="number"
placeholder="every 5 days" placeholder="every 5 days"
onChange={(el) => setValue("days", parseInt(el.target.value, 10))}
/> />
</FormControl> </FormControl>
{!!daysWatch && cronWatch && isValidCron(cronWatch) && ( {!!daysWatch && cronWatch && isValidCron(cronWatch) && (