Calendar

frontend/app/(auth)/dashboard/planning/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import Planning from "@/components/planning";
+import { useApi } from "@/hooks/use-api";
+import ICalendarEvent from "@/interfaces/ICalendarEvent";
+import { Loader2 } from "lucide-react";
+
+export default function Page() {
+	const {
+		data: requestedEvents,
+		isLoading,
+		success,
+		mutate,
+	} = useApi<ICalendarEvent[]>("/events", undefined, false, false);
+
+	if (isLoading) return <Loader2 className="animate-spin" />;
+	if (success)
+		return (
+			<Planning
+				modifiable
+				events={requestedEvents ?? []}
+				mutate={mutate}
+			/>
+		);
+}

frontend/components/app-sidebar.tsx

@@ -63,8 +63,14 @@ const data = {
 		},
 		{
 			title: "Planning",
-			url: "/dashboard/planning",
 			icon: Calendar,
+			url: "/dashboard/planning",
+			items: [
+				{
+					title: "Planning",
+					url: "/dashboard/planning",
+				},
+			],
 		},
 		{
 			title: "Blogs",

frontend/components/planning.tsx

@@ -31,18 +31,20 @@ import mapFrequencyToRrule from "@/lib/mapFrequencyToRrule";
 const Planning: React.FC<{
 	events: ICalendarEvent[];
 	mutate?: KeyedMutator<ApiResponse<ICalendarEvent[]>>;
-}> = ({ events, mutate }) => {
+	modifiable?: boolean;
+}> = ({ events, mutate, modifiable = false }) => {
 	const { resolvedTheme } = useTheme();
 	console.log(resolvedTheme);
 	const isConnected = getCookie("auth_token");
-	const plugins = isConnected
+	const plugins =
-		? [
+		isConnected && modifiable
-				createEventsServicePlugin(),
+			? [
-				createDragAndDropPlugin(),
+					createEventsServicePlugin(),
-				createResizePlugin(),
+					createDragAndDropPlugin(),
-				createEventRecurrencePlugin(),
+					createResizePlugin(),
-			]
+					createEventRecurrencePlugin(),
-		: [];
+				]
+			: [];
 	const [eventSelected, setEventSelected] = useState<ICalendarEvent | null>(
 		null,
 	);
@@ -53,7 +55,7 @@ const Planning: React.FC<{
 	const handleEventUpdate = async (
 		eventSelected: ICalendarEvent | Omit<ICalendarEvent, "id">,
 	) => {
-		if (!isConnected) return;
+		if (!isConnected || !modifiable) return;
 		const event = {
 			...eventSelected,
 			start: `${new Date(eventSelected.start).toISOString()}`,
@@ -114,7 +116,7 @@ const Planning: React.FC<{
 	}, [resolvedTheme]);
 
 	const AddButton: React.FC = () => {
-		if (!isConnected) return <></>;
+		if (!isConnected || !modifiable) return <></>;
 		return (
 			<Button onClick={() => setNewEvent({})} variant="outline">
 				Nouveau
@@ -128,14 +130,14 @@ const Planning: React.FC<{
 				<AddButton />
 				<ScheduleXCalendar calendarApp={calendar} />
 			</div>
-			{newEvent && (
+			{newEvent && isConnected && modifiable && (
 				<EventDialog
 					open={newEvent !== null || false}
 					onOpenChange={(open) => {
 						setNewEvent((e) => (open ? e : null));
 					}}
 					onAdd={async (formValues) => {
-						if (!isConnected) return;
+						if (!isConnected || !modifiable) return;
 						const rrule = mapFrequencyToRrule(
 							formValues.frequency,
 							formValues.frequencyEndDate,
@@ -179,7 +181,7 @@ const Planning: React.FC<{
 					event={newEvent}
 				/>
 			)}
-			{eventSelected && (
+			{eventSelected && modifiable && isConnected && (
 				<EventDialog
 					open={eventSelected !== null || false}
 					onOpenChange={(open) => {
@@ -187,7 +189,7 @@ const Planning: React.FC<{
 					}}
 					event={eventSelected}
 					onDelete={async (id) => {
-						if (!isConnected) return;
+						if (!isConnected || !modifiable) return;
 						calendar?.events?.remove(id);
 						try {
 							const res = await request<undefined>(
@@ -210,6 +212,7 @@ const Planning: React.FC<{
 						setEventSelected(null);
 					}}
 					onUpdate={async (formValues) => {
+						if (!isConnected || !modifiable) return;
 						const rrule = mapFrequencyToRrule(
 							formValues.frequency,
 							formValues.frequencyEndDate,