Look at how the setOverlayCRNs function is used in the above code.
We need to add a new prop to the Calendar component - overlayFriendSchedules. This prop will take in a list of schedule IDs similar to how the pinnedFriendSchedules prop is. Similarly, we will have to create new state in Scheduler component to keep track of data passed into this prop.
Replicate this functionality for hover on version rows in ComparisonContainer and set the state of the overlay friend schedules accordingly (state will keep track of list of schedules which need to be displayed as an overlayj, look at how the state for pinned friend schedules is set).
Try to use the same friendSchedules and friendEvents variables to keep track of the overlay schedules as well. This would mean we need a new variable to keep track of which friend schedules are for overlay and which should be displayed normally.
Modify code here to display overlay blocks. Events and Classes which need to be overlayed will need the overlay prop for CompareBlocks and EventBlocks to be set to true and all other props should be the same.
If a version id exists in both pinnedFriendSchedules and overlayFriendSchedules, we will give priority to render pinned schedules.
NOTE: this is just a suggested solution, feel free to suggest a new solution or change the steps outlined here as you wish if you think there's a better way to do this.
Problem Description
We want to add functionality to the
ComparisonContainerto allow users to view a preview of their friend's schedule on hovering over their friend's verion in theComparisonContainer. Similar functionality already exists for when users hover over sections to add classes on the left panel, link to this code : https://github.com/gt-scheduler/website/blob/495bfa685932b3d8720bce6b74a9415ebe5646d7/src/components/Section/index.tsx#L93 .Mockups (link to Figma)
Prototype (link to Figma)
Your Goal
bog-changes-s23-mergedCalendarcomponent -overlayFriendSchedules. This prop will take in a list of schedule IDs similar to how thepinnedFriendSchedulesprop is. Similarly, we will have to create new state inSchedulercomponent to keep track of data passed into this prop.ComparisonContainerand set the state of the overlay friend schedules accordingly (state will keep track of list of schedules which need to be displayed as an overlayj, look at how the state for pinned friend schedules is set).Calendarcomponent, the new prop needs to be parsed in the exact same way as thepinnedFriendSchedulesprop. This is for calculating collisions and creating appropriate widths for blocks in the UI. https://github.com/gt-scheduler/website/blob/5b39b9a57225ad839ffd7e2f9be6afaade10f052/src/components/Calendar/index.tsx#L165friendSchedulesandfriendEventsvariables to keep track of the overlay schedules as well. This would mean we need a new variable to keep track of which friend schedules are for overlay and which should be displayed normally.overlayprop forCompareBlocksandEventBlocksto be set to true and all other props should be the same.NOTE: this is just a suggested solution, feel free to suggest a new solution or change the steps outlined here as you wish if you think there's a better way to do this.