Fixed event-dialog

frontend/components/event-dialog.tsx

@@ -73,8 +73,10 @@ const isCalendarEventExternal = (
 
 export const EventForm: React.FC<{
 	event: ICalendarEvent | Omit<ICalendarEvent, "id">;
-	onSubmit: (data: EventFormValues) => any;
-}> = ({ event, onSubmit }) => {
+	setForm: React.Dispatch<
+		React.SetStateAction<UseFormReturn<EventFormValues> | undefined>
+	>;
+}> = ({ event, setForm }) => {
 	const _start = new Date(event.start ?? Date.now());
 	const _end = new Date(event.end ?? Date.now());
 	const form = useForm<EventFormValues>({
@@ -91,56 +93,15 @@ export const EventForm: React.FC<{
 		},
 	});
 
+	useEffect(() => {
+		setForm(form);
+	}, []);
+
 	const frequency = form.watch("frequency");
 
-	// async function onSubmit(data: EventFormValues) {
-	// 	try {
-	// 		const validatedData = eventFormSchema.parse(data);
-	// 		onSubmitEvent(validatedData);
-	// 	} catch (error) {
-	// 		console.error("On submit error : ", error);
-	// 	}
-	// }
-
-	// useEffect(() => {
-	// 	try {
-	// 		const validatedData = eventFormSchema.parse(form);
-	// 		setEvent((old) => {
-	// 			const rrule = mapFrequencyToRrule(
-	// 				validatedData.frequency,
-	// 				validatedData.frequencyEndDate,
-	// 			);
-	// 			const [sHours, sMinutes] = validatedData.startTime.split(":");
-	// 			validatedData.startDate.setHours(
-	// 				parseInt(sHours),
-	// 				parseInt(sMinutes),
-	// 			);
-	// 			const [eHours, eMinutes] = validatedData.endTime.split(":");
-	// 			validatedData.endDate.setHours(
-	// 				parseInt(eHours),
-	// 				parseInt(eMinutes),
-	// 			);
-	// 			return {
-	// 				...old,
-	// 				start: validatedData.startDate.toISOString(),
-	// 				end: validatedData.endDate.toISOString(),
-	// 				title: `${validatedData.title}`,
-	// 				fullDay: validatedData.fullDay,
-	// 				rrule: rrule,
-	// 				isVisible: validatedData.isVisible,
-	// 			};
-	// 		});
-	// 	} catch (e) {
-	// 		console.log(e);
-	// 	}
-	// }, [form]);
-
 	return (
 		<Form {...form}>
-			<form
-				onSubmit={form.handleSubmit(onSubmit)}
-				className="w-full max-w-md space-y-4"
-			>
+			<form className="w-full max-w-md space-y-4">
 				<FormField
 					control={form.control}
 					name="title"

frontend/components/planning.tsx

@@ -23,7 +23,7 @@ import { Button } from "@/components/ui/button";
 import { KeyedMutator } from "swr";
 import { getCookie } from "cookies-next";
 import { useTheme } from "next-themes";
-import { EventForm, eventFormSchema, EventFormValues } from "./event-dialog";
+import { EventForm, EventFormValues } from "./event-dialog";
 import ICalendarEvent from "@/interfaces/ICalendarEvent";
 import { UseFormReturn } from "react-hook-form";
 import mapFrequencyToRrule from "@/lib/mapFrequencyToRrule";
@@ -67,6 +67,8 @@ const Planning: React.FC<{
 			});
 			if (res.status === "Error") {
 				// calendar?.events?.update(oldEvent);
+			} else {
+				mutate?.();
 			}
 		} catch (e) {
 			console.log(e);
@@ -145,6 +147,7 @@ const Planning: React.FC<{
 							parseInt(eHours),
 							parseInt(eMinutes),
 						);
+						console.log(formValues.endDate);
 						const event: Omit<ICalendarEvent, "id"> = {
 							...newEvent,
 							start: formValues.startDate.toISOString(),
@@ -185,7 +188,7 @@ const Planning: React.FC<{
 								`/events/${id}/delete`,
 								{
 									method: "DELETE",
-									requiresAuth: false,
+									requiresAuth: true,
 									csrfToken: false,
 								},
 							);
@@ -245,17 +248,9 @@ const EventDialog: React.FC<
 > = ({ open, onOpenChange, onDelete, onUpdate, onAdd, event }) => {
 	const [form, setForm] = useState<UseFormReturn<EventFormValues>>();
 
-	const handleOnAdd = (data: EventFormValues) => {
-		onAdd?.(data);
-	};
-
-	const onSubmit = (data: EventFormValues) => {
-		try {
-			const validatedData = eventFormSchema.parse(data);
-			handleOnAdd(data);
-		} catch (e) {
-			console.error(e);
-		}
+	const submitForm = (event: "add" | "update") => {
+		const callback = event === "add" ? onAdd : onUpdate;
+		if (callback) form?.handleSubmit(callback)();
 	};
 
 	return (
@@ -265,24 +260,12 @@ const EventDialog: React.FC<
 					<DialogTitle>{event.title}</DialogTitle>
 					<DialogDescription>{event.description}</DialogDescription>
 				</DialogHeader>
-				<EventForm event={event} onSubmit={onSubmit} />
+				<EventForm event={event} setForm={setForm} />
 				<DialogFooter className="flex flex-row justify-end">
 					{onUpdate && (
 						<Button
 							variant="outline"
-							onClick={() => {
-								form?.handleSubmit((data) => {
-									console.log(data);
-									try {
-										const validatedData =
-											eventFormSchema.parse(data);
-										console.log(validatedData);
-										onUpdate(validatedData);
-									} catch (e) {
-										console.error(e);
-									}
-								});
-							}}
+							onClick={() => submitForm("update")}
 							type="submit"
 						>
 							Actualiser
@@ -298,10 +281,7 @@ const EventDialog: React.FC<
 						</Button>
 					)}
 					{onAdd && !onUpdate && !onDelete && (
-						<Button
-							onClick={() => form?.handleSubmit((data) => {})}
-							type="submit"
-						>
+						<Button onClick={() => submitForm("add")} type="submit">
 							Créer
 						</Button>
 					)}