Read query params on initial load for events page

[alexzhang1618]

Info

Closes #187 .

Changes

• Read query params on initial load for events page
• Updating some event carousel links so we can use query params
  • viewing another user's attendances is more involved (maybe future pr)
• Note: Experimented with using query params as a state but updating the browser's URL was laggy, so I left it out
  • Maybe worth using a library for this?

Type of Change

• Bug Fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as
  expected)
• Logistics Change (A change to a README, description, or dev workflow setup like
  linting/formatting)
• Continuous Integration Change (Related to deployment steps or continuous integration
  workflows)
• Other: (Fill In)

Testing

I have tested that my changes fully resolve the linked issue ...

• locally on Desktop.
• on the live deployment preview on Desktop.
• on the live deployment preview on Mobile.
• I have added new Cypress tests that are passing.

Checklist

• I have performed a self-review of my own code.
• I have followed the style guidelines of this project.
• I have documented any new functions in /src/lib/* and commented hard to understand areas
  anywhere else.
• My changes produce no new warnings.

Screenshots

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
membership-portal-ui-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 31, 2024 1:36am

[SheepTester]

For some reason. clicking "Events" in the navbar doesn't reset the filters on the page:

1. Go to home page
2. Click on "See all events." This filters events by "Attended"
3. Click on "Events" in the navbar. Nothing on the page changes, but the URL updates to /events

Note: Experimented with using query params as a state but updating the browser's URL was laggy, so I left it out

• Maybe worth using a library for this?

What kind of lag are you experiencing? I think browsers will add some delay if you change the URL too often (like multiple times per second) to avoid crashing the browser

In my experience, using window.history.replaceState is usually pretty fast, but I'm not sure how compatible it is with Next.js's router. this stackoverflow post says to use router.replace instead, with shallow: true to avoid reloading

it would be great to have that feature, though, so it doesn't get reset when you leave and come back, and it improves discoverability of the feature

[farisashai]

I tried a different approach in #202 by handling query logic server-side to determine the initial value of the page state and leaving the client alone fully. I think it should solve the layout shift and route change issues we're facing here and be easier to maintain in the future.

[farisashai]

🚢 🚢 🚢