refactored event list

Author: marcus-wishes

library/src/components/EventList.tsx

@@ -1,9 +1,12 @@
 import { useMemo } from "react"
 import type { Dayjs } from "dayjs"
-import { type DateType, DateUtils, type TimeType } from "../utils"
+import { twMerge } from "tailwind-merge"
+import type { TimeType } from "../utils"
 
 export interface EventObject {
 	key: string
+	title?: string
+	subtitle?: string
 	startDate: Dayjs | undefined
 	endDate: Dayjs | undefined
 }
@@ -20,24 +23,29 @@ export interface EventListProps<T extends EventObject> {
 	maxEndTime: Dayjs
 	dayStart: TimeType
 	dayEnd: TimeType
-	renderEvent: (
+	renderEvent?: (
 		event: T,
 		startDate?: Dayjs,
 		endDate?: Dayjs,
 	) => React.JSX.Element
-	renderTimeHeader?: (dateString: string) => React.JSX.Element
+	renderTimeHeader?: (date: Dayjs) => React.JSX.Element
+	className?: string
+	style?: React.CSSProperties
 }
 
 function useOrderByDateBookings<T extends EventObject>(
 	items: T[],
-	minStartTime: Dayjs,
+	_minStartTime: Dayjs,
 	maxEndTime: Dayjs,
 	dayStart: TimeType,
 	dayEnd: TimeType,
 ) {
 	return useMemo(() => {
 		const dayStartTime = dayStart.split(":").map(Number)
 		const dayEndTime = dayEnd.split(":").map(Number)
+		const minStartTime = _minStartTime
+			.set("hour", dayStartTime[0])
+			.set("minute", dayStartTime[1])
 
 		const withinTimeRange = (items as T[]).filter((it) => {
 			if (!it.endDate) return true
@@ -53,26 +61,34 @@ function useOrderByDateBookings<T extends EventObject>(
 			)
 		})
 
-		const datesMap: {
-			[date: DateType]: EventWrapper<T>[]
-		} = {}
+		const datesMap: Map<Dayjs, EventWrapper<T>[]> = new Map()
+		let currentStartDate = minStartTime
 		for (const it of sortedItems) {
 			let startDate = it.startDate ?? minStartTime
 			const endDate = it.endDate ?? maxEndTime
+			if (startDate.isBefore(minStartTime)) {
+				startDate = minStartTime
+			}
 
 			const timelineStartDay = startDate
 				.hour(dayStartTime[0])
 				.minute(dayStartTime[1])
 
 			while (startDate.isBefore(endDate)) {
-				const dt = DateUtils.toDateType(startDate)
+				//const dt = DateUtils.toDateType(startDate)
+				const startOfDay = startDate
+					.hour(dayStartTime[0])
+					.minute(dayStartTime[1])
+				if (!startOfDay.isSame(currentStartDate)) {
+					currentStartDate = startDate.add(1, "day")
+				}
 				const bookingOfThisDay = {
 					booking: it,
 					renderStartDate: startDate,
 					renderEndDate: endDate,
 				}
 
-				if (it.startDate?.isBefore(timelineStartDay) === true) {
+				if (it.startDate?.isBefore(timelineStartDay)) {
 					bookingOfThisDay.renderStartDate = startDate
 						.hour(dayStartTime[0])
 						.minute(dayStartTime[1])
@@ -88,12 +104,15 @@ function useOrderByDateBookings<T extends EventObject>(
 				if (!it.endDate || currEndDate.isBefore(it.endDate)) {
 					bookingOfThisDay.renderEndDate = currEndDate
 				}
-				datesMap[dt] = [...(datesMap[dt] ?? []), bookingOfThisDay]
+				datesMap.set(currentStartDate, [
+					...(datesMap.get(currentStartDate) ?? []),
+					bookingOfThisDay,
+				])
 				startDate = startDate.add(1, "day")
 			}
 		}
 		return datesMap
-	}, [items, dayEnd, dayStart, maxEndTime, minStartTime])
+	}, [items, dayEnd, dayStart, maxEndTime, _minStartTime])
 }
 
 const dateFormat = Intl.DateTimeFormat(undefined, {
@@ -103,47 +122,82 @@ const dateFormat = Intl.DateTimeFormat(undefined, {
 	year: "numeric",
 })
 
+function defaultRenderEvent<T extends EventObject>(
+	booking: T,
+	startDate: Dayjs | undefined,
+	endDate: Dayjs | undefined,
+) {
+	return (
+		<div
+			data-id={booking.key}
+			className="flex justify-between py-1 cursor-pointer border-solid border-l-8 border-l-border-bold overflow-hidden bg-surface-sunken"
+		>
+			<div className="flex pl-2.5 flex-col overflow-hidden">
+				<div className="text-text-subtle text-xl flex-0 truncate">
+					<span>{booking.title ?? "no title"}</span>
+				</div>
+				{booking.subtitle && (
+					<div className="text-text-subtle text-sm flex-0 truncate">
+						<span>{booking.subtitle}</span>
+					</div>
+				)}
+				<div className="text-text">
+					{startDate?.format("HH:mm")} - {endDate?.format("HH:mm")}
+				</div>
+			</div>
+		</div>
+	)
+}
+
 export function EventList<T extends EventObject>({
 	items,
-	renderEvent,
+	renderEvent = defaultRenderEvent,
 	renderTimeHeader,
 	minStartTime,
 	maxEndTime,
 	dayStart,
 	dayEnd,
+	className,
+	style,
 }: EventListProps<T>) {
-	const datesMap: { [p: DateType]: EventWrapper<T>[] } =
-		useOrderByDateBookings(
-			items,
-			minStartTime,
-			maxEndTime,
-			dayStart || "00:00",
-			dayEnd || "00:00",
-		)
+	const datesMap: Map<Dayjs, EventWrapper<T>[]> = useOrderByDateBookings(
+		items,
+		minStartTime,
+		maxEndTime,
+		dayStart || "00:00",
+		dayEnd || "00:00",
+	)
 
-	return (
-		<div className="min-h-0 overflow-auto">
-			{Object.entries(datesMap).map(([date, eventObjects]) => {
-				const dateStr = dateFormat.format(
-					DateUtils.dateFromString(date, true),
-				)
-				return (
-					<div key={date}>
+	const content = useMemo(() => {
+		const content: JSX.Element[] = []
+		for (const [date, eventObjects] of datesMap) {
+			const dateStr = dateFormat.format(date.toDate())
+			content.push(
+				<div key={dateStr} className="mt-4 first:mt-0">
+					<div className="text-text-subtle text-sm flex items-center font-bold mt-4">
 						{renderTimeHeader ? renderTimeHeader(date) : dateStr}
-						<div className="flex flex-1 flex-col gap-1">
-							{eventObjects.map(
-								(eventObject: EventWrapper<T>) => {
-									return renderEvent(
-										eventObject.booking,
-										eventObject.renderStartDate,
-										eventObject.renderEndDate,
-									)
-								},
-							)}
-						</div>
 					</div>
-				)
-			})}
+					<div className="flex flex-1 flex-col gap-1">
+						{eventObjects.map((eventObject: EventWrapper<T>) => {
+							return renderEvent(
+								eventObject.booking,
+								eventObject.renderStartDate,
+								eventObject.renderEndDate,
+							)
+						})}
+					</div>
+				</div>,
+			)
+		}
+		return content
+	}, [datesMap, renderTimeHeader, renderEvent])
+
+	return (
+		<div
+			className={twMerge("min-h-0 overflow-auto", className)}
+			style={style}
+		>
+			{content}
 		</div>
 	)
 }