Exercise page design (#1975)

Components

Dropdown to switch the module

If there's a moduleId in the URL params, set it as the default module. Else, query a list of modules for lessonSlug and list them. Set the first module as the default one.

Shape:

// Get moduleId and lessonSlug from URL
const { moduleId } = router.query

// States
const [activeModule, setActiveModule] = useState(moduleId)
const filteredModule = modules.filter(
    ... => module.lesson.slug === lessonSlug
)

<DropdownMenu ...  />

// DropdownMenu example Impl
const DropDownMenu = (filteredModules, activeModule, setActiveModule) => {
  return (
      <Dropdown>
        <Dropdown.Toggle>
          {activeModule.title}
        </Dropdown.Toggle>
        <Dropdown.Menu>
          {filteredModules?.map((module, index) => (
            <Dropdown.Item onClick={() => setActiveModule(module)}>
              {module.title}
            </Dropdown.Item>
          ))}
        </Dropdown.Menu>
      </Dropdown>
  )
}

Questions:

• What happens if the moduleId in the URL is invalid?
• What if there are 100 modules?
  • How to list them?
    • Add an input where they can see a list of modules and search for one.
• What if the module got renamed while another eng is trying to add an exercise to it?
  • We use the moduleId to find the right module to add an exercise to.

Exaplantion & Question inputs

Use mdInput. There will be a state that will be updated with the value the input has.

Answer radio inputs

Shape:

Regular input

Look into using formik useFormik hook. It'll simplify the code as with the current shape, we'll have to pass 3 setState actions, and 3 reactive values.

Questions:

• How to figure out if no answer was chosen as the correct answer?
  • Where should the error message appear?
    • Above the inputs

Submit button

Once clicked, it'll run useAddExercise with the inputs values. An object could be used to hold all the values.