From f2f2fe0de61111f2210366de341f34ee64ce2ff5 Mon Sep 17 00:00:00 2001 From: Bastien DUMONT <bdumont@grandlyon.com> Date: Mon, 26 Jun 2023 11:47:26 +0000 Subject: [PATCH] chore: remove unused components --- .../CommonKit/Card/StyledBorderCard.spec.tsx | 10 - .../CommonKit/Card/StyledBorderCard.tsx | 29 --- src/components/CommonKit/Card/StyledCard.tsx | 83 ++----- .../CommonKit/Card/StyledEcogestureCard.tsx | 77 +----- .../CommonKit/Card/StyledIconCard.spec.tsx | 11 - .../CommonKit/Card/StyledIconCard.tsx | 114 --------- .../StyledBorderCard.spec.tsx.snap | 3 - .../StyledIconCard.spec.tsx.snap | 7 - .../StyledIconBorderedButton.spec.tsx | 30 --- .../IconButton/StyledIconBorderedButton.tsx | 64 ----- .../StyledIconBorderedButton.spec.tsx.snap | 23 -- .../Connection/ExpiredConsentModal.tsx | 5 +- .../ConsumptionVisualizer/DataloadSection.tsx | 5 +- .../DataloadSectionDetail.tsx | 12 +- src/components/Content/Content.tsx | 2 +- src/components/Ecogesture/EcogestureCard.tsx | 16 +- src/components/Ecogesture/EcogestureView.tsx | 2 +- .../EcogestureCard.spec.tsx.snap | 132 +++++----- src/components/Ecogesture/ecogestureCard.scss | 57 ++--- src/components/FluidChart/FluidChart.tsx | 6 +- src/components/Home/FluidButton.tsx | 10 +- src/components/Home/consumptionView.scss | 4 +- .../Konnector/KonnectorViewerList.tsx | 4 +- .../Konnector/konnectorViewerList.scss | 18 +- .../Options/ExportData/exportData.scss | 4 +- .../profileTypeOptions.scss | 7 +- .../TimeStepSelector/TimeStepSelector.tsx | 229 +++++++++--------- src/utils/utils.spec.ts | 16 ++ src/utils/utils.ts | 7 + 29 files changed, 287 insertions(+), 700 deletions(-) delete mode 100644 src/components/CommonKit/Card/StyledBorderCard.spec.tsx delete mode 100644 src/components/CommonKit/Card/StyledBorderCard.tsx delete mode 100644 src/components/CommonKit/Card/StyledIconCard.spec.tsx delete mode 100644 src/components/CommonKit/Card/StyledIconCard.tsx delete mode 100644 src/components/CommonKit/Card/__snapshots__/StyledBorderCard.spec.tsx.snap delete mode 100644 src/components/CommonKit/Card/__snapshots__/StyledIconCard.spec.tsx.snap delete mode 100644 src/components/CommonKit/IconButton/StyledIconBorderedButton.spec.tsx delete mode 100644 src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx delete mode 100644 src/components/CommonKit/IconButton/__snapshots__/StyledIconBorderedButton.spec.tsx.snap diff --git a/src/components/CommonKit/Card/StyledBorderCard.spec.tsx b/src/components/CommonKit/Card/StyledBorderCard.spec.tsx deleted file mode 100644 index 38d535360..000000000 --- a/src/components/CommonKit/Card/StyledBorderCard.spec.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { mount } from 'enzyme' -import React from 'react' -import StyledBorderCard from './StyledBorderCard' - -describe('StyledBorderCard component test', () => { - it('should render correctly StyleBorderCard', () => { - const wrapper = mount(<StyledBorderCard />) - expect(wrapper.getElement()).toMatchSnapshot() - }) -}) diff --git a/src/components/CommonKit/Card/StyledBorderCard.tsx b/src/components/CommonKit/Card/StyledBorderCard.tsx deleted file mode 100644 index 7f9a6a34d..000000000 --- a/src/components/CommonKit/Card/StyledBorderCard.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import CardActionArea, { - CardActionAreaProps, -} from '@material-ui/core/CardActionArea' -import CardContent from '@material-ui/core/CardContent' -import { withStyles } from '@material-ui/core/styles' -import React from 'react' - -const CardBase = withStyles({ - root: { - border: '1px solid var(--softGrey)', - boxSizing: 'border-box', - borderRadius: '4px', - width: '100hv', - margin: '1.25rem 0', - cursor: 'default', - }, -})(CardActionArea) as React.FC<StyledBorderCardProps> - -type StyledBorderCardProps = CardActionAreaProps - -const StyledBorderCard = ({ ...props }: StyledBorderCardProps) => { - return ( - <CardBase {...props}> - <CardContent>{props.children}</CardContent> - </CardBase> - ) -} - -export default StyledBorderCard diff --git a/src/components/CommonKit/Card/StyledCard.tsx b/src/components/CommonKit/Card/StyledCard.tsx index caa675934..39e472c59 100644 --- a/src/components/CommonKit/Card/StyledCard.tsx +++ b/src/components/CommonKit/Card/StyledCard.tsx @@ -5,6 +5,7 @@ import CardContent from '@material-ui/core/CardContent' import { withStyles } from '@material-ui/core/styles' import { FluidType } from 'enum/fluid.enum' import React, { ReactNode } from 'react' +import { getFluidName } from 'utils/utils' const CardBase = withStyles({ root: { @@ -12,84 +13,38 @@ const CardBase = withStyles({ boxSizing: 'border-box', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.75)', borderRadius: '4px', - margin: '10px 0px 10px 0px', }, })(CardActionArea) as React.FC<StyledCardProps> -const CardElec = withStyles({ - root: { - border: '1px solid var(--elecColor40)', - }, -})(CardBase) as React.FC<StyledCardProps> - -const CardWater = withStyles({ - root: { - border: '1px solid var(--waterColor40)', - }, -})(CardBase) as React.FC<StyledCardProps> - -const CardGas = withStyles({ - root: { - border: '1px solid var(--gasColor40)', - }, -})(CardBase) as React.FC<StyledCardProps> - -const CardMulti = withStyles({ - root: { - border: '1px solid var( --greyDark)', - }, -})(CardBase) as React.FC<StyledCardProps> - const CardContentBase = withStyles({ root: { color: 'white', + display: 'flex', + alignItems: 'center', + gap: '1rem', + boxSizing: 'border-box', }, })(CardContent) as React.FC<StyledCardProps> interface StyledCardProps extends CardActionAreaProps { fluidType?: FluidType -} - -const GenerateContentCard = ( - fluidType: FluidType, children: ReactNode -): React.ReactFragment => { - return <CardContentBase>{children}</CardContentBase> } -const StyledCard = ({ fluidType, ...props }: StyledCardProps) => { - switch (fluidType) { - case FluidType.ELECTRICITY: - return ( - <CardElec {...props}> - {GenerateContentCard(fluidType, props.children)} - </CardElec> - ) - case FluidType.WATER: - return ( - <CardWater {...props}> - {GenerateContentCard(fluidType, props.children)} - </CardWater> - ) - case FluidType.GAS: - return ( - <CardGas {...props}> - {GenerateContentCard(fluidType, props.children)} - </CardGas> - ) - case FluidType.MULTIFLUID: - return ( - <CardMulti {...props}> - {GenerateContentCard(fluidType, props.children)} - </CardMulti> - ) - default: - return ( - <CardBase {...props}> - <CardContentBase>{props.children}</CardContentBase> - </CardBase> - ) - } +const StyledCard = ({ + fluidType, + children, + className, + ...props +}: StyledCardProps) => { + const cardClass = + className + (fluidType !== undefined ? ` ${getFluidName(fluidType)}` : '') + + return ( + <CardBase {...props} className={cardClass}> + <CardContentBase>{children}</CardContentBase> + </CardBase> + ) } export default StyledCard diff --git a/src/components/CommonKit/Card/StyledEcogestureCard.tsx b/src/components/CommonKit/Card/StyledEcogestureCard.tsx index dea5dd831..31a8ad5ef 100644 --- a/src/components/CommonKit/Card/StyledEcogestureCard.tsx +++ b/src/components/CommonKit/Card/StyledEcogestureCard.tsx @@ -3,52 +3,18 @@ import CardActionArea, { } from '@material-ui/core/CardActionArea' import CardContent from '@material-ui/core/CardContent' import { withStyles } from '@material-ui/core/styles' -import React, { ReactNode } from 'react' +import React from 'react' const CardBase = withStyles({ root: { background: 'var(--greyLinearGradientBackground)', - // border: '1px solid', boxSizing: 'border-box', boxShadow: '0px 4px 16px black', borderRadius: '4px', padding: '0.5rem 1rem', minHeight: '72px', }, -})(CardActionArea) as React.FC<StyledEcogestureCardProps> - -const CardNew = withStyles({ - '@keyframes glowAnimation': { - '0%': { boxShadow: '0px 0px 4px var(--blue)' }, - '50%': { boxShadow: '0px 0px 16px var(--blue)' }, - '100%': { boxShadow: '0px 0px 4px var(--blue)' }, - }, - root: { - border: '1px solid var(--blue)', - animation: '2s glowAnimation linear infinite', - color: 'white', - height: '100%', - padding: 0, - }, -})(CardBase) as React.FC<StyledEcogestureCardProps> - -const CardBlueBorderContentBase = withStyles({ - root: { - border: '1px solid var(--blue)', - height: '100%', - padding: 0, - }, -})(CardBase) as React.FC<StyledEcogestureCardProps> - -const CardChallengeBase = withStyles({ - root: { - height: '100%', - padding: 0, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, -})(CardContent) as React.FC<StyledEcogestureCardProps> +})(CardActionArea) as React.FC<CardActionAreaProps> const CardContentBase = withStyles({ root: { @@ -56,37 +22,14 @@ const CardContentBase = withStyles({ height: '100%', padding: 0, }, -})(CardContent) as React.FC<StyledEcogestureCardProps> - -interface StyledEcogestureCardProps extends CardActionAreaProps { - border?: boolean - newEcogesture?: boolean | null -} - -const GenerateContentCard = (children: ReactNode): React.ReactFragment => { - return <CardChallengeBase>{children}</CardChallengeBase> -} - -const StyledEcogestureCard = ({ - border, - newEcogesture, - ...props -}: StyledEcogestureCardProps) => { - if (newEcogesture) { - return <CardNew {...props}>{GenerateContentCard(props.children)}</CardNew> - } else if (border) { - return ( - <CardBlueBorderContentBase {...props}> - {GenerateContentCard(props.children)} - </CardBlueBorderContentBase> - ) - } else { - return ( - <CardBase {...props}> - <CardContentBase>{props.children}</CardContentBase> - </CardBase> - ) - } +})(CardContent) as React.FC<CardActionAreaProps> + +const StyledEcogestureCard = ({ children, ...props }: CardActionAreaProps) => { + return ( + <CardBase {...props}> + <CardContentBase>{children}</CardContentBase> + </CardBase> + ) } export default StyledEcogestureCard diff --git a/src/components/CommonKit/Card/StyledIconCard.spec.tsx b/src/components/CommonKit/Card/StyledIconCard.spec.tsx deleted file mode 100644 index 77b94a684..000000000 --- a/src/components/CommonKit/Card/StyledIconCard.spec.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { FluidType } from 'enum/fluid.enum' -import { mount } from 'enzyme' -import React from 'react' -import StyledIconCard from './StyledIconCard' - -describe('StyledIconCard component test', () => { - it('it should render correctly StyledIconCard', () => { - const wrapper = mount(<StyledIconCard fluidType={FluidType.ELECTRICITY} />) - expect(wrapper.getElement()).toMatchSnapshot() - }) -}) diff --git a/src/components/CommonKit/Card/StyledIconCard.tsx b/src/components/CommonKit/Card/StyledIconCard.tsx deleted file mode 100644 index 58e6b8d4f..000000000 --- a/src/components/CommonKit/Card/StyledIconCard.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import CardActionArea, { - CardActionAreaProps, -} from '@material-ui/core/CardActionArea' -import CardContent from '@material-ui/core/CardContent' -import Grid from '@material-ui/core/Grid' -import { withStyles } from '@material-ui/core/styles' -import { FluidType } from 'enum/fluid.enum' -import React, { ReactNode } from 'react' -import { getPicto } from 'utils/picto' -import StyledIcon from '../Icon/StyledIcon' - -const CardBase = withStyles({ - root: { - background: 'var(--greyLinearGradientBackground)', - border: '1px solid', - boxSizing: 'border-box', - boxShadow: '0px 4px 16px', - borderRadius: '4px', - display: 'inline', - margin: '0', - }, -})(CardActionArea) as React.FC<StyledIconCardProps> - -const CardElec = withStyles({ - root: { - border: '1px solid var(--elecColor40)', - }, -})(CardBase) as React.FC<StyledIconCardProps> - -const CardWater = withStyles({ - root: { - border: '1px solid var(--waterColor40)', - }, -})(CardBase) as React.FC<StyledIconCardProps> - -const CardGas = withStyles({ - root: { - border: '1px solid var(--gasColor40)', - }, -})(CardBase) as React.FC<StyledIconCardProps> - -const CardContentBase = withStyles({ - root: { - color: 'white', - }, -})(CardContent) as React.FC<StyledIconCardProps> - -interface StyledIconCardProps extends CardActionAreaProps { - fluidType?: FluidType -} - -const GenerateContentCard = ( - fluidType: FluidType, - children: ReactNode -): React.ReactFragment => { - const icon = getPicto(fluidType) - - return ( - <CardContentBase> - <Grid - container - spacing={8} - direction="column" - alignItems="center" - justifyContent="center" - > - <Grid item> - <StyledIcon icon={icon} size={64} /> - </Grid> - <Grid item>{children}</Grid> - </Grid> - </CardContentBase> - ) -} - -const StyledIconCard = ({ fluidType, ...props }: StyledIconCardProps) => { - switch (fluidType) { - case FluidType.ELECTRICITY: - return ( - <CardElec {...props}> - {GenerateContentCard(fluidType, props.children)} - </CardElec> - ) - case FluidType.WATER: - return ( - <CardWater {...props}> - {GenerateContentCard(fluidType, props.children)} - </CardWater> - ) - case FluidType.GAS: - return ( - <CardGas {...props}> - {GenerateContentCard(fluidType, props.children)} - </CardGas> - ) - default: - return ( - <CardBase {...props}> - <CardContentBase> - <Grid - container - spacing={8} - alignItems="center" - justifyContent="center" - > - <Grid item>{props.children}</Grid> - </Grid> - </CardContentBase> - </CardBase> - ) - } -} - -export default StyledIconCard diff --git a/src/components/CommonKit/Card/__snapshots__/StyledBorderCard.spec.tsx.snap b/src/components/CommonKit/Card/__snapshots__/StyledBorderCard.spec.tsx.snap deleted file mode 100644 index 5da16e6b7..000000000 --- a/src/components/CommonKit/Card/__snapshots__/StyledBorderCard.spec.tsx.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`StyledBorderCard component test should render correctly StyleBorderCard 1`] = `<StyledBorderCard />`; diff --git a/src/components/CommonKit/Card/__snapshots__/StyledIconCard.spec.tsx.snap b/src/components/CommonKit/Card/__snapshots__/StyledIconCard.spec.tsx.snap deleted file mode 100644 index f9d8af05d..000000000 --- a/src/components/CommonKit/Card/__snapshots__/StyledIconCard.spec.tsx.snap +++ /dev/null @@ -1,7 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`StyledIconCard component test it should render correctly StyledIconCard 1`] = ` -<StyledIconCard - fluidType={0} -/> -`; diff --git a/src/components/CommonKit/IconButton/StyledIconBorderedButton.spec.tsx b/src/components/CommonKit/IconButton/StyledIconBorderedButton.spec.tsx deleted file mode 100644 index 1890bead1..000000000 --- a/src/components/CommonKit/IconButton/StyledIconBorderedButton.spec.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { shallow } from 'enzyme' -import React from 'react' -import StyledIconBorderedButton from './StyledIconBorderedButton' - -describe('StyledIconBorderedButton component test', () => { - const mockProps = { - icon: 'icon', - size: 20, - } - - it('should render correctly UnselectedIconButtonBase ', () => { - const wrapper = shallow( - <StyledIconBorderedButton icon={mockProps.icon} sized={mockProps.size} /> - ) - - expect(wrapper.getElement()).toMatchSnapshot() - }) - - it('should render correctly SelectedIconButtonBase', () => { - const wrapper = shallow( - <StyledIconBorderedButton - icon={mockProps.icon} - sized={mockProps.size} - selected={true} - /> - ) - - expect(wrapper.getElement()).toMatchSnapshot() - }) -}) diff --git a/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx b/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx deleted file mode 100644 index 1b0c69df5..000000000 --- a/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import IconButton, { IconButtonProps } from '@material-ui/core/IconButton' -import { withStyles } from '@material-ui/core/styles' -import StyledIconProps from 'components/CommonKit/Icon/StyledIcon' -import React from 'react' - -const IconButtonBase = withStyles({ - root: { - outline: 'none !important', - borderRadius: '4px', - width: '100%', - padding: 'unset', - }, - label: { - display: 'flex', - flexDirection: 'column', - }, -})(IconButton) as React.FC<IconButtonProps> - -const SelectedIconButtonBase = withStyles({ - root: { - border: '1px solid var(--multiColor)', - background: 'var(--greyLinearGradientBackground)', - boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.55)', - }, -})(IconButtonBase) as React.FC<IconButtonProps> - -const UnselectedIconButtonBase = withStyles({ - root: { - border: '1px solid var(--greyDark)', - }, -})(IconButtonBase) as React.FC<IconButtonProps> - -interface StyledIconBorderedButtonProps extends IconButtonProps { - icon: string - sized?: number - selected?: boolean - children?: React.ReactNode -} - -const StyledIconBorderedButton = ({ - icon, - sized = 16, - selected = false, - children = null, - ...props -}: StyledIconBorderedButtonProps) => { - return ( - <> - {selected ? ( - <SelectedIconButtonBase {...props}> - <StyledIconProps icon={icon} size={sized} /> - {children} - </SelectedIconButtonBase> - ) : ( - <UnselectedIconButtonBase {...props}> - <StyledIconProps icon={icon} size={sized} /> - {children} - </UnselectedIconButtonBase> - )} - </> - ) -} - -export default StyledIconBorderedButton diff --git a/src/components/CommonKit/IconButton/__snapshots__/StyledIconBorderedButton.spec.tsx.snap b/src/components/CommonKit/IconButton/__snapshots__/StyledIconBorderedButton.spec.tsx.snap deleted file mode 100644 index 55ffe0707..000000000 --- a/src/components/CommonKit/IconButton/__snapshots__/StyledIconBorderedButton.spec.tsx.snap +++ /dev/null @@ -1,23 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`StyledIconBorderedButton component test should render correctly SelectedIconButtonBase 1`] = ` -<React.Fragment> - <WithStyles(WithStyles(WithStyles(ForwardRef(IconButton))))> - <StyledIcon - icon="icon" - size={20} - /> - </WithStyles(WithStyles(WithStyles(ForwardRef(IconButton))))> -</React.Fragment> -`; - -exports[`StyledIconBorderedButton component test should render correctly UnselectedIconButtonBase 1`] = ` -<React.Fragment> - <WithStyles(WithStyles(WithStyles(ForwardRef(IconButton))))> - <StyledIcon - icon="icon" - size={20} - /> - </WithStyles(WithStyles(WithStyles(ForwardRef(IconButton))))> -</React.Fragment> -`; diff --git a/src/components/Connection/ExpiredConsentModal.tsx b/src/components/Connection/ExpiredConsentModal.tsx index c9eec3a1c..194ee2524 100644 --- a/src/components/Connection/ExpiredConsentModal.tsx +++ b/src/components/Connection/ExpiredConsentModal.tsx @@ -15,6 +15,7 @@ import { setShouldRefreshConsent, updateSgeStore, } from 'store/global/global.actions' +import { getFluidName } from 'utils/utils' import './expiredConsentModal.scss' interface ExpiredConsentModalProps { @@ -88,9 +89,7 @@ const ExpiredConsentModal = ({ /> </div> - <div - className={`text-20-bold title ${FluidType[fluidType].toLowerCase()}`} - > + <div className={`text-20-bold title ${getFluidName(fluidType)}`}> {t(`consent_outdated.title.${fluidType}`)} </div> <div className="text-16-normal text1"> diff --git a/src/components/ConsumptionVisualizer/DataloadSection.tsx b/src/components/ConsumptionVisualizer/DataloadSection.tsx index cbc2ca57e..85ddd0648 100644 --- a/src/components/ConsumptionVisualizer/DataloadSection.tsx +++ b/src/components/ConsumptionVisualizer/DataloadSection.tsx @@ -4,6 +4,7 @@ import { DataloadSectionType } from 'enum/dataload.enum' import { FluidType } from 'enum/fluid.enum' import { Dataload } from 'models' import React from 'react' +import { getFluidName } from 'utils/utils' import DataloadSectionDetail from './DataloadSectionDetail' import DataloadSectionValue from './DataloadSectionValue' import './consumptionVisualizer.scss' @@ -50,9 +51,9 @@ const DataloadSection = ({ > <div className={classNames('dataloadvisualizer-value', 'text-36-bold', { - [`${FluidType[fluidType].toLowerCase()}-compare`]: + [`${getFluidName(fluidType)}-compare`]: dataloadSectionType === DataloadSectionType.LEFT, - [`${FluidType[fluidType].toLowerCase()}`]: + [`${getFluidName(fluidType)}`]: dataloadSectionType === DataloadSectionType.NO_COMPARE || dataloadSectionType === DataloadSectionType.RIGHT, ['multifluid-compare-color']: diff --git a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx index 7ce1a123f..78861f744 100644 --- a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx +++ b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx @@ -11,7 +11,7 @@ import { NavLink } from 'react-router-dom' import ConverterService from 'services/converter.service' import UsageEventService from 'services/usageEvent.service' import { getNavPicto } from 'utils/picto' -import { formatNumberValues } from 'utils/utils' +import { formatNumberValues, getFluidName } from 'utils/utils' interface DataloadSectionDetailProps { dataload: Dataload @@ -42,9 +42,9 @@ const DataloadSectionDetail = ({ return ( <div className={classNames('dataloadvisualizer-euro text-16-normal', { - [`${FluidType[fluidType].toLowerCase()}`]: + [`${getFluidName(fluidType)}`]: dataloadSectionType !== DataloadSectionType.LEFT, - [`${FluidType[fluidType].toLowerCase()}-compare`]: + [`${getFluidName(fluidType)}-compare`]: dataloadSectionType === DataloadSectionType.LEFT, })} > @@ -119,13 +119,11 @@ const DataloadSectionDetail = ({ return ( <div className="dataloadvisualizer-euro text-16-normal"> <NavLink - to={`/consumption/${FluidType[fluidType].toLowerCase()}`} + to={`/consumption/${getFluidName(fluidType)}`} className="dataloadvisualizer-euro-link" > <div - className={`dataloadvisualizer-euro-fluid ${FluidType[ - fluidType - ].toLowerCase()}`} + className={`dataloadvisualizer-euro-fluid ${getFluidName(fluidType)}`} > <Icon className="dataloadvisualizer-euro-fluid-icon" diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index d1b1a370d..caf29cd95 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx @@ -7,7 +7,7 @@ import { changeScreenType } from 'store/global/global.actions' import { openFeedbackModal } from 'store/modal/modal.slice' import './content.scss' interface ContentProps { - children?: React.ReactNode + children: React.ReactNode height?: number background?: string } diff --git a/src/components/Ecogesture/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard.tsx index c4b58cac2..cf8a69b2d 100644 --- a/src/components/Ecogesture/EcogestureCard.tsx +++ b/src/components/Ecogesture/EcogestureCard.tsx @@ -43,18 +43,12 @@ const EcogestureCard = ({ className="ecogesture-list-item" > <StyledEcogestureCard> - <div className="ec"> - <div className={`ec-content `}> - <div className="ec-content-icon"> - <StyledIcon className="Icon" icon={ecogestureIcon} size={50} /> - </div> - <div className="ec-content-short-name text-15-bold"> - {ecogesture.shortName} - </div> - <div className="ec-content-efficiency"> - <EfficiencyRating result={Math.round(ecogesture.efficiency)} /> - </div> + <div className="ec-content"> + <StyledIcon className="Icon" icon={ecogestureIcon} size={50} /> + <div className="ec-content-short-name text-15-bold"> + {ecogesture.shortName} </div> + <EfficiencyRating result={Math.round(ecogesture.efficiency)} /> </div> </StyledEcogestureCard> </Link> diff --git a/src/components/Ecogesture/EcogestureView.tsx b/src/components/Ecogesture/EcogestureView.tsx index 25e0e5331..afc1e1fe9 100644 --- a/src/components/Ecogesture/EcogestureView.tsx +++ b/src/components/Ecogesture/EcogestureView.tsx @@ -21,7 +21,7 @@ import EcogestureReinitModal from './EcogestureReinitModal' import './ecogestureView.scss' interface TabPanelProps { - children?: React.ReactNode + children: React.ReactNode tab: EcogestureTab value: number } diff --git a/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap index ff294fcfb..0b7982f2b 100644 --- a/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap +++ b/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap @@ -302,92 +302,80 @@ exports[`EcogestureCard component should be rendered correctly 1`] = ` className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" > <div - className="ec" + className="ec-content" > + <Component + className="Icon" + icon="" + size={50} + > + <div + id="StyledIcon" + /> + </Component> <div - className="ec-content " + className="ec-content-short-name text-15-bold" + > + Bonhomme de neige + </div> + <EfficiencyRating + result={4} > <div - className="ec-content-icon" + className="thunder" > <Component - className="Icon" - icon="" - size={50} + className="star" + icon="test-file-stub" + key="1" + size={15} > <div id="StyledIcon" /> </Component> - </div> - <div - className="ec-content-short-name text-15-bold" - > - Bonhomme de neige - </div> - <div - className="ec-content-efficiency" - > - <EfficiencyRating - result={4} + <Component + className="star" + icon="test-file-stub" + key="2" + size={15} + > + <div + id="StyledIcon" + /> + </Component> + <Component + className="star" + icon="test-file-stub" + key="3" + size={15} > <div - className="thunder" - > - <Component - className="star" - icon="test-file-stub" - key="1" - size={15} - > - <div - id="StyledIcon" - /> - </Component> - <Component - className="star" - icon="test-file-stub" - key="2" - size={15} - > - <div - id="StyledIcon" - /> - </Component> - <Component - className="star" - icon="test-file-stub" - key="3" - size={15} - > - <div - id="StyledIcon" - /> - </Component> - <Component - className="star" - icon="test-file-stub" - key="4" - size={15} - > - <div - id="StyledIcon" - /> - </Component> - <Component - className="star" - icon="test-file-stub" - key="5" - size={15} - > - <div - id="StyledIcon" - /> - </Component> - </div> - </EfficiencyRating> + id="StyledIcon" + /> + </Component> + <Component + className="star" + icon="test-file-stub" + key="4" + size={15} + > + <div + id="StyledIcon" + /> + </Component> + <Component + className="star" + icon="test-file-stub" + key="5" + size={15} + > + <div + id="StyledIcon" + /> + </Component> </div> - </div> + </EfficiencyRating> </div> </div> </ForwardRef(CardContent)> diff --git a/src/components/Ecogesture/ecogestureCard.scss b/src/components/Ecogesture/ecogestureCard.scss index 2c1f2ef9d..9ba027017 100644 --- a/src/components/Ecogesture/ecogestureCard.scss +++ b/src/components/Ecogesture/ecogestureCard.scss @@ -1,54 +1,27 @@ @import 'src/styles/base/breakpoint'; @import 'src/styles/base/color'; -.ec { - display: flex; - justify-content: center; - width: 100%; +.ec-content { height: 100%; - .ecogesture-card-notif { - position: absolute; - display: flex; - justify-content: center; - align-items: center; - right: 8px; - top: 8px; - width: 1.25rem; - height: 1.25rem; - color: $dark-light; - border-radius: 50%; - border: 1px solid $dark-light; - z-index: 1; - background: $blue-radial-gradient; - font-size: 12px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + &.ec-content-unlocked { + padding: 0.4rem 0; + } + &.ec-content-challenge { + padding: 0.5rem 0; } - .ec-content { + + .ec-content-short-name { display: flex; - flex-direction: column; + flex: 1; align-items: center; - justify-content: space-around; - &.ec-content-unlocked { - padding: 0.4rem 0; - } - &.ec-content-challenge { - padding: 0.5rem 0; - } - .ec-content-icon { - min-height: 50px; - } - .ec-content-short-name { - display: flex; - flex: 1; - align-items: center; - text-align: center; - min-height: 38px; - } - .ec-content-efficiency { - margin-top: 0.5rem; - color: $soft-grey; - } + text-align: center; } } + .cp-eg-1 { height: 8rem; width: 100%; diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx index 5cf885281..158f05147 100644 --- a/src/components/FluidChart/FluidChart.tsx +++ b/src/components/FluidChart/FluidChart.tsx @@ -25,7 +25,7 @@ import { setShowOfflineData, } from 'store/chart/chart.slice' import { openConnectionModal } from 'store/modal/modal.slice' -import { getKonnectorSlug, isKonnectorActive } from 'utils/utils' +import { getFluidName, getKonnectorSlug, isKonnectorActive } from 'utils/utils' import FluidChartSwipe from './FluidChartSwipe' import './fluidChart.scss' @@ -51,14 +51,14 @@ const FluidChart = ({ fluidType, setActive }: FluidChartProps) => { useState<boolean>(false) const lowercaseTimeStep = TimeStep[currentTimeStep].toLowerCase() - const lowercaseFluidType = FluidType[fluidType].toLowerCase() + const lowercaseFluidType = getFluidName(fluidType) const handleChangeSwitch = async () => { if (!showCompare) { await UsageEventService.addEvent(client, { type: UsageEventType.CONSUMPTION_COMPARE_EVENT, target: TimeStep[currentTimeStep].toLowerCase(), - context: FluidType[fluidType].toLowerCase(), + context: lowercaseFluidType, }) } dispatch(setShowCompare(!showCompare)) diff --git a/src/components/Home/FluidButton.tsx b/src/components/Home/FluidButton.tsx index 7ceed8087..dcc93f534 100644 --- a/src/components/Home/FluidButton.tsx +++ b/src/components/Home/FluidButton.tsx @@ -12,7 +12,7 @@ import DateChartService from 'services/dateChart.service' import UsageEventService from 'services/usageEvent.service' import { AppStore } from 'store' import { getNavPicto } from 'utils/picto' -import { isKonnectorActive } from 'utils/utils' +import { getFluidName, isKonnectorActive } from 'utils/utils' interface FluidButtonProps { fluidType: FluidType @@ -58,19 +58,19 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => { const goToFluid = useCallback(async () => { await UsageEventService.addEvent(client, { type: UsageEventType.NAVIGATION_EVENT, - target: FluidType[fluidType].toLowerCase(), + target: getFluidName(fluidType), }) navigate( fluidType === FluidType.MULTIFLUID ? '/consumption' - : `/consumption/${FluidType[fluidType].toLowerCase()}` + : `/consumption/${getFluidName(fluidType)}` ) }, [navigate, fluidType, client]) const isFluidMaintenance = () => fluidStatus[fluidType]?.maintenance useEffect(() => { - // Show errors only on konnected konnectors that are in error, outdated, with no data (specific case), and not in multifluid + // Show errors only on connected konnectors that are in error, outdated, with no data (specific case), and not in multifluid if ( (fluidType !== FluidType.MULTIFLUID && isConnected() && isErrored()) || (fluidType !== FluidType.MULTIFLUID && isConnected() && isOutdated()) @@ -102,7 +102,7 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => { ) )} <div - className={`fluid-title ${FluidType[fluidType].toLowerCase()} ${ + className={`fluid-title ${getFluidName(fluidType)} ${ isActive && 'active' } text-14-normal`} > diff --git a/src/components/Home/consumptionView.scss b/src/components/Home/consumptionView.scss index f06c407a5..174d986a8 100644 --- a/src/components/Home/consumptionView.scss +++ b/src/components/Home/consumptionView.scss @@ -20,8 +20,10 @@ margin: 0 auto; width: 45.75rem; box-sizing: border-box; + padding-bottom: 1rem; @media #{$large-phone} { width: 100%; - padding: 0rem 1rem 3rem 1rem; + padding-left: 1rem; + padding-right: 1rem; } } diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx index f66db82fd..e4c0c6190 100644 --- a/src/components/Konnector/KonnectorViewerList.tsx +++ b/src/components/Konnector/KonnectorViewerList.tsx @@ -8,6 +8,7 @@ import { useSelector } from 'react-redux' import { useNavigate } from 'react-router-dom' import { AppStore } from 'store' import { getAddPicto } from 'utils/picto' +import { getFluidName } from 'utils/utils' import './konnectorViewerList.scss' const KonnectorViewerList = () => { @@ -16,7 +17,7 @@ const KonnectorViewerList = () => { const navigate = useNavigate() const goToFluid = useCallback( fluidType => { - navigate(`/consumption/${FluidType[fluidType].toLowerCase()}`) + navigate(`/consumption/${getFluidName(fluidType)}`) }, [navigate] ) @@ -27,6 +28,7 @@ const KonnectorViewerList = () => { key={key} className="connection-card" onClick={() => goToFluid(fluidStatusItem.fluidType)} + fluidType={fluidStatusItem.fluidType} > <Icon icon={getAddPicto(fluidStatusItem.fluidType)} size={36} /> <div diff --git a/src/components/Konnector/konnectorViewerList.scss b/src/components/Konnector/konnectorViewerList.scss index 38e239582..4005432f3 100644 --- a/src/components/Konnector/konnectorViewerList.scss +++ b/src/components/Konnector/konnectorViewerList.scss @@ -1,14 +1,16 @@ @import 'src/styles/base/color'; @import 'src/styles/base/breakpoint'; -button.connection-card div { - display: flex; - align-items: center; - justify-content: start; +button.connection-card { height: 80px; - font-weight: normal; - box-sizing: border-box; - svg { - margin-right: 1.5rem; + margin-bottom: 1rem; + &.electricity { + border: 1px solid var(--elecColor40); + } + &.gas { + border: 1px solid var(--gasColor40); + } + &.water { + border: 1px solid var(--waterColor40); } } diff --git a/src/components/Options/ExportData/exportData.scss b/src/components/Options/ExportData/exportData.scss index 869506818..fec065e3b 100644 --- a/src/components/Options/ExportData/exportData.scss +++ b/src/components/Options/ExportData/exportData.scss @@ -24,7 +24,6 @@ div.expansion-panel-root.Mui-expanded:last-child { margin: 0; } .accordion-title { - padding-left: 1rem; color: $white; } .expansion-panel-details { @@ -67,5 +66,8 @@ div.expansion-panel-root.Mui-expanded:last-child { } div.expansion-panel-summary { padding: 0 0.25rem 0 1rem; + .expansion-panel-content { + gap: 1rem; + } } } diff --git a/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss b/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss index 5f912a4f9..8dfc6023e 100644 --- a/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss +++ b/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss @@ -61,15 +61,10 @@ } button.profile-link { - color: $grey-bright; - text-decoration: none; - min-height: 4rem; + height: 64px !important; .profile-icon { vertical-align: middle; } - .link-label { - margin-left: 1rem; - } > button { margin-bottom: 0; > div { diff --git a/src/components/TimeStepSelector/TimeStepSelector.tsx b/src/components/TimeStepSelector/TimeStepSelector.tsx index d6cf1e041..6a72bc1eb 100644 --- a/src/components/TimeStepSelector/TimeStepSelector.tsx +++ b/src/components/TimeStepSelector/TimeStepSelector.tsx @@ -1,114 +1,115 @@ -import { Button } from '@material-ui/core' -import { useClient } from 'cozy-client' -import { useI18n } from 'cozy-ui/transpiled/react/I18n' -import { FluidType } from 'enum/fluid.enum' -import { TimeStep } from 'enum/timeStep.enum' -import { UsageEventType } from 'enum/usageEvent.enum' -import { DateTime } from 'luxon' -import React, { Dispatch } from 'react' -import { useDispatch, useSelector } from 'react-redux' -import DateChartService from 'services/dateChart.service' -import UsageEventService from 'services/usageEvent.service' -import { AppActionsTypes, AppStore } from 'store' -import { - setCurrentIndex, - setCurrentTimeStep, - setSelectedDate, -} from 'store/chart/chart.slice' -import './timeStepSelector.scss' - -const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => { - const { currentTimeStep, selectedDate } = useSelector( - (state: AppStore) => state.ecolyo.chart - ) - const { t } = useI18n() - const dispatch = useDispatch<Dispatch<AppActionsTypes>>() - const dateChartService = new DateChartService() - const client = useClient() - const timeStepElecArray: TimeStep[] = [ - TimeStep.HALF_AN_HOUR, - TimeStep.WEEK, - TimeStep.DAY, - TimeStep.MONTH, - TimeStep.YEAR, - ] - const timeStepMultiArray: TimeStep[] = [ - TimeStep.WEEK, - TimeStep.DAY, - TimeStep.MONTH, - TimeStep.YEAR, - ] - const timeStepArray: TimeStep[] = - fluidType === FluidType.ELECTRICITY - ? [...timeStepElecArray] - : [...timeStepMultiArray] - - const handleToday = () => { - const today = DateTime.local() - .setZone('utc', { - keepLocalTime: true, - }) - .startOf('day') - UsageEventService.addEvent(client, { - type: UsageEventType.CONSUMPTION_CHANGE_TIMESTEP_EVENT, - target: TimeStep[TimeStep.WEEK].toLowerCase(), - context: FluidType[fluidType].toLowerCase(), - }) - dispatch(setCurrentIndex(0)) - dispatch(setSelectedDate(today)) - dispatch(setCurrentTimeStep(TimeStep.WEEK)) - } - const handleChangeTimeStep = (targetTimestep: TimeStep) => { - const index: number = dateChartService.defineDateIndex( - targetTimestep, - selectedDate - ) - UsageEventService.addEvent(client, { - type: UsageEventType.CONSUMPTION_CHANGE_TIMESTEP_EVENT, - target: TimeStep[currentTimeStep].toLowerCase(), - context: FluidType[fluidType].toLowerCase(), - }) - dispatch(setCurrentTimeStep(targetTimestep)) - dispatch(setCurrentIndex(index)) - } - return ( - <div className={'timestep-selector'}> - <Button - onClick={handleToday} - classes={{ - root: 'btn-today', - label: 'text-13-normal', - }} - > - {t('timestep.today')} - </Button> - <div className={'timestep-container'}> - <ul - className={`timestep-bar ${ - fluidType === FluidType.ELECTRICITY && 'elec-bar' - }`} - > - {timeStepArray.map(step => ( - <React.Fragment key={step}> - <li - className={ - step === currentTimeStep ? 'active circle' : 'circle' - } - onClick={() => handleChangeTimeStep(step)} - id={TimeStep[step].toLowerCase()} - > - <span className="clickable-area" /> - <span className={'text text-14-normal'}> - {t(`timestep.${TimeStep[step].toLowerCase()}.period`)} - </span> - </li> - <li className="bar" /> - </React.Fragment> - ))} - </ul> - </div> - </div> - ) -} - -export default TimeStepSelector +import { Button } from '@material-ui/core' +import { useClient } from 'cozy-client' +import { useI18n } from 'cozy-ui/transpiled/react/I18n' +import { FluidType } from 'enum/fluid.enum' +import { TimeStep } from 'enum/timeStep.enum' +import { UsageEventType } from 'enum/usageEvent.enum' +import { DateTime } from 'luxon' +import React, { Dispatch } from 'react' +import { useDispatch, useSelector } from 'react-redux' +import DateChartService from 'services/dateChart.service' +import UsageEventService from 'services/usageEvent.service' +import { AppActionsTypes, AppStore } from 'store' +import { + setCurrentIndex, + setCurrentTimeStep, + setSelectedDate, +} from 'store/chart/chart.slice' +import { getFluidName } from 'utils/utils' +import './timeStepSelector.scss' + +const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => { + const { currentTimeStep, selectedDate } = useSelector( + (state: AppStore) => state.ecolyo.chart + ) + const { t } = useI18n() + const dispatch = useDispatch<Dispatch<AppActionsTypes>>() + const dateChartService = new DateChartService() + const client = useClient() + const timeStepElecArray: TimeStep[] = [ + TimeStep.HALF_AN_HOUR, + TimeStep.WEEK, + TimeStep.DAY, + TimeStep.MONTH, + TimeStep.YEAR, + ] + const timeStepMultiArray: TimeStep[] = [ + TimeStep.WEEK, + TimeStep.DAY, + TimeStep.MONTH, + TimeStep.YEAR, + ] + const timeStepArray: TimeStep[] = + fluidType === FluidType.ELECTRICITY + ? [...timeStepElecArray] + : [...timeStepMultiArray] + + const handleToday = () => { + const today = DateTime.local() + .setZone('utc', { + keepLocalTime: true, + }) + .startOf('day') + UsageEventService.addEvent(client, { + type: UsageEventType.CONSUMPTION_CHANGE_TIMESTEP_EVENT, + target: TimeStep[TimeStep.WEEK].toLowerCase(), + context: getFluidName(fluidType), + }) + dispatch(setCurrentIndex(0)) + dispatch(setSelectedDate(today)) + dispatch(setCurrentTimeStep(TimeStep.WEEK)) + } + const handleChangeTimeStep = (targetTimestep: TimeStep) => { + const index: number = dateChartService.defineDateIndex( + targetTimestep, + selectedDate + ) + UsageEventService.addEvent(client, { + type: UsageEventType.CONSUMPTION_CHANGE_TIMESTEP_EVENT, + target: TimeStep[currentTimeStep].toLowerCase(), + context: getFluidName(fluidType), + }) + dispatch(setCurrentTimeStep(targetTimestep)) + dispatch(setCurrentIndex(index)) + } + return ( + <div className={'timestep-selector'}> + <Button + onClick={handleToday} + classes={{ + root: 'btn-today', + label: 'text-13-normal', + }} + > + {t('timestep.today')} + </Button> + <div className={'timestep-container'}> + <ul + className={`timestep-bar ${ + fluidType === FluidType.ELECTRICITY && 'elec-bar' + }`} + > + {timeStepArray.map(step => ( + <React.Fragment key={step}> + <li + className={ + step === currentTimeStep ? 'active circle' : 'circle' + } + onClick={() => handleChangeTimeStep(step)} + id={TimeStep[step].toLowerCase()} + > + <span className="clickable-area" /> + <span className={'text text-14-normal'}> + {t(`timestep.${TimeStep[step].toLowerCase()}.period`)} + </span> + </li> + <li className="bar" /> + </React.Fragment> + ))} + </ul> + </div> + </div> + ) +} + +export default TimeStepSelector diff --git a/src/utils/utils.spec.ts b/src/utils/utils.spec.ts index 139492298..d4e3771e7 100644 --- a/src/utils/utils.spec.ts +++ b/src/utils/utils.spec.ts @@ -5,6 +5,7 @@ import { DateTime } from 'luxon' import { formatNumberValues, getChallengeTitleWithLineReturn, + getFluidName, getFluidType, getKonnectorSlug, getMonthNameWithPrep, @@ -116,4 +117,19 @@ describe('utils test', () => { expect(getMonthNameWithPrep(date)).toBe('d’octobre') }) }) + + describe('getFluidName', () => { + it('should return electricity', () => { + expect(getFluidName(FluidType.ELECTRICITY)).toBe('electricity') + }) + it('should return water', () => { + expect(getFluidName(FluidType.WATER)).toBe('water') + }) + it('should return gas', () => { + expect(getFluidName(FluidType.GAS)).toBe('gas') + }) + it('should return multifluid', () => { + expect(getFluidName(FluidType.MULTIFLUID)).toBe('multifluid') + }) + }) }) diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 146fa9263..cae5a5439 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -31,6 +31,13 @@ export function getKonnectorSlug(fluidType: FluidType) { throw new Error('unknown fluidtype') } } +/** Return lowercase fluidtype + * @example FluidType.ELECTRICITY => 'electricity' + */ +export function getFluidName(fluidType: FluidType) { + return FluidType[fluidType].toLowerCase() +} + export function getKonnectorUpdateError(type: string) { switch (type.toUpperCase()) { case 'USER_ACTION_NEEDED.OAUTH_OUTDATED': -- GitLab