State variables structure

This page will include detailed information about the most important states and variables that we use in the app.

We have 2 main data structures related to where course information is stored

• Multiple options $\rightarrow$ Used to store the chosen classes for the courses picked by the user according to the selected option (icon clicked)

• Picked courses $\rightarrow$ Used to store the courses that the user chose on the CoursePicker modal.

Below we are going to describe in more detail these two states.

Do you see the classes selected in the dropdowns as well as the buttons with the icon numbers on it in the image below?

How are we able to store that inside of the code?´

We have a variable called multipleOptions, which is an array of Options.

This multipleOptions is used to determine the slots picked for each course depending on the selected option (aka the icon selected)

type MultipleOptions = Array<Option>

What does each position of the array represent?

• The first position of the array corresponds to when the user has the button with the icon of number 1 selected.
• The second position of the array corresponds to when the user has the button with the icon of number 2 selected.
• The third position of the array corresponds to when the user has the button with the icon of number 3 selected.
• And so on ...

Now that we know what each position represents, what does the Option value in that position represent?

type Option = {
  id: number,
  icon: string,
  name: string,
  course_options: Array<CourseOption>
}

• It specifies the id, the name and the icon. In the case of the first option, which is the one selected in the image the name is "Horário 1"

• The course_options attribute is an array related to the courses that the user chose. In the example of the image, that specific array will contain the an entry for AC, another for DS, another for SDLE, another for AC and another for PRI.

And what about the CourseOption type?

type CourseOption = {
  course_id: number,
  picked_class_id: number,
  locked: boolean,
  filteredTeachers: Array<number>,
  hide: Array<lesson_type>,
}

• The picked_class_id field specified the id of the class (e.g. 1MEIC01, 1MEIC02) that the user has chosen. If the user didn't choose any class, the value should be null.

• The locked field is to determine if the option can be changed or not. As expected, if the value of locked is true, it will mean that that option cannot be changed.

• The filteredTeachers controls the value for the professors filters in the dropdown