From 9d6aa4c16307f2e147f32b1abf27297ba275d646 Mon Sep 17 00:00:00 2001 From: cdricms <36056008+cdricms@users.noreply.github.com> Date: Wed, 12 Feb 2025 16:51:57 +0100 Subject: [PATCH] Gallery Events still not working --- .../dashboard/settings/shortcodes/page.tsx | 2 + frontend/app/(main)/gallery/page.tsx | 106 +++ frontend/app/(main)/page.tsx | 13 +- frontend/components/event-dialog.tsx | 617 +++++++++++------- frontend/components/homepage-gallery.tsx | 43 ++ frontend/components/nav-bar.tsx | 52 +- frontend/components/planning.tsx | 208 +++--- frontend/hooks/use-media.tsx | 3 + frontend/lib/mapFrequencyToRrule.ts | 51 ++ frontend/lib/request.ts | 1 + 10 files changed, 746 insertions(+), 350 deletions(-) create mode 100644 frontend/app/(main)/gallery/page.tsx create mode 100644 frontend/components/homepage-gallery.tsx create mode 100644 frontend/lib/mapFrequencyToRrule.ts diff --git a/frontend/app/(auth)/dashboard/settings/shortcodes/page.tsx b/frontend/app/(auth)/dashboard/settings/shortcodes/page.tsx index 35daa33..c585d19 100644 --- 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("/shortcodes", undefined, true); + console.log(shortcodes); + const handleUpdate = async (updatedShortcode: IShortcode) => { const res = await request( `/shortcodes/${updatedShortcode.code}/update`, diff --git a/frontend/app/(main)/gallery/page.tsx b/frontend/app/(main)/gallery/page.tsx new file mode 100644 index 0000000..3d30a0e --- /dev/null +++ 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 ( +
+
+

Gallerie Photo

+
+ {isLoading ? ( +
+ +
+ ) : ( +
+ {data?.items.map((photo) => ( +
{}} + > + {photo.alt} +
+ ))} + ) +
+ )} + + + + { + e.preventDefault(); + setPage((prev) => Math.max(prev - 1, 1)); + }} + className={ + data?.page === 1 + ? "pointer-events-none opacity-50" + : "" + } + /> + + {[...Array(data?.totalPages)].map((_, i) => ( + + { + e.preventDefault(); + setPage(i + 1); + }} + isActive={data?.page === i + 1} + > + {i + 1} + + + ))} + + { + e.preventDefault(); + setPage((prev) => + Math.min(prev + 1, data?.totalPages ?? 1), + ); + }} + className={ + data?.page === data?.totalPages + ? "pointer-events-none opacity-50" + : "" + } + /> + + + +
+ ); +} diff --git a/frontend/app/(main)/page.tsx b/frontend/app/(main)/page.tsx index cde17a0..dcc5b3b 100644 --- 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() { + tagLine="" + cta="Voir toutes les photos" + ctaHref="/gallery" + title="Gallerie" + > + + {videos && ( +export type EventFormValues = z.infer; const frequencies = [ { label: "Unique", value: "unique" }, { label: "Quotidien", value: "quotidien" }, { label: "Hebdomadaire", value: "hebdomadaire" }, { label: "Mensuel", value: "mensuel" }, -] +]; -const isCalendarEventExternal = (event: CalendarEventExternal | Omit): event is CalendarEventExternal => { - return (event as CalendarEventExternal).id !== undefined; +const isCalendarEventExternal = ( + event: CalendarEventExternal | Omit, +): event is CalendarEventExternal => { + return (event as CalendarEventExternal).id !== undefined; }; -export const EventForm: React.FC< - { - event: ICalendarEvent | Omit; - onSubmitEvent: (eventFormValues: EventFormValues) => void; - } -> = ({ - event, - onSubmitEvent, -}) => { - - const form = useForm({ - 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()}`, - fullDay: event.fullday, - frequency: "unique", - isVisible: event.isVisible, - }, - }) +export const EventForm: React.FC<{ + event: ICalendarEvent | Omit; + 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({ + resolver: zodResolver(eventFormSchema), + defaultValues: { + title: event.title ? event.title : "", + 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); + // } + // } - return ( -
- + // 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 ( + + + ( + + Titre + + + + + + )} + /> + +
( + + Début + + + + + + + + + + + + + )} + /> + + ( - Titre - - - - - )} - /> - -
- ( - - Début - - - - - - - - - - - - - )} - /> - - ( - - - - - - - )} - /> - - Until - - ( - - Fin - - - - - - - - - - - - - )} - /> - - ( - - - - - - - )} - /> -
- - ( - - - - - Journée complète - - - )} - /> - -
- ( - - Fréquence - - - - )} - /> - - {frequency !== "unique" && ( - ( - - Jusqu'au - - - - - - - - - - - - - )} - /> - )} -
- - ( - - Evènement visible ? - - )} /> -
- - -
- - - ) - } + Until + ( + + Fin + + + + + + + + + + + + + )} + /> + + ( + + + + + + + )} + /> +
+ + ( + + + + + Journée complète + + + )} + /> + +
+ ( + + Fréquence + + + + )} + /> + + {frequency !== "unique" && ( + ( + + Jusqu'au + + + + + + + + + + + + + )} + /> + )} +
+ + ( + + + Evènement visible ? + + + + + + + )} + /> + + + ); +}; diff --git a/frontend/components/homepage-gallery.tsx b/frontend/components/homepage-gallery.tsx new file mode 100644 index 0000000..d66f0ac --- /dev/null +++ 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 ( +
+ +
+ ); + } + + return ( + <> + {data?.items.map((i) => ( + +
+ {i.alt} +
+ + ))} + + ); +} diff --git a/frontend/components/nav-bar.tsx b/frontend/components/nav-bar.tsx index d3fab0b..cd12f56 100644 --- a/frontend/components/nav-bar.tsx +++ b/frontend/components/nav-bar.tsx @@ -128,6 +128,18 @@ const Navbar = () => { > A propos + + Gallerie + {
- + {cookie ? ( + + Compte + + ) : ( + + Se connecter + + )} {cookie ? ( )} {onAdd && !onUpdate && !onDelete && ( - )} diff --git a/frontend/hooks/use-media.tsx b/frontend/hooks/use-media.tsx index bd08f88..33cecc1 100644 --- 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>( `/media?page=${page}&limit=${limit}`, + {}, + false, + false, ); return { ...res, diff --git a/frontend/lib/mapFrequencyToRrule.ts b/frontend/lib/mapFrequencyToRrule.ts new file mode 100644 index 0000000..d1ac795 --- /dev/null +++ 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; diff --git a/frontend/lib/request.ts b/frontend/lib/request.ts index de5ca8d..7f931af 100644 --- a/frontend/lib/request.ts +++ b/frontend/lib/request.ts @@ -12,6 +12,7 @@ export default async function request( cookies?: () => Promise; } = {}, ): Promise> { + console.log(API_URL, endpoint); const { method = "GET", body, requiresAuth = true } = options; const headers: Record = { "Content-Type": "application/json",