AddQuestion Component

AddQuestion Component

Props

This component takes in three props:

1. session
2. course
3. mobileBreakpoint

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
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. If the student is selecting a tag for the first time

handleSecondarySelected

handleUpdateLocation

handleUpdateQuestion

addQuestion

handleJoinClick