[UXIT-1539] Events Page · Schedule #704

mirhamasala · 2024-10-09T14:27:47Z

📝 Description

This pull request introduces a new feature to handle event schedules, including the addition of a schema for schedules, updates to the event data structure, and UI components to display the schedule on event pages. The most important changes include adding a new schedule schema, updating the event data structure, and creating new components for displaying the schedule.

Type: New feature

Note

For the sake of speed, we have not implemented the mobile dropdown at this stage, instead opting for a sticky horizontal scrollbar. With Filipa unavailable, we don’t yet have a solid solution for handling the x-scrollbar effectively. This is also a pending task for the Allocators table.

The mobile dropdown will also be required for the Security Maturity Model Table of Contents, and at that point, we can refactor both implementations.

🛠️ Key Changes

Schema and Data Structure Updates:

Added a new ScheduleSchema to define the structure of event schedules, including days and events (src/app/_schemas/event/ScheduleSchema.ts).
Updated the EventFrontMatterSchema to include the new schedule field (src/app/_schemas/event/FrontMatterSchema.ts).
Modified the convertMarkdownToEventData function to handle the new schedule field (src/app/_utils/convertMarkdownToEventData.ts).

UI Components:

Created a ScheduleSection component to display the schedule section on event pages (src/app/events/[slug]/components/ScheduleSection.tsx). (src/app/events/[slug]/components/ScheduleSection.tsxR1-R17)
Added a ScheduleTabs component to display the schedule in a tabbed format (src/app/events/[slug]/components/ScheduleTabs.tsx). (src/app/events/[slug]/components/ScheduleTabs.tsxR1-R65)

Event Page Integration:

Integrated the ScheduleSection component into the event page (src/app/events/[slug]/page.tsx). (src/app/events/[slug]/page.tsxR18, src/app/events/[slug]/page.tsxR51, src/app/events/[slug]/page.tsxR76-R79)
Updated the event markdown file to include sample schedule data (src/content/events/fil-bangkok-2024.md).

Utility Functions:

Added utility functions for formatting dates and times (src/app/events/[slug]/utils/dateUtils.ts). (src/app/events/[slug]/utils/dateUtils.tsR1-R10)

Configuration Update:

Updated the admin configuration to include the new schedule field (public/admin/config.yml).

📌 To-Do Before Merging

Remove test data

🧪 How to Test

Go to http://localhost:3000/events/fil-bangkok-2024 and verify styling
Go to http://localhost:3000/admin/index.html and try to add a new event with an Event Day schedule.

📸 Screenshots

vercel · 2024-10-09T14:27:52Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
filecoin-foundation-site	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 11, 2024 0:43am

notion-workspace · 2024-10-09T14:27:52Z

[FF] Event Page · Schedule

barbaraperic · 2024-10-10T10:52:18Z

Maybe we can say something like "No events on this day", or not show the day at all if it doesn't have events?

barbaraperic · 2024-10-10T10:56:16Z

On mobile looks good! Tho there's a slight glitch when you scroll down in the first tab and click on the second tab. It doesn't take you back in the view - maybe something we can implement if not too complicated.

RPReplay_Final1728557038.mov

src/app/events/[slug]/components/ScheduleSection.tsx

src/app/events/[slug]/page.tsx

barbaraperic · 2024-10-10T12:28:23Z

src/app/events/[slug]/components/ScheduleTabs.tsx

+  const tabGroupRef = useRef<HTMLDivElement>(null)
+  const hasMounted = useRef(false)
+
+  const validDays = schedule!.days.filter((day) => day.events.length > 0)


I've noticed you use "!" in couple of cases here - is there an advantage over "?" ?

TypeScript thinks that schedule can be undefined but, at this point, we know for sure that schedule isn't undefined since we check for it with eventHasSchedule - and only then render the component.

You can postfix an expression with ! to tell TypeScript that you know it's not null or undefined. This works the same as an 'as' assertion.

This is not super safe as schedule comes from outside the component. The consumer of the component doesn't know that schedule has to exist, and TypeScript will not complain if they try to pass undefined.

// Works fine {eventHasSchedule && <ScheduleSection schedule={schedule} />} // Should fail but doesn't <ScheduleSection schedule={schedule} />

As safer solution would be to type schedule as non nullable:

type ScheduleTabsProps = { schedule: NonNullable<Event['schedule']> }

What do you think?

I think this is amazing.

barbaraperic

Looking good, well done! Left a few non-blocking comments

CharlyMartin · 2024-10-11T09:47:55Z

src/app/events/[slug]/components/ScheduleTabs.tsx

+  const tabGroupRef = useRef<HTMLDivElement>(null)
+  const hasMounted = useRef(false)
+
+  const validDays = schedule!.days.filter((day) => day.events.length > 0)


This is not super safe as schedule comes from outside the component. The consumer of the component doesn't know that schedule has to exist, and TypeScript will not complain if they try to pass undefined.

// Works fine {eventHasSchedule && <ScheduleSection schedule={schedule} />} // Should fail but doesn't <ScheduleSection schedule={schedule} />

As safer solution would be to type schedule as non nullable:

type ScheduleTabsProps = { schedule: NonNullable<Event['schedule']> }

What do you think?

CharlyMartin · 2024-10-11T09:48:37Z

src/app/events/[slug]/components/ScheduleTabs.tsx

+type ScheduleTabsProps = {
+  schedule: Event['schedule']
+}
+
+const { screens } = theme
+
+export function ScheduleTabs({ schedule }: ScheduleTabsProps) {
+  const tabGroupRef = useRef<HTMLDivElement>(null)
+  const hasMounted = useRef(false)
+
+  const validDays = schedule!.days.filter((day) => day.events.length > 0)
+
+  useEffect(() => {
+    hasMounted.current = true
+  }, [])
+
+  function scrollToTabGroup() {
+    if (hasMounted.current && isScreenBelowLg() && tabGroupRef.current) {
+      tabGroupRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      })
+    }
+  }


Suggested change

type ScheduleTabsProps = {

schedule: Event['schedule']

}

const { screens } = theme

export function ScheduleTabs({ schedule }: ScheduleTabsProps) {

const tabGroupRef = useRef<HTMLDivElement>(null)

const hasMounted = useRef(false)

const validDays = schedule!.days.filter((day) => day.events.length > 0)

useEffect(() => {

hasMounted.current = true

}, [])

function scrollToTabGroup() {

if (hasMounted.current && isScreenBelowLg() && tabGroupRef.current) {

tabGroupRef.current.scrollIntoView({

behavior: 'smooth',

block: 'start',

})

}

}

type ScheduleTabsProps = {

schedule: NonNullable<Event['schedule']>

}

const { screens } = theme

export function ScheduleTabs({ schedule }: ScheduleTabsProps) {

const tabGroupRef = useRef<HTMLDivElement>(null)

const hasMounted = useRef(false)

const validDays = schedule.days.filter((day) => day.events.length > 0)

useEffect(() => {

hasMounted.current = true

}, [])

function scrollToTabGroup() {

if (hasMounted.current && isScreenBelowLg() && tabGroupRef.current) {

tabGroupRef.current.scrollIntoView({

behavior: 'smooth',

block: 'start',

})

}

}

CharlyMartin · 2024-10-11T09:53:12Z

src/app/events/[slug]/components/ScheduleSection.tsx

+type ScheduleSectionProps = {
+  schedule: Event['schedule']
+}
+
+export function ScheduleSection({ schedule }: ScheduleSectionProps) {
+  return (
+    <PageSection kicker="Join Us" title={schedule?.title || 'Schedule'}>
+      <ScheduleTabs schedule={schedule} />
+    </PageSection>
+  )
+}


Suggested change

type ScheduleSectionProps = {

schedule: Event['schedule']

}

export function ScheduleSection({ schedule }: ScheduleSectionProps) {

return (

<PageSection kicker="Join Us" title={schedule?.title || 'Schedule'}>

<ScheduleTabs schedule={schedule} />

</PageSection>

)

}

type ScheduleSectionProps = {

schedule: NonNullable<Event['schedule']>

}

export function ScheduleSection({ schedule }: ScheduleSectionProps) {

return (

<PageSection kicker="Join Us" title={schedule.title || 'Schedule'}>

<ScheduleTabs schedule={schedule} />

</PageSection>

)

}

CharlyMartin · 2024-10-11T09:54:14Z

src/app/events/[slug]/components/SpeakersSection.tsx

+type SpeakersSectionProps = {
+  speakers: Event['speakers']
+}
+
+export function SpeakersSection({ speakers }: SpeakersSectionProps) {
+  return (
+    <PageSection kicker="speakers" title="Speakers">
+      <CardGrid cols="mdTwo">
+        {speakers!.map((speaker) => (
+          <KeyMemberCard
+            key={speaker.name}
+            {...speaker}
+            image={{
+              ...speaker.image,
+              alt: `Photo of ${speaker.name}`,
+            }}
+          />
+        ))}
+      </CardGrid>
+    </PageSection>
+  )
+}


Suggested change

type SpeakersSectionProps = {

speakers: Event['speakers']

}

export function SpeakersSection({ speakers }: SpeakersSectionProps) {

return (

<PageSection kicker="speakers" title="Speakers">

<CardGrid cols="mdTwo">

{speakers!.map((speaker) => (

<KeyMemberCard

key={speaker.name}

{...speaker}

image={{

...speaker.image,

alt: `Photo of ${speaker.name}`,

}}

/>

))}

</CardGrid>

</PageSection>

)

}

type SpeakersSectionProps = {

speakers: NonNullable<Event['speakers']>

}

export function SpeakersSection({ speakers }: SpeakersSectionProps) {

return (

<PageSection kicker="speakers" title="Speakers">

<CardGrid cols="mdTwo">

{speakers.map((speaker) => (

<KeyMemberCard

key={speaker.name}

{...speaker}

image={{

...speaker.image,

alt: `Photo of ${speaker.name}`,

}}

/>

))}

</CardGrid>

</PageSection>

)

}

Ahhhh TS Master 🙇🏽‍♀️

CharlyMartin · 2024-10-11T10:00:40Z

src/app/events/[slug]/components/ScheduleTabs.tsx

+  useEffect(() => {
+    hasMounted.current = true
+  }, [])


Nice little optimisation - we can import useIsMounted from usehooks-ts, which is already part of the project :)

CharlyMartin · 2024-10-11T10:03:31Z

src/app/events/[slug]/components/ScheduleTabs.tsx

+function isScreenBelowLg() {
+  return window.matchMedia(`(max-width: ${parseInt(screens.md, 10) - 1}px)`)
+    .matches
+}


We already rely on useMediaQuery from usehooks-ts in the project. Maybe it can be useful here as well?

CharlyMartin · 2024-10-11T10:06:17Z

src/app/events/[slug]/components/ScheduleTabs.tsx

+      tabGroupRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      })


We already have a function scrollToSection in the maturity model utils folder, in case it can be extracted in the global utils reused here. Not sure, I haven't tried.

Super cool you added this by the way, smooth UX!

Decided not to extract the scrollToSection function for now because it is tightly coupled to the concept of a SectionHash.

By the way, this made me notice that the function scrollToSection uses document.querySelector, which in React is considered an anti-pattern because it directly manipulates the DOM outside of React’s control. Instead, React encourages the use of refs to interact with DOM elements.

Something like

import { useRef } from 'react' export function scrollToSection(sectionRef: React.RefObject<HTMLElement>) { if (!sectionRef.current) { console.error(`The referenced element does not exist`) return } sectionRef.current.scrollIntoView({ block: 'start', behavior: 'smooth', }) }

CharlyMartin · 2024-10-11T10:29:24Z

@mirhamasala I added a blocking comment about the prop type of the section components. I believe we should use NonNullable instead of ! to be more accurate / on the safe side. I added more context in the comments, I hope it makes sense.

I also added an event via the CMS, and it worked great. The event I created was added at the end of the list, even though it happened sooner. How about sorting validDays by soonest to furthest?

The page looks really good and professional, it will be great for Bangkok! Good job ✨👏

mirhamasala · 2024-10-11T12:24:04Z

@CharlyMartin

How about sorting validDays by soonest to furthest?

Oh, good catch! Thanks so much for the review, Charly! It was super helpful.

CharlyMartin · 2024-10-11T13:19:26Z

Oh, good catch! Thanks so much for the review, Charly! It was super helpful.

Anytime 🫡

sentry-io · 2024-10-16T07:57:36Z

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

‼️ Error: RecapSection is not defined /events/fil-bangkok-2024 View Issue
‼️ TypeError: (0 , date_fns_tz__WEBPACK_IMPORTED_MODULE_0_.utcToZonedTime) is not a function /events/fil-bangkok-2024 View Issue
‼️ ReferenceError: utcToZonedTime is not defined /events/fil-bangkok-2024 View Issue
‼️ TypeError: (0 , date_fns_tz__WEBPACK_IMPORTED_MODULE_0_.utcToZonedTime) is not a function /events/fil-bangkok-2024 View Issue

_{Did you find this useful? React with a 👍 or 👎}

vercel bot deployed to Preview October 10, 2024 08:37 View deployment

mirhamasala force-pushed the mm/events-schedule branch from 8fb7ed5 to 2ee22ac Compare October 10, 2024 08:43

vercel bot deployed to Preview October 10, 2024 08:47 View deployment

mirhamasala force-pushed the mm/events-schedule branch from 2ee22ac to 2490c92 Compare October 10, 2024 08:55

mirhamasala marked this pull request as ready for review October 10, 2024 08:56

vercel bot deployed to Preview October 10, 2024 08:57 View deployment

vercel bot deployed to Preview October 10, 2024 09:05 View deployment

mirhamasala requested a review from barbaraperic October 10, 2024 09:38

mirhamasala force-pushed the mm/events-schedule branch from 34864e8 to 3ff756d Compare October 10, 2024 09:47

vercel bot deployed to Preview October 10, 2024 09:52 View deployment

vercel bot deployed to Preview October 10, 2024 10:47 View deployment

vercel bot deployed to Preview October 10, 2024 11:22 View deployment

barbaraperic reviewed Oct 10, 2024

View reviewed changes

src/app/events/[slug]/components/ScheduleSection.tsx Outdated Show resolved Hide resolved

barbaraperic reviewed Oct 10, 2024

View reviewed changes

src/app/events/[slug]/page.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview October 10, 2024 12:24 View deployment

mirhamasala force-pushed the mm/events-schedule branch from c45188c to ab08216 Compare October 10, 2024 12:27

mirhamasala requested a review from CharlyMartin October 10, 2024 12:28

barbaraperic reviewed Oct 10, 2024

View reviewed changes

vercel bot deployed to Preview October 10, 2024 12:31 View deployment

barbaraperic approved these changes Oct 10, 2024

View reviewed changes

mirhamasala added 6 commits October 11, 2024 06:28

Include schedule config to Events

e48b079

Style day events cards

be50bc8

Style desktop Schedule with TabGroup

00247b8

Show Schedule

16b7c59

Test data

be2c54c

Add SpeakersSection component for displaying speakers in the event page

7b1a1db

mirhamasala added 3 commits October 11, 2024 06:28

CR

6dee0f4

Refactor ScheduleTabs component to filter out days without events

edd7eee

CR

f90e0bb

mirhamasala force-pushed the mm/events-schedule branch from ab08216 to f90e0bb Compare October 11, 2024 05:28

vercel bot deployed to Preview October 11, 2024 05:36 View deployment

CharlyMartin requested changes Oct 11, 2024

View reviewed changes

CR

bd073b5

vercel bot deployed to Preview October 11, 2024 12:29 View deployment

mirhamasala added 2 commits October 11, 2024 13:40

CR

a38e9ef

Revert data

01dff48

mirhamasala force-pushed the mm/events-schedule branch from 10725fc to 01dff48 Compare October 11, 2024 12:41

vercel bot deployed to Preview October 11, 2024 12:43 View deployment

mirhamasala merged commit 0d4c834 into main Oct 11, 2024
5 checks passed

mirhamasala deleted the mm/events-schedule branch October 11, 2024 12:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[UXIT-1539] Events Page · Schedule #704

[UXIT-1539] Events Page · Schedule #704

mirhamasala commented Oct 9, 2024 •

edited

Loading

vercel bot commented Oct 9, 2024 •

edited

Loading

notion-workspace bot commented Oct 9, 2024

barbaraperic commented Oct 10, 2024

barbaraperic commented Oct 10, 2024

barbaraperic Oct 10, 2024

mirhamasala Oct 10, 2024 •

edited

Loading

CharlyMartin Oct 11, 2024 •

edited

Loading

mirhamasala Oct 11, 2024

barbaraperic left a comment

CharlyMartin Oct 11, 2024 •

edited

Loading

CharlyMartin Oct 11, 2024

CharlyMartin Oct 11, 2024

CharlyMartin Oct 11, 2024

mirhamasala Oct 11, 2024

CharlyMartin Oct 11, 2024

CharlyMartin Oct 11, 2024

CharlyMartin Oct 11, 2024

mirhamasala Oct 11, 2024

CharlyMartin Oct 11, 2024

CharlyMartin commented Oct 11, 2024

mirhamasala commented Oct 11, 2024

CharlyMartin commented Oct 11, 2024

sentry-io bot commented Oct 16, 2024 •

edited

Loading

[UXIT-1539] Events Page · Schedule #704

[UXIT-1539] Events Page · Schedule #704

Conversation

mirhamasala commented Oct 9, 2024 • edited Loading

📝 Description

Note

🛠️ Key Changes

Schema and Data Structure Updates:

UI Components:

Event Page Integration:

Utility Functions:

Configuration Update:

📌 To-Do Before Merging

🧪 How to Test

📸 Screenshots

vercel bot commented Oct 9, 2024 • edited Loading

notion-workspace bot commented Oct 9, 2024

barbaraperic commented Oct 10, 2024

barbaraperic commented Oct 10, 2024

Choose a reason for hiding this comment

mirhamasala Oct 10, 2024 • edited Loading

Choose a reason for hiding this comment

CharlyMartin Oct 11, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

barbaraperic left a comment

Choose a reason for hiding this comment

CharlyMartin Oct 11, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CharlyMartin commented Oct 11, 2024

mirhamasala commented Oct 11, 2024

CharlyMartin commented Oct 11, 2024

sentry-io bot commented Oct 16, 2024 • edited Loading

Suspect Issues

mirhamasala commented Oct 9, 2024 •

edited

Loading

vercel bot commented Oct 9, 2024 •

edited

Loading

mirhamasala Oct 10, 2024 •

edited

Loading

CharlyMartin Oct 11, 2024 •

edited

Loading

CharlyMartin Oct 11, 2024 •

edited

Loading

sentry-io bot commented Oct 16, 2024 •

edited

Loading