Newcomer workshop

This is a wiki page containing a guide about the workshop for newcomers.

The workshop will consist of you trying to solve the bugs that we introduced by design.

The goal is for you to get a better understanding of the workings inside of the project.

Some of the steps of the workshop have hints with the goal of trying to make you better understand of what you need to do.

0. How to start?

1. git clone git@github.com:NIAEFEUP/tts-fe.git

2. git checkout newcomer-workshop

1. Selecting options is not working

The desired functionality is the one described in the video.

Hints:

• You should find where a variable called selectedOptions is defined and understand what is wrong with its definition.

2. Changing option name is not working

• Inside the SelectedOptionController.tsx, there is a variable named optionName whose value is displayed as the name

• You should see the renameOptionName function and see that it alters the multipleOptions changing the name of the option.

• Thus you should create a way to update the optionName value with the correct one (which is multipleOptions[selectedOption].name). What is the react function that enables us to run a function when a value changes?

• Now, after updating the the optionName value when multipleOptions changes, you should also update its value when the selectedOption variable name changes because as of now if you try to select a certain option you will see that the name will not change smoothly.

• You can add multiple dependencies to a useEffect array.

3. When a course is selected in the CoursePicker the course units are not showing.

Hints:

• You should look at this example, that uses the useSwr hook.

• You should create a file, for example, named useCourseUnits.tsx where you call the api endpoint which is getCoursesByMajorId(Number(id))

• This has the goal of understanding how to create a custom hook like it is specified here