From 8d9a8cf8680c7745dec802d611b4e4c7e09c8396 Mon Sep 17 00:00:00 2001
From: Benji Grant <benjamin.grantGRA0007@gmail.com>
Date: Sun, 18 Jun 2023 13:55:44 +1000
Subject: [PATCH] Wrap event page parts in suspense

---
 frontend/src/app/[id]/EventAvailabilities.tsx | 48 ++++++++--------
 frontend/src/app/[id]/page.module.scss        |  9 +++
 frontend/src/app/[id]/page.tsx                | 57 ++++++++++++-------
 .../AvailabilityEditor/AvailabilityEditor.tsx |  6 +-
 .../AvailabilityViewer/AvailabilityViewer.tsx |  4 +-
 .../CalendarField/components/Month/Month.tsx  |  4 +-
 .../components/Weekdays/Weekdays.tsx          |  2 +-
 frontend/src/components/Copyable/Copyable.tsx |  9 ++-
 .../components/EventInfo/EventInfo.tsx        |  2 +-
 .../src/components/Error/Error.module.scss    |  6 ++
 frontend/src/components/Footer/Footer.tsx     |  2 +-
 frontend/src/components/Legend/Legend.tsx     |  2 +-
 .../src/components/Login/Login.module.scss    |  5 +-
 frontend/src/components/Login/Login.tsx       |  4 +-
 frontend/src/components/Settings/Settings.tsx |  2 +-
 frontend/src/components/Video/Video.tsx       |  4 +-
 frontend/src/utils/calculateAvailability.ts   |  4 +-
 frontend/src/utils/calculateTable.ts          |  2 +-
 frontend/src/utils/convertTimesToDates.ts     |  2 +-
 19 files changed, 103 insertions(+), 71 deletions(-)

diff --git a/frontend/src/app/[id]/EventAvailabilities.tsx b/frontend/src/app/[id]/EventAvailabilities.tsx
index 992f48e..ddf6dfd 100644
--- a/frontend/src/app/[id]/EventAvailabilities.tsx
+++ b/frontend/src/app/[id]/EventAvailabilities.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { Trans } from 'react-i18next/TransWithoutContext'
 
 import AvailabilityEditor from '/src/components/AvailabilityEditor/AvailabilityEditor'
@@ -20,17 +20,16 @@ import { calculateTable, expandTimes, makeClass } from '/src/utils'
 import styles from './page.module.scss'
 
 interface EventAvailabilitiesProps {
-  event: EventResponse
-  people: PersonResponse[]
+  event?: EventResponse
 }
 
-const EventAvailabilities = ({ event, ...data }: EventAvailabilitiesProps) => {
+const EventAvailabilities = ({ event }: EventAvailabilitiesProps) => {
   const { t, i18n } = useTranslation('event')
 
   const timeFormat = useStore(useSettingsStore, state => state.timeFormat) ?? '12h'
 
-  const [people, setPeople] = useState(data.people)
-  const expandedTimes = useMemo(() => expandTimes(event.times), [event.times])
+  const [people, setPeople] = useState<PersonResponse[]>([])
+  const expandedTimes = useMemo(() => expandTimes(event?.times ?? []), [event?.times])
 
   const [user, setUser] = useState<PersonResponse>()
   const [password, setPassword] = useState<string>()
@@ -39,40 +38,40 @@ const EventAvailabilities = ({ event, ...data }: EventAvailabilitiesProps) => {
   const [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone)
 
   // Web worker for calculating the heatmap table
-  const tableWorker = useMemo(() => (typeof window !== undefined && window.Worker) ? new Worker(new URL('/src/workers/calculateTable', import.meta.url)) : undefined, [])
+  const tableWorker = useRef<Worker>()
 
   // Calculate table (using a web worker if available)
   const [table, setTable] = useState<ReturnType<typeof calculateTable>>()
 
   useEffect(() => {
+    if (!tableWorker.current) {
+      tableWorker.current = window.Worker ? new Worker(new URL('/src/workers/calculateTable', import.meta.url)) : undefined
+    }
     const args = { times: expandedTimes, locale: i18n.language, timeFormat, timezone }
-    if (tableWorker) {
-      tableWorker.postMessage(args)
+    if (tableWorker.current) {
+      tableWorker.current.onmessage = (e: MessageEvent<ReturnType<typeof calculateTable>>) => setTable(e.data)
+      tableWorker.current.postMessage(args)
       setTable(undefined)
     } else {
       setTable(calculateTable(args))
     }
-  }, [tableWorker, expandedTimes, i18n.language, timeFormat, timezone])
-
-  useEffect(() => {
-    if (tableWorker) {
-      tableWorker.onmessage = (e: MessageEvent<ReturnType<typeof calculateTable>>) => setTable(e.data)
-    }
-  }, [tableWorker])
+  }, [expandedTimes, i18n.language, timeFormat, timezone])
 
   // Add this event to recents
   const addRecent = useRecentsStore(state => state.addRecent)
   useEffect(() => {
-    addRecent({
-      id: event.id,
-      name: event.name,
-      created_at: event.created_at,
-    })
+    if (event) {
+      addRecent({
+        id: event.id,
+        name: event.name,
+        created_at: event.created_at,
+      })
+    }
   }, [addRecent])
 
   // Refetch availabilities
   useEffect(() => {
-    if (tab === 'group') {
+    if (tab === 'group' && event) {
       getPeople(event.id)
         .then(setPeople)
         .catch(console.warn)
@@ -82,7 +81,7 @@ const EventAvailabilities = ({ event, ...data }: EventAvailabilitiesProps) => {
   return <>
     <Section id="login">
       <Content>
-        <Login eventId={event.id} user={user} onChange={(u, p) => {
+        <Login eventId={event?.id} user={user} onChange={(u, p) => {
           setUser(u)
           setPassword(p)
           setTab(u ? 'you' : 'group')
@@ -148,7 +147,7 @@ const EventAvailabilities = ({ event, ...data }: EventAvailabilitiesProps) => {
               document.dispatchEvent(new CustomEvent('focusName'))
             }
           }}
-          title={user ? '' : t<string>('tabs.you_tooltip')}
+          title={user ? '' : t('tabs.you_tooltip')}
         >{t('tabs.you')}</button>
         <button
           className={makeClass(
@@ -170,6 +169,7 @@ const EventAvailabilities = ({ event, ...data }: EventAvailabilitiesProps) => {
       timezone={timezone}
       value={user.availability}
       onChange={availability => {
+        if (!event) return
         const oldAvailability = [...user.availability]
         setUser({ ...user, availability })
         updatePerson(event.id, user.name, { availability }, password)
diff --git a/frontend/src/app/[id]/page.module.scss b/frontend/src/app/[id]/page.module.scss
index f5938be..e5e5a1a 100644
--- a/frontend/src/app/[id]/page.module.scss
+++ b/frontend/src/app/[id]/page.module.scss
@@ -69,3 +69,12 @@
   opacity: .5;
   cursor: not-allowed;
 }
+
+.bone {
+  width: 12em;
+  max-width: 100%;
+  background-color: var(--loading);
+  border-radius: 3px;
+  height: 1em;
+  display: inline-block;
+}
diff --git a/frontend/src/app/[id]/page.tsx b/frontend/src/app/[id]/page.tsx
index 34d01a8..44b18f1 100644
--- a/frontend/src/app/[id]/page.tsx
+++ b/frontend/src/app/[id]/page.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from 'react'
 import { Trans } from 'react-i18next/TransWithoutContext'
 import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
@@ -5,7 +6,7 @@ import { Temporal } from '@js-temporal/polyfill'
 
 import Content from '/src/components/Content/Content'
 import Copyable from '/src/components/Copyable/Copyable'
-import { getEvent, getPeople } from '/src/config/api'
+import { EventResponse, getEvent } from '/src/config/api'
 import { useTranslation } from '/src/i18n/server'
 import { makeClass, relativeTimeFormat } from '/src/utils'
 
@@ -26,30 +27,44 @@ export const generateMetadata = async ({ params }: PageProps): Promise<Metadata>
 }
 
 const Page = async ({ params }: PageProps) => {
-  const event = await getEvent(params.id).catch(() => undefined)
-  const people = await getPeople(params.id).catch(() => undefined)
-  if (!event || !people) notFound()
-
-  const { t, i18n } = await useTranslation(['common', 'event'])
+  const event = getEvent(params.id)
 
   return <>
-    <Content>
-      <h1 className={styles.name}>{event.name}</h1>
-      <span
-        className={styles.date}
-        title={Temporal.Instant.fromEpochSeconds(event.created_at).toLocaleString(i18n.language, { dateStyle: 'long' })}
-      >{t('common:created', { date: relativeTimeFormat(Temporal.Instant.fromEpochSeconds(event.created_at), i18n.language) })}</span>
+    <Suspense
+      fallback={<Content>
+        <h1 className={styles.name}><span className={styles.bone} /></h1>
+        <div className={styles.date}><span className={styles.bone} /></div>
+        <div className={styles.info}><span className={styles.bone} style={{ width: '20em' }} /></div>
+        <div className={styles.info}><span className={styles.bone} style={{ width: '20em' }} /></div>
+      </Content>}
+    >
+      <EventMeta event={event} />
+    </Suspense>
 
-      <Copyable className={styles.info}>
-        {`https://crab.fit/${event.id}`}
-      </Copyable>
-      <p className={makeClass(styles.info, styles.noPrint)}>
-        <Trans i18nKey="event:nav.shareinfo" t={t} i18n={i18n}>_<a href={`mailto:?subject=${encodeURIComponent(t<string>('event:nav.email_subject', { event_name: event.name }))}&body=${encodeURIComponent(`${t('event:nav.email_body')} https://crab.fit/${event.id}`)}`}>_</a>_</Trans>
-      </p>
-    </Content>
-
-    <EventAvailabilities event={event} people={people} />
+    <EventAvailabilities event={await event.catch(() => undefined)} />
   </>
 }
 
+const EventMeta = async (props: { event: Promise<EventResponse> }) => {
+  const event = await props.event.catch(() => undefined)
+  if (!event) notFound()
+
+  const { t, i18n } = await useTranslation(['common', 'event'])
+
+  return <Content>
+    <h1 className={styles.name}>{event.name}</h1>
+    <span
+      className={styles.date}
+      title={Temporal.Instant.fromEpochSeconds(event.created_at).toLocaleString(i18n.language, { dateStyle: 'long' })}
+    >{t('common:created', { date: relativeTimeFormat(Temporal.Instant.fromEpochSeconds(event.created_at), i18n.language) })}</span>
+
+    <Copyable className={styles.info}>
+      {`https://crab.fit/${event.id}`}
+    </Copyable>
+    <p className={makeClass(styles.info, styles.noPrint)}>
+      <Trans i18nKey="event:nav.shareinfo" t={t} i18n={i18n}>_<a href={`mailto:?subject=${encodeURIComponent(t('event:nav.email_subject', { event_name: event.name }))}&body=${encodeURIComponent(`${t('event:nav.email_body')} https://crab.fit/${event.id}`)}`}>_</a>_</Trans>
+    </p>
+  </Content>
+}
+
 export default Page
diff --git a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
index a3adcc9..5b6ba8f 100644
--- a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
+++ b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
@@ -65,7 +65,7 @@ const AvailabilityEditor = ({ times, timezone, value = [], onChange, table }: Av
         <Button isSmall onClick={selectInvert} title="Ctrl + I (⌘ I)">{t('you.select_invert')}</Button>
       </div>
     </Content>
-    {times[0].length === 13 && <Content>
+    {times[0]?.length === 13 && <Content>
       <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
         <GoogleCalendar
           timezone={timezone}
@@ -106,7 +106,7 @@ const AvailabilityEditor = ({ times, timezone, value = [], onChange, table }: Av
                   if (!cell) return <div
                     className={makeClass(viewerStyles.timeSpace, viewerStyles.grey)}
                     key={y}
-                    title={t<string>('greyed_times')}
+                    title={t('greyed_times')}
                   />
 
                   const isSelected = (
@@ -162,7 +162,7 @@ const AvailabilityEditor = ({ times, timezone, value = [], onChange, table }: Av
                 })}
               </div>
             </div> : <div className={viewerStyles.columnSpacer} />}
-          </Fragment>) ?? <Skeleton isSpecificDates={times[0].length === 13} />}
+          </Fragment>) ?? <Skeleton isSpecificDates={times[0]?.length === 13} />}
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
index eee8bad..05f31e1 100644
--- a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
+++ b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
@@ -70,7 +70,7 @@ const AvailabilityViewer = ({ times, people, table }: AvailabilityViewerProps) =
           if (!cell) return <div
             className={makeClass(styles.timeSpace, styles.grey)}
             key={y}
-            title={t<string>('greyed_times')}
+            title={t('greyed_times')}
           />
 
           let peopleHere = availabilities.find(a => a.date === cell.serialized)?.people ?? []
@@ -106,7 +106,7 @@ const AvailabilityViewer = ({ times, people, table }: AvailabilityViewerProps) =
         })}
       </div>
     </div> : <div className={styles.columnSpacer} />}
-  </Fragment>) ?? <Skeleton isSpecificDates={times[0].length === 13} />, [
+  </Fragment>) ?? <Skeleton isSpecificDates={times[0]?.length === 13} />, [
     availabilities,
     table?.columns,
     highlight,
diff --git a/frontend/src/components/CalendarField/components/Month/Month.tsx b/frontend/src/components/CalendarField/components/Month/Month.tsx
index e6ceeef..ed570d8 100644
--- a/frontend/src/components/CalendarField/components/Month/Month.tsx
+++ b/frontend/src/components/CalendarField/components/Month/Month.tsx
@@ -55,13 +55,13 @@ const Month = ({ value, onChange }: MonthProps) => {
   return <>
     {useMemo(() => <div className={styles.header}>
       <Button
-        title={t<string>('form.dates.tooltips.previous')}
+        title={t('form.dates.tooltips.previous')}
         onClick={() => setPage(page.subtract({ months: 1 }))}
         icon={<ChevronLeft />}
       />
       <span>{page.toPlainDate({ day: 1 }).toLocaleString(i18n.language, { month: 'long', year: 'numeric' })}</span>
       <Button
-        title={t<string>('form.dates.tooltips.next')}
+        title={t('form.dates.tooltips.next')}
         onClick={() => setPage(page.add({ months: 1 }))}
         icon={<ChevronRight />}
       />
diff --git a/frontend/src/components/CalendarField/components/Weekdays/Weekdays.tsx b/frontend/src/components/CalendarField/components/Weekdays/Weekdays.tsx
index 20497af..4e88902 100644
--- a/frontend/src/components/CalendarField/components/Weekdays/Weekdays.tsx
+++ b/frontend/src/components/CalendarField/components/Weekdays/Weekdays.tsx
@@ -56,7 +56,7 @@ const Weekdays = ({ value, onChange }: WeekdaysProps) => {
           ) && styles.selected,
         )}
         key={day.toString()}
-        title={day.equals(Temporal.Now.plainDateISO()) ? t<string>('form.dates.tooltips.today') : undefined}
+        title={day.equals(Temporal.Now.plainDateISO()) ? t('form.dates.tooltips.today') : undefined}
         onKeyDown={e => {
           if (e.key === ' ' || e.key === 'Enter') {
             if (value.includes(day.dayOfWeek.toString())) {
diff --git a/frontend/src/components/Copyable/Copyable.tsx b/frontend/src/components/Copyable/Copyable.tsx
index d3bce21..aa14220 100644
--- a/frontend/src/components/Copyable/Copyable.tsx
+++ b/frontend/src/components/Copyable/Copyable.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { useTranslation } from '/src/i18n/client'
 import { makeClass } from '/src/utils'
@@ -16,6 +16,9 @@ const Copyable = ({ children, className, ...props }: CopyableProps) => {
 
   const [copied, setCopied] = useState<React.ReactNode>()
 
+  const [canCopy, setCanCopy] = useState(false)
+  useEffect(() => { setCanCopy('clipboard' in navigator) }, [])
+
   return <p
     onClick={() => navigator.clipboard?.writeText(children)
       .then(() => {
@@ -24,8 +27,8 @@ const Copyable = ({ children, className, ...props }: CopyableProps) => {
       })
       .catch(e => console.error('Failed to copy', e))
     }
-    title={'clipboard' in navigator ? t<string>('nav.title') : undefined}
-    className={makeClass(className, 'clipboard' in navigator && styles.copyable)}
+    title={canCopy ? t('nav.title') : undefined}
+    className={makeClass(className, canCopy && styles.copyable)}
     {...props}
   >{copied ?? children}</p>
 }
diff --git a/frontend/src/components/CreateForm/components/EventInfo/EventInfo.tsx b/frontend/src/components/CreateForm/components/EventInfo/EventInfo.tsx
index e589cb6..4376001 100644
--- a/frontend/src/components/CreateForm/components/EventInfo/EventInfo.tsx
+++ b/frontend/src/components/CreateForm/components/EventInfo/EventInfo.tsx
@@ -19,7 +19,7 @@ const EventInfo = ({ event }: EventInfoProps) => {
       {`https://crab.fit/${event.id}`}
     </Copyable>
     <p className={styles.info}>
-      <Trans i18nKey="event:nav.shareinfo_alt" t={t} i18n={i18n}>_<a href={`mailto:?subject=${encodeURIComponent(t<string>('nav.email_subject', { event_name: event.name }))}&body=${encodeURIComponent(`${t('nav.email_body')} https://crab.fit/${event.id}`)}`} target="_blank">_</a>_</Trans>
+      <Trans i18nKey="event:nav.shareinfo_alt" t={t} i18n={i18n}>_<a href={`mailto:?subject=${encodeURIComponent(t('nav.email_subject', { event_name: event.name }))}&body=${encodeURIComponent(`${t('nav.email_body')} https://crab.fit/${event.id}`)}`} target="_blank">_</a>_</Trans>
     </p>
   </div>
 }
diff --git a/frontend/src/components/Error/Error.module.scss b/frontend/src/components/Error/Error.module.scss
index 0a9e38f..5057cea 100644
--- a/frontend/src/components/Error/Error.module.scss
+++ b/frontend/src/components/Error/Error.module.scss
@@ -39,4 +39,10 @@
   justify-content: center;
   margin-left: 16px;
   padding: 0;
+  border-radius: .2em;
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
 }
diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
index 2a668af..7f7d690 100644
--- a/frontend/src/components/Footer/Footer.tsx
+++ b/frontend/src/components/Footer/Footer.tsx
@@ -23,7 +23,7 @@ const Footer = async ({ isSmall }: FooterProps) => {
     <span>{t('donate.info')}</span>
     <Button
       isSmall
-      title={t<string>('donate.title')}
+      title={t('donate.title')}
       href="https://ko-fi.com/A06841WZ"
       target="_blank"
       rel="noreferrer noopener payment"
diff --git a/frontend/src/components/Legend/Legend.tsx b/frontend/src/components/Legend/Legend.tsx
index efbeae8..218f8cd 100644
--- a/frontend/src/components/Legend/Legend.tsx
+++ b/frontend/src/components/Legend/Legend.tsx
@@ -24,7 +24,7 @@ const Legend = ({ min, max, total, palette, onSegmentFocus }: LegendProps) => {
       className={styles.bar}
       onMouseOut={() => onSegmentFocus(undefined)}
       onClick={() => setHighlight?.(!highlight)}
-      title={t<string>('group.legend_tooltip')}
+      title={t('group.legend_tooltip')}
     >
       {[...Array(max + 1 - min).keys()].map(i => i + min).map((i, j) =>
         <div
diff --git a/frontend/src/components/Login/Login.module.scss b/frontend/src/components/Login/Login.module.scss
index 307631c..0717c02 100644
--- a/frontend/src/components/Login/Login.module.scss
+++ b/frontend/src/components/Login/Login.module.scss
@@ -5,13 +5,10 @@
   grid-gap: 18px;
 
   @media (max-width: 500px) {
-    grid-template-columns: 1fr 1fr;
-  }
-  @media (max-width: 400px) {
     grid-template-columns: 1fr;
 
     & div:last-child {
-      --btn-width: 100%;
+      width: 100%;
     }
   }
 }
diff --git a/frontend/src/components/Login/Login.tsx b/frontend/src/components/Login/Login.tsx
index 8aa64ff..c3178ec 100644
--- a/frontend/src/components/Login/Login.tsx
+++ b/frontend/src/components/Login/Login.tsx
@@ -15,7 +15,7 @@ const defaultValues = {
 }
 
 interface LoginProps {
-  eventId: string
+  eventId?: string
   user: PersonResponse | undefined
   onChange: (user: PersonResponse | undefined, password?: string) => void
 }
@@ -50,6 +50,8 @@ const Login = ({ eventId, user, onChange }: LoginProps) => {
     setError(undefined)
 
     try {
+      if (!eventId) throw 'Event ID not set'
+
       const resUser = await getPerson(eventId, username, password || undefined)
       onChange(resUser, password || undefined)
       reset()
diff --git a/frontend/src/components/Settings/Settings.tsx b/frontend/src/components/Settings/Settings.tsx
index 884e5c5..183e39f 100644
--- a/frontend/src/components/Settings/Settings.tsx
+++ b/frontend/src/components/Settings/Settings.tsx
@@ -56,7 +56,7 @@ const Settings = () => {
       type="button"
       className={makeClass(styles.openButton, isOpen && styles.open)}
       onClick={() => setIsOpen(!isOpen)}
-      title={t<string>('options.name')}
+      title={t('options.name')}
     ><SettingsIcon /></button>
 
     <dialog
diff --git a/frontend/src/components/Video/Video.tsx b/frontend/src/components/Video/Video.tsx
index 902f77e..9089662 100644
--- a/frontend/src/components/Video/Video.tsx
+++ b/frontend/src/components/Video/Video.tsx
@@ -17,7 +17,7 @@ const Video = () => {
         width="560"
         height="315"
         src="https://www.youtube.com/embed/yXGd4VXZzcY?modestbranding=1&rel=0&autoplay=1"
-        title={t<string>('video.title')}
+        title={t('video.title')}
         frameBorder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
         allowFullScreen
@@ -34,7 +34,7 @@ const Video = () => {
         setIsPlaying(true)
       }}
     >
-      <img src={video_thumb.src} alt={t<string>('video.button')} />
+      <img src={video_thumb.src} alt={t('video.button')} />
       <span>{t('video.button')}</span>
     </a>
   )
diff --git a/frontend/src/utils/calculateAvailability.ts b/frontend/src/utils/calculateAvailability.ts
index 93b4b01..67286f3 100644
--- a/frontend/src/utils/calculateAvailability.ts
+++ b/frontend/src/utils/calculateAvailability.ts
@@ -23,8 +23,8 @@ interface AvailabilityInfo {
  * group availability for each date passed in.
  */
 export const calculateAvailability = (dates: string[], people: Person[]): AvailabilityInfo => {
-  let min = Infinity
-  let max = -Infinity
+  let min = 0
+  let max = people.length
 
   const availabilities: Availability[] = dates.map(date => {
     const names = people.flatMap(p => p.availability.some(d => d === date) ? [p.name] : [])
diff --git a/frontend/src/utils/calculateTable.ts b/frontend/src/utils/calculateTable.ts
index b2358c4..500734c 100644
--- a/frontend/src/utils/calculateTable.ts
+++ b/frontend/src/utils/calculateTable.ts
@@ -26,7 +26,7 @@ export const calculateTable = ({
   const columns = calculateColumns(dates)
 
   // Is specific dates or just days of the week
-  const isSpecificDates = times[0].length === 13
+  const isSpecificDates = times[0]?.length === 13
 
   return {
     rows: rows.map(row => row && row.minute === 0 ? {
diff --git a/frontend/src/utils/convertTimesToDates.ts b/frontend/src/utils/convertTimesToDates.ts
index a0064ff..62dc505 100644
--- a/frontend/src/utils/convertTimesToDates.ts
+++ b/frontend/src/utils/convertTimesToDates.ts
@@ -6,7 +6,7 @@ import { Temporal } from '@js-temporal/polyfill'
  * @param timezone The target timezone
  */
 export const convertTimesToDates = (times: string[], timezone: string): Temporal.ZonedDateTime[] => {
-  const isSpecificDates = times[0].length === 13
+  const isSpecificDates = times[0]?.length === 13
 
   return times.map(time => isSpecificDates ?
     parseSpecificDate(time).withTimeZone(timezone)