events api in frontend, setting routes for events

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { request } from "@/hooks/use-api";
+import { request, useApi } 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";
@@ -30,6 +30,7 @@ import {
 import { CalendarIcon } from "lucide-react";
 import { Calendar } from "@/components/ui/calendar";
 import { cn } from "@/lib/utils";
+import { requestFormReset } from "react-dom";
 
 const Planning = () => {
 	const plugins = [createEventsServicePlugin()];
@@ -47,6 +48,8 @@ const Planning = () => {
 		},
 	]);
 
+	const [requestCreateEvent, setRequestCreateEvent] = useState(false)
+
 	const calendar = useNextCalendarApp(
 		{
 			theme: "shadcn",
@@ -63,12 +66,48 @@ const Planning = () => {
 			callbacks: {
 				onEventClick(event, e) {
 					setEventSelected(event);
-				}
+				},
+				async onClickDateTime(dateTime) {
+					setRequestCreateEvent(true)
+					const newEvent: CalendarEventExternal = {
+						id: "5",
+						title: "Event 1",
+						start: dateTime,
+						end: format(
+							new Date(dateTime).getTime() + (1000 * 60 * 60),
+							"yyyy-MM-dd HH:mm",
+						),
+					}
+					try {
+						const res = await request<undefined>(
+							`/events/new`,
+							{
+								method: "POST",
+								body: JSON.stringify(newEvent),
+								requiresAuth: true,
+								csrfToken: false
+							},)
+						if (res.status === "Error") {
+							console.log("Error")
+						}
+						if (res.status === "Success") {
+							console.log("Success")
+						}
+					} catch (e) {
+						console.log(e)
+					}
+				},
 			},
 		},
 		plugins,
 	);
-
+	
+	const {data: requestedEvents, isLoading, success} = useApi("/events", {
+		onSuccess: (data) => {	
+			calendar?.events.set(data)
+		}
+	}, false, false)
+	
 	useEffect(() => {
 		// get all events
 		calendar?.events.getAll();
@@ -176,32 +215,57 @@ const Planning = () => {
 							/>
 						</div>
 					</div>
-					<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")
+					<DialogFooter className="flex flex-row justify-end">
+						<Button className="bg-red-700"
+							onClick={async () => {
+								calendar?.events?.remove(eventSelected!.id)
+								try {
+									const res = await request<undefined>(
+										`/events/${eventSelected!.id}/delete`,
+										{
+											method: "DELETE",
+											body: JSON.stringify(eventSelected),
+											requiresAuth: false,
+											csrfToken: false
+										},)
+									if (res.status === "Error") {
+										console.log("Error")
+									}
+									if (res.status === "Success") {
+										console.log("Success")
+									}
+								} catch (e) {
+									console.log(e)
 								}
-							} catch(e) {
-								console.log(e)
-							}
-						}}
-						type="submit"
-					>
-						Mettre à jour
-					</Button>
+							}}
+							type="submit">
+							Supprimer
+						</Button>
+						<Button className="bg-blue-500"
+							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">
+							Actualiser
+						</Button>
 					</DialogFooter>
 				</DialogContent>
 			</Dialog>