fix: highlight ongoing parallel sessions (#50)

This correctly marks ongoing parallel sessions.

Author: coderbyheart

e2e-tests/browserWithFixedTime.ts

@@ -1,8 +1,9 @@
 import { BrowserContext, chromium } from '@playwright/test'
 import path from 'path'
-import sinon from 'sinon'
 
-export const browserWithFixedTime = async (): Promise<BrowserContext> => {
+export const browserWithFixedTime = async (
+	time?: Date,
+): Promise<BrowserContext> => {
 	const browser = await chromium.launch()
 	const context = await browser.newContext({
 		locale: 'no-NO',
@@ -14,11 +15,11 @@ export const browserWithFixedTime = async (): Promise<BrowserContext> => {
 	})
 	// Auto-enable sinon right away
 	// and enforce our "current" date
-	await context.addInitScript(() => {
-		const clock = sinon.useFakeTimers()
-		clock.setSystemTime(new Date('2022-03-11T12:00:00Z'))
-		;(window as any).__clock = clock
-	})
+	await context.addInitScript(`
+	const clock = sinon.useFakeTimers()
+		clock.setSystemTime(${(time ?? new Date('2022-03-11T12:00:00Z')).getTime()});
+		window.__clock = clock
+		`)
 
 	return context
 }

e2e-tests/highlight-ongoing-session.spec.ts

@@ -12,4 +12,18 @@ test.describe('Highlight ongoing session', () => {
 		// There should only be one highlighted row
 		await expect(page.locator('tr.ongoing')).toHaveCount(1)
 	})
+	test('highlight parallel sessions', async () => {
+		const context = await browserWithFixedTime(new Date('2022-03-11T15:00:00Z'))
+		const page = await context.newPage()
+		await page.goto('http://localhost:8080/')
+		await expect(
+			page.locator('td:has-text("Session 4") >> xpath=ancestor::tr'),
+		).toHaveClass('ongoing')
+		await expect(
+			page.locator(
+				'td:has-text("You can have sessions at the same time, too!") >> xpath=ancestor::tr',
+			),
+		).toHaveClass('ongoing')
+		await expect(page.locator('tr.ongoing')).toHaveCount(2)
+	})
 })

src/App.tsx

@@ -25,16 +25,6 @@ if (typeof window.matchMedia === 'function') {
 	defaultTheme = match.matches ? Theme.dark : Theme.light
 }
 
-export type Sessions = Record<string, string>
-
-export type Schedule = {
-	name: string
-	day: string
-	tz: string
-	sessions: Sessions
-	hidePastSessions: boolean
-}
-
 export const App = () => {
 	let cfg: Schedule = {
 		name: 'ExampleConf',

src/Editor.tsx

@@ -1,4 +1,3 @@
-import type { Sessions } from 'app/App'
 import { AddIcon, DeleteIcon } from 'app/FeatherIcons'
 import formStyles from 'app/Form.module.css'
 import { SessionName } from 'app/SessionName'

src/Schedule.tsx

@@ -1,3 +1,4 @@
+import { ongoingSessions } from 'app/ongoingSessions'
 import { SessionName } from 'app/SessionName'
 import tableStyles from 'app/Table.module.css'
 import {
@@ -99,6 +100,12 @@ export const Schedule = ({
 		}
 	}, [])
 
+	const ongoing = ongoingSessions({
+		day: conferenceDate,
+		sessions,
+		tz: eventTimezoneName,
+	})
+
 	return (
 		<table className={tableStyles.Table}>
 			<thead>
@@ -130,19 +137,10 @@ export const Schedule = ({
 							parseInt(timeWithTrackA.split('@')[0]) -
 							parseInt(timeWithTrackB.split('@')[0]),
 					)
-					.map((session, i, sessions) => {
+					.map((session) => {
 						const timeWithTrack = session[0]
-						const time = parseInt(timeWithTrack.split('@')[0])
-
-						const nextIsOngoing =
-							sessions[i + 1] !== undefined
-								? startsInMinutes(
-										userTime(sessions[i + 1][0] as unknown as number),
-								  ) < 0
-								: false
-
-						const isOngoing =
-							startsInMinutes(userTime(time)) < 0 && !nextIsOngoing
+						const time = parseInt(timeWithTrack.split('@')[0], 10)
+						const isOngoing = ongoing[session[0]] !== undefined
 						const isPast = startsInMinutes(userTime(time)) < 0 && !isOngoing
 						return { session, isPast, isOngoing }
 					})

src/ongoingSessions.spec.ts

@@ -0,0 +1,40 @@
+import { ConfDateWithSessions, ongoingSessions } from 'app/ongoingSessions'
+import { format } from 'date-fns'
+
+const makeSchedule = (now: Date): ConfDateWithSessions => ({
+	day: format(now, 'yyyy-MM-dd'),
+	tz: 'Europe/Oslo',
+	sessions: {
+		900: 'Arrival & Breakfast',
+		930: 'Opening & Marketplace',
+		1030: 'Session 1',
+		1130: 'Coffee Break',
+		1145: 'Session 2',
+		1245: 'Lunch Break',
+		1430: 'Session 3',
+		1530: 'Coffee Break',
+		1545: 'Session 4',
+		'1545@Main hall': `You can have sessions at the same time, too!`,
+		1645: 'Coffee Break',
+		1700: 'Closing & Retro',
+		1730: 'Dinner Break',
+		1900: 'Evening Activities',
+	},
+})
+
+describe('ongoingSessions()', () => {
+	it('should mark one ongoing session', () => {
+		const now = new Date('2022-03-11T13:00:00+01:00')
+		expect(ongoingSessions(makeSchedule(now), now)).toEqual({
+			1245: 'Lunch Break',
+		})
+	})
+
+	it('should mark to parallel ongoing sessions', () => {
+		const now = new Date('2022-03-11T16:00:00+01:00')
+		expect(ongoingSessions(makeSchedule(now), now)).toEqual({
+			1545: 'Session 4',
+			'1545@Main hall': `You can have sessions at the same time, too!`,
+		})
+	})
+})

src/ongoingSessions.ts

@@ -0,0 +1,52 @@
+import { toUTCTime } from 'app/toUTCTime'
+
+export type ConfDate = Pick<Schedule, 'day' | 'tz'>
+export type ConfDateWithSessions = Pick<Schedule, 'sessions'> & ConfDate
+
+const timeWithTrackToUTC = (timeWithTrack: string, schedule: ConfDate): Date =>
+	toUTCTime({
+		conferenceDate: schedule.day,
+		eventTimezoneName: schedule.tz,
+	})(parseInt(timeWithTrack.split('@')[0], 10))
+
+const isBeforeNow = (
+	[timeWithTrack]: [string, string],
+	now: Date,
+	schedule: ConfDate,
+): boolean => {
+	const time = timeWithTrackToUTC(timeWithTrack, schedule)
+	return time.getTime() < now.getTime()
+}
+
+export const ongoingSessions = (
+	schedule: ConfDateWithSessions,
+	now = new Date(),
+): Sessions => {
+	return (
+		Object.entries(schedule.sessions)
+			.sort(
+				([timeWithTrackA], [timeWithTrackB]) =>
+					parseInt(timeWithTrackA.split('@')[0]) -
+					parseInt(timeWithTrackB.split('@')[0]),
+			)
+			// Filter out future sessions
+			.filter(
+				([timeWithTrack, session]) =>
+					timeWithTrackToUTC(timeWithTrack, schedule).getTime() < now.getTime(),
+			)
+			// Check of next is ongoing
+			.filter(([timeWithTrack], i, sessions) => {
+				const time = timeWithTrackToUTC(timeWithTrack, schedule)
+				// Find the next session that does not start at the same time
+				const next = sessions.find(
+					([nextTimeWithTrack], j) =>
+						j > i &&
+						timeWithTrackToUTC(nextTimeWithTrack, schedule).getTime() >
+							time.getTime(),
+				)
+				if (next === undefined) return true // No next session found, so this one must be the last session and therefore it is ongoing
+				return !isBeforeNow(next, now, schedule)
+			})
+			.reduce((ongoing, [k, v]) => ({ ...ongoing, [k]: v }), {})
+	)
+}

src/toUTCTime.ts

@@ -0,0 +1,21 @@
+import { zonedTimeToUtc } from 'date-fns-tz'
+
+export const toUTCTime =
+	({
+		conferenceDate,
+		eventTimezoneName,
+	}: {
+		conferenceDate: string
+		eventTimezoneName: string
+	}) =>
+	(time: number): Date => {
+		const minutes = time % 100
+		const hours = (time - minutes) / 100
+		return zonedTimeToUtc(
+			`${conferenceDate} ${`${hours}`.padStart(2, '0')}:${`${minutes}`.padStart(
+				2,
+				'0',
+			)}:00.000`,
+			eventTimezoneName,
+		)
+	}

src/types.d.ts

@@ -28,3 +28,13 @@ interface ImportMeta {
 		PUBLIC_MANIFEST_BACKGROUND_COLOR: string
 	}
 }
+
+type Sessions = Record<string, string>
+
+type Schedule = {
+	name: string
+	day: string
+	tz: string
+	sessions: Sessions
+	hidePastSessions: boolean
+}

src/useIcalExport.ts

@@ -1,28 +1,7 @@
-import type { Schedule } from 'app/App'
 import { formatSessionName } from 'app/SessionName'
-import { zonedTimeToUtc } from 'date-fns-tz'
+import { toUTCTime } from 'app/toUTCTime'
 import { createEvents } from 'ics'
 
-export const toUTCTime =
-	({
-		conferenceDate,
-		eventTimezoneName,
-	}: {
-		conferenceDate: string
-		eventTimezoneName: string
-	}) =>
-	(time: number): Date => {
-		const minutes = time % 100
-		const hours = (time - minutes) / 100
-		return zonedTimeToUtc(
-			`${conferenceDate} ${`${hours}`.padStart(2, '0')}:${`${minutes}`.padStart(
-				2,
-				'0',
-			)}:00.000`,
-			eventTimezoneName,
-		)
-	}
-
 export const useIcalExport = (schedule: Schedule) => {
 	return (): void => {
 		const utcTime = toUTCTime({