scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Wrap event page parts in suspense

Browse source
This commit is contained in:
Benji Grant 2023-06-18 13:55:44 +10:00
parent 1855188ea1
commit 8d9a8cf868
19 changed files with 103 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
frontend/src/app/[id]/EventAvailabilities.tsx
View file

@ -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)

9
frontend/src/app/[id]/page.module.scss
View file

@ -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;
}

57
frontend/src/app/[id]/page.tsx
View file

@ -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

6
frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
View file

@ -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>

4
frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
View file

@ -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,

4
frontend/src/components/CalendarField/components/Month/Month.tsx
View file

@ -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 />}
/>

2
frontend/src/components/CalendarField/components/Weekdays/Weekdays.tsx
View file

@ -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())) {

9
frontend/src/components/Copyable/Copyable.tsx
View file

@ -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>
}

2
frontend/src/components/CreateForm/components/EventInfo/EventInfo.tsx
View file

@ -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>
}

6
frontend/src/components/Error/Error.module.scss
View file

@ -39,4 +39,10 @@
justify-content: center;
margin-left: 16px;
padding: 0;
border-radius: .2em;
&:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
}

2
frontend/src/components/Footer/Footer.tsx
View file

@ -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"

2
frontend/src/components/Legend/Legend.tsx
View file

@ -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

5
frontend/src/components/Login/Login.module.scss
View file

@ -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%;
}
}
}

4
frontend/src/components/Login/Login.tsx
View file

@ -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()

2
frontend/src/components/Settings/Settings.tsx
View file

@ -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

4
frontend/src/components/Video/Video.tsx
View file

@ -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>
)

4
frontend/src/utils/calculateAvailability.ts
View file

@ -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] : [])

2
frontend/src/utils/calculateTable.ts
View file

@ -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 ? {

2
frontend/src/utils/convertTimesToDates.ts
View file

@ -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)