LockedChallengeDetailsViewContainer.tsx

import React, { useState, useEffect, useContext } from 'react'
import { translate } from 'cozy-ui/react/I18n'
import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
import Header from 'components/ContainerComponents/Header/Header'
import Content from 'components/ContainerComponents/Content/Content'
import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
import { ChallengeType } from 'services/dataChallengeContracts'
import { Redirect } from 'react-router-dom'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import LockedChallengeIcon from 'assets/icons/badges/locked-big.svg'
import { Client, withClient } from 'cozy-client'
import StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid'
import { AppContext } from 'components/Contexts/AppContextProvider'
import { ScreenType } from 'enum/screen.enum'

interface LockedChallengeDetailsViewProps {
  location: any
  props: any
  client: Client
  t: Function
}

const LockedChallengeDetailsViewContainer: React.FC<LockedChallengeDetailsViewProps> = (
  props: LockedChallengeDetailsViewProps
) => {
  const t = props.t
  const [challenge, setChallenge] = useState<ChallengeType | null>(null)
  const [headerHeight, setHeaderHeight] = useState<number>(0)
  const { screenType } = useContext(AppContext)

  const defineHeaderHeight = (height: number) => {
    setHeaderHeight(height)
  }

  useEffect(() => {
    if (props.location.state) {
      setChallenge(props && props.location.state.challenge)
    }
  }, [])

  return (
    <React.Fragment>
      <CozyBar
        titleKey={'COMMON.APP_LOCKED_CHALLENGE_TITLE'}
        displayBackArrow={true}
      />
      <Header
        setHeaderHeight={defineHeaderHeight}
        desktopTitleKey={'COMMON.APP_LOCKED_CHALLENGE_TITLE'}
        displayBackArrow={true}
      ></Header>
      {!props.location.state ? <Redirect to="/challenges" /> : null}
      <Content height={headerHeight} background="var(--darkLight2)">
        {!challenge ? (
          <StyledSpinner />
        ) : (
          <>
            <div className="cp-root --locked">
              <div className="cp-content --locked">
                <div className="cp-info">
                  <div className="cp-title text-22-bold">{challenge.title}</div>

                  <StyledIconButton
                    className="cp-icon"
                    icon={LockedChallengeIcon}
                    size={screenType === ScreenType.MOBILE ? 150 : 250}
                  />
                  <div className="cp-description text-16-bold">
                    {t('CHALLENGE.LOCKED')}
                  </div>
                </div>
                <div className="cp-valid-locked">
                  <StyledButtonValid
                    color="primary"
                    onClick={() => history.goBack()}
                  >
                    {t('CHALLENGE.BACK')}
                  </StyledButtonValid>
                </div>
              </div>
            </div>
          </>
        )}
      </Content>
    </React.Fragment>
  )
}

export default translate()(withClient(LockedChallengeDetailsViewContainer))