Function TutorialPage

web-app/src/containers/Tutorial/index.tsx:102–244

(props: PageProps)

 */

const TutorialPage = (props: PageProps) => {
  const theme: Theme = useTheme()
  const { position, processes, testStatus } = props.context

  const tutorial = selectors.currentTutorial(props.context)

  const onContinue = (): void => {
    props.send({
      type: 'NEXT_LEVEL',
    })
  }

  const onRunTest = (): void => {
    props.send({ type: 'RUN_TEST' })
  }

  const onReset = (): void => {
    props.send({ type: 'RUN_RESET' })
  }

  const onResetToPosition = (position: T.Position): void => {
    props.send({ type: 'RUN_RESET_TO_POSITION', payload: { position } })
  }

  const [menuVisible, setMenuVisible] = React.useState(false)

  const [page, setPage] = React.useState<'level' | 'review' | 'settings'>('level')

  const onSettingsReset = () => {
    //Reset to first level first step
    const level: T.LevelUI | null = levels.length ? levels[1] : null
    if (level) {
      onResetToPosition({
        levelId: level.id,
        stepId: level.steps.length ? level.steps[0].id : null,
        complete: false,
      })
      setPage('level')
    }
  }
  // format level code with status for easy rendering
  const { level, levels, levelIndex, stepIndex } = formatLevels({
    position,
    levels: tutorial.levels,
    testStatus,
  })

  const disableOptions = processes.length > 0 || props.state === 'Level.TestRunning'

  return (
    <div>
      <div css={styles.page}>
        <div css={styles.header}>
          <a onClick={() => setMenuVisible(!menuVisible)}>
            <Icon type="toggle-left" size="small" style={styles.menuIcon(theme)} />
          </a>
          <span css={styles.title}>{tutorial.summary.title}</span>
        </div>