Skip to content

Question Component

Jump to bottom
Jeremy Jung edited this page Dec 14, 2020 · 7 revisions

Question Component

Queue Me In operates with users asking questions and those questions getting assigned to TAs, who in turn help these students. This documentation discusses how the question component itself is built and how it functions for office hours.

Props and State

The question component, SessionQuestion, takes in several props, most notably the question object, the index (current position in the queue), information about the user (the user's id, if the user is a TA, etc.), and a boolean indicating if the session containing the question has expired.

There are several states for the component, and the most notable two are a boolean for if the user wants his/her location to be shown, as well as a boolean enabling a comment to be edited.

Rendering the Component

In a hierarchy, the component looks as follows, with names corresponding to className.

[TopBar]: Contains queue position, user info (only if the viewer is the asker or a TA), location, and the question itself

  • [Order]: Contains the position of the question in queue or displays '•••' if already assigned
  • [LocationPin]: Contains location icon, which when clicked, allows user to change their location by showing a textarea tag
  • [QuestionInfo]: Contains student information i.e. profile image and user information
  • [Location]: Only displays for TAs; shows the Zoom link or location of the student
  • [RightBar]: Has a comment button that enables the ability for students/TAs to comment

[CommentBox]: A separate component containing the student and TA comments

[BottomBar]: Contains the tags related to the question, as well as the time posted

[Buttons]: Only shows for TAs, and contains a few buttons for TAs to handle student questions

  • [Begin]: Shows before question is assigned, allows TA to be assigned to question
  • [Delete]: Allows TA to remove question from queue if student does not show up
  • [Done]: Allows TA to remove question from queue after question is finished
  • [DotMenu]: When clicked, allows TA to unassign himself/herself from the question

[CommentBox]: Contains box for editing comments

  • [CommentTopBar]: Contains username, user profile
  • [EditComment]: Component that keeps track of multiple states: the previous comment and the new comment being written, so that the user can either edit the comment or cancel the edit

Functions

componentDidUpdate

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

componentDidUpdate handles notifications for comments. It takes in the previous props that were passed down to the component in the last update and compares it to the latest props, specifically the comment properties contained in the question prop. If there was a TA comment or student comment added to the question, it creates a notification for the student or TA, respectively, assigned to that question.

getDisplayText

  • Parameters: index: number
  • Runtime: O(1)
  • Returns: index converted to a string

getDisplayText converts the index to a string (adding 1 as computers start from index 0). It serves as a helper function.

handleUpdateLocation

  • Parameters: Change Event for a text area element
  • Runtime: O(1)
  • Returns: None

handleUpdateLocation sends the updated location of a student to the Firestore database if he/she updates his/her location using the text box provided for updating location.

retractQuestion

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

retractQuestion removes the question from the queue if the user decides to click the remove button. It updates this on the Firestore database by setting the question's status to retracted.

toggleLocationTooltip

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

Shows/hides the text box allowing a user to update his/her location when the location button is clicked on the upper left corner.

assignQuestion

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

Updates the Firestore database to change a question to assigned when a TA decides to assign himself/herself to the user's question.

studentNoShow

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

Updates the Firestore database when a TA deletes a user's question because the user did not show up.

questionDone

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

Updates the Firestore database to change a question's status to resolved and marking the time when the question was addressed.

questionComment

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

Updates the Firestore database with the student or TA comment.

toggleComment

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

Hides/shows the comment box when the comment button is clicked on the top right corner.

setDotMenu

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

Shows/hides the menu that allows a TA to unassign himself/herself from a question

questionDontKnow

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

Resets the question to un-assigned if the TA does not know the answer to a question and updates this on the Firestore database.

Clone this wiki locally