diff --git a/src/components/Consumption/ConsumptionView.tsx b/src/components/Consumption/ConsumptionView.tsx index 6fcb134180032a5e690a9b255e8dbd0c481a7a62..ea5922bbaf2c27a1d95c8ee76c11a7fbc5cb8141 100644 --- a/src/components/Consumption/ConsumptionView.tsx +++ b/src/components/Consumption/ConsumptionView.tsx @@ -51,7 +51,6 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => { releaseNotes.show ) - const [active, setActive] = useState<boolean>(false) const [openExpiredConsentModal, setOpenExpiredConsentModal] = useState<boolean>(true) const [consentExpiredFluids, setConsentExpiredFluids] = useState<FluidType[]>( @@ -229,19 +228,12 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => { )} {showOfflineData && ( <> - <FluidChart - fluidType={fluidType} - setActive={setActive} - key={lastDataDateKey} - /> + <FluidChart fluidType={fluidType} key={lastDataDateKey} /> <ConsumptionDetails fluidType={fluidType} /> {!isMulti && ( <KonnectorViewerCard fluidType={fluidType} - isDisconnected={false} showOfflineData={true} - setActive={setActive} - active={active} key={fluidType} /> )} @@ -254,10 +246,7 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => { ) : ( <KonnectorViewerCard fluidType={fluidType} - isDisconnected={true} showOfflineData={false} - setActive={setActive} - active={active} /> )} </div> diff --git a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx index 3abf83ce6491136f93ef9c8e1b8c661eff2907ba..ab0e5d35ef66101aebf52175ca76c3c1f1b2779c 100644 --- a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx +++ b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx @@ -7,14 +7,7 @@ import { useAppSelector } from 'store/hooks' import InfoDataConsumptionVisualizer from './InfoDataConsumptionVisualizer' import './consumptionVisualizer.scss' -interface ConsumptionVisualizerProps { - fluidType: FluidType - setActive: React.Dispatch<React.SetStateAction<boolean>> -} -const ConsumptionVisualizer = ({ - fluidType, - setActive, -}: ConsumptionVisualizerProps) => { +const ConsumptionVisualizer = ({ fluidType }: { fluidType: FluidType }) => { const { chart: { currentDatachart, currentDatachartIndex }, global: { fluidStatus, fluidTypes }, @@ -53,7 +46,6 @@ const ConsumptionVisualizer = ({ fluidType={fluidType} dataload={dataload} compareDataload={compareDataload} - setActive={setActive} /> <div className="consumptionvisualizer-info"> <InfoDataConsumptionVisualizer diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx index b3c3b46eaefb8309acf47d6d73350e92f672bf24..e0afcdfbd52fa876d4cb2a597f6d8055a1021657 100644 --- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx +++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx @@ -51,7 +51,6 @@ describe('Dataload consumption visualizer component', () => { fluidType={FluidType.ELECTRICITY} dataload={baseDataLoad} compareDataload={baseDataLoad} - setActive={jest.fn()} /> </Provider> ) @@ -65,7 +64,6 @@ describe('Dataload consumption visualizer component', () => { fluidType={FluidType.ELECTRICITY} dataload={null as unknown as Dataload} compareDataload={baseDataLoad} - setActive={jest.fn()} /> </Provider> ) @@ -81,7 +79,6 @@ describe('Dataload consumption visualizer component', () => { fluidType={FluidType.ELECTRICITY} dataload={{ ...baseDataLoad, date: DateTime.local(9999, 1, 1) }} compareDataload={baseDataLoad} - setActive={jest.fn()} /> </Provider> ) @@ -99,7 +96,6 @@ describe('Dataload consumption visualizer component', () => { fluidType={FluidType.ELECTRICITY} dataload={{ ...baseDataLoad, state: DataloadState.MISSING }} compareDataload={baseDataLoad} - setActive={jest.fn()} /> </Provider> ) @@ -116,7 +112,6 @@ describe('Dataload consumption visualizer component', () => { fluidType={FluidType.MULTIFLUID} dataload={baseMultiFluidDataLoad} compareDataload={null} - setActive={jest.fn()} /> </BrowserRouter> </Provider> @@ -135,7 +130,6 @@ describe('Dataload consumption visualizer component', () => { fluidType={FluidType.WATER} dataload={baseDataLoad} compareDataload={emptyDataLoad} - setActive={jest.fn()} /> </Provider> ) @@ -154,7 +148,6 @@ describe('Dataload consumption visualizer component', () => { fluidType={FluidType.WATER} dataload={baseDataLoad} compareDataload={baseDataLoad} - setActive={jest.fn()} /> </Provider> ) @@ -168,7 +161,6 @@ describe('Dataload consumption visualizer component', () => { fluidType={FluidType.MULTIFLUID} dataload={dataLoadWithValueDetailEmpty} compareDataload={emptyDataLoad} - setActive={jest.fn()} /> </Provider> ) @@ -191,7 +183,6 @@ describe('Dataload consumption visualizer component', () => { fluidType={FluidType.MULTIFLUID} dataload={dataLoadWithValueDetail} compareDataload={emptyDataLoad} - setActive={jest.fn()} /> </BrowserRouter> </Provider> diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx index b7bc960a35d140af1f14870a7c04f70b0006a962..e28a077ee9150bb6862ee91bb293b8582f007ddd 100644 --- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx +++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx @@ -12,13 +12,11 @@ interface DataloadConsumptionVisualizerProps { fluidType: FluidType dataload: Dataload compareDataload: Dataload | null - setActive: React.Dispatch<React.SetStateAction<boolean>> } const DataloadConsumptionVisualizer = ({ fluidType, dataload, compareDataload, - setActive, }: DataloadConsumptionVisualizerProps) => { const { showCompare } = useAppSelector(state => state.ecolyo.chart) const [openEstimationModal, setOpenEstimationModal] = useState<boolean>(false) @@ -39,11 +37,7 @@ const DataloadConsumptionVisualizer = ({ ) { return ( <div className="dataloadvisualizer-root"> - <DataloadNoValue - dataload={dataload} - setActive={setActive} - fluidType={fluidType} - /> + <DataloadNoValue dataload={dataload} fluidType={fluidType} /> </div> ) } diff --git a/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx b/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx index 4045300323387423250a533581a554488d9d6b0a..4545f197f9362f8244edeadfec59a4beb8ad823a 100644 --- a/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx +++ b/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx @@ -2,17 +2,30 @@ import { render, screen } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' import { DataloadState, FluidType } from 'enums' import React from 'react' +import { Provider } from 'react-redux' +import * as storeHooks from 'store/hooks' import { baseDataLoad } from 'tests/__mocks__/chartData.mock' +import { createMockEcolyoStore } from 'tests/__mocks__/store' import DataloadNoValue from './DataloadNoValue' +const mockDispatch = jest.fn() +jest.spyOn(storeHooks, 'useAppDispatch').mockImplementation(() => mockDispatch) + describe('DataloadNoValue component', () => { + const store = createMockEcolyoStore() + + beforeEach(() => { + jest.clearAllMocks() + }) + it('should render correctly', () => { const { container } = render( - <DataloadNoValue - dataload={baseDataLoad} - fluidType={FluidType.ELECTRICITY} - setActive={jest.fn()} - /> + <Provider store={store}> + <DataloadNoValue + dataload={baseDataLoad} + fluidType={FluidType.ELECTRICITY} + /> + </Provider> ) expect(container).toMatchSnapshot() }) @@ -21,11 +34,12 @@ describe('DataloadNoValue component', () => { it('case state EMPTY', () => { const mockDataLoad = { ...baseDataLoad, state: DataloadState.EMPTY } render( - <DataloadNoValue - dataload={mockDataLoad} - fluidType={FluidType.ELECTRICITY} - setActive={jest.fn()} - /> + <Provider store={store}> + <DataloadNoValue + dataload={mockDataLoad} + fluidType={FluidType.ELECTRICITY} + /> + </Provider> ) expect( screen.getByText('consumption_visualizer.no_data') @@ -34,11 +48,12 @@ describe('DataloadNoValue component', () => { it('case state HOLE', () => { const mockDataLoad = { ...baseDataLoad, state: DataloadState.HOLE } render( - <DataloadNoValue - dataload={mockDataLoad} - fluidType={FluidType.ELECTRICITY} - setActive={jest.fn()} - /> + <Provider store={store}> + <DataloadNoValue + dataload={mockDataLoad} + fluidType={FluidType.ELECTRICITY} + /> + </Provider> ) expect( screen.getByText('consumption_visualizer.no_data') @@ -50,11 +65,12 @@ describe('DataloadNoValue component', () => { state: DataloadState.AGGREGATED_EMPTY, } render( - <DataloadNoValue - dataload={mockDataLoad} - fluidType={FluidType.MULTIFLUID} - setActive={jest.fn()} - /> + <Provider store={store}> + <DataloadNoValue + dataload={mockDataLoad} + fluidType={FluidType.MULTIFLUID} + /> + </Provider> ) expect( screen.getByText('consumption_visualizer.no_data') @@ -66,11 +82,12 @@ describe('DataloadNoValue component', () => { it('case state MISSING', () => { const mockDataLoad = { ...baseDataLoad, state: DataloadState.MISSING } render( - <DataloadNoValue - dataload={mockDataLoad} - fluidType={FluidType.ELECTRICITY} - setActive={jest.fn()} - /> + <Provider store={store}> + <DataloadNoValue + dataload={mockDataLoad} + fluidType={FluidType.ELECTRICITY} + /> + </Provider> ) expect( screen.getByText('consumption_visualizer.missing_data') @@ -82,11 +99,12 @@ describe('DataloadNoValue component', () => { state: DataloadState.AGGREGATED_HOLE_OR_MISSING, } render( - <DataloadNoValue - dataload={mockDataLoad} - fluidType={FluidType.MULTIFLUID} - setActive={jest.fn()} - /> + <Provider store={store}> + <DataloadNoValue + dataload={mockDataLoad} + fluidType={FluidType.MULTIFLUID} + /> + </Provider> ) expect( screen.getByText('consumption_visualizer.missing_data') @@ -94,17 +112,19 @@ describe('DataloadNoValue component', () => { }) }) - it('should call setActive when missing message is clicked', async () => { - const mockSetActive = jest.fn() - const mockDataLoad = { ...baseDataLoad, state: DataloadState.MISSING } + it('should call dispatch to show konnector details when missing message is clicked', async () => { render( - <DataloadNoValue - dataload={mockDataLoad} - fluidType={FluidType.ELECTRICITY} - setActive={mockSetActive} - /> + <Provider store={store}> + <DataloadNoValue + dataload={{ ...baseDataLoad, state: DataloadState.MISSING }} + fluidType={FluidType.ELECTRICITY} + /> + </Provider> ) await userEvent.click(screen.getByRole('button')) - expect(mockSetActive).toHaveBeenCalledWith(true) + expect(mockDispatch).toHaveBeenCalledWith({ + type: 'chart/setShowConnectionDetails', + payload: true, + }) }) }) diff --git a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx index 3c55e9ed03502b456ecf0c5de3a4923ac3c8cb5d..77b90b3d47af8f457f0e0166c17c9c1256fe0bc9 100644 --- a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx +++ b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx @@ -3,23 +3,21 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n' import { DataloadState, FluidType } from 'enums' import { Dataload } from 'models' import React, { useCallback } from 'react' +import { setShowConnectionDetails } from 'store/chart/chart.slice' +import { useAppDispatch } from 'store/hooks' import './consumptionVisualizer.scss' interface DataloadNoValueProps { dataload: Dataload fluidType: FluidType - setActive: React.Dispatch<React.SetStateAction<boolean>> } -const DataloadNoValue = ({ - dataload, - fluidType, - setActive, -}: DataloadNoValueProps) => { +const DataloadNoValue = ({ dataload, fluidType }: DataloadNoValueProps) => { const { t } = useI18n() + const dispatch = useAppDispatch() - const handleToggleKonnectionCard = useCallback(() => { - setActive(true) + const handleToggleKonnectorCard = useCallback(() => { + dispatch(setShowConnectionDetails(true)) const app = document.querySelector('.app-content') const content = document.querySelector('.content-view') if (content && app) { @@ -37,7 +35,7 @@ const DataloadNoValue = ({ }) }, 300) } - }, [setActive]) + }, [dispatch]) if ( dataload.state === DataloadState.EMPTY || @@ -65,7 +63,7 @@ const DataloadNoValue = ({ ) { return ( <Button - onClick={handleToggleKonnectionCard} + onClick={handleToggleKonnectorCard} classes={{ root: 'btnText', label: 'text-22-normal' }} > {t('consumption_visualizer.missing_data')} diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx index 2b5c2e45a73b9e64102dde5608476e04c17051e6..2e87f46b2f5fa66dcc83c481adddcf7666f82acd 100644 --- a/src/components/FluidChart/FluidChart.tsx +++ b/src/components/FluidChart/FluidChart.tsx @@ -25,12 +25,7 @@ import HalfHourUpcoming from './HalfHourUpcoming/HalfHourUpcoming' import TimeStepSelector from './TimeStepSelector/TimeStepSelector' import './fluidChart.scss' -interface FluidChartProps { - fluidType: FluidType - setActive: React.Dispatch<React.SetStateAction<boolean>> -} - -const FluidChart = ({ fluidType, setActive }: FluidChartProps) => { +const FluidChart = ({ fluidType }: { fluidType: FluidType }) => { const { t } = useI18n() const client = useClient() const { @@ -166,7 +161,7 @@ const FluidChart = ({ fluidType, setActive }: FluidChartProps) => { return ( <> <div className="fluidchart-content"> - <FluidChartSwipe fluidType={fluidType} setActive={setActive} /> + <FluidChartSwipe fluidType={fluidType} /> </div> {showCompare && currentTimeStep !== TimeStep.YEAR && ( <Slide direction="right" in={showCompare}> diff --git a/src/components/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx index 2bae0adb83144a081ccbb6a4798947d5eec69bd2..f63e06da3887d8f4d91be24460c304c3f3d22c76 100644 --- a/src/components/FluidChart/FluidChartSlide.tsx +++ b/src/components/FluidChart/FluidChartSlide.tsx @@ -18,7 +18,6 @@ interface FluidChartSlideProps { width: number height: number isSwitching: boolean - setActive: React.Dispatch<React.SetStateAction<boolean>> } const FluidChartSlide = ({ @@ -27,7 +26,6 @@ const FluidChartSlide = ({ width, height, isSwitching, - setActive, }: FluidChartSlideProps) => { const client = useClient() const dispatch = useAppDispatch() @@ -119,7 +117,7 @@ const FluidChartSlide = ({ </div> ) : ( <> - <ConsumptionVisualizer fluidType={fluidType} setActive={setActive} /> + <ConsumptionVisualizer fluidType={fluidType} /> <BarChart chartData={chartData} fluidType={fluidType} diff --git a/src/components/FluidChart/FluidChartSwipe.tsx b/src/components/FluidChart/FluidChartSwipe.tsx index 0e5b1693b3eaaf02439d787f9a3e59617b7ae64c..934e86468f5da625b27ff521a5ef50921edffb37 100644 --- a/src/components/FluidChart/FluidChartSwipe.tsx +++ b/src/components/FluidChart/FluidChartSwipe.tsx @@ -12,12 +12,7 @@ import './fluidChartSwipe.scss' const VirtualizeSwipeableViews = virtualize(SwipeableViews) -interface FluidChartSwipeProps { - fluidType: FluidType - setActive: React.Dispatch<React.SetStateAction<boolean>> -} - -const FluidChartSwipe = ({ fluidType, setActive }: FluidChartSwipeProps) => { +const FluidChartSwipe = ({ fluidType }: { fluidType: FluidType }) => { const dispatch = useAppDispatch() const { currentIndex, currentTimeStep, selectedDate } = useAppSelector( state => state.ecolyo.chart @@ -76,7 +71,6 @@ const FluidChartSwipe = ({ fluidType, setActive }: FluidChartSwipeProps) => { width={width} height={height} isSwitching={isSwitching} - setActive={setActive} /> ) diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx index 9c0de9fd00b07b86b85b8a48c2132b84b93c7937..14f9c4f71f02258c51e47f560758149718b05bf7 100644 --- a/src/components/Konnector/KonnectorViewerCard.tsx +++ b/src/components/Konnector/KonnectorViewerCard.tsx @@ -42,7 +42,11 @@ import DateChartService from 'services/dateChart.service' import FluidService from 'services/fluid.service' import PartnersInfoService from 'services/partnersInfo.service' import { setChallengeConsumption } from 'store/challenge/challenge.slice' -import { setSelectedDate, setShowOfflineData } from 'store/chart/chart.slice' +import { + setSelectedDate, + setShowConnectionDetails, + setShowOfflineData, +} from 'store/chart/chart.slice' import { setFluidStatus, setLastEpglLogin, @@ -57,25 +61,20 @@ import ConnectionResult from './ConnectionResult/ConnectionResult' import './konnectorViewerCard.scss' interface KonnectorViewerCardProps { - isDisconnected: boolean showOfflineData: boolean - active: boolean fluidType: FluidType - setActive: React.Dispatch<React.SetStateAction<boolean>> } const KonnectorViewerCard = ({ - isDisconnected, showOfflineData, - active, fluidType, - setActive, }: KonnectorViewerCardProps) => { const { t } = useI18n() const client = useClient() - const dispatch = useAppDispatch() const navigate = useNavigate() + const dispatch = useAppDispatch() const { + chart: { showConnectionDetails }, challenge: { currentChallenge }, global: { fluidStatus, shouldRefreshConsent, partnersInfo }, } = useAppSelector(state => state.ecolyo) @@ -107,7 +106,7 @@ const KonnectorViewerCard = ({ const iconType = getParamPicto(currentFluidStatus.fluidType) const toggleAccordion = () => { - setActive(prev => !prev) + dispatch(setShowConnectionDetails(!showConnectionDetails)) } const updateGlobalFluidStatus = useCallback(async (): Promise< @@ -159,11 +158,10 @@ const KonnectorViewerCard = ({ const updatedFluidStatus = await fluidService.getFluidStatus(partnersInfo) dispatch(setFluidStatus(updatedFluidStatus)) } - setActive(false) + dispatch(setShowConnectionDetails(false)) }, [ refreshChallengeState, updateGlobalFluidStatus, - setActive, partnersInfoService, fluidService, dispatch, @@ -215,8 +213,7 @@ const KonnectorViewerCard = ({ await fluidService.getFluidStatus(partnersInfo) dispatch(setFluidStatus(updatedFluidStatus)) } - - setActive(false) + dispatch(setShowConnectionDetails(false)) setOpenModal(false) // TODO null state seems to be read before modal closing and display a success icon in modal setKonnectorState(null) @@ -228,7 +225,6 @@ const KonnectorViewerCard = ({ currentFluidStatus, isUpdating, fluidType, - setActive, fluidSlug, client, handleAccountDeletion, @@ -490,12 +486,12 @@ const KonnectorViewerCard = ({ return ( <div className="konnector-section-root"> - {isDisconnected && ( + {!showOfflineData && ( <AccordionDetails>{getConnectionCard()}</AccordionDetails> )} - {!isDisconnected && ( + {showOfflineData && ( <Accordion - expanded={active} + expanded={showConnectionDetails} onChange={toggleAccordion} classes={{ root: `expansion-panel-root ${ diff --git a/src/models/chart.model.ts b/src/models/chart.model.ts index b9cfb1b972fd0ad896f397eff1a9c5cd738072ec..b0e24c8de78daa13a4f5c917ecb356f52fd8f64e 100644 --- a/src/models/chart.model.ts +++ b/src/models/chart.model.ts @@ -10,4 +10,6 @@ export interface ChartState { selectedDate: DateTime showCompare: boolean showOfflineData: boolean + /** For KonnectorViewerCard Accordion */ + showConnectionDetails: boolean } diff --git a/src/store/chart/chart.slice.spec.ts b/src/store/chart/chart.slice.spec.ts index 0ab8ecdd791f95139561c2bf02102ed9e935b951..02f68b6399afa66dbb82ff070c10dc8d082dbdb1 100644 --- a/src/store/chart/chart.slice.spec.ts +++ b/src/store/chart/chart.slice.spec.ts @@ -10,6 +10,7 @@ import { setCurrentTimeStep, setSelectedDate, setShowCompare, + setShowConnectionDetails, } from './chart.slice' describe('chart reducer', () => { @@ -108,4 +109,17 @@ describe('chart reducer', () => { }) }) }) + + describe('setShowConnectionDetails', () => { + it('should handle setShowConnectionDetails', () => { + const state = chartSlice.reducer( + mockChartState, + setShowConnectionDetails(true) + ) + expect(state).toEqual({ + ...mockChartState, + showConnectionDetails: true, + }) + }) + }) }) diff --git a/src/store/chart/chart.slice.ts b/src/store/chart/chart.slice.ts index 92bec2bdd71d70128f1633f417f700ed28d2234f..558e752a338575e15d2b4fa6896f8845330f975f 100644 --- a/src/store/chart/chart.slice.ts +++ b/src/store/chart/chart.slice.ts @@ -13,6 +13,7 @@ const initialState: ChartState = { currentDatachartIndex: 0, showCompare: false, showOfflineData: false, + showConnectionDetails: false, } export const chartSlice = createSlice({ @@ -43,6 +44,9 @@ export const chartSlice = createSlice({ setShowOfflineData: (state, action: PayloadAction<boolean>) => { state.showOfflineData = action.payload }, + setShowConnectionDetails: (state, action: PayloadAction<boolean>) => { + state.showConnectionDetails = action.payload + }, }, }) @@ -54,4 +58,5 @@ export const { setSelectedDate, setShowCompare, setShowOfflineData, + setShowConnectionDetails, } = chartSlice.actions diff --git a/tests/__mocks__/store/chart.state.mock.ts b/tests/__mocks__/store/chart.state.mock.ts index 337d9d464df5daea182406cef6a19bb5354a4614..76b75c5991de8c41b1cd7d7fe1070b8260f617aa 100644 --- a/tests/__mocks__/store/chart.state.mock.ts +++ b/tests/__mocks__/store/chart.state.mock.ts @@ -12,4 +12,5 @@ export const mockChartState: ChartState = { currentDatachartIndex: 0, showCompare: false, showOfflineData: false, + showConnectionDetails: false, }