From a85c487b2c9bc470bb0ed74e707ea7cc7d9370a8 Mon Sep 17 00:00:00 2001 From: Bastien DUMONT <bdumont@grandlyon.com> Date: Wed, 27 Mar 2024 12:01:30 +0000 Subject: [PATCH] refactor: remove unused chart.loading --- .../Consumption/ConsumptionView.spec.tsx | 39 ++--- .../Consumption/ConsumptionView.tsx | 48 ++---- .../Consumption/consumptionView.scss | 29 ---- src/components/FluidChart/FluidChartSlide.tsx | 3 +- src/components/FluidChart/FluidChartSwipe.tsx | 7 +- src/components/Hooks/useKonnectorAuth.tsx | 5 - .../Konnector/KonnectorViewerCard.tsx | 4 +- .../Konnector/KonnectorViewerList.tsx | 44 ++--- .../KonnectorViewerList.spec.tsx.snap | 160 +++++++++--------- .../Konnector/konnectorViewerCard.scss | 31 ++++ .../Konnector/konnectorViewerList.scss | 21 --- src/models/chart.model.ts | 1 - src/store/chart/chart.slice.spec.ts | 11 -- src/store/chart/chart.slice.ts | 5 - tests/__mocks__/store/chart.state.mock.ts | 1 - 15 files changed, 167 insertions(+), 242 deletions(-) delete mode 100644 src/components/Consumption/consumptionView.scss delete mode 100644 src/components/Konnector/konnectorViewerList.scss diff --git a/src/components/Consumption/ConsumptionView.spec.tsx b/src/components/Consumption/ConsumptionView.spec.tsx index 124c51acc..722bc1e09 100644 --- a/src/components/Consumption/ConsumptionView.spec.tsx +++ b/src/components/Consumption/ConsumptionView.spec.tsx @@ -1,4 +1,4 @@ -import { render, screen } from '@testing-library/react' +import { render, screen, waitFor } from '@testing-library/react' import { FluidState, FluidType, TimeStep } from 'enums' import React from 'react' import { Provider } from 'react-redux' @@ -59,7 +59,6 @@ describe('ConsumptionView component', () => { const store = createMockEcolyoStore({ chart: { ...mockChartState, - loading: false, showOfflineData: true, }, global: { @@ -83,27 +82,6 @@ describe('ConsumptionView component', () => { ).toBeTruthy() }) - it('should display a spinner when fluid connected and is loading', () => { - const store = createMockEcolyoStore({ - chart: { - ...mockChartState, - loading: true, - showOfflineData: true, - }, - global: { - fluidStatus: mockFluidStatus, - releaseNotes: mockInitialEcolyoState.global.releaseNotes, - }, - modal: mockModalState, - }) - render( - <Provider store={store}> - <ConsumptionView fluidType={FluidType.ELECTRICITY} /> - </Provider> - ) - expect(screen.getByRole('progressbar')).toBeInTheDocument() - }) - it('should set CurrentTimeStep to WEEK when fluid != ELECTRICITY and timeStep = HALF_AN_HOUR', () => { const store = createMockEcolyoStore({ chart: { @@ -144,7 +122,7 @@ describe('ConsumptionView component', () => { ).toBeTruthy() }) - it('should render mutlifluid consumption if at least one fluid is connected', () => { + it('should render mutlifluid consumption if at least one fluid is connected without konnectorViewerCard', async () => { const store = createMockEcolyoStore({ chart: mockChartStateShowOffline, global: { @@ -158,12 +136,16 @@ describe('ConsumptionView component', () => { <ConsumptionView fluidType={FluidType.MULTIFLUID} /> </Provider> ) + await waitFor(() => null, { container }) expect( - container.getElementsByClassName('consumptionview-content')[0] + container.getElementsByTagName('mock-consumptionDetails').item(0) ).toBeInTheDocument() + expect( + container.getElementsByTagName('mock-konnectorViewerCard').item(0) + ).not.toBeInTheDocument() }) - it('should render Electricity when elec is connected', () => { + it('should render Electricity when elec is connected with konnectorViewCard', async () => { const store = createMockEcolyoStore({ chart: mockChartStateShowOffline, global: { @@ -177,11 +159,12 @@ describe('ConsumptionView component', () => { <ConsumptionView fluidType={FluidType.ELECTRICITY} /> </Provider> ) + await waitFor(() => null, { container }) expect( - container.getElementsByClassName('consumptionview-content').item(0) + container.getElementsByTagName('mock-consumptionDetails').item(0) ).toBeInTheDocument() expect( - container.getElementsByTagName('mock-consumptionDetails').item(0) + container.getElementsByTagName('mock-konnectorViewerCard').item(0) ).toBeInTheDocument() }) diff --git a/src/components/Consumption/ConsumptionView.tsx b/src/components/Consumption/ConsumptionView.tsx index 9b2ff60c9..6fcb13418 100644 --- a/src/components/Consumption/ConsumptionView.tsx +++ b/src/components/Consumption/ConsumptionView.tsx @@ -1,4 +1,3 @@ -import classNames from 'classnames' import ExpiredConsentModal from 'components/Connection/ExpiredConsentModal/ExpiredConsentModal' import Content from 'components/Content/Content' import CustomPopupModal from 'components/CustomPopup/CustomPopupModal' @@ -8,7 +7,6 @@ import CozyBar from 'components/Header/CozyBar' import Header from 'components/Header/Header' import KonnectorViewerCard from 'components/Konnector/KonnectorViewerCard' import KonnectorViewerList from 'components/Konnector/KonnectorViewerList' -import Loader from 'components/Loader/Loader' import PartnerIssueModal from 'components/PartnerIssue/PartnerIssueModal' import ReleaseNotesModal from 'components/ReleaseNotesModal/ReleaseNotesModal' import { useClient } from 'cozy-client' @@ -35,7 +33,6 @@ import { } from 'utils/utils' import ConsumptionDetails from './ConsumptionDetails/ConsumptionDetails' import FluidButtons from './FluidButtons/FluidButtons' -import './consumptionView.scss' const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => { const navigate = useNavigate() @@ -43,13 +40,7 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => { const dispatch = useAppDispatch() const isMulti = fluidType === FluidType.MULTIFLUID const { - chart: { - currentTimeStep, - loading, - showOfflineData, - selectedDate, - currentIndex, - }, + chart: { currentTimeStep, showOfflineData, selectedDate, currentIndex }, global: { fluidStatus, releaseNotes }, modal: { partnersIssueModal, customPopupModal }, } = useAppSelector(state => state.ecolyo) @@ -238,34 +229,21 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => { )} {showOfflineData && ( <> - {loading && ( - <div className="consumptionview-loading"> - <Loader fluidType={fluidType} /> - </div> - )} - <div - className={classNames('consumptionview-content', { - ['--hidden']: loading, - })} - > - <FluidChart + <FluidChart + fluidType={fluidType} + setActive={setActive} + key={lastDataDateKey} + /> + <ConsumptionDetails fluidType={fluidType} /> + {!isMulti && ( + <KonnectorViewerCard fluidType={fluidType} + isDisconnected={false} + showOfflineData={true} setActive={setActive} - key={lastDataDateKey} + active={active} + key={fluidType} /> - <ConsumptionDetails fluidType={fluidType} /> - </div> - {!isMulti && ( - <div className="konnector-section"> - <KonnectorViewerCard - fluidType={fluidType} - isDisconnected={false} - showOfflineData={true} - setActive={setActive} - active={active} - key={fluidType} - /> - </div> )} </> )} diff --git a/src/components/Consumption/consumptionView.scss b/src/components/Consumption/consumptionView.scss deleted file mode 100644 index ce636ccff..000000000 --- a/src/components/Consumption/consumptionView.scss +++ /dev/null @@ -1,29 +0,0 @@ -@import 'src/styles/base/breakpoint'; -@import 'src/styles/base/color'; - -.consumptionview-loading { - background-color: $default-background; - height: 80vh; - width: 100%; - display: flex; - justify-content: center; - align-items: center; -} -.consumptionview-content { - background-color: $default-background; - &.--hidden { - display: none; - } -} -.konnector-section { - background-color: $default-background; - margin: 0 auto; - box-sizing: border-box; - padding-bottom: 1rem; - max-width: 45.75rem; - width: 100%; - @media #{$large-phone} { - padding-left: 1rem; - padding-right: 1rem; - } -} diff --git a/src/components/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx index 5be063497..2bae0adb8 100644 --- a/src/components/FluidChart/FluidChartSlide.tsx +++ b/src/components/FluidChart/FluidChartSlide.tsx @@ -8,7 +8,7 @@ import { Datachart } from 'models' import React, { useEffect, useState } from 'react' import ConsumptionService from 'services/consumption.service' import DateChartService from 'services/dateChart.service' -import { setCurrentDataChart, setLoading } from 'store/chart/chart.slice' +import { setCurrentDataChart } from 'store/chart/chart.slice' import { useAppDispatch, useAppSelector } from 'store/hooks' import './fluidChartSlide.scss' @@ -85,7 +85,6 @@ const FluidChartSlide = ({ if (subscribed && graphData && graphData?.actualData.length > 0) { setChartData(graphData) setIsDataLoaded(true) - dispatch(setLoading(false)) } } } diff --git a/src/components/FluidChart/FluidChartSwipe.tsx b/src/components/FluidChart/FluidChartSwipe.tsx index 68c3ee7b2..0e5b1693b 100644 --- a/src/components/FluidChart/FluidChartSwipe.tsx +++ b/src/components/FluidChart/FluidChartSwipe.tsx @@ -19,8 +19,9 @@ interface FluidChartSwipeProps { const FluidChartSwipe = ({ fluidType, setActive }: FluidChartSwipeProps) => { const dispatch = useAppDispatch() - const { currentIndex, currentTimeStep, selectedDate, loading } = - useAppSelector(state => state.ecolyo.chart) + const { currentIndex, currentTimeStep, selectedDate } = useAppSelector( + state => state.ecolyo.chart + ) const swipe = useRef<HTMLDivElement>(null) const [isSwitching, setIsSwitching] = useState(false) @@ -53,7 +54,7 @@ const FluidChartSwipe = ({ fluidType, setActive }: FluidChartSwipeProps) => { dispatch(setCurrentIndex(updatedIndex)) } - const { height, width } = useChartResize(swipe, loading) + const { height, width } = useChartResize(swipe, false) useEffect(() => { function initIndex() { diff --git a/src/components/Hooks/useKonnectorAuth.tsx b/src/components/Hooks/useKonnectorAuth.tsx index de2e6ca5b..150ab18e3 100644 --- a/src/components/Hooks/useKonnectorAuth.tsx +++ b/src/components/Hooks/useKonnectorAuth.tsx @@ -12,7 +12,6 @@ import { import { useState } from 'react' import AccountService from 'services/account.service' import ConnectionService from 'services/connection.service' -import { setLoading } from 'store/chart/chart.slice' import { updateFluidConnection } from 'store/global/global.slice' import { useAppDispatch, useAppSelector } from 'store/hooks' import logApp from 'utils/logger' @@ -103,8 +102,6 @@ const useKonnectorAuth = ( trigger: trigger, shouldLaunchKonnector: true, } - // TODO this should be dispatched - setLoading(false) dispatch( updateFluidConnection({ fluidType: currentFluidStatus.fluidType, @@ -112,7 +109,6 @@ const useKonnectorAuth = ( }) ) } catch (error) { - setLoading(false) logApp.error(error) Sentry.captureException(error) } @@ -148,7 +144,6 @@ const useKonnectorAuth = ( ) } } catch (error) { - setLoading(false) logApp.error(error) Sentry.captureException(error) } diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx index d21e51fcc..9c0de9fd0 100644 --- a/src/components/Konnector/KonnectorViewerCard.tsx +++ b/src/components/Konnector/KonnectorViewerCard.tsx @@ -489,7 +489,7 @@ const KonnectorViewerCard = ({ ]) return ( - <> + <div className="konnector-section-root"> {isDisconnected && ( <AccordionDetails>{getConnectionCard()}</AccordionDetails> )} @@ -550,7 +550,7 @@ const KonnectorViewerCard = ({ handleAccountDeletion={handleAccountDeletion} account={account} /> - </> + </div> ) } export default KonnectorViewerCard diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx index 7865473a2..c3688d78d 100644 --- a/src/components/Konnector/KonnectorViewerList.tsx +++ b/src/components/Konnector/KonnectorViewerList.tsx @@ -7,7 +7,7 @@ import { useNavigate } from 'react-router-dom' import { useAppSelector } from 'store/hooks' import { getAddPicto } from 'utils/picto' import { getFluidName } from 'utils/utils' -import './konnectorViewerList.scss' +import './konnectorViewerCard.scss' const KonnectorViewerList = () => { const { t } = useI18n() @@ -18,28 +18,30 @@ const KonnectorViewerList = () => { } return ( - <div className="konnectorsList"> - {fluidStatus.map(fluidStatusItem => ( - <StyledCard - key={fluidStatusItem.fluidType} - className="connection-card" - onClick={() => goToFluid(fluidStatusItem.fluidType)} - fluidType={fluidStatusItem.fluidType} - > - <Icon icon={getAddPicto(fluidStatusItem.fluidType)} size={36} /> - <div - className={`konnector-title text-18-bold ${FluidType[ - fluidStatusItem.fluidType - ].toLowerCase()}`} + <div className="konnector-section-root"> + <div className="konnectorsList"> + {fluidStatus.map(fluidStatusItem => ( + <StyledCard + key={fluidStatusItem.fluidType} + className="connection-card" + onClick={() => goToFluid(fluidStatusItem.fluidType)} + fluidType={fluidStatusItem.fluidType} > - {t( - `konnector_options.label_connect_to_${FluidType[ + <Icon icon={getAddPicto(fluidStatusItem.fluidType)} size={36} /> + <div + className={`konnector-title text-18-bold ${FluidType[ fluidStatusItem.fluidType - ].toLowerCase()}` - )} - </div> - </StyledCard> - ))} + ].toLowerCase()}`} + > + {t( + `konnector_options.label_connect_to_${FluidType[ + fluidStatusItem.fluidType + ].toLowerCase()}` + )} + </div> + </StyledCard> + ))} + </div> </div> ) } diff --git a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap index 8fd0a567d..102a761bc 100644 --- a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap +++ b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap @@ -3,98 +3,102 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = ` <div> <div - class="konnectorsList" + class="konnector-section-root" > - <button - class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity" - tabindex="0" - type="button" + <div + class="konnectorsList" > - <div - class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" + <button + class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity" + tabindex="0" + type="button" > - <svg - class="styles__icon___23x3R" - height="36" - width="36" - > - <use - xlink:href="#test-file-stub" - /> - </svg> <div - class="konnector-title text-18-bold electricity" + class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" > - konnector_options.label_connect_to_electricity + <svg + class="styles__icon___23x3R" + height="36" + width="36" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="konnector-title text-18-bold electricity" + > + konnector_options.label_connect_to_electricity + </div> </div> - </div> - <span - class="MuiCardActionArea-focusHighlight" - /> - <span - class="MuiTouchRipple-root" - /> - </button> - <button - class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water" - tabindex="0" - type="button" - > - <div - class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" + <span + class="MuiCardActionArea-focusHighlight" + /> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water" + tabindex="0" + type="button" > - <svg - class="styles__icon___23x3R" - height="36" - width="36" - > - <use - xlink:href="#test-file-stub" - /> - </svg> <div - class="konnector-title text-18-bold water" + class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" > - konnector_options.label_connect_to_water + <svg + class="styles__icon___23x3R" + height="36" + width="36" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="konnector-title text-18-bold water" + > + konnector_options.label_connect_to_water + </div> </div> - </div> - <span - class="MuiCardActionArea-focusHighlight" - /> - <span - class="MuiTouchRipple-root" - /> - </button> - <button - class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas" - tabindex="0" - type="button" - > - <div - class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" + <span + class="MuiCardActionArea-focusHighlight" + /> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas" + tabindex="0" + type="button" > - <svg - class="styles__icon___23x3R" - height="36" - width="36" - > - <use - xlink:href="#test-file-stub" - /> - </svg> <div - class="konnector-title text-18-bold gas" + class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" > - konnector_options.label_connect_to_gas + <svg + class="styles__icon___23x3R" + height="36" + width="36" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="konnector-title text-18-bold gas" + > + konnector_options.label_connect_to_gas + </div> </div> - </div> - <span - class="MuiCardActionArea-focusHighlight" - /> - <span - class="MuiTouchRipple-root" - /> - </button> + <span + class="MuiCardActionArea-focusHighlight" + /> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> </div> </div> `; diff --git a/src/components/Konnector/konnectorViewerCard.scss b/src/components/Konnector/konnectorViewerCard.scss index 3eaa94ce1..7d2977f8d 100644 --- a/src/components/Konnector/konnectorViewerCard.scss +++ b/src/components/Konnector/konnectorViewerCard.scss @@ -1,6 +1,18 @@ @import 'src/styles/base/color'; @import 'src/styles/base/breakpoint'; +.konnector-section-root { + margin: 0 auto; + padding-bottom: 1rem; + max-width: 45.75rem; + width: 100%; + box-sizing: border-box; + @media #{$large-phone} { + padding-left: 1rem; + padding-right: 1rem; + } +} + .konnector-icon { margin-right: 1rem; position: relative; @@ -32,3 +44,22 @@ color: $grey-bright; } } + +.konnectorsList { + display: flex; + flex-direction: column; + gap: 1rem; + padding-top: 1rem; + button.connection-card { + height: 80px; + &.electricity { + border: 1px solid var(--elecColor40); + } + &.gas { + border: 1px solid var(--gasColor40); + } + &.water { + border: 1px solid var(--waterColor40); + } + } +} diff --git a/src/components/Konnector/konnectorViewerList.scss b/src/components/Konnector/konnectorViewerList.scss deleted file mode 100644 index bb94bfef8..000000000 --- a/src/components/Konnector/konnectorViewerList.scss +++ /dev/null @@ -1,21 +0,0 @@ -@import 'src/styles/base/color'; -@import 'src/styles/base/breakpoint'; - -.konnectorsList { - display: flex; - flex-direction: column; - gap: 1rem; - padding-top: 1rem; - button.connection-card { - height: 80px; - &.electricity { - border: 1px solid var(--elecColor40); - } - &.gas { - border: 1px solid var(--gasColor40); - } - &.water { - border: 1px solid var(--waterColor40); - } - } -} diff --git a/src/models/chart.model.ts b/src/models/chart.model.ts index 96fa843eb..b9cfb1b97 100644 --- a/src/models/chart.model.ts +++ b/src/models/chart.model.ts @@ -7,7 +7,6 @@ export interface ChartState { currentDatachartIndex: number currentIndex: number currentTimeStep: TimeStep - loading: boolean selectedDate: DateTime showCompare: boolean showOfflineData: boolean diff --git a/src/store/chart/chart.slice.spec.ts b/src/store/chart/chart.slice.spec.ts index 9015e59e3..0ab8ecdd7 100644 --- a/src/store/chart/chart.slice.spec.ts +++ b/src/store/chart/chart.slice.spec.ts @@ -8,7 +8,6 @@ import { setCurrentDataChartIndex, setCurrentIndex, setCurrentTimeStep, - setLoading, setSelectedDate, setShowCompare, } from './chart.slice' @@ -100,16 +99,6 @@ describe('chart reducer', () => { }) }) - describe('setLoading', () => { - it('should handle setLoading with payload', () => { - const state = chartSlice.reducer(mockChartState, setLoading(false)) - expect(state).toEqual({ - ...mockChartState, - loading: false, - }) - }) - }) - describe('setShowCompare', () => { it('should handle setShowCompare', () => { const state = chartSlice.reducer(mockChartState, setShowCompare(true)) diff --git a/src/store/chart/chart.slice.ts b/src/store/chart/chart.slice.ts index 60f4790d6..92bec2bdd 100644 --- a/src/store/chart/chart.slice.ts +++ b/src/store/chart/chart.slice.ts @@ -11,7 +11,6 @@ const initialState: ChartState = { currentIndex: 0, currentDatachart: { actualData: [], comparisonData: null }, currentDatachartIndex: 0, - loading: true, showCompare: false, showOfflineData: false, } @@ -35,9 +34,6 @@ export const chartSlice = createSlice({ state.showCompare = false } }, - setLoading: (state, action: PayloadAction<boolean>) => { - state.loading = action.payload - }, setSelectedDate: (state, action: PayloadAction<DateTime>) => { state.selectedDate = action.payload }, @@ -55,7 +51,6 @@ export const { setCurrentDataChartIndex, setCurrentIndex, setCurrentTimeStep, - setLoading, setSelectedDate, setShowCompare, setShowOfflineData, diff --git a/tests/__mocks__/store/chart.state.mock.ts b/tests/__mocks__/store/chart.state.mock.ts index df355ad57..337d9d464 100644 --- a/tests/__mocks__/store/chart.state.mock.ts +++ b/tests/__mocks__/store/chart.state.mock.ts @@ -10,7 +10,6 @@ export const mockChartState: ChartState = { currentIndex: 0, currentDatachart: { actualData: [], comparisonData: null }, currentDatachartIndex: 0, - loading: true, showCompare: false, showOfflineData: false, } -- GitLab