Group Availability Tab

[MinhxNguyen7]

Description

• Add functionality to view other members' availabilities in the group availability tab.
  • Queries the DB, loads the data via SvelteKit's load, and updates the groupAvailabilities store.
• Also update drizzle-kit because drizzle-studio only works with the latest version.

TODOs

• Minimal code to create a meeting. (done in Meeting Creation Functionality #102)
• Query relevant data from the DB, format it, then update the store(s).
• Update the groupAvailabilities store when the user changes their availability.
• Test that everything works.
  • Write code to create a meeting with multiple members. This is not strictly necessary since we can do this manually while testing.
• Remove sample data generation code.

Test Plan

• Create a meeting. The personal and group availability stores should be empty.
• Add personal availability and save it. The group availability should reflect without refreshing the page.
• Refreshing the page should load in the most up-to-date group availability.
• Log out of the current user and sign in as another user. Updating personal availability in the same meeting should show the overlapping availability in the groups tab.

Issues

• Closes Group availability page functionality #91

[MinhxNguyen7]

There's a bug where the groupAvailability doesn't render the availabilities loaded into the store because it's server-side rendered, and the store is local. We can solve this by moving the state of the store into the component itself, then prop-drill the data through the load into the components.

[seancfong]

@MinhxNguyen7 Group availability loads correctly now, even with multiple users. Also did some clean up by moving the personal availability parsing up to +page.svelte

However, editing personal availability doesn't update the group availability store unless the page is reloaded. This would have to be accounted for in the future.

[seancfong]

@KevinWu098 Should be ready to review again. Currently, group availability works only for registered users. We can create a new issue for guests and you can look into that.

Here's a sample meeting on staging that shows it working.

https://staging-97.zotmeet.com/availability/7f8b2794-5605-44cb-84bd-f04fc098c705

[KevinWu098]

Looks good on deployment -- will look over code asap

[KevinWu098]

LGTM -- just some minor nits

[KevinWu098]

Suggested change

	// @ts-expect-error slug is defined in the route
	const meeting_id: string = params?.slug;
	const meeting_id: string = params?.slug ?? "";

chore: unused ts directive -- slug is read as any. It might be better to use the nullish coalescing operator ?? to force it into a string

[KevinWu098]

Suggested change

	async function getMeetingMemeberAvailabilities(meetingId: string) {
	async function getMeetingMemberAvailabilities(meetingId: string) {

typo: Memeber instead of Member; also change line 34 where this function is called