Gallery

Events still not working

frontend/components/planning.tsx

@@ -23,41 +23,10 @@ import { Button } from "@/components/ui/button";
 import { KeyedMutator } from "swr";
 import { getCookie } from "cookies-next";
 import { useTheme } from "next-themes";
-import { EventForm, EventFormValues } from "./event-dialog";
+import { EventForm, eventFormSchema, EventFormValues } from "./event-dialog";
 import ICalendarEvent from "@/interfaces/ICalendarEvent";
-
-const mapFrequencyToRrule = (
-	frequency: "unique" | "quotidien" | "hebdomadaire" | "mensuel",
-	frequencyEndDate?: Date,
-): string => {
-	let rrule = "";
-
-	switch (frequency) {
-		case "quotidien":
-			rrule = "FREQ=DAILY";
-			break;
-		case "hebdomadaire":
-			rrule = "FREQ=WEEKLY";
-			break;
-		case "mensuel":
-			rrule = "FREQ=MONTHLY";
-			break;
-		default:
-			return "";
-	}
-
-	if (frequencyEndDate) {
-		const until = frequencyEndDate.getTime();
-		const untilDate = new Date(until);
-		const epochDateString = untilDate
-			.toISOString()
-			.replace(/[-:]/g, "")
-			.split(".")[0]; // Format as YYYYMMDDTHHmmss
-		rrule += `;UNTIL=${epochDateString}`;
-	}
-
-	return rrule;
-};
+import { UseFormReturn } from "react-hook-form";
+import mapFrequencyToRrule from "@/lib/mapFrequencyToRrule";
 
 const Planning: React.FC<{
 	events: ICalendarEvent[];
@@ -81,12 +50,14 @@ const Planning: React.FC<{
 		null,
 	);
 
-	const handleEventUpdate = async (eventSelected: ICalendarEvent) => {
-		const event: ICalendarEvent = {
+	const handleEventUpdate = async (
+		eventSelected: ICalendarEvent | Omit<ICalendarEvent, "id">,
+	) => {
+		const event = {
 			...eventSelected,
 			start: `${new Date(eventSelected.start).toISOString()}`,
 			end: `${new Date(eventSelected.end).toISOString()}`,
-		};
+		} as ICalendarEvent;
 		try {
 			const res = await request<undefined>(`/events/${event.id}/update`, {
 				method: "PATCH",
@@ -157,42 +128,47 @@ const Planning: React.FC<{
 					onOpenChange={(open) => {
 						setNewEvent((e) => (open ? e : null));
 					}}
-					event={newEvent}
-					onSubmitEvent={async (eventFormValues) => {
+					onAdd={async (formValues) => {
 						const rrule = mapFrequencyToRrule(
-							eventFormValues.frequency,
-							eventFormValues.frequencyEndDate,
+							formValues.frequency,
+							formValues.frequencyEndDate,
 						);
-						try {
-							const event: Omit<ICalendarEvent, "id"> = {
-								...newEvent,
-								start: `${eventFormValues.startDate} ${eventFormValues.startTime}`,
-								end: `${eventFormValues.endDate} ${eventFormValues.endTime}`,
-								title: `${eventFormValues.title}`,
-								fullDay: eventFormValues.fullDay,
-								rrule: rrule,
-								isVisible: eventFormValues.isVisible,
-							};
-							const res = await request<undefined>(
-								`/events/new`,
-								{
-									method: "POST",
-									body: event,
-									requiresAuth: true,
-									csrfToken: false,
-								},
-							);
-							if (res.status === "Error") {
-								console.log("Error");
-							}
-							if (res.status === "Success") {
-								mutate?.();
-								console.log("Success");
-							}
-						} catch (e) {
-							console.log(e);
+						const [sHours, sMinutes] =
+							formValues.startTime.split(":");
+						formValues.startDate.setHours(
+							parseInt(sHours),
+							parseInt(sMinutes),
+						);
+						const [eHours, eMinutes] =
+							formValues.endTime.split(":");
+						formValues.endDate.setHours(
+							parseInt(eHours),
+							parseInt(eMinutes),
+						);
+						const event: Omit<ICalendarEvent, "id"> = {
+							...newEvent,
+							start: formValues.startDate.toISOString(),
+							end: formValues.endDate.toISOString(),
+							title: `${formValues.title}`,
+							fullday: formValues.fullDay,
+							rrule: rrule,
+							isVisible: formValues.isVisible,
+						};
+						const res = await request<undefined>(`/events/new`, {
+							method: "POST",
+							body: event,
+							requiresAuth: true,
+							csrfToken: false,
+						});
+						if (res.status === "Error") {
+							console.log("Error");
+						}
+						if (res.status === "Success") {
+							mutate?.();
+							console.log("Success");
 						}
 					}}
+					event={newEvent}
 				/>
 			)}
 			{eventSelected && (
@@ -202,17 +178,13 @@ const Planning: React.FC<{
 						setEventSelected((e) => (open ? e : null));
 					}}
 					event={eventSelected}
-					onSubmitEvent={(eventForm) => {
-						console.log("Event form: " + eventForm);
-					}}
-					onDelete={async () => {
-						calendar?.events?.remove(eventSelected.id);
+					onDelete={async (id) => {
+						calendar?.events?.remove(id);
 						try {
 							const res = await request<undefined>(
-								`/events/${eventSelected.id}/delete`,
+								`/events/${id}/delete`,
 								{
 									method: "DELETE",
-									body: eventSelected,
 									requiresAuth: false,
 									csrfToken: false,
 								},
@@ -228,8 +200,33 @@ const Planning: React.FC<{
 						}
 						setEventSelected(null);
 					}}
-					onUpdate={async () => {
-						await handleEventUpdate(eventSelected);
+					onUpdate={async (formValues) => {
+						const rrule = mapFrequencyToRrule(
+							formValues.frequency,
+							formValues.frequencyEndDate,
+						);
+						const [sHours, sMinutes] =
+							formValues.startTime.split(":");
+						formValues.startDate.setHours(
+							parseInt(sHours),
+							parseInt(sMinutes),
+						);
+						const [eHours, eMinutes] =
+							formValues.endTime.split(":");
+						formValues.endDate.setHours(
+							parseInt(eHours),
+							parseInt(eMinutes),
+						);
+						const event: ICalendarEvent = {
+							...eventSelected,
+							start: formValues.startDate.toISOString(),
+							end: formValues.endDate.toISOString(),
+							title: `${formValues.title}`,
+							fullday: formValues.fullDay,
+							rrule: rrule,
+							isVisible: formValues.isVisible,
+						};
+						await handleEventUpdate(event);
 						setEventSelected(null);
 					}}
 				/>
@@ -240,21 +237,27 @@ const Planning: React.FC<{
 
 const EventDialog: React.FC<
 	{
-		onSubmitEvent: (eventFormValues: EventFormValues) => void;
-		onDelete?: () => void;
-		onUpdate?: () => void;
-		onAdd?: () => void;
+		onDelete?: (id: string) => void;
+		onUpdate?: (formValues: EventFormValues) => void;
+		onAdd?: (formValues: EventFormValues) => void;
 		event: ICalendarEvent | Omit<ICalendarEvent, "id">;
 	} & DialogProps
-> = ({
-	open,
-	onOpenChange,
-	onSubmitEvent,
-	onDelete,
-	onUpdate,
-	onAdd,
-	event,
-}) => {
+> = ({ 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);
+		}
+	};
+
 	return (
 		<Dialog open={open} onOpenChange={onOpenChange}>
 			<DialogContent className="sm:max-w-md">
@@ -262,12 +265,24 @@ const EventDialog: React.FC<
 					<DialogTitle>{event.title}</DialogTitle>
 					<DialogDescription>{event.description}</DialogDescription>
 				</DialogHeader>
-				<EventForm event={event} onSubmitEvent={onSubmitEvent} />
+				<EventForm event={event} onSubmit={onSubmit} />
 				<DialogFooter className="flex flex-row justify-end">
 					{onUpdate && (
 						<Button
 							variant="outline"
-							onClick={() => onUpdate()}
+							onClick={() => {
+								form?.handleSubmit((data) => {
+									console.log(data);
+									try {
+										const validatedData =
+											eventFormSchema.parse(data);
+										console.log(validatedData);
+										onUpdate(validatedData);
+									} catch (e) {
+										console.error(e);
+									}
+								});
+							}}
 							type="submit"
 						>
 							Actualiser
@@ -276,14 +291,17 @@ const EventDialog: React.FC<
 					{onDelete && (
 						<Button
 							variant="destructive"
-							onClick={() => onDelete()}
+							onClick={() => onDelete(event.id)}
 							type="submit"
 						>
 							Supprimer
 						</Button>
 					)}
 					{onAdd && !onUpdate && !onDelete && (
-						<Button onClick={() => onAdd()} type="submit">
+						<Button
+							onClick={() => form?.handleSubmit((data) => {})}
+							type="submit"
+						>
 							Créer
 						</Button>
 					)}