events api in frontend, setting routes for events

backend/api/get_event.go

@@ -2,6 +2,7 @@ package api
 
 import (
 	"context"
+	"fmt"
 	"net/http"
 
 	core "fr.latosa-escrima/api/core"
@@ -26,3 +27,23 @@ func HandleGetEvent(w http.ResponseWriter, r *http.Request) {
 	}.Respond(w, http.StatusOK)
 	return
 }
+
+func HangleGetEvents(w http.ResponseWriter, r *http.Request) {
+	var events []core.Event
+	rowsCount, err := core.DB.NewSelect().Model(&events).ScanAndCount(context.Background())
+	if err != nil {
+		core.JSONError{
+			Status:  core.Error,
+			Message: err.Error(),
+		}.Respond(w, http.StatusInternalServerError)
+		return
+	}
+	
+	core.JSONSuccess{
+		Status:  core.Success,
+		Message: fmt.Sprintf("%d Event successfully sent", rowsCount),
+		Data:    events,
+	}.Respond(w, http.StatusOK)
+	return
+}
+

backend/main.go

@@ -106,7 +106,7 @@ func main() {
 			Handler:     api.HandleUpdateUser,
 			Middlewares: []core.Middleware{api.Methods("PATCH"), api.AuthJWT}},
 		"/events":              {
-			Handler: api.HandleGetEvent, 
+			Handler:	 api.HangleGetEvents, 
 			Middlewares: []core.Middleware{api.Methods("GET")}},
 		"/events/new": {
 			Handler:     api.HandleCreateEvent, 

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,7 +215,33 @@ const Planning = () => {
 							/>
 						</div>
 					</div>
-					<DialogFooter> <Button
+					<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)
+								}
+							}}
+							type="submit">
+							Supprimer
+						</Button>
+						<Button className="bg-blue-500"
 							onClick={async () => {
 								calendar?.events?.update(eventSelected!)
 								try {
@@ -198,9 +263,8 @@ const Planning = () => {
 									console.log(e)
 								}
 							}}
-						type="submit"
-					>
-						Mettre à jour
+							type="submit">
+							Actualiser
 						</Button>
 					</DialogFooter>
 				</DialogContent>