AddQuestion Component

AddQuestion Component

Props

This component takes in three props:

1. session: contains information about the office hours session
2. course: contains information about the course
3. mobileBreakpoint: size at which the view switches to mobile view

States

This component keeps track of the following states:

1. location stores the link/building that the student enters
2. question stores the question the student enters
3. stage stores the state of the add question state machine
4. width stores width of screen
5. selectedPrimary stores the first tag the user selects
6. selectedSecondary stores the second tag the user selects
7. redirect stores whether the user should be redirected from the join queue page to the queue
8. tags stores all possible tags for the course

Add Question State Machine

stage - state - state description

10 - initial state - nothing selected, secondary & text fields locked
20 - primary selected - shows a single primary tag, unlocks secondary
30 - one or more secondary tags selected - unlocks location field
40 - location inputted - unlocks question field
50 - contents in question field - unlocks submit button
60 - Warning modal (replaces question modal) - toggles after submit if n minutes are left in queue

State Machine Outline

|-------------------- primary tag unselected --------------------| |-------------------- location cleared -----------------|
|                                                                | |                                                       |
|                              |--- secondary tag unselected ----| |                          |----- question cleared -----|
\/                             \/                                |\/                          \/                           |
10 -- primary tag selected --> 20 --> secondary tag selected --> 30 --> location inputted --> 40 --> question inputted --> 50 
/\                            | /\                                /\                           |                           |
|__ primary tag unselected ___| |                                 |_____ location cleared _____|                           |
                                |                                                              |                           |
                                |__________________ secondary tag unselected __________________|                           |
                                |                                                     |        |                           |
                                |__________________ primary tag unselected ___________|________|                           |
                                                                                 |    |____________________________________|
                                                                                 |_________________________________________|
                                                                                                                           |
                                                                                                                           |
                                                                                                                           |
                                                                                                             office hours are almost over
                                                                                                                           |
                                                                                                                           |
                                                                                                                           \/
                                                                                                                           60

Main Functions

handlePrimarySelected
Parameter: tag (FireTag)
Runtime: O(1)
Returns: None

This function gets called when the student (un)selects a primary tag. It handles updating the states accordingly. If the student is unselecting a primary tag, move back to stage 10 and set the primary tag state as undefined. If the student is reselecting a different tag, update the primary tag state with the new tag, move to stage 20, and clear the location and question (to keep consistent with the state machine). If the student is selecting a primary tag for the first time, move to stage 20 and update the primary tag.

handleSecondarySelected
Parameter: tag (FireTag)
Runtime: O(1)
Returns: None

This function gets called when the student (un)selects a secondary tag. It handles updating the states accordingly. If the student is unselecting a secondary tag, move back to stage 20 and set the secondary tag state as undefined. If the student is reselecting a different tag, update the secondary tag state with the new tag, move to stage 30, and clear the location and question (to keep consistent with the state machine). If the student is selecting a secondary tag for the first time, move to stage 30 and update the secondary tag.

handleUpdateLocation
Parameter: event (React.ChangeEvent)
Runtime: O(1)
Returns: None

This function gets called when the student is joining the queue of a hybrid office hour. This function determines the new stage: if the students entered a location move the stage to 40 and update the location state.

handleUpdateQuestion
Parameter: event (React.ChangeEvent)
Runtime: O(1)
Returns: None

This function gets called when the question text box is edited. It updates the question state and sets the new stage to 50 if the student enters a question and if the student deletes the question they entered, the stage gets set to 40.

addQuestion
Parameter: None
Returns: None

This function stores the question information (from the React states of this component) in the firebase. It stores information such as: askerID, sessionID, status, timeEntered, answererId, content, primaryTag, secondaryTag.

handleJoinClick
Parameter: None
Runtime: O(1)
Returns: None

If the office hours session is almost over, update the stage state to 60 (which displays a message letting the student know that the office hours session is almost over). Otherwise, call the addQuestion function.