ChallengesViewContainer.tsx

import React, { useState } from 'react'
import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
import Header from 'components/ContainerComponents/Header/Header'
import Content from 'components/ContainerComponents/Content/Content'
import { SelectView } from 'services/dataChallengeContracts'
import ChallengeNavigator from 'components/ContentComponents/ChallengeNavigator/ChallengeNavigator'
import BadgesContainer from 'components/ContainerComponents/BadgesContainer/BadgesContainer'
import EcogesturesContainer from 'components/ContainerComponents/EcogestureContainer/EcogesturesContainer'

const ChallengesViewContainer: React.FC = () => {
  const [headerHeight, setHeaderHeight] = useState<number>(0)
  const [selectedView, setSelectedView] = useState<SelectView>(0)
  const defineHeaderHeight = (height: number) => {
    setHeaderHeight(height)
  }

  const handleClickSelectedViewForNavigation = (_selectedView: SelectView) => {
    setSelectedView(_selectedView)
  }
  return (
    <React.Fragment>
      <CozyBar titleKey={'COMMON.APP_CHALLENGE_TITLE'} />
      <Header
        setHeaderHeight={defineHeaderHeight}
        desktopTitleKey={'COMMON.APP_CHALLENGE_TITLE'}
      >
        <ChallengeNavigator
          selectedView={selectedView}
          handleClickSelectView={handleClickSelectedViewForNavigation}
        />
      </Header>
      <Content height={headerHeight} background="var(--darkLight2)">
        {selectedView === 0 ? <BadgesContainer /> : <EcogesturesContainer />}
      </Content>
    </React.Fragment>
  )
}

export default ChallengesViewContainer