diff --git a/src/components/Challenge/ChallengeCard/ChallengeCard.tsx b/src/components/Challenge/ChallengeCard/ChallengeCard.tsx
index dc44d0da9da2d967f59135f2f4d3ab1bd356f528..b8a5e91037a7e06959a4e983fbefdef8cae288ca 100644
--- a/src/components/Challenge/ChallengeCard/ChallengeCard.tsx
+++ b/src/components/Challenge/ChallengeCard/ChallengeCard.tsx
@@ -9,12 +9,11 @@ import ChallengeCardUnlocked from '../ChallengeCardUnlocked/ChallengeCardUnlocke
import './challengeCard.scss'
interface ChallengeCardProps {
- userChallenge?: UserChallenge
+ userChallenge: UserChallenge | undefined
indexSlider: number
index: number
cardWidth: number
cardHeight: number
- isChallengeCardLast?: boolean
moveToSlide: (slideIndex: number) => void
}
@@ -24,12 +23,10 @@ const ChallengeCard = ({
index,
cardWidth,
cardHeight,
- isChallengeCardLast = false,
moveToSlide,
}: ChallengeCardProps) => {
const renderCard = (userChallenge: UserChallenge | undefined) => {
- if (!userChallenge || isChallengeCardLast) return <ChallengeCardLast />
- switch (userChallenge.state) {
+ switch (userChallenge?.state) {
case UserChallengeState.LOCKED:
return <ChallengeCardLocked userChallenge={userChallenge} />
case UserChallengeState.UNLOCKED:
@@ -40,7 +37,7 @@ const ChallengeCard = ({
case UserChallengeState.DUEL:
return <ChallengeCardOnGoing userChallenge={userChallenge} />
default:
- return <ChallengeCardLocked userChallenge={userChallenge} />
+ return <ChallengeCardLast />
}
}
diff --git a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
index e5996a0bdee258939f48357b3ce51c2abf23c28b..028d698b59eac6ab1ff51946552ec155364d1d8c 100644
--- a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
@@ -74,7 +74,7 @@ const ChallengeCardOnGoing = ({
dispatch(updateUserChallengeList(updatedChallenge))
}
setIsLoading(false)
- navigate('/challenges/duel?id=' + userChallenge.id)
+ navigate(`/challenges/duel?id=${userChallenge.id}`)
} else {
setIsLoading(false)
toggleNoFluidModal()
diff --git a/src/components/Challenge/ChallengeView.tsx b/src/components/Challenge/ChallengeView.tsx
index b2de63cc4a49ac93f02b48fa8f90b73a2b9c3165..b253829e1f9ce227a508b8f36073e0110a4780b0 100644
--- a/src/components/Challenge/ChallengeView.tsx
+++ b/src/components/Challenge/ChallengeView.tsx
@@ -23,10 +23,13 @@ const ChallengeView = () => {
const [touchStart, setTouchStart] = useState<number>()
const [touchEnd, setTouchEnd] = useState<number>()
const [index, setIndex] = useState<number>(0)
- const [isLastDuelDone, setIsLastDuelDone] = useState<boolean>(false)
const [containerTranslation, setContainerTranslation] =
useState<number>(marginPx)
+ const isLastDuelDone =
+ userChallengeList[userChallengeList.length - 1].state ==
+ UserChallengeState.DONE
+
const resetValues = () => {
// Method used to cancel a swipe on a simple click
setTouchEnd(0)
@@ -34,10 +37,7 @@ const ChallengeView = () => {
}
const moveSliderRight = useCallback(() => {
- if (
- index < userChallengeList.length - 1 ||
- (isLastDuelDone && index < userChallengeList.length)
- ) {
+ if (index < userChallengeList.length - (isLastDuelDone ? 0 : 1)) {
setContainerTranslation(prev => prev - cardWidth - marginPx)
setIndex(prev => prev + 1)
}
@@ -94,15 +94,6 @@ const ChallengeView = () => {
setIndex(currentChallengeIndex)
}, [userChallengeList, cardWidth, isLastDuelDone])
- useEffect(() => {
- if (
- userChallengeList[userChallengeList.length - 1].state ==
- UserChallengeState.DONE
- ) {
- setIsLastDuelDone(true)
- }
- }, [userChallengeList])
-
return (
<>
<CozyBar titleKey="common.title_challenge" />
@@ -141,11 +132,11 @@ const ChallengeView = () => {
{isLastDuelDone && (
<ChallengeCard
+ userChallenge={undefined}
indexSlider={index}
index={userChallengeList.length}
cardWidth={cardWidth}
cardHeight={cardHeight}
- isChallengeCardLast={true}
moveToSlide={moveToSlide}
/>
)}
diff --git a/src/components/Duel/DuelOngoing/DuelOngoing.tsx b/src/components/Duel/DuelOngoing/DuelOngoing.tsx
index dc8073ada3b6b20a648693155d83922dac95a69d..574bf643e97845bca6bfa021d8b5e2932a33c816 100644
--- a/src/components/Duel/DuelOngoing/DuelOngoing.tsx
+++ b/src/components/Duel/DuelOngoing/DuelOngoing.tsx
@@ -11,7 +11,7 @@ import {
UserChallengeUpdateFlag,
UserDuelState,
} from 'enums'
-import { Dataload, UserChallenge, UserDuel } from 'models'
+import { Dataload, UserChallenge } from 'models'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import ChallengeService from 'services/challenge.service'
@@ -36,29 +36,28 @@ interface DuelOngoingProps {
const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => {
const { t } = useI18n()
const client = useClient()
+ const navigate = useNavigate()
+ const dispatch = useAppDispatch()
const { currentDataload, userChallengeList } = useAppSelector(
state => state.ecolyo.challenge
)
- const dispatch = useAppDispatch()
- const navigate = useNavigate()
const [resultModal, setResultModal] = useState<boolean>(false)
const [winChallenge, setWinChallenge] = useState<boolean>(false)
- const [isLastDuel, setIsLastDuel] = useState<boolean>(false)
+ const [showLastDuelModal, setShowLastDuelModal] = useState<boolean>(false)
const [finishedDataLoad, setFinishedDataLoad] = useState<Dataload[]>()
const chartContainer = useRef<HTMLDivElement>(null)
const { height, width } = useChartResize(chartContainer, false)
const challengeService = useMemo(() => new ChallengeService(client), [client])
- const duel: UserDuel = userChallenge.duel
- const title: string = duel.title
- const durationInDays: number = duel.duration.days
+ const duel = userChallenge.duel
+
+ const isLastDuel =
+ userChallenge.id == userChallengeList[userChallengeList.length - 1]?.id
- const userConsumption: string = formatNumberValues(
+ const userConsumption = formatNumberValues(
userChallenge.duel.userConsumption
).toString()
- const average: string = formatNumberValues(
- userChallenge.duel.threshold
- ).toString()
+ const average = formatNumberValues(userChallenge.duel.threshold).toString()
const setResult = useCallback(async () => {
const challengeService = new ChallengeService(client)
@@ -83,21 +82,12 @@ const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => {
dispatch(unlockNextUserChallenge(updatedChallenge))
dispatch(toggleChallengeDuelNotification(false))
- if (
- userChallenge.id == userChallengeList[userChallengeList.length - 1].id
- ) {
- setIsLastDuel(true)
+ if (isLastDuel) {
+ setShowLastDuelModal(true)
} else {
navigate('/challenges')
}
- }, [
- client,
- userChallenge,
- winChallenge,
- dispatch,
- userChallengeList,
- navigate,
- ])
+ }, [client, userChallenge, winChallenge, dispatch, isLastDuel, navigate])
useEffect(() => {
let subscribed = true
@@ -147,13 +137,11 @@ const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => {
) : (
<div className="duel-goal text-18-normal">
{t('duel.goal1', {
- durationInDays,
- smartCount: durationInDays,
+ durationInDays: duel.duration.days,
})}
<span> </span>
{t('duel.goal2', {
- title,
- smartCount: title,
+ title: duel.title,
})}
</div>
)}
@@ -203,7 +191,7 @@ const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => {
handleCloseClick={setResult}
/>
<LastDuelModal
- open={isLastDuel}
+ open={showLastDuelModal}
handleCloseClick={() => navigate('/challenges')}
/>
</>
diff --git a/src/components/Duel/DuelView.tsx b/src/components/Duel/DuelView.tsx
index 5e29d720c8f6bd2e45a47d42b0a722f5178fbf3b..1c60115ab09cdfac9793d86f43417f5f6763b3c2 100644
--- a/src/components/Duel/DuelView.tsx
+++ b/src/components/Duel/DuelView.tsx
@@ -1,7 +1,7 @@
import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
-import { UserChallengeState, UserDuelState } from 'enums'
+import { UserDuelState } from 'enums'
import { UserChallenge } from 'models'
import React, { useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
@@ -23,8 +23,8 @@ const DuelView = () => {
const goBackToChallenge = () => {
navigate('/challenges')
}
- const renderDuel = (challenge: UserChallenge) => {
- switch (challenge.duel.state) {
+ const renderDuel = (challenge: UserChallenge | undefined) => {
+ switch (challenge?.duel.state) {
case UserDuelState.UNLOCKED:
return <DuelUnlocked userChallenge={challenge} />
case UserDuelState.ONGOING:
@@ -52,15 +52,7 @@ const DuelView = () => {
displayBackArrow={true}
/>
<Content heightOffset={headerHeight}>
- <div>
- {challengeToDisplay &&
- (challengeToDisplay.state === UserChallengeState.DUEL ||
- challengeToDisplay.state === UserChallengeState.DONE) ? (
- renderDuel(challengeToDisplay)
- ) : (
- <DuelError />
- )}
- </div>
+ {renderDuel(challengeToDisplay)}
</Content>
</>
)
diff --git a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
index 14af31e26777e73662c46c65845fac26cffe9ac2..ee273a798dd2f43980f4583ff4a56f0a5e184a1a 100644
--- a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
+++ b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
@@ -433,25 +433,27 @@ exports[`lastDuelModal component should render correctly 1`] = `
xlink:href="#test-file-stub"
/>
</svg>
- <div
- class="text-28-bold title"
+ <h1
+ class="text-28-bold"
>
last_duel_modal.title
- </div>
- <div
- class="text-22-bold subtitle"
- >
- last_duel_modal.subtitle
- </div>
- <div
- class="text-18-normal content"
- >
- last_duel_modal.message1
- </div>
- <div
- class="text-18-normal content"
- >
- last_duel_modal.message2
+ </h1>
+ <div>
+ <h2
+ class="text-22-bold"
+ >
+ last_duel_modal.subtitle
+ </h2>
+ <p
+ class="text-18-normal"
+ >
+ last_duel_modal.message1
+ </p>
+ <p
+ class="text-18-normal"
+ >
+ last_duel_modal.message2
+ </p>
</div>
</div>
</div>
@@ -739,25 +741,27 @@ exports[`lastDuelModal component should render correctly 1`] = `
</Component>
</Icon>
</StyledIcon>
- <div
- className="text-28-bold title"
+ <h1
+ className="text-28-bold"
>
last_duel_modal.title
- </div>
- <div
- className="text-22-bold subtitle"
- >
- last_duel_modal.subtitle
- </div>
- <div
- className="text-18-normal content"
- >
- last_duel_modal.message1
- </div>
- <div
- className="text-18-normal content"
- >
- last_duel_modal.message2
+ </h1>
+ <div>
+ <h2
+ className="text-22-bold"
+ >
+ last_duel_modal.subtitle
+ </h2>
+ <p
+ className="text-18-normal"
+ >
+ last_duel_modal.message1
+ </p>
+ <p
+ className="text-18-normal"
+ >
+ last_duel_modal.message2
+ </p>
</div>
</div>
</div>
diff --git a/src/components/Duel/LastDuelModal/lastDuelModal.scss b/src/components/Duel/LastDuelModal/lastDuelModal.scss
index 05a14432af96c886a876407a8e54f65b0d6f4c60..65fb3afaa6d50b50700e590a13b90708e091ff01 100644
--- a/src/components/Duel/LastDuelModal/lastDuelModal.scss
+++ b/src/components/Duel/LastDuelModal/lastDuelModal.scss
@@ -2,22 +2,25 @@
.duel-last-modal-root {
text-align: center;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
.closeIcon {
float: right;
cursor: pointer;
}
.icon {
- margin: 2rem 0 0;
+ margin: auto;
}
- .title {
- margin: 1rem 0 1rem;
+ h1 {
+ color: $white;
}
- .subtitle {
+ h2 {
color: $blue-light;
- margin: 1rem 0 0.5rem;
+ margin: 0;
}
- .content {
- margin: 0.5rem 0;
+ p {
+ color: $grey-bright;
}
}
diff --git a/src/components/Duel/LastDuelModal/lastDuelModal.tsx b/src/components/Duel/LastDuelModal/lastDuelModal.tsx
index 92deec333ef696c3f46f3c09f511108eaa2c3148..032a32d9fa787c812aef18b136de1eca862518d6 100644
--- a/src/components/Duel/LastDuelModal/lastDuelModal.tsx
+++ b/src/components/Duel/LastDuelModal/lastDuelModal.tsx
@@ -30,15 +30,11 @@ const LastDuelModal = ({ open, handleCloseClick }: LastDuelModalProps) => {
<StyledIcon className="closeIcon" icon={CloseIcon} size={16} />
</div>
<StyledIcon className="icon" icon={star} size={48} />
- <div className="text-28-bold title">{t('last_duel_modal.title')}</div>
- <div className="text-22-bold subtitle">
- {t('last_duel_modal.subtitle')}
- </div>
- <div className="text-18-normal content">
- {t('last_duel_modal.message1')}
- </div>
- <div className="text-18-normal content">
- {t('last_duel_modal.message2')}
+ <h1 className="text-28-bold">{t('last_duel_modal.title')}</h1>
+ <div>
+ <h2 className="text-22-bold">{t('last_duel_modal.subtitle')}</h2>
+ <p className="text-18-normal">{t('last_duel_modal.message1')}</p>
+ <p className="text-18-normal">{t('last_duel_modal.message2')}</p>
</div>
</div>
</Dialog>