feat: dynamic routing for each event on MyEvent page

[aidenm1]

🍞 What's new in this PR

🥐 Description

Added dynamic routing for each event in my event page.

🥖 Screenshots

🥪 How to review

Review the querying functions within api/supabase/queries. Specifically, events, facility, and volunteers. (I believe these functions are good)

Next, review app/events/[event_id]/page.tsx and app/events/[event_id]/styles.ts. I'm not sure if I did the styling the conventional way, but it seems to work.

🥧 Next steps

In Jinkang's design, the top of the content area is curved, I'm not entirely sure how to do this.

Will phone numbers be formatted in the database, or should I create a function to format the phone numbers so that they are (xxx)xxx-xxxx?

Should second contact be either Volunteer Host or Facility Host depending on needs_host bool, or should it just be Volunteer Host?

Can we guarantee that there will always be a volunteer host who signed up and a performer who signed up? If not guaranteed, should there be a separate page rendered saying that event details haven't been finalized yet?

🥞 Relevant links

🥨 Online sources

🥯 Related PRs

CC: @celinechoiii

[celinechoiii]

to answer your questions:

• it would be nice if you could create a function to format the phone numbers! you can put this in the utils folder
• if the needs_host boolean is false, the second contact will be the facility host. if true, the volunteer host contact will be listed
• for now, we can assume that there will always be a host or performer who signed up! but that is a good point. i will relay this to jinkang and ask his thoughts

overall, amazing job!! once the changes are made, i should be able to merge!

[celinechoiii]

i think you can get rid of the GradientOverlay styling

[celinechoiii]

ImageWrapper can be deleted as well!

[celinechoiii]

export const EventImage = styled(NextImage)`
  width: 100%;
  height: 23vh;
  object-fit: cover;
  position: relative;
`;

[celinechoiii]

i set the default background to be gray1

export const Page = styled.div`
  flex-direction: column;
  min-width: 100%;
  min-height: 100svh;
  overflow: hidden;
`;

[celinechoiii]

• border-radius field helps us round the corners!
• deleting margin-bottom field in Page since bottom padding is directly being added to this container
• negative margins help us overlap elements and z-index sets the order of overlapped elements. the default z-index value is 0 and higher z-index values bring elements to the front, while lower values push them to the back
• i'm making the background white for now so that the container doesn't blend in with the default background color

export const Container = styled.div`
  z-index: 10;
  margin: -1.5rem 0;
  position: relative;
  padding: 1.5rem 2rem 4rem 2rem;
  display: flex;
  flex-direction: column;
  border-radius: 20px 20px 0 0;
  background: white;
`;

[celinechoiii]

delete this line as no global colors are being used

[celinechoiii]

delete these are replace with this:
<styles.EventImage src={BPLogo} alt="EventImage" />

[celinechoiii]

make this function name a bit more descriptive! something like fetchPerformerByEventID