Implementing calendar and related functionality

[RosaGao]

We will try using the react-schedule-selector package first because there is a method for us to override existing styles (display different shades of cells based on the # of ppl choosing them etc).

[RosaGao]

Hi I just made some changes:

1. The cells have three colors showing different status: gray(default) for unchosen slots, red for slots chosen by other people, green for cells being selected by the current user.

2. User name should be unique. This is to differentiate existing members from new ones. When a returning user put in his/her name and hit add button, the app sets this person as the current user and updates curMemberName/Id/timeSlots ; otherwise a new member will be created.

---

⬆️ This is when Rosa initiates a new meeting and chooses her times, shown in green.

---

⬆️ Kiron enters the schedule through the shared link. He can click on Rosa to see her time slots shown in red. Nothing would happen if he clicks on the box next to his name, but he can add his times on this page.

---

⬆️ James enters and he can see the combined availabilities of Rosa and Kiron. James can also choose his times slots. The times of other people are not displayed in different shades based on the number of people available at that time (unlike lettucemeet). I'll try implementing this if I can figure this out.

---

TODOs:

1. When a member returns to the meeting through the shared link, his availabilities should be displayed in green and be considered as selected cells. Thus the returning member can make edits upon that. Right now even though the member is not treated as "new", his previous selections are not reflected.

I tried to implement this with redux inside useEffect but it caused infinite rendering which almost crushed my computer TT.

2. Hovering over one cell and the members who have chosen that timeslot are auto selected/filtered, so that we can see what group of people are available at that time.

3. fixing the layout and style of the page so that things are more organized.

4. And more... Feel free to add and suggest :)

---

Thanks for reading this I know itz really long lol! Let me know if the above makes sense and I'd love to hear peeps' thoughts! Ty!

[JJamesWWang]

Not super important, but would it be possible to make members unique based on id rather than name? I don't have validation in the backend for duplicate names, but if you prevent it from happening in the frontend, it's okay.

[RosaGao]

Members are unique based on id and name. I checked if the name entered already exists in the member list, and if it does, the person would be considered as existing member. No duplicated name would be sent to the backend. It also does not make sense to have to Alice's on the participant list cuz ppl can't tell who is who.

[JJamesWWang]

When a member returns to the meeting through the shared link, his availabilities should be displayed in green and be considered as selected cells. Thus the returning member can make edits upon that. Right now even though the member is not treated as "new", his previous selections are not reflected.

I don't think it's possible to tell who is returning to the shared link without login (When2Meet and Lettucemeet don't do this as far as I can tell), but one thing you could try is to use browser stored data.

[RosaGao]

When a member returns to the meeting through the shared link, his availabilities should be displayed in green and be considered as selected cells. Thus the returning member can make edits upon that. Right now even though the member is not treated as "new", his previous selections are not reflected.

I don't think it's possible to tell who is returning to the shared link without login (When2Meet and Lettucemeet don't do this as far as I can tell), but one thing you could try is to use browser stored data.

Sure I'll try using local storage!

[K02D]

This is how it looks like now. We also need to come up with a good formula so the grid shows visibly different shades for a potentially larger number of members

[RosaGao]

TODOs:

• display previously chosen time slots as "selected" so that returning users can make edits (unselect or add new) ‼️
• improve layout of the page and make things more organized/prettier ‼️
• show different opacity based on the number of people choosing the time slot ‼️
• "link copied" should vanish after certain seconds
• delete members
• show preferred time slots
• ...

[K02D]

How the calendar looks now ^