Session Information Header Component

Session Information Header Component

The session information header component is displayed on the right side of the split view and it contains information about the selected office hour session such as the name, the number of people in the queue, the average wait time and the Zoom link. Depending on the type of office hours (virtual, hybrid, in person, review session) different links/messages are displayed in the Zoom link section of the information header.

Props

This component takes in the isTA prop that provides information about whether the user is a student or TA. It takes in isOpen which is a boolean that tells whether the session is still accepting new questions. It takes in props such as assignedQuestion, myQuestion, virtualLocation that provide information about the student’s question. It also takes in a function prop, onUpdate(), which takes in a string (should be a valid link) and is used to update the virtual location of the office hours when it gets edited by a TA.

Other props: callback, isDesktop, session, user, and course

State

zoomLinkDisplay

This state controls how the Zoom Link is displayed on the TA side. It can have one of three values: 'saved', 'hide', and 'show'

• The 'saved' state is when there is a Zoom link provided
• The 'hide' state is when there is when there is no Zoom Link provided and therefore there should be no Zoom link displayed (an "update your virtual location" button is displayed instead)
• The 'show' state is when the TA clicks on edit icon and the Zoom link is shown as an editable input field

zoomLink

When the component is first rendered, this state stores the virtual location of the office hours. When the TA edits their virtual location, this state gets updated and passed to the onUpdate() function prop which is responsible for updating the virtual location of the office hours session.

showError

This state is a boolean. It determines whether a pop up error message should be shown to the user when they click on the "Join" button. This state is true when it is not the student's turn, the student hasn't filled out the "Join the Queue" form, or the TA hasn't provided a Zoom link yet

Child Components

This component only has one child component: JoinErrorMessage. This component takes in a message prop which controls the error that is displayed on the pop up modal.

Functions

useEffect

• Parameters: None
• Runtime: O(1)
• Returns: None

This function gets executed when the information session header component is rendered. It also gets called whenever the value of the virtualLocation prop is updated. It updates the Zoom link with the virtualLocation prop, and displays the Zoom link to the user as 'saved'.

closeZoomLink

• Parameters: None
• Runtime: O(1)
• Returns: None

This function gets executed when the TA clicks on the "x" icon in the Zoom link section while in edit mode. It sets the zoomLink back to the virtualLocation prop. This gets rid of any changes that the user might have made to the zoomLink state.

saveZoomLink

• Parameters: None
• Runtime: O(1)
• Returns: None

This function gets executed when the TA clicks on the "save" button in the Zoom link section. It updates the virtual location using the onUpdate() prop to the new location.