Skip to content
Snippets Groups Projects
Commit 4305ba18 authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

chore: fix types errors

parent 93b1631b
Branches
Tags
2 merge requests!8382.3.0 Release,!834chore: fix types errors
Showing
with 250 additions and 216 deletions
...@@ -44,6 +44,7 @@ ...@@ -44,6 +44,7 @@
"cicid", "cicid",
"CONSO", "CONSO",
"cozycloud", "cozycloud",
"d’éco",
"dacc", "dacc",
"Datachart", "Datachart",
"dataload", "dataload",
...@@ -52,6 +53,8 @@ ...@@ -52,6 +53,8 @@
"Dataloads", "Dataloads",
"defi", "defi",
"depense", "depense",
"désembouant",
"désembouer",
"doctypes", "doctypes",
"ecogesture", "ecogesture",
"Ecogesture", "Ecogesture",
...@@ -59,26 +62,35 @@ ...@@ -59,26 +62,35 @@
"ecolyo", "ecolyo",
"Ecolyo", "Ecolyo",
"ecolyodemo", "ecolyodemo",
"Ecoreno'v",
"eglgrandlyon", "eglgrandlyon",
"elec", "elec",
"élec",
"enedis", "enedis",
"Enedis", "Enedis",
"ENEDIS", "ENEDIS",
"enedissgegrandlyon", "enedissgegrandlyon",
"Epgl", "Epgl",
"esnext",
"firstname", "firstname",
"fluidchart", "fluidchart",
"fluidchartslide", "fluidchartslide",
"fluidsprices",
"fluidtype", "fluidtype",
"Folinge",
"Gazpar", "Gazpar",
"Gier", "Gier",
"grandlyon", "grandlyon",
"grdf", "grdf",
"GRDF", "GRDF",
"grdfgrandlyon", "grdfgrandlyon",
"Hypervitesse",
"késako",
"Konnected", "Konnected",
"konnector", "konnector",
"konnectors", "konnectors",
"l'ADEME",
"L’embouage",
"lastname", "lastname",
"legalnotice", "legalnotice",
"llle", "llle",
...@@ -86,19 +98,36 @@ ...@@ -86,19 +98,36 @@
"luxon", "luxon",
"matomo", "matomo",
"Matomo", "Matomo",
"maxpower",
"MEGAUNIT", "MEGAUNIT",
"Métroooooo",
"monthlyanalysis", "monthlyanalysis",
"mousseur",
"mousseurs",
"multifluid", "multifluid",
"MULTIFLUID", "MULTIFLUID",
"mutlifluid", "mutlifluid",
"numerique", "numerique",
"oeufs",
"picto",
"Picto", "Picto",
"PIV'EAU",
"profileecogesture",
"profiletype", "profiletype",
"PROFILETYPE", "PROFILETYPE",
"pseudonymisées",
"Reinit", "Reinit",
"SHARAPOWATT",
"splashscreen", "splashscreen",
"swipeable",
"Swipeable",
"Téléo",
"testid", "testid",
"Tétris", "Tétris",
"UNSTARTED" "timestep",
"UNSTARTED",
"usageevent",
"Usain",
"userchallenge"
] ]
} }
<svg width="9" height="19" viewBox="0 0 9 19" fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"> <svg width="9" height="19" viewBox="0 0 9 19" fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg">
<path d="M0.727051 18L8.72705 9L0.727049 6.99382e-07" fill="#FFFFFF"/> <path d="M0.727051 18L8.72705 9L0.727049 6.99382e-07" fill="#FFFFFF"/>
</g>
</svg> </svg>
...@@ -8,7 +8,6 @@ import chevronDown from 'assets/icons/ico/chevron-down.svg' ...@@ -8,7 +8,6 @@ import chevronDown from 'assets/icons/ico/chevron-down.svg'
import ProfileEditIcon from 'assets/icons/ico/profile-edit.svg' import ProfileEditIcon from 'assets/icons/ico/profile-edit.svg'
import AnalysisIcon from 'assets/icons/visu/analysis/analysis.svg' import AnalysisIcon from 'assets/icons/visu/analysis/analysis.svg'
import PlaceHolderIcon from 'assets/icons/visu/analysis/no-profile-placeholder.svg' import PlaceHolderIcon from 'assets/icons/visu/analysis/no-profile-placeholder.svg'
import AnalysisConsumptionRow from 'components/Analysis/AnalysisConsumptionRow'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon' import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Loader from 'components/Loader/Loader' import Loader from 'components/Loader/Loader'
import { Client, useClient } from 'cozy-client' import { Client, useClient } from 'cozy-client'
...@@ -25,6 +24,7 @@ import ProfileTypeService from 'services/profileType.service' ...@@ -25,6 +24,7 @@ import ProfileTypeService from 'services/profileType.service'
import ProfileTypeEntityService from 'services/profileTypeEntity.service' import ProfileTypeEntityService from 'services/profileTypeEntity.service'
import { AppStore } from 'store' import { AppStore } from 'store'
import './analysisConsumption.scss' import './analysisConsumption.scss'
import AnalysisConsumptionRow from './AnalysisConsumptionRow'
interface AnalysisConsumptionProps { interface AnalysisConsumptionProps {
aggregatedPerformanceIndicator: PerformanceIndicator aggregatedPerformanceIndicator: PerformanceIndicator
...@@ -165,95 +165,130 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({ ...@@ -165,95 +165,130 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
const Consumption = ( const Consumption = (
<> <>
<div className="consumption-title text-20-bold"> <div className="status-header">
<div className="user-title">{t('analysis.user_consumption')}</div> <div>
<div className={`average-title`}>{t(`analysis.comparison`)}</div> <StyledIcon icon={AnalysisIcon} size={44} />
</div> <p className="text-16-normal">{t('analysis.compare.title')}</p>
<div className="consumption-price"> </div>
<AnalysisConsumptionRow {profile.isProfileTypeCompleted && (
fluid={FluidType.MULTIFLUID} <Button
userPriceConsumption={userPriceConsumption} aria-label={t('analysis.accessibility.button_go_to_profil')}
homePriceConsumption={homePriceConsumption} onClick={goToForm}
performanceValue={null} classes={{
forecast={forecast} root: 'btn-secondary-negative',
connected={fluidTypes.length > 0} label: 'text-16-normal',
noData={false} }}
/> >
<StyledIcon icon={ProfileEditIcon} size={40} />
</Button>
)}
</div> </div>
{fluidTypes.map(
(fluid, index) =>
performanceIndicators[fluid]?.value && (
<AnalysisConsumptionRow
key={index}
fluid={fluid}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
performanceValue={performanceIndicators[fluid].value}
forecast={forecast}
connected={true}
noData={false}
/>
)
)}
{fluidTypes.length < 3 && <hr className="consumption-sep" />}
{disconnectedFluidTypes.map((fluid, index) => (
<AnalysisConsumptionRow
key={index}
fluid={fluid}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
connected={false}
noData={false}
/>
))}
{emptyFluidTypes.map((fluid, index) => (
<AnalysisConsumptionRow
key={index}
fluid={fluid}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
connected={false}
noData={true}
/>
))}
<Accordion <div className="analysis-graph">
expanded={activeAverageHome} {!profile.isProfileTypeCompleted ? (
onChange={toggleAccordion} profileNotCompleted()
classes={{ ) : isLoading ? (
root: 'expansion-panel-root', <div className="loader-container">
}} <Loader color="elec" />
>
<AccordionSummary
aria-label={t(
'profile_type.accessibility.button_toggle_average_home'
)}
expandIcon={
<Icon icon={chevronDown} size={16} className="accordion-icon" />
}
classes={{
root: 'expansion-panel-summary',
content: 'expansion-panel-content',
}}
>
<div className="accordion-title accordion-title">
{t('analysis.average_home')}
</div> </div>
</AccordionSummary> ) : (
<AccordionDetails <>
classes={{ <div className="consumption-title text-20-bold">
root: 'expansion-panel-details', <div className="user-title">{t('analysis.user_consumption')}</div>
}} <div className={`average-title`}>{t(`analysis.comparison`)}</div>
> </div>
<span className="accordion-desc text-16-normal"> <div className="consumption-price">
{t('analysis.average_home_description')} <AnalysisConsumptionRow
</span> fluid={FluidType.MULTIFLUID}
</AccordionDetails> userPriceConsumption={userPriceConsumption}
</Accordion> homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
connected={fluidTypes.length > 0}
noData={false}
/>
</div>
{fluidTypes.map(
fluid =>
performanceIndicators[fluid]?.value && (
<AnalysisConsumptionRow
key={fluid}
fluid={fluid}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
performanceValue={performanceIndicators[fluid].value}
forecast={forecast}
connected={true}
noData={false}
/>
)
)}
{fluidTypes.length < 3 && <hr className="consumption-sep" />}
{disconnectedFluidTypes.map(fluid => (
<AnalysisConsumptionRow
key={fluid}
fluid={fluid}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
connected={false}
noData={false}
/>
))}
{emptyFluidTypes.map(fluid => (
<AnalysisConsumptionRow
key={fluid}
fluid={fluid}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
connected={false}
noData={true}
/>
))}
<Accordion
expanded={activeAverageHome}
onChange={toggleAccordion}
classes={{
root: 'expansion-panel-root',
}}
>
<AccordionSummary
aria-label={t(
'profile_type.accessibility.button_toggle_average_home'
)}
expandIcon={
<Icon
icon={chevronDown}
size={16}
className="accordion-icon"
/>
}
classes={{
root: 'expansion-panel-summary',
content: 'expansion-panel-content',
}}
>
<div className="accordion-title accordion-title">
{t('analysis.average_home')}
</div>
</AccordionSummary>
<AccordionDetails
classes={{
root: 'expansion-panel-details',
}}
>
<span className="accordion-desc text-16-normal">
{t('analysis.average_home_description')}
</span>
</AccordionDetails>
</Accordion>
</>
)}
</div>
</> </>
) )
......
...@@ -4,7 +4,7 @@ import React from 'react' ...@@ -4,7 +4,7 @@ import React from 'react'
import * as reactRedux from 'react-redux' import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux' import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store' import configureStore from 'redux-mock-store'
import { dataLoadArray } from '../../../tests/__mocks__/datachartData.mock' import { dataLoadArray } from '../../../tests/__mocks__/chartData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import ElecHalfHourChart from './ElecHalfHourChart' import ElecHalfHourChart from './ElecHalfHourChart'
......
...@@ -119,18 +119,21 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({ ...@@ -119,18 +119,21 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
<> <>
<div className="analysis-content"> <div className="analysis-content">
<div> <div>
{fluidConfig.map((fluid, index) => { {fluidConfig.map(
return fluidTypes.includes(fluid.fluidTypeId) ? ( fluid =>
<FluidPerformanceIndicator fluidTypes.includes(fluid.fluidTypeId) && (
key={index} <FluidPerformanceIndicator
fluidType={fluid.fluidTypeId} key={fluid.konnectorConfig.slug}
performanceIndicator={ fluidType={fluid.fluidTypeId}
performanceIndicators[fluid.fluidTypeId] performanceIndicator={
} performanceIndicators[fluid.fluidTypeId]
date={analysisDate.minus({ month: 1 }).startOf('month')} }
/> date={analysisDate
) : null .minus({ month: 1 })
})} .startOf('month')}
/>
)
)}
</div> </div>
</div> </div>
......
...@@ -6,7 +6,7 @@ import { Datachart } from 'models' ...@@ -6,7 +6,7 @@ import { Datachart } from 'models'
import React from 'react' import React from 'react'
import { act } from 'react-dom/test-utils' import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux' import { Provider } from 'react-redux'
import { graphMonthData } from '../../../tests/__mocks__/datachartData.mock' import { graphMonthData } from '../../../tests/__mocks__/chartData.mock'
import { import {
createMockStore, createMockStore,
mockInitialEcolyoState, mockInitialEcolyoState,
......
...@@ -2,8 +2,6 @@ import Navbar from 'components/Navbar/Navbar' ...@@ -2,8 +2,6 @@ import Navbar from 'components/Navbar/Navbar'
import WelcomeModal from 'components/Onboarding/WelcomeModal' import WelcomeModal from 'components/Onboarding/WelcomeModal'
import AppRoutes from 'components/Routes/Routes' import AppRoutes from 'components/Routes/Routes'
import SplashRoot from 'components/Splash/SplashRoot' import SplashRoot from 'components/Splash/SplashRoot'
import SplashScreen from 'components/Splash/SplashScreen'
import SplashScreenError from 'components/Splash/SplashScreenError'
import { Content, Layout, Main } from 'cozy-ui/transpiled/react/Layout' import { Content, Layout, Main } from 'cozy-ui/transpiled/react/Layout'
import React, { useEffect } from 'react' import React, { useEffect } from 'react'
import { useSelector } from 'react-redux' import { useSelector } from 'react-redux'
...@@ -26,10 +24,7 @@ export const App = ({ tracker }: AppProps) => { ...@@ -26,10 +24,7 @@ export const App = ({ tracker }: AppProps) => {
return ( return (
<Layout> <Layout>
<SplashRoot <SplashRoot>
splashComponent={SplashScreen}
splashErrorComponent={SplashScreenError}
>
{termsStatus.accepted && ( {termsStatus.accepted && (
<> <>
<WelcomeModal open={!onboarding.isWelcomeSeen} /> <WelcomeModal open={!onboarding.isWelcomeSeen} />
......
...@@ -14,7 +14,7 @@ interface ChallengeCardProps { ...@@ -14,7 +14,7 @@ interface ChallengeCardProps {
index: number index: number
cardWidth: number cardWidth: number
cardHeight: number cardHeight: number
isChallengeCardLast: boolean isChallengeCardLast?: boolean
moveToSlide: (slideIndex: number) => void moveToSlide: (slideIndex: number) => void
} }
...@@ -24,7 +24,7 @@ const ChallengeCard: React.FC<ChallengeCardProps> = ({ ...@@ -24,7 +24,7 @@ const ChallengeCard: React.FC<ChallengeCardProps> = ({
index, index,
cardWidth, cardWidth,
cardHeight, cardHeight,
isChallengeCardLast, isChallengeCardLast = false,
moveToSlide, moveToSlide,
}: ChallengeCardProps) => { }: ChallengeCardProps) => {
const renderCard = (userChallenge: UserChallenge | undefined) => { const renderCard = (userChallenge: UserChallenge | undefined) => {
......
...@@ -38,7 +38,7 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({ ...@@ -38,7 +38,7 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
const navigate = useNavigate() const navigate = useNavigate()
const [isOneFluidUp, setIsOneFluidUp] = useState<boolean>(true) const [isOneFluidUp, setIsOneFluidUp] = useState<boolean>(true)
const [challengeIcon, setChallengeIcon] = useState<string>(defaultIcon) const [challengeIcon, setChallengeIcon] = useState<string>(defaultIcon)
const [isDone, setisDone] = useState<boolean>(false) const [isDone, setIsDone] = useState<boolean>(false)
const [isLoading, setIsLoading] = useState<boolean>(false) const [isLoading, setIsLoading] = useState<boolean>(false)
const { const {
challenge: { currentDataload }, challenge: { currentDataload },
...@@ -113,7 +113,7 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({ ...@@ -113,7 +113,7 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
currentDataload currentDataload
) )
if (subscribed) { if (subscribed) {
setisDone(isChallengeDone.isDone) setIsDone(isChallengeDone.isDone)
} }
} }
const unlockDuel = async () => { const unlockDuel = async () => {
......
import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg' import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import RightArrowIcon from 'assets/icons/ico/right-arrow.svg' import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
import StyledIconbutton from 'components/CommonKit/IconButton/StyledIconButton' import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import Content from 'components/Content/Content' import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar' import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header' import Header from 'components/Header/Header'
...@@ -20,16 +20,16 @@ const ChallengeView: React.FC = () => { ...@@ -20,16 +20,16 @@ const ChallengeView: React.FC = () => {
) )
const marginPx = 16 const marginPx = 16
const cardWitdh = const cardWidth =
window.outerWidth < 500 ? window.outerWidth - marginPx * 6 : 285 window.outerWidth < 500 ? window.outerWidth - marginPx * 6 : 285
const cardHeight = window.outerHeight * 0.6 const cardHeight = window.outerHeight * 0.6
const [headerHeight, setHeaderHeight] = useState<number>(0) const [headerHeight, setHeaderHeight] = useState<number>(0)
const [touchStart, setTouchStart] = useState<number>() const [touchStart, setTouchStart] = useState<number>()
const [touchEnd, setTouchEnd] = useState<number>() const [touchEnd, setTouchEnd] = useState<number>()
const [index, setindex] = useState<number>(0) const [index, setIndex] = useState<number>(0)
const [lastChallengeIndex, setlastChallengeIndex] = useState<number>(0) const [lastChallengeIndex, setLastChallengeIndex] = useState<number>(0)
const [isLastDuelDone, setIsLastDuelDone] = useState<boolean>(false) const [isLastDuelDone, setIsLastDuelDone] = useState<boolean>(false)
const [containerTranslation, setcontainerTranslation] = const [containerTranslation, setContainerTranslation] =
useState<number>(marginPx) useState<number>(marginPx)
const defineHeaderHeight = (height: number) => { const defineHeaderHeight = (height: number) => {
setHeaderHeight(height) setHeaderHeight(height)
...@@ -47,34 +47,34 @@ const ChallengeView: React.FC = () => { ...@@ -47,34 +47,34 @@ const ChallengeView: React.FC = () => {
(isLastDuelDone && index < userChallengeList.length) (isLastDuelDone && index < userChallengeList.length)
) { ) {
if (index === 0) if (index === 0)
setcontainerTranslation( setContainerTranslation(
(prev: number) => prev - cardWitdh - marginPx * 1.2 (prev: number) => prev - cardWidth - marginPx * 1.2
) )
else if (index >= 1) else if (index >= 1)
setcontainerTranslation((prev: number) => prev - cardWitdh - marginPx) setContainerTranslation((prev: number) => prev - cardWidth - marginPx)
else setcontainerTranslation((prev: number) => prev - cardWitdh) else setContainerTranslation((prev: number) => prev - cardWidth)
setindex(prev => prev + 1) setIndex(prev => prev + 1)
} }
}, [cardWitdh, index, userChallengeList.length]) }, [cardWidth, index, userChallengeList.length])
const moveSliderLeft = useCallback(() => { const moveSliderLeft = useCallback(() => {
if (index > 0) { if (index > 0) {
if (index >= 1) if (index >= 1)
setcontainerTranslation((prev: number) => prev + cardWitdh + marginPx) setContainerTranslation((prev: number) => prev + cardWidth + marginPx)
else setcontainerTranslation((prev: number) => prev + cardWitdh) else setContainerTranslation((prev: number) => prev + cardWidth)
setindex(prev => prev - 1) setIndex(prev => prev - 1)
} }
if (index <= 1) { if (index <= 1) {
setcontainerTranslation(marginPx) setContainerTranslation(marginPx)
} }
}, [cardWitdh, index]) }, [cardWidth, index])
const moveToSlide = useCallback( const moveToSlide = useCallback(
(slideIndex: number) => { (slideIndex: number) => {
setcontainerTranslation(-slideIndex * (cardWitdh + marginPx) + marginPx) setContainerTranslation(-slideIndex * (cardWidth + marginPx) + marginPx)
setindex(slideIndex) setIndex(slideIndex)
}, },
[cardWitdh] [cardWidth]
) )
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
...@@ -88,7 +88,7 @@ const ChallengeView: React.FC = () => { ...@@ -88,7 +88,7 @@ const ChallengeView: React.FC = () => {
// if the swipe is too small and can be taken for a touch // if the swipe is too small and can be taken for a touch
if (touchStart && touchEnd) { if (touchStart && touchEnd) {
if (touchStart - touchEnd < 5 && -5 < touchStart - touchEnd) return if (touchStart - touchEnd < 5 && -5 < touchStart - touchEnd) return
// Change the following value in order to change the swipe sensibilyy // Change the following value in order to change the swipe sensibility
if (touchStart - touchEnd > 75) { if (touchStart - touchEnd > 75) {
// If swipe left move slider right and add positive translation // If swipe left move slider right and add positive translation
moveSliderRight() moveSliderRight()
...@@ -115,22 +115,22 @@ const ChallengeView: React.FC = () => { ...@@ -115,22 +115,22 @@ const ChallengeView: React.FC = () => {
challenge.state === UserChallengeState.ONGOING || challenge.state === UserChallengeState.ONGOING ||
challenge.state === UserChallengeState.DUEL challenge.state === UserChallengeState.DUEL
) { ) {
setlastChallengeIndex(i) setLastChallengeIndex(i)
if (lastChallengeIndex === 0) return if (lastChallengeIndex === 0) return
else if (lastChallengeIndex === 1) { else if (lastChallengeIndex === 1) {
setcontainerTranslation(0 - cardWitdh * lastChallengeIndex) setContainerTranslation(0 - cardWidth * lastChallengeIndex)
} else { } else {
setcontainerTranslation( setContainerTranslation(
0 - cardWitdh * lastChallengeIndex - marginPx * 1.2 0 - cardWidth * lastChallengeIndex - marginPx * 1.2
) )
} }
if (isLastDuelDone) { if (isLastDuelDone) {
setlastChallengeIndex(i + 1) setLastChallengeIndex(i + 1)
} }
setindex(i) setIndex(i)
} }
}) })
}, [userChallengeList, lastChallengeIndex, cardWitdh, isLastDuelDone]) }, [userChallengeList, lastChallengeIndex, cardWidth, isLastDuelDone])
useEffect(() => { useEffect(() => {
if ( if (
...@@ -167,13 +167,12 @@ const ChallengeView: React.FC = () => { ...@@ -167,13 +167,12 @@ const ChallengeView: React.FC = () => {
> >
{userChallengeList.map((userChallenge, i) => ( {userChallengeList.map((userChallenge, i) => (
<ChallengeCard <ChallengeCard
key={i} key={userChallenge.id}
userChallenge={userChallenge} userChallenge={userChallenge}
indexSlider={index} indexSlider={index}
index={i} index={i}
cardWidth={cardWitdh} cardWidth={cardWidth}
cardHeight={cardHeight} cardHeight={cardHeight}
isChallengeCardLast={false}
moveToSlide={moveToSlide} moveToSlide={moveToSlide}
/> />
))} ))}
...@@ -182,7 +181,7 @@ const ChallengeView: React.FC = () => { ...@@ -182,7 +181,7 @@ const ChallengeView: React.FC = () => {
<ChallengeCard <ChallengeCard
indexSlider={index} indexSlider={index}
index={5} index={5}
cardWidth={cardWitdh} cardWidth={cardWidth}
cardHeight={cardHeight} cardHeight={cardHeight}
isChallengeCardLast={true} isChallengeCardLast={true}
moveToSlide={moveToSlide} moveToSlide={moveToSlide}
...@@ -191,13 +190,13 @@ const ChallengeView: React.FC = () => { ...@@ -191,13 +190,13 @@ const ChallengeView: React.FC = () => {
</div> </div>
</div> </div>
<div className="sliderButtons"> <div className="sliderButtons">
<StyledIconbutton <StyledIconButton
onClick={moveSliderLeft} onClick={moveSliderLeft}
icon={LeftArrowIcon} icon={LeftArrowIcon}
sized={16} sized={16}
aria-label={t('challenge.accessibility.button_slider_previous')} aria-label={t('challenge.accessibility.button_slider_previous')}
/> />
<StyledIconbutton <StyledIconButton
onClick={moveSliderRight} onClick={moveSliderRight}
icon={RightArrowIcon} icon={RightArrowIcon}
sized={16} sized={16}
......
import starIcon from 'assets/icons/visu/challenge/star.svg' import starIcon from 'assets/icons/visu/challenge/star.svg'
import starFilled from 'assets/icons/visu/challenge/starFilled.svg' import starFilled from 'assets/icons/visu/challenge/starFilled.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon' import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import React, { useEffect, useState } from 'react' import React from 'react'
interface StarsContainerProps { interface StarsContainerProps {
result: number result: number
...@@ -12,30 +12,16 @@ const StarsContainer: React.FC<StarsContainerProps> = ({ ...@@ -12,30 +12,16 @@ const StarsContainer: React.FC<StarsContainerProps> = ({
result, result,
isQuizBegin, isQuizBegin,
}: StarsContainerProps) => { }: StarsContainerProps) => {
const [elements] = useState<string[]>([]) const maxStars = [1, 2, 3, 4, 5]
useEffect(() => {
const renderStars = () => {
// To be removed when action and explorations will be done
if (result === 5) {
elements.splice(0, elements.length)
}
for (let i = 0; i < 5; i++) {
if (i < result) elements.push(starFilled)
else if (i >= result) elements.push(starIcon)
}
}
renderStars()
}, [result, elements])
return ( return (
<div className="stars"> <div className="stars">
{elements.map((star, i) => { {maxStars.map(star => {
return ( return (
<StyledIcon <StyledIcon
key={i} key={star}
className="star" className="star"
icon={star} icon={result >= star ? starFilled : starIcon}
size={isQuizBegin ? 25 : 15} size={isQuizBegin ? 25 : 15}
/> />
) )
......
...@@ -47,8 +47,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = ` ...@@ -47,8 +47,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
cardWidth={285} cardWidth={285}
index={0} index={0}
indexSlider={3} indexSlider={3}
isChallengeCardLast={false} key="CHALLENGE0001"
key="0"
moveToSlide={[Function]} moveToSlide={[Function]}
userChallenge={ userChallenge={
Object { Object {
...@@ -199,8 +198,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = ` ...@@ -199,8 +198,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
cardWidth={285} cardWidth={285}
index={1} index={1}
indexSlider={3} indexSlider={3}
isChallengeCardLast={false} key="CHALLENGE0002"
key="1"
moveToSlide={[Function]} moveToSlide={[Function]}
userChallenge={ userChallenge={
Object { Object {
...@@ -351,8 +349,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = ` ...@@ -351,8 +349,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
cardWidth={285} cardWidth={285}
index={2} index={2}
indexSlider={3} indexSlider={3}
isChallengeCardLast={false} key="CHALLENGE0003"
key="2"
moveToSlide={[Function]} moveToSlide={[Function]}
userChallenge={ userChallenge={
Object { Object {
...@@ -503,8 +500,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = ` ...@@ -503,8 +500,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
cardWidth={285} cardWidth={285}
index={3} index={3}
indexSlider={3} indexSlider={3}
isChallengeCardLast={false} key="CHALLENGE0004"
key="3"
moveToSlide={[Function]} moveToSlide={[Function]}
userChallenge={ userChallenge={
Object { Object {
...@@ -655,8 +651,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = ` ...@@ -655,8 +651,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
cardWidth={285} cardWidth={285}
index={4} index={4}
indexSlider={3} indexSlider={3}
isChallengeCardLast={false} key="CHALLENGE0005"
key="4"
moveToSlide={[Function]} moveToSlide={[Function]}
userChallenge={ userChallenge={
Object { Object {
...@@ -807,8 +802,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = ` ...@@ -807,8 +802,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
cardWidth={285} cardWidth={285}
index={5} index={5}
indexSlider={3} indexSlider={3}
isChallengeCardLast={false} key="CHALLENGE0006"
key="5"
moveToSlide={[Function]} moveToSlide={[Function]}
userChallenge={ userChallenge={
Object { Object {
......
...@@ -5,7 +5,7 @@ import { DateTime } from 'luxon' ...@@ -5,7 +5,7 @@ import { DateTime } from 'luxon'
import React from 'react' import React from 'react'
import * as reactRedux from 'react-redux' import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux' import { Provider } from 'react-redux'
import { graphData } from '../../../tests/__mocks__/datachartData.mock' import { graphData } from '../../../tests/__mocks__/chartData.mock'
import { import {
createMockStore, createMockStore,
mockInitialEcolyoState, mockInitialEcolyoState,
......
...@@ -7,7 +7,7 @@ import React from 'react' ...@@ -7,7 +7,7 @@ import React from 'react'
import * as reactRedux from 'react-redux' import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux' import { Provider } from 'react-redux'
import * as chartActions from 'store/chart/chart.actions' import * as chartActions from 'store/chart/chart.actions'
import { graphData } from '../../../tests/__mocks__/datachartData.mock' import { graphData } from '../../../tests/__mocks__/chartData.mock'
import { import {
createMockStore, createMockStore,
mockInitialEcolyoState, mockInitialEcolyoState,
......
...@@ -14,13 +14,11 @@ const CardBase = withStyles({ ...@@ -14,13 +14,11 @@ const CardBase = withStyles({
margin: '1.25rem 0', margin: '1.25rem 0',
cursor: 'default', cursor: 'default',
}, },
})(CardActionArea) })(CardActionArea) as React.FC<StyledBorderCardProps>
type StyledBorderCardProps = CardActionAreaProps type StyledBorderCardProps = CardActionAreaProps
const StyledBorderCard: React.ComponentType<StyledBorderCardProps> = ({ const StyledBorderCard = ({ ...props }: StyledBorderCardProps) => {
...props
}: StyledBorderCardProps) => {
return ( return (
<CardBase {...props}> <CardBase {...props}>
<CardContent>{props.children}</CardContent> <CardContent>{props.children}</CardContent>
......
...@@ -14,36 +14,37 @@ const CardBase = withStyles({ ...@@ -14,36 +14,37 @@ const CardBase = withStyles({
borderRadius: '4px', borderRadius: '4px',
margin: '10px 0px 20px 0px', margin: '10px 0px 20px 0px',
}, },
})(CardActionArea) })(CardActionArea) as React.FC<StyledCardProps>
const CardElec = withStyles({ const CardElec = withStyles({
root: { root: {
border: '1px solid var(--elecColor40)', border: '1px solid var(--elecColor40)',
}, },
})(CardBase) })(CardBase) as React.FC<StyledCardProps>
const CardWater = withStyles({ const CardWater = withStyles({
root: { root: {
border: '1px solid var(--waterColor40)', border: '1px solid var(--waterColor40)',
}, },
})(CardBase) })(CardBase) as React.FC<StyledCardProps>
const CardGas = withStyles({ const CardGas = withStyles({
root: { root: {
border: '1px solid var(--gasColor40)', border: '1px solid var(--gasColor40)',
}, },
})(CardBase) })(CardBase) as React.FC<StyledCardProps>
const CardMulti = withStyles({ const CardMulti = withStyles({
root: { root: {
border: '1px solid var( --greyDark)', border: '1px solid var( --greyDark)',
}, },
})(CardBase) })(CardBase) as React.FC<StyledCardProps>
const CardContentBase = withStyles({ const CardContentBase = withStyles({
root: { root: {
color: 'white', color: 'white',
}, },
})(CardContent) })(CardContent) as React.FC<StyledCardProps>
interface StyledCardProps extends CardActionAreaProps { interface StyledCardProps extends CardActionAreaProps {
fluidType?: FluidType fluidType?: FluidType
...@@ -56,10 +57,7 @@ const GenerateContentCard = ( ...@@ -56,10 +57,7 @@ const GenerateContentCard = (
return <CardContentBase>{children}</CardContentBase> return <CardContentBase>{children}</CardContentBase>
} }
const StyledCard: React.ComponentType<StyledCardProps> = ({ const StyledCard = ({ fluidType, ...props }: StyledCardProps) => {
fluidType,
...props
}: StyledCardProps) => {
switch (fluidType) { switch (fluidType) {
case FluidType.ELECTRICITY: case FluidType.ELECTRICITY:
return ( return (
......
...@@ -8,7 +8,7 @@ describe('StyledEcogestureCard component test', () => { ...@@ -8,7 +8,7 @@ describe('StyledEcogestureCard component test', () => {
expect(wrapper.getElement()).toMatchSnapshot() expect(wrapper.getElement()).toMatchSnapshot()
}) })
it('should render correclty new ecogesture StyledEcogestureCard with newEcogesture', () => { it('should render correctly new ecogesture StyledEcogestureCard with newEcogesture', () => {
const wrapper = mount(<StyledEcogestureCard newEcogesture={true} />) const wrapper = mount(<StyledEcogestureCard newEcogesture={true} />)
expect(wrapper.getElement()).toMatchSnapshot() expect(wrapper.getElement()).toMatchSnapshot()
}) })
......
...@@ -16,7 +16,7 @@ const CardBase = withStyles({ ...@@ -16,7 +16,7 @@ const CardBase = withStyles({
padding: '0.5rem 1rem', padding: '0.5rem 1rem',
minHeight: '72px', minHeight: '72px',
}, },
})(CardActionArea) })(CardActionArea) as React.FC<StyledEcogestureCardProps>
const CardNew = withStyles({ const CardNew = withStyles({
'@keyframes glowAnimation': { '@keyframes glowAnimation': {
...@@ -31,7 +31,7 @@ const CardNew = withStyles({ ...@@ -31,7 +31,7 @@ const CardNew = withStyles({
height: '100%', height: '100%',
padding: 0, padding: 0,
}, },
})(CardBase) })(CardBase) as React.FC<StyledEcogestureCardProps>
const CardBlueBorderContentBase = withStyles({ const CardBlueBorderContentBase = withStyles({
root: { root: {
...@@ -39,7 +39,8 @@ const CardBlueBorderContentBase = withStyles({ ...@@ -39,7 +39,8 @@ const CardBlueBorderContentBase = withStyles({
height: '100%', height: '100%',
padding: 0, padding: 0,
}, },
})(CardBase) })(CardBase) as React.FC<StyledEcogestureCardProps>
const CardChallengeBase = withStyles({ const CardChallengeBase = withStyles({
root: { root: {
height: '100%', height: '100%',
...@@ -48,7 +49,7 @@ const CardChallengeBase = withStyles({ ...@@ -48,7 +49,7 @@ const CardChallengeBase = withStyles({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}, },
})(CardContent) })(CardContent) as React.FC<StyledEcogestureCardProps>
const CardContentBase = withStyles({ const CardContentBase = withStyles({
root: { root: {
...@@ -56,7 +57,7 @@ const CardContentBase = withStyles({ ...@@ -56,7 +57,7 @@ const CardContentBase = withStyles({
height: '100%', height: '100%',
padding: 0, padding: 0,
}, },
})(CardContent) })(CardContent) as React.FC<StyledEcogestureCardProps>
interface StyledEcogestureCardProps extends CardActionAreaProps { interface StyledEcogestureCardProps extends CardActionAreaProps {
border?: boolean border?: boolean
...@@ -67,7 +68,7 @@ const GenerateContentCard = (children: ReactNode): React.ReactFragment => { ...@@ -67,7 +68,7 @@ const GenerateContentCard = (children: ReactNode): React.ReactFragment => {
return <CardChallengeBase>{children}</CardChallengeBase> return <CardChallengeBase>{children}</CardChallengeBase>
} }
const StyledEcogestureCard: React.ComponentType<StyledEcogestureCardProps> = ({ const StyledEcogestureCard = ({
border, border,
newEcogesture, newEcogesture,
...props ...props
......
...@@ -19,34 +19,34 @@ const CardBase = withStyles({ ...@@ -19,34 +19,34 @@ const CardBase = withStyles({
display: 'inline', display: 'inline',
margin: '0', margin: '0',
}, },
})(CardActionArea) })(CardActionArea) as React.FC<StyledIconCardProps>
const CardElec = withStyles({ const CardElec = withStyles({
root: { root: {
border: '1px solid var(--elecColor40)', border: '1px solid var(--elecColor40)',
}, },
})(CardBase) })(CardBase) as React.FC<StyledIconCardProps>
const CardWater = withStyles({ const CardWater = withStyles({
root: { root: {
border: '1px solid var(--waterColor40)', border: '1px solid var(--waterColor40)',
}, },
})(CardBase) })(CardBase) as React.FC<StyledIconCardProps>
const CardGas = withStyles({ const CardGas = withStyles({
root: { root: {
border: '1px solid var(--gasColor40)', border: '1px solid var(--gasColor40)',
}, },
})(CardBase) })(CardBase) as React.FC<StyledIconCardProps>
const CardContentBase = withStyles({ const CardContentBase = withStyles({
root: { root: {
color: 'white', color: 'white',
}, },
})(CardContent) })(CardContent) as React.FC<StyledIconCardProps>
interface StyledIconCardProps extends CardActionAreaProps { interface StyledIconCardProps extends CardActionAreaProps {
fluidType: FluidType fluidType?: FluidType
} }
const GenerateContentCard = ( const GenerateContentCard = (
...@@ -73,10 +73,7 @@ const GenerateContentCard = ( ...@@ -73,10 +73,7 @@ const GenerateContentCard = (
) )
} }
const StyledIconCard: React.ComponentType<StyledIconCardProps> = ({ const StyledIconCard = ({ fluidType, ...props }: StyledIconCardProps) => {
fluidType,
...props
}: StyledIconCardProps) => {
switch (fluidType) { switch (fluidType) {
case FluidType.ELECTRICITY: case FluidType.ELECTRICITY:
return ( return (
......
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StyledEcogestureCard component test should render correclty new ecogesture StyledEcogestureCard with newEcogesture 1`] = `
<StyledEcogestureCard
newEcogesture={true}
/>
`;
exports[`StyledEcogestureCard component test should render correctly border StyledEcogestureCard 1`] = `<StyledEcogestureCard />`; exports[`StyledEcogestureCard component test should render correctly border StyledEcogestureCard 1`] = `<StyledEcogestureCard />`;
exports[`StyledEcogestureCard component test should render correctly border StyledEcogestureCard with border 1`] = ` exports[`StyledEcogestureCard component test should render correctly border StyledEcogestureCard with border 1`] = `
...@@ -13,3 +7,9 @@ exports[`StyledEcogestureCard component test should render correctly border Styl ...@@ -13,3 +7,9 @@ exports[`StyledEcogestureCard component test should render correctly border Styl
border={true} border={true}
/> />
`; `;
exports[`StyledEcogestureCard component test should render correctly new ecogesture StyledEcogestureCard with newEcogesture 1`] = `
<StyledEcogestureCard
newEcogesture={true}
/>
`;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment