events api file init

frontend/app/(main)/planning/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { request } from "@/hooks/use-api";
 import "@schedule-x/theme-shadcn/dist/index.css";
 import { useNextCalendarApp, ScheduleXCalendar } from "@schedule-x/react";
 import { createEventsServicePlugin } from "@schedule-x/events-service";
@@ -36,7 +37,7 @@ const Planning = () => {
 		useState<CalendarEventExternal | null>(null);
 	const [events, setEvents] = useState<CalendarEventExternal[]>([
 		{
-			id: "1",
+			id: "1", // TODO put an uuid there
 			title: "Event 1",
 			start: format(new Date(Date.now()), "yyyy-MM-dd HH:mm"),
 			end: format(
@@ -45,6 +46,7 @@ const Planning = () => {
 			),
 		},
 	]);
+
 	const calendar = useNextCalendarApp(
 		{
 			theme: "shadcn",
@@ -61,7 +63,7 @@ const Planning = () => {
 			callbacks: {
 				onEventClick(event, e) {
 					setEventSelected(event);
-				},
+				}
 			},
 		},
 		plugins,
@@ -78,7 +80,7 @@ const Planning = () => {
 				<ScheduleXCalendar calendarApp={calendar} />
 			</div>
 			<Dialog
-				open={eventSelected !== null}
+				open={eventSelected !== null || false}
 				onOpenChange={(open) => {
 					setEventSelected((e) => (open ? e : null));
 				}}
@@ -137,10 +139,9 @@ const Planning = () => {
 							</Popover> */}
 							<Input
 								id="start"
-								value={eventSelected?.start}
+								value={eventSelected?.start || ""}
 								onChange={(e) => {
 									const val = e.currentTarget.value;
-									console.log(val);
 									setEventSelected((ev) => {
 										if (ev)
 											return {
@@ -159,36 +160,48 @@ const Planning = () => {
 							</Label>
 							<Input
 								id="end"
-								value={eventSelected?.end}
-								onChange={(e) =>
+								value={eventSelected?.end || ""}
+								onChange={(e) => {
+									const val = e.currentTarget.value
 									setEventSelected((ev) => {
 										if (ev)
 											return {
 												...ev,
-												end: e.currentTarget.value,
+												end: val,
 											};
 										return ev;
 									})
-								}
+								}}
 								className="col-span-3"
 							/>
 						</div>
 					</div>
-					<DialogFooter>
-						<Button
-							onClick={() => {
-								setEvents((evs) => {
-									evs = evs.filter(
-										(e) => e.id !== eventSelected?.id,
-									);
-									evs.push(eventSelected!);
-									return evs;
-								});
-							}}
-							type="submit"
-						>
-							Mettre à jour
-						</Button>
+					<DialogFooter> <Button
+						onClick={async () => {
+							calendar?.events?.update(eventSelected!)
+							try {
+								const res = await request<undefined>(
+								`/events/${eventSelected!.id}/update`,
+								{ 
+									method: "PATCH",
+									body: JSON.stringify(eventSelected),
+									requiresAuth: true, 
+									csrfToken: false 
+								},)
+								if (res.status === "Error") {
+									console.log("Error")
+								} 
+								if (res.status === "Success") {
+									console.log("Success")
+								}
+							} catch(e) {
+								console.log(e)
+							}
+						}}
+						type="submit"
+					>
+						Mettre à jour
+					</Button>
 					</DialogFooter>
 				</DialogContent>
 			</Dialog>