Fix: Cache event data queried from database

[aidenm1]

🍞 What's new in this PR

🥐 Description

Caching queried data from database

🥖 Screenshots

🥪 How to review

app/events/eventscache.tsx, app/events/page.tsx, app/events/[event_id]/page.tsx, components/MyEventCard/MyEventCard.tsx

Honestly I have no idea if I did this right. From what I was reading online, React's cache and useMemo aren't really meant for data querying, but rather are for intensive computation. I believe this method of doing it is ok though, nextjs advises using the React cache function when using a database directly.

Data is definitely getting cached, confirmed through console log messages in fetch functions. Only first time render takes a second. Renders after first render are so quick.

Big thing:
I am getting a GET 500 error upon rendering of the page, but it seems like all the data has been fetched correctly.
I notice that when I use a useEffect instead of useMemo, the error does not show, but the cached data is not used and instead querying functions are used. Not sure why I am getting this error. Am I using useMemo wrong?

🥧 Next steps

Handling when new data comes into the database.
Possible ideas:

• When data is created or updated, trigger refetching of all data or clear all cache, or have message pop up saying "there is new data, please refresh the screen"
• Set time for cached data, after time is up, refetch

🥞 Relevant links

🥨 Online sources

🥯 Related PRs

CC: @celinechoiii