Update calendar view (#44)

Co-authored-by: Luc <[email protected]>

Author: sumeyacodes

web/package.json

@@ -47,6 +47,7 @@
         "cx": "^25.3.1",
         "date-fns": "^4.1.0",
         "eslint-config-prettier": "^10.1.2",
+        "html-react-parser": "^5.2.5",
         "leaflet": "^1.9.4",
         "openapi-hooks": "0.0.6",
         "postcss": "^8.5.1",

web/pnpm-lock.yaml

@@ -0,0 +1,67 @@
+import { format, isToday, isTomorrow, parseISO } from 'date-fns';
+import { FC } from 'react';
+
+import { CalendarEvent } from '@/api/events';
+
+import { MeetingCard } from './Meetings';
+
+const DayHeader: FC<{ date: string }> = ({ date }) => {
+    let prefix = format(date, 'MMM d');
+
+    if (isToday(date)) prefix = 'Today';
+
+    if (isTomorrow(date)) prefix = 'Tomorrow';
+
+    return (
+        <h2 className="text-base text-primary py-2 mt-2 inline-block">
+            <span className="font-semibold">{prefix} </span>
+            <span className="font-normal text-primary/70">{format(date, 'EEEE')}</span>
+        </h2>
+    );
+};
+
+export const CalendarDays: FC<{ data: CalendarEvent[] }> = ({ data }) => {
+    const groupedDays = Object.values(
+        data.reduce(
+            (day, event) => {
+                if (!event.start) return day;
+
+                const date = parseISO(event.start).toDateString();
+
+                if (!day[date]) {
+                    day[date] = { date, events: [] };
+                }
+
+                day[date].events.push(event);
+
+                return day;
+            },
+            {} as Record<string, { date: string; events: CalendarEvent[] }>
+        )
+    );
+
+    return (
+        <div>
+            {groupedDays.map(({ date, events }) => (
+                <div key={date} className="flex gap-1">
+                    {/* timeline */}
+                    <div className="relative flex flex-col items-center pl-3 pr-3">
+                        <div className="absolute top-6 h-2 w-2 rounded-full bg-grey" />
+                        <div className="absolute top-6 h-full border-r border-dashed border-primary" />
+                    </div>
+
+                    <div className="flex-1">
+                        <DayHeader date={date} />
+
+                        {/* meeting cards */}
+                        <div className="space-y-3 pb-1">
+                            {events.map((event) => (
+                                <MeetingCard key={`${event.uid}-${event.start}`} event={event} />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+};