Gallery

Events still not working
2025-02-12 16:51:57 +01:00
parent 27c17fc33f
commit 9d6aa4c163
10 changed files with 746 additions and 350 deletions
--- a/frontend/app/(auth)/dashboard/settings/shortcodes/page.tsx
+++ b/frontend/app/(auth)/dashboard/settings/shortcodes/page.tsx
@@ -16,6 +16,8 @@ export default function ShortcodesPage() {
 		success,
 	} = useApi<IShortcode[]>("/shortcodes", undefined, true);

+	console.log(shortcodes);
+
 	const handleUpdate = async (updatedShortcode: IShortcode) => {
 		const res = await request<IShortcode>(
 			`/shortcodes/${updatedShortcode.code}/update`,
--- a/frontend/app/(main)/gallery/page.tsx
+++ b/frontend/app/(main)/gallery/page.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import Image from "next/image";
+import {
+	Pagination,
+	PaginationContent,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+} from "@/components/ui/pagination";
+import useMedia from "@/hooks/use-media";
+import { Loader2 } from "lucide-react";
+
+export default function PhotoGallery() {
+	const {
+		data,
+		error: mediaError,
+		isLoading,
+		success,
+		setPage,
+		setLimit,
+		mutate,
+	} = useMedia();
+
+	return (
+		<div className="container mx-auto px-4 py-8">
+			<div className="flex justify-between items-center mb-8">
+				<h1 className="text-3xl font-bold">Gallerie Photo</h1>
+			</div>
+			{isLoading ? (
+				<div className="flex w-full h-full justify-center">
+					<Loader2 className="animate-spin" />
+				</div>
+			) : (
+				<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+					{data?.items.map((photo) => (
+						<div
+							key={photo.id}
+							className="aspect-square overflow-hidden rounded-lg shadow-md cursor-pointer"
+							onClick={() => {}}
+						>
+							<Image
+								src={photo.url || "/placeholder.svg"}
+								alt={photo.alt}
+								width={300}
+								height={300}
+								unoptimized
+								className="w-full h-full object-cover"
+							/>
+						</div>
+					))}
+					)
+				</div>
+			)}
+			<Pagination className="mt-8">
+				<PaginationContent>
+					<PaginationItem>
+						<PaginationPrevious
+							href="#"
+							onClick={(e) => {
+								e.preventDefault();
+								setPage((prev) => Math.max(prev - 1, 1));
+							}}
+							className={
+								data?.page === 1
+									? "pointer-events-none opacity-50"
+									: ""
+							}
+						/>
+					</PaginationItem>
+					{[...Array(data?.totalPages)].map((_, i) => (
+						<PaginationItem key={i + 1}>
+							<PaginationLink
+								href="#"
+								onClick={(e) => {
+									e.preventDefault();
+									setPage(i + 1);
+								}}
+								isActive={data?.page === i + 1}
+							>
+								{i + 1}
+							</PaginationLink>
+						</PaginationItem>
+					))}
+					<PaginationItem>
+						<PaginationNext
+							href="#"
+							onClick={(e) => {
+								e.preventDefault();
+								setPage((prev) =>
+									Math.min(prev + 1, data?.totalPages ?? 1),
+								);
+							}}
+							className={
+								data?.page === data?.totalPages
+									? "pointer-events-none opacity-50"
+									: ""
+							}
+						/>
+					</PaginationItem>
+				</PaginationContent>
+			</Pagination>
+		</div>
+	);
+}
--- a/frontend/app/(main)/page.tsx
+++ b/frontend/app/(main)/page.tsx
@@ -2,6 +2,7 @@ export const dynamic = "force-dynamic"; // Prevents static rendering
 import Features, { FeatureItem } from "@/components/features";
 import Gallery from "@/components/gallery";
 import Hero from "@/components/hero";
+import HomepageGalleryItems from "@/components/homepage-gallery";
 import Testimonial from "@/components/testimonial";
 import { CarouselItem } from "@/components/ui/carousel";
 import YouTubeEmbed from "@/components/youtube-embed";
@@ -149,11 +150,13 @@ export default async function Home() {
 					</FeatureItem>
 				</Features>
 				<Gallery
-					tagLine="Tag Line"
-					cta="Book a demo"
-					ctaHref="#"
-					title="Gallery"
-				/>
+					tagLine=""
+					cta="Voir toutes les photos"
+					ctaHref="/gallery"
+					title="Gallerie"
+				>
+					<HomepageGalleryItems />
+				</Gallery>
 				{videos && (
 					<Gallery
 						tagLine=""
--- a/frontend/components/event-dialog.tsx
+++ b/frontend/components/event-dialog.tsx
@@ -1,23 +1,44 @@
-"use client"
+"use client";

-import * as React from "react"
-import { CalendarIcon } from "lucide-react"
-import { format } from "date-fns"
-import { zodResolver } from "@hookform/resolvers/zod"
-import * as z from "zod"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Calendar } from "@/components/ui/calendar"
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
-import { Checkbox } from "@/components/ui/checkbox"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { useForm } from "react-hook-form"
+import * as React from "react";
+import { CalendarIcon } from "lucide-react";
+import { format } from "date-fns";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import {
-	CalendarEventExternal,
-} from "@schedule-x/calendar";
-import ICalendarEvent from "@/interfaces/ICalendarEvent"
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import {
+	SubmitErrorHandler,
+	SubmitHandler,
+	useForm,
+	UseFormReturn,
+} from "react-hook-form";
+import { CalendarEventExternal } from "@schedule-x/calendar";
+import ICalendarEvent from "@/interfaces/ICalendarEvent";
+import { useEffect } from "react";

 export const eventFormSchema = z.object({
 	title: z.string().min(1, "Titre requis"),
@@ -33,59 +54,93 @@ export const eventFormSchema = z.object({
 	frequency: z.enum(["unique", "quotidien", "hebdomadaire", "mensuel"]),
 	frequencyEndDate: z.date().optional(),
 	isVisible: z.boolean().default(true),
-})
+});

-export type EventFormValues = z.infer<typeof eventFormSchema>
+export type EventFormValues = z.infer<typeof eventFormSchema>;

 const frequencies = [
 	{ label: "Unique", value: "unique" },
 	{ label: "Quotidien", value: "quotidien" },
 	{ label: "Hebdomadaire", value: "hebdomadaire" },
 	{ label: "Mensuel", value: "mensuel" },
-]
+];

-const isCalendarEventExternal = (event: CalendarEventExternal | Omit<CalendarEventExternal, "id">): event is CalendarEventExternal => {
+const isCalendarEventExternal = (
+	event: CalendarEventExternal | Omit<CalendarEventExternal, "id">,
+): event is CalendarEventExternal => {
 	return (event as CalendarEventExternal).id !== undefined;
 };

-export const EventForm: React.FC<
-	{
+export const EventForm: React.FC<{
 	event: ICalendarEvent | Omit<ICalendarEvent, "id">;
-		onSubmitEvent: (eventFormValues: EventFormValues) => void;
-	}
-> = ({
-	event,
-	onSubmitEvent,
-}) => {
-		
+	onSubmit: (data: EventFormValues) => any;
+}> = ({ event, onSubmit }) => {
+	const _start = new Date(event.start ?? Date.now());
+	const _end = new Date(event.end ?? Date.now());
 	const form = useForm<EventFormValues>({
 		resolver: zodResolver(eventFormSchema),
 		defaultValues: {
 			title: event.title ? event.title : "",
-				startDate:	new Date(), // event.start),
-				startTime:	`${new Date(event.start).getHours()}:${new Date(event.start).getMinutes()}`,
-				endDate:    new Date(), // event.end),
-				endTime:	`${new Date(event.end).getHours()}:${new Date(event.end).getMinutes()}`,
+			startDate: _start, // event.start),
+			startTime: format(_start, "HH:mm"),
+			endDate: _end, // event.end),
+			endTime: format(_end, "HH:mm"),
 			fullDay: event.fullday,
 			frequency: "unique",
 			isVisible: event.isVisible,
 		},
-		}) 	
+	});

-		const frequency = form.watch("frequency")
+	const frequency = form.watch("frequency");

-		async function onSubmit(data: EventFormValues) {
-			try {
-				const validatedData = eventFormSchema.parse(data)
-				onSubmitEvent(validatedData)
-			} catch (error) {
-				console.error("On submit error : ", error)
-			}
-		}
+	// async function onSubmit(data: EventFormValues) {
+	// 	try {
+	// 		const validatedData = eventFormSchema.parse(data);
+	// 		onSubmitEvent(validatedData);
+	// 	} catch (error) {
+	// 		console.error("On submit error : ", error);
+	// 	}
+	// }
+
+	// useEffect(() => {
+	// 	try {
+	// 		const validatedData = eventFormSchema.parse(form);
+	// 		setEvent((old) => {
+	// 			const rrule = mapFrequencyToRrule(
+	// 				validatedData.frequency,
+	// 				validatedData.frequencyEndDate,
+	// 			);
+	// 			const [sHours, sMinutes] = validatedData.startTime.split(":");
+	// 			validatedData.startDate.setHours(
+	// 				parseInt(sHours),
+	// 				parseInt(sMinutes),
+	// 			);
+	// 			const [eHours, eMinutes] = validatedData.endTime.split(":");
+	// 			validatedData.endDate.setHours(
+	// 				parseInt(eHours),
+	// 				parseInt(eMinutes),
+	// 			);
+	// 			return {
+	// 				...old,
+	// 				start: validatedData.startDate.toISOString(),
+	// 				end: validatedData.endDate.toISOString(),
+	// 				title: `${validatedData.title}`,
+	// 				fullDay: validatedData.fullDay,
+	// 				rrule: rrule,
+	// 				isVisible: validatedData.isVisible,
+	// 			};
+	// 		});
+	// 	} catch (e) {
+	// 		console.log(e);
+	// 	}
+	// }, [form]);

 	return (
 		<Form {...form}>
-				<form onSubmit={form.handleSubmit(onSubmit)} className="w-full max-w-md space-y-4">
+			<form
+				onSubmit={form.handleSubmit(onSubmit)}
+				className="w-full max-w-md space-y-4"
+			>
 				<FormField
 					control={form.control}
 					name="title"
@@ -93,7 +148,10 @@ export const EventForm: React.FC<
 						<FormItem>
 							<FormLabel>Titre</FormLabel>
 							<FormControl>
-									<Input placeholder="Ajouter un titre" {...field} />
+								<Input
+									placeholder="Ajouter un titre"
+									{...field}
+								/>
 							</FormControl>
 							<FormMessage />
 						</FormItem>
@@ -112,15 +170,36 @@ export const EventForm: React.FC<
 										<FormControl>
 											<Button
 												variant="outline"
-													className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
+												className={cn(
+													"w-full pl-3 text-left font-normal",
+													!field.value &&
+														"text-muted-foreground",
+												)}
 											>
-													{field.value ? format(field.value, "yyyy-mm-dd hh:mm") : <span>Choisis une date</span>}
+												{field.value ? (
+													format(
+														field.value,
+														"dd/MM/yyyy",
+													)
+												) : (
+													<span>
+														Choisis une date
+													</span>
+												)}
 												<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
 											</Button>
 										</FormControl>
 									</PopoverTrigger>
-										<PopoverContent className="w-auto p-0" align="start">
-											<Calendar mode="single" selected={field.value} onSelect={field.onChange} initialFocus />
+									<PopoverContent
+										className="w-auto p-0"
+										align="start"
+									>
+										<Calendar
+											mode="single"
+											selected={field.value}
+											onSelect={field.onChange}
+											initialFocus
+										/>
 									</PopoverContent>
 								</Popover>
 								<FormMessage />
@@ -134,7 +213,11 @@ export const EventForm: React.FC<
 						render={({ field }) => (
 							<FormItem>
 								<FormControl>
-										<Input type="time" {...field} className="w-[120px]" />
+									<Input
+										type="time"
+										{...field}
+										className="w-[120px]"
+									/>
 								</FormControl>
 								<FormMessage />
 							</FormItem>
@@ -154,15 +237,36 @@ export const EventForm: React.FC<
 										<FormControl>
 											<Button
 												variant="outline"
-													className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
+												className={cn(
+													"w-full pl-3 text-left font-normal",
+													!field.value &&
+														"text-muted-foreground",
+												)}
 											>
-													{field.value ? format(field.value,  "yyyy-mm-dd hh:mm") : <span>Choisis une date</span>}
+												{field.value ? (
+													format(
+														field.value,
+														"dd/MM/yyyy",
+													)
+												) : (
+													<span>
+														Choisis une date
+													</span>
+												)}
 												<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
 											</Button>
 										</FormControl>
 									</PopoverTrigger>
-										<PopoverContent className="w-auto p-0" align="start">
-											<Calendar mode="single" selected={field.value} onSelect={field.onChange} initialFocus />
+									<PopoverContent
+										className="w-auto p-0"
+										align="start"
+									>
+										<Calendar
+											mode="single"
+											selected={field.value}
+											onSelect={field.onChange}
+											initialFocus
+										/>
 									</PopoverContent>
 								</Popover>
 								<FormMessage />
@@ -176,7 +280,11 @@ export const EventForm: React.FC<
 						render={({ field }) => (
 							<FormItem>
 								<FormControl>
-										<Input type="time" {...field} className="w-[120px]" />
+									<Input
+										type="time"
+										{...field}
+										className="w-[120px]"
+									/>
 								</FormControl>
 								<FormMessage />
 							</FormItem>
@@ -190,7 +298,10 @@ export const EventForm: React.FC<
 					render={({ field }) => (
 						<FormItem className="flex flex-row items-start space-x-3 space-y-0">
 							<FormControl>
-									<Checkbox checked={field.value} onCheckedChange={field.onChange} />
+								<Checkbox
+									checked={field.value}
+									onCheckedChange={field.onChange}
+								/>
 							</FormControl>
 							<FormLabel>Journée complète</FormLabel>
 							<FormMessage />
@@ -205,7 +316,10 @@ export const EventForm: React.FC<
 						render={({ field }) => (
 							<FormItem className="flex-1">
 								<FormLabel>Fréquence</FormLabel>
-									<Select onValueChange={field.onChange} defaultValue={field.value}>
+								<Select
+									onValueChange={field.onChange}
+									defaultValue={field.value}
+								>
 									<FormControl>
 										<SelectTrigger>
 											<SelectValue placeholder="Selectionner Fréquence" />
@@ -213,7 +327,10 @@ export const EventForm: React.FC<
 									</FormControl>
 									<SelectContent>
 										{frequencies.map((frequency) => (
-												<SelectItem key={frequency.value} value={frequency.value}>
+											<SelectItem
+												key={frequency.value}
+												value={frequency.value}
+											>
 												{frequency.label}
 											</SelectItem>
 										))}
@@ -236,15 +353,36 @@ export const EventForm: React.FC<
 											<FormControl>
 												<Button
 													variant="outline"
-														className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
+													className={cn(
+														"w-full pl-3 text-left font-normal",
+														!field.value &&
+															"text-muted-foreground",
+													)}
 												>
-														{field.value ? format(field.value, "MM/dd/yyyy") : <span>Choisis une date</span>}
+													{field.value ? (
+														format(
+															field.value,
+															"dd/MM/yyyy",
+														)
+													) : (
+														<span>
+															Choisis une date
+														</span>
+													)}
 													<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
 												</Button>
 											</FormControl>
 										</PopoverTrigger>
-											<PopoverContent className="w-auto p-0" align="start">
-												<Calendar mode="single" selected={field.value} onSelect={field.onChange} initialFocus />
+										<PopoverContent
+											className="w-auto p-0"
+											align="start"
+										>
+											<Calendar
+												mode="single"
+												selected={field.value}
+												onSelect={field.onChange}
+												initialFocus
+											/>
 										</PopoverContent>
 									</Popover>
 									<FormMessage />
@@ -259,9 +397,12 @@ export const EventForm: React.FC<
 					name="isVisible"
 					render={({ field }) => (
 						<FormItem className="flex-1">
-								<FormLabel className="align-sub">Evènement visible ?</FormLabel>
+							<FormLabel className="align-sub">
+								Evènement visible ?
+							</FormLabel>
 							<FormControl>
-									<Checkbox className="m-3 align-top justify-center"
+								<Checkbox
+									className="m-3 align-top justify-center"
 									checked={field.value}
 									onCheckedChange={field.onChange}
 								/>
@@ -270,17 +411,7 @@ export const EventForm: React.FC<
 						</FormItem>
 					)}
 				/>
-					<div className="flex justify-end space-x-2">
-						<Button variant="outline" type="button">
-							Abandonner
-						</Button>
-						<Button type="submit" className="bg-[#6B4EFF] hover:bg-[#5B3FEF]">
-							Sauvegarder
-						</Button>
-					</div>
 			</form>
 		</Form>
-		)
-	}
-
-
+	);
+};
--- a/frontend/components/homepage-gallery.tsx
+++ b/frontend/components/homepage-gallery.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import useMedia from "@/hooks/use-media";
+import { CarouselItem } from "./ui/carousel";
+import Image from "next/image";
+import { Loader2 } from "lucide-react";
+
+export default function HomepageGalleryItems() {
+	const {
+		data,
+		error,
+		mutate,
+		setPage,
+		success,
+		setLimit,
+		isLoading,
+		isValidating,
+	} = useMedia(20);
+
+	if (isLoading) {
+		return (
+			<div className="flex justify-center w-full h-full">
+				<Loader2 className="animate-spin" />
+			</div>
+		);
+	}
+
+	return (
+		<>
+			{data?.items.map((i) => (
+				<CarouselItem className="pl-[20px] md:max-w-[452px]">
+					<div className="w-full aspect-square" key={i.id}>
+						<img
+							src={i.url}
+							alt={i.alt}
+							className="inset-0 border rounded-sm w-full h-full object-cover"
+						/>
+					</div>
+				</CarouselItem>
+			))}
+		</>
+	);
+}
--- a/frontend/components/nav-bar.tsx
+++ b/frontend/components/nav-bar.tsx
@@ -128,6 +128,18 @@ const Navbar = () => {
 							>
 								A propos
 							</a>
+							<a
+								className={cn(
+									"text-muted-foreground",
+									navigationMenuTriggerStyle,
+									buttonVariants({
+										variant: "ghost",
+									}),
+								)}
+								href="/gallery"
+							>
+								Gallerie
+							</a>
 							<a
 								className={cn(
 									"text-muted-foreground",
@@ -144,13 +156,33 @@ const Navbar = () => {
 					</div>
 					<div className="flex gap-2 animate-in ease-in-out">
 						<ThemeSwitcher />
-						<Button variant="outline">
 						{cookie ? (
-								<Link href="/dashboard">Compte</Link>
-							) : (
-								<Link href="/login">Se connecter</Link>
+							<Link
+								className={cn(
+									"text-muted-foreground",
+									navigationMenuTriggerStyle,
+									buttonVariants({
+										variant: "outline",
+									}),
+								)}
+								href="/dashboard"
+							>
+								Compte
+							</Link>
+						) : (
+							<Link
+								className={cn(
+									"text-muted-foreground",
+									navigationMenuTriggerStyle,
+									buttonVariants({
+										variant: "outline",
+									}),
+								)}
+								href="/login"
+							>
+								Se connecter
+							</Link>
 						)}
-						</Button>
 						{cookie ? (
 							<Button
 								onClick={() => {
@@ -219,6 +251,12 @@ const Navbar = () => {
 										>
 											À propos
 										</Link>
+										<Link
+											href="/gallery"
+											className="font-semibold"
+										>
+											Gallerie
+										</Link>
 										<Link
 											href="/blog"
 											className="font-semibold"
--- a/frontend/components/planning.tsx
+++ b/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,31 +128,38 @@ 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,
+						);
+						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),
 						);
-						try {
 						const event: Omit<ICalendarEvent, "id"> = {
 							...newEvent,
-								start: `${eventFormValues.startDate} ${eventFormValues.startTime}`,
-								end: `${eventFormValues.endDate} ${eventFormValues.endTime}`,
-								title: `${eventFormValues.title}`,
-								fullDay: eventFormValues.fullDay,
+							start: formValues.startDate.toISOString(),
+							end: formValues.endDate.toISOString(),
+							title: `${formValues.title}`,
+							fullday: formValues.fullDay,
 							rrule: rrule,
-								isVisible: eventFormValues.isVisible,
+							isVisible: formValues.isVisible,
 						};
-							const res = await request<undefined>(
-								`/events/new`,
-								{
+						const res = await request<undefined>(`/events/new`, {
 							method: "POST",
 							body: event,
 							requiresAuth: true,
 							csrfToken: false,
-								},
-							);
+						});
 						if (res.status === "Error") {
 							console.log("Error");
 						}
@@ -189,10 +167,8 @@ const Planning: React.FC<{
 							mutate?.();
 							console.log("Success");
 						}
-						} catch (e) {
-							console.log(e);
-						}
 					}}
+					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>
 					)}
--- a/frontend/hooks/use-media.tsx
+++ b/frontend/hooks/use-media.tsx
@@ -17,6 +17,9 @@ export default function useMedia(_limit: number = 20) {
 	const [limit, setLimit] = useState(_limit);
 	const res = useApi<IPaginatedResponse<Media>>(
 		`/media?page=${page}&limit=${limit}`,
+		{},
+		false,
+		false,
 	);
 	return {
 		...res,
--- a/frontend/lib/mapFrequencyToRrule.ts
+++ b/frontend/lib/mapFrequencyToRrule.ts
@@ -0,0 +1,51 @@
+// const mapRruleToFrequency = (rrule: string) => {
+//
+// 	switch (frequency) {
+// 		case "quotidien":
+// 			rrule = "FREQ=DAILY";
+// 			break;
+// 		case "hebdomadaire":
+// 			rrule = "FREQ=WEEKLY";
+// 			break;
+// 		case "mensuel":
+// 			rrule = "FREQ=MONTHLY";
+// 			break;
+// 		default:
+// 			return "";
+// 	}
+// }
+
+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;
+};
+
+export default mapFrequencyToRrule;
--- a/frontend/lib/request.ts
+++ b/frontend/lib/request.ts
@@ -12,6 +12,7 @@ export default async function request<T>(
 		cookies?: () => Promise<ReadonlyRequestCookies>;
 	} = {},
 ): Promise<ApiResponse<T>> {
+	console.log(API_URL, endpoint);
 	const { method = "GET", body, requiresAuth = true } = options;
 	const headers: Record<string, string> = {
 		"Content-Type": "application/json",