feat: dynamic routing for each event on MyEvent page #25
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
to answer your questions:
overall, amazing job!! once the changes are made, i should be able to merge! |
celinechoiii
reviewed
Nov 8, 2024
| object-fit: cover; | ||
| `; | ||
|
|
||
| export const GradientOverlay = styled.div` |
There was a problem hiding this comment.
i think you can get rid of the GradientOverlay styling
| margin: 1rem; | ||
| `; | ||
|
|
||
| export const ImageWrapper = styled.div` |
There was a problem hiding this comment.
ImageWrapper can be deleted as well!
| display: flex; | ||
| `; | ||
|
|
||
| export const EventImage = styled(NextImage)` |
There was a problem hiding this comment.
export const EventImage = styled(NextImage)`
width: 100%;
height: 23vh;
object-fit: cover;
position: relative;
`;
| ); | ||
| `; | ||
|
|
||
| export const Page = styled.div` |
There was a problem hiding this comment.
i set the default background to be gray1
export const Page = styled.div`
flex-direction: column;
min-width: 100%;
min-height: 100svh;
overflow: hidden;
`;
| margin-bottom: 3.75rem; | ||
| `; | ||
|
|
||
| export const Container = styled.div` |
There was a problem hiding this comment.
border-radiusfield helps us round the corners!- deleting
margin-bottomfield inPagesince bottom padding is directly being added to this container - negative margins help us overlap elements and
z-indexsets 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;
`;
|
|
||
| import NextImage from 'next/image'; | ||
| import styled from 'styled-components'; | ||
| import COLORS from '@/styles/colors'; |
There was a problem hiding this comment.
delete this line as no global colors are being used
Comment on lines
+85
to
+88
| <styles.ImageWrapper> | ||
| <styles.EventImage src={BPLogo} alt="EventImage" /> | ||
| <styles.GradientOverlay /> | ||
| </styles.ImageWrapper> |
There was a problem hiding this comment.
delete these are replace with this:
<styles.EventImage src={BPLogo} alt="EventImage" />
| import { UUID } from 'crypto'; | ||
| import supabase from '../createClient'; | ||
|
|
||
| export async function fetchPerformer(event_id: UUID) { |
There was a problem hiding this comment.
make this function name a bit more descriptive! something like fetchPerformerByEventID
celinechoiii
pushed a commit
that referenced
this pull request
Nov 23, 2024
* Created EventListingCard & styled webpage * fixed ESLint error * created separate styling file for event card * created event display page * added menu icon, changed some styling * added location pin next to address * changed some styling and imports * fetching data using fetchAcceptedEventsByVolunteer instead of fetchAllEvents * implemented dynamic routing for each event and created event details page * resolved merge issues * added curve below event image
jxmoose
deleted the
aiden/bre-24-implement-dynamic-routing-for-my-event-descriptions
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🍞 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
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