Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
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>
<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>
</div>
</div>
</div>
</div>
<EcogestureModal
opened={openEcogestureModal}
ecogesture={challenge.selectedEcogestures[challengeEcogesture]}
handleCloseClick={handleCloseClick}
/>
</>
)}
</Content>
</React.Fragment>
)
}
export default translate()(withClient(OngoingChallengeDetailsViewContainer))