ActionView.tsx

import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import { UserActionState } from 'enums'
import { UserChallenge } from 'models'
import React, { useRef } from 'react'
import { useAppSelector } from 'store/hooks'
import ActionChoose from './ActionChoose/ActionChoose'
import ActionDone from './ActionDone/ActionDone'
import ActionOnGoing from './ActionOnGoing/ActionOnGoing'

/**
 * http://ecolyo.cozy.tools:8080/#/challenges/action
 */
const ActionView = () => {
  const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)

  const mainContentRef = useRef<HTMLDivElement>(null)
  const focusMainContent = () => {
    setTimeout(() => mainContentRef.current?.focus(), 0)
  }

  const renderAction = (challenge: UserChallenge) => {
    switch (challenge.action.state) {
      case UserActionState.ONGOING:
        return <ActionOnGoing userAction={challenge.action} />
      case UserActionState.NOTIFICATION:
        return <ActionDone currentChallenge={challenge} />
      case UserActionState.UNSTARTED:
      default:
        return (
          <ActionChoose userChallenge={challenge} setFocus={focusMainContent} />
        )
    }
  }

  return (
    <>
      <CozyBar titleKey="common.title_action" displayBackArrow={true} />
      <Header desktopTitleKey="common.title_action" displayBackArrow={true} />
      <Content>
        <div
          ref={mainContentRef}
          style={{ outline: 'none', margin: 'auto' }}
          tabIndex={-1}
        >
          {currentChallenge && renderAction(currentChallenge)}
        </div>
      </Content>
    </>
  )
}

export default ActionView