feat: show my bookings on music room page in green color

one-zero-eight · Feb 17, 2024 · fd1aa90 · fd1aa90
1 parent 884e5e7
commit fd1aa90
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/app/music-room/page.tsx b/app/music-room/page.tsx
@@ -92,7 +92,13 @@ export default function Page() {
       <h2 className="my-4 text-3xl font-medium">Booking calendar</h2>
       <div className="lg:-mx-8">
         <Calendar
-          urls={[`${EVENTS_API_URL}/music-room.ics`]}
+          urls={[
+            `${EVENTS_API_URL}/music-room.ics`,
+            {
+              url: `${EVENTS_API_URL}/users/me/music-room.ics`,
+              color: "seagreen",
+            },
+          ]}
           initialView="timeGridWeek"
           viewId="music-room"
         />

diff --git a/components/common/calendar/Calendar.tsx b/components/common/calendar/Calendar.tsx
@@ -12,13 +12,20 @@ import { useEffect, useMemo, useState } from "react";
 import { useLocalStorage } from "usehooks-ts";
 import iCalendarPlugin from "./iCalendarPlugin";
 
+export type URLType =
+  | string
+  | {
+      url: string;
+      color?: string;
+    };
+
 function Calendar({
   urls,
   initialView = "listMonth",
   viewId = "",
   ...props
 }: {
-  urls: string[];
+  urls: URLType[];
   initialView?: string;
   viewId?: string;
 }) {
@@ -39,13 +46,25 @@ function Calendar({
   const calendar = useMemo(
     () => (
       <FullCalendar
-        eventSources={urls.map((url) => ({ url: url, format: "ics" }))} // Load events by url
+        eventSources={urls.map((url) =>
+          typeof url === "string"
+            ? {
+                url: url,
+                format: "ics",
+              }
+            : {
+                url: url.url,
+                format: "ics",
+                color: url.color,
+              },
+        )} // Load events by url
         eventsSet={(events) => {
           // Remove duplicates.
           // Accumulate 'extendedProps.calendarURLs' to use it later.
           const unique: Record<string, EventApi> = {};
           for (const event of events) {
-            const uniqueId = event.title + event.startStr + event.endStr;
+            const uniqueId =
+              event.id || event.title + event.startStr + event.endStr;
             if (!(uniqueId in unique)) {
               unique[uniqueId] = event;
             } else {

diff --git a/components/common/calendar/iCalendarPlugin/event-source-def.ts b/components/common/calendar/iCalendarPlugin/event-source-def.ts
@@ -13,6 +13,7 @@ interface ICalFeedMeta {
   url: string;
   format: "ics"; // for EventSourceApi
   internalState?: InternalState; // HACK. TODO: use classes in future
+  color: string; // Default color for events from this feed
 }
 
 interface InternalState {
@@ -26,6 +27,7 @@ export const eventSourceDef: EventSourceDef<ICalFeedMeta> = {
       return {
         url: refined.url,
         format: "ics",
+        color: refined.color,
       };
     }
     return null;
@@ -118,7 +120,7 @@ function buildNonDateProps(
     id: iCalEvent.uid,
     title: iCalEvent.summary,
     url: extractEventUrl(iCalEvent),
-    color: iCalEvent.color,
+    color: iCalEvent.color || meta.color,
     extendedProps: {
       location: iCalEvent.location,
       organizer: iCalEvent.organizer,