Skip to content
Snippets Groups Projects
OngoingChallengeDetailsViewContainer.tsx 6.31 KiB
Newer Older
  • Learn to ignore specific revisions
  • Hugo NOUTS's avatar
    Hugo NOUTS committed
    import React, { useState, useEffect, useContext } from 'react'
    import { AppContext } from 'components/Contexts/AppContextProvider'
    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 { UserChallenge, ChallengeState } from 'services/dataChallengeContracts'
    import { Redirect } from 'react-router-dom'
    import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
    import EcogestureModal from 'components/ContentComponents/EcogestureModal/EcogestureModal'
    import EcogestureCard from 'components/ContentComponents/EcogestureCard/EcogestureCard'
    import ChallengeManager from 'services/challengeDataManagerService'
    import { Client, withClient } from 'cozy-client'
    import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
    import { formatCompareChallengeDate } from 'utils/utils'
    import AvailableChallengeIcon from 'assets/icons/badges/available-big.svg'
    import OngoingChallengePile from 'components/ContentComponents/Challenge/OngoingChallengePile'
    import OngoingChallengeViewingDate from 'components/ContentComponents/Challenge/OngoingChallengeViewingDate'
    import FollowChallengeTimeline from 'components/ContentComponents/Challenge/FollowChallengeTimeline'
    import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
    
    interface OngoingChallengeDetailsViewProps {
      location: any
      props: any
      client: Client
      t: Function
    }
    
    const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsViewProps> = (
      props: OngoingChallengeDetailsViewProps
    ) => {
      const t = props.t
      const client = props.client
      const challengeManager = new ChallengeManager(client)
    
      const { refreshCurrentChallenge } = useContext(AppContext)
      const [challengeEcogesture, setChallengeEcogesture] = useState<number>(0)
      const [openEcogestureModal, setOpenEcogestureModal] = useState(false)
      const [challenge, setChallenge] = useState<UserChallenge | null>(null)
      const [headerHeight, setHeaderHeight] = useState<number>(0)
      const [maxEnergy, setMaxEnergy] = useState<number | null>(0)
    
      const defineHeaderHeight = (height: number) => {
        setHeaderHeight(height)
      }
    
      async function stopChallenge(challenge: UserChallenge) {
        if (challenge) {
          await challengeManager.updateChallengeState(
            challenge.id,
            ChallengeState.ABANDONED
          )
          await refreshCurrentChallenge()
          history.goBack()
        }
      }
    
      const handleClick = (index: number) => {
        setChallengeEcogesture(index)
        setOpenEcogestureModal(true)
      }
    
      const handleCloseClick = () => {
        setOpenEcogestureModal(false)
      }
    
      useEffect(() => {
        if (props.location.state) {
          setChallenge(props && props.location.state.challenge)
          setMaxEnergy(props.location.state.challenge.maxEnergy)
        }
      }, [])
    
      return (
        <React.Fragment>
          <CozyBar
            titleKey={'COMMON.APP_ONGOING_CHALLENGE_TITLE'}
            displayBackArrow={true}
          />
          <Header
            setHeaderHeight={defineHeaderHeight}
            desktopTitleKey={'COMMON.APP_ONGOING_CHALLENGE_TITLE'}
            displayBackArrow={true}
          ></Header>
          {!props.location.state ? <Redirect to="/challenges" /> : null}
          <Content height={headerHeight} background="var(--darkLight2)">
            {!challenge ? (
              <StyledSpinner />
            ) : (
              <>
                <div className="cp-root ongoing-challenge">
                  <div className="cp-content">
                    <div className="cp-info">
                      <div className="cp-title text-22-bold">
                        {challenge.challengeType && challenge.challengeType.title}
                      </div>
                      {challenge.challengeType &&
                      challenge.challengeType.type === 1 ? (
                        <StyledIcon
                          className="cp-icon-available"
                          icon={AvailableChallengeIcon}
                          size={100}
                        />
                      ) : (
                        <div className="cp-follow">
                          {maxEnergy && maxEnergy === -1 && (
                            <OngoingChallengeViewingDate challenge={challenge} />
                          )}
                          <OngoingChallengePile challenge={challenge} />
                          <FollowChallengeTimeline challenge={challenge} />
                        </div>
                      )}
    
                      <div className="cp-description text-16-bold">
                        {challenge.challengeType &&
                          challenge.challengeType.description}
                        {challenge.challengeType &&
                        challenge.challengeType.type === 1
                          ? null
                          : formatCompareChallengeDate(challenge)}
                      </div>
    
                      <div className="cp-valid --ongoing">
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
                        <StyledStopButton
                          color="secondary"
                          onClick={() => stopChallenge(challenge)}
                        >
                          {t('CHALLENGE.STOP')}
                        </StyledStopButton>
                      </div>
                    </div>
                    <div className="cp-bottom">
                      <div className="cp-eg-content">
                        <span className="linked-ecogestures">
                          {t('CHALLENGE.LINKED_ECOGESTURES')}
                        </span>
                        <div className="cp-ecogestures">
    
                          {challenge.selectedEcogestures.map((eg, index) => (
                            <EcogestureCard
                              key={index}
                              ecogesture={eg}
                              handleClick={() => handleClick(index)}
                              challengeEcogesture={index + 1}
                            />
                          ))}
                        </div>
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
                      </div>
                    </div>
                  </div>
                </div>
                <EcogestureModal
                  opened={openEcogestureModal}
                  ecogesture={challenge.selectedEcogestures[challengeEcogesture]}
                  handleCloseClick={handleCloseClick}
                />
              </>
            )}
          </Content>
        </React.Fragment>
      )
    }
    
    export default translate()(withClient(OngoingChallengeDetailsViewContainer))