feat: ✨ add group availability tab content

[seancfong]

Summary

• A density map of group members with indicated availability shown on Group Availability tab

Desktop:

Mobile (iPhone 14 Pro Max shown):

• Hovering over cells on desktop will dynamically update the side drawer to display available members.

• Clicking on a cell on desktop will toggle lock and unlock of a selected cell to prevent updates on hovering.
  

• Tapping on a cell on mobile will toggle a drawer to display available members (iPhone 14 Pro Max shown).

  • When the drawer is displayed, the user can scroll down to select cells on the bottom rows.
    

[MinhxNguyen7]

Looks great, works great, and you write very nice code.

You do need to resolve the merge conflicts though. Sorry about that

[seancfong]

@MinhxNguyen7 Re-requesting review after resolving merge conflict.

Regarding your comment on GroupAvailability.svelte:42: Svelte's reactive block (the $: syntax) is at the component scope, meaning that the logic must be encapsulated inside a function to bail out on when null:

Just a tip: It's easier to read if you write if (selectedZotDateIndex === null || selectedBlockIndex === null) return, which indicates that you don't update if either aren't initialized yet. Won't hold up review, but it's just a tidbit for you.

  // Triggers on every selection change
  $: {
    const updateSelection = () => {
      if (selectedZotDateIndex === null || selectedBlockIndex === null) return;

      const availableMemberIndices: number[] =
        $availabilityDates[selectedZotDateIndex].getGroupAvailabilityBlock(selectedBlockIndex) ??
        [];

      availableMembersOfSelection = availableMemberIndices.map(
        (availableMemberIndex) => $groupMembers[availableMemberIndex].name,
      );

      notAvailableMembersOfSelection = $groupMembers
        .filter((_, index) => !availableMemberIndices.includes(index))
        .map((notAvailableMember) => notAvailableMember.name);
    };
    updateSelection();
  }

For now, I just left it how it originally was prior to the review. I think it seems to defeat the purpose of "not nesting" the conditional logic if we have to nest it in a function anyway :L

[MinhxNguyen7]

The page isn't loading after the merge. /availability is throwing 500 on staging

I actually tried to merge, but I left it to you because I couldn't figure out why it was erroring. I tried rebasing, and the first commit seemed to be the problematic one.

Not sure what the problem is, and I figured you'd have a better idea.

[seancfong]

The page isn't loading after the merge. /availability is throwing 500 on staging

I actually tried to merge, but I left it to you because I couldn't figure out why it was erroring. I tried rebasing, and the first commit seemed to be the problematic one.

Not sure what the problem is, and I figured you'd have a better idea.

@MinhxNguyen7 Did some classic commenting process of elimination to see what's causing the problem.

Looks like commenting line 295 in PersonalAvailability.svelte that imports @KevinWu098 's login flow resolved the issue. He may know more about what's going on. Here's the pr that contains the code: #62

Not sure if there's a missing dependency or environment variable that needs updating. Regardless, that was what worked for me in order to get the group tab up on my end.

[KevinWu098]

The page isn't loading after the merge. /availability is throwing 500 on staging

I actually tried to merge, but I left it to you because I couldn't figure out why it was erroring. I tried rebasing, and the first commit seemed to be the problematic one.

Not sure what the problem is, and I figured you'd have a better idea.

@MinhxNguyen7 Did some classic commenting process of elimination to see what's causing the problem.

Looks like commenting line 295 in PersonalAvailability.svelte that imports @KevinWu098 's login flow resolved the issue. He may know more about what's going on. Here's the pr that contains the code: #62

Not sure if there's a missing dependency or environment variable that needs updating. Regardless, that was what worked for me in order to get the group tab up on my end.

Oh! The problem is with loginModalData. I renamed it when we were first going over the LoginFlow, but I forgot that data is a reserved word for passing values between server and client.

If you swap all instances of loginModalData back to just data, it'll work!

[seancfong]

Oh! The problem is with loginModalData. I renamed it when we were first going over the LoginFlow, but I forgot that data is a reserved word for passing values between server and client.

If you swap all instances of loginModalData back to just data, it'll work!

Just to minimize the amount I touch your potential work, I aliased the data prop from Svelte to the variable you used to pass to the personal availability component.

All systems seem to go on my local branch: re-requesting review @MinhxNguyen7

[MinhxNguyen7]

This is cursed