feat: render events in configured tz

web/src/components/EditEventForm/EditEventForm.tsx

@@ -192,9 +192,6 @@ const EditEventForm = (props: Props) => {
               <label className="label" htmlFor="timezone">
                 Time zone
                 <br />
-                <Typ x="labelDetails">
-                  TODO: On view event page, render timezone in this timezone
-                </Typ>
                 <div className="control">
                   <Select
                     id="timezone"

web/src/components/ShowEvent/ShowEvent.tsx

@@ -19,6 +19,7 @@ interface Event {
   start: string
   end: string
   slug: string
+  timezone?: string
 }
 
 const GCAL_DATE_FORMAT = 'YYYYMMDDTHHmmss[Z]'
@@ -49,7 +50,8 @@ const IconBox = ({ children }) => (
 )
 
 const ShowEvent = ({ event }: Props) => {
-  const { title, description, start, end, slug } = event
+  const { title, description, start, end, slug, timezone: _tz } = event
+  const tz = _tz ?? 'UTC'
   const icsLink = `${globalThis.RWJS_API_URL}/downloadIcs?event=${slug}`
   const htmlDesc = markdownToHTML(description)
 
@@ -61,10 +63,10 @@ const ShowEvent = ({ event }: Props) => {
       </Typ>
       <h1 className="is-size-3 has-text-weight-bold mb-1">{title}</h1>
       <Typ x="p">
-        <strong>From:</strong> {prettyDate(start)} ({prettyUntil(start)})
+        <strong>From:</strong> {prettyDate(start, tz)} ({prettyUntil(start)})
       </Typ>
       <Typ x="p">
-        <strong>To:</strong> {prettyDate(end)} ({prettyBetween(start, end)}{' '}
+        <strong>To:</strong> {prettyDate(end, tz)} ({prettyBetween(start, end)}{' '}
         long)
       </Typ>
       <div className="mt-4 mb-4">

web/src/components/Typ/Typ.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import { match } from 'ts-pattern'
 
 export interface Props {
+  /** The kind of typographic element this is. */
   x: keyof typeof classes
   className?: string
   children: React.ReactNode
@@ -14,9 +15,10 @@ const classes = {
   subhead: classNames('is-size-4', ...headClasses),
   pageTitle: classNames('is-size-3', ...headClasses),
   p: 'mb-2',
-  labelDetails: 'is-italic has-text-weight-normal',
+  labelDetails: 'is-italic has-text-weight-normal', // Helper text for a form label
 }
 
+/** Typography element. Displays text on screen. */
 const Typ = ({ x, className, children, ...rest }: Props) => {
   const cn = classNames(classes[x], className)
   const attrs = { className: cn, ...rest }

web/src/components/ViewEventCell/ViewEventCell.tsx

@@ -15,6 +15,7 @@ export const QUERY = gql`
       start
       end
       slug
+      timezone
     }
   }
 `

web/src/convert/date.ts

@@ -39,10 +39,10 @@ export function toUTC(d: string | Date, tz: string): string {
  * @param d The date to format
  * @returns A human-readable representation of the date
  */
-export function prettyDate(d: string | Date): string {
+export function prettyDate(d: string | Date, tz: string): string {
   if (dayjs(d).year() === dayjs().year())
-    return dayjs(d).tz(localTZ).format('ddd MMM D, h:mm A z')
-  return dayjs(d).tz(localTZ).format('ddd MMM D, YYYY, h:mm A z')
+    return dayjs(d).tz(tz).format('ddd MMM D, h:mm A z')
+  return dayjs(d).tz(tz).format('ddd MMM D, YYYY, h:mm A z')
 }
 
 /**