diff --git a/src/atoms/chart.state.ts b/src/atoms/chart.state.ts deleted file mode 100644 index a0b25db8bd405ff4486b0be98d06434afc6e7619..0000000000000000000000000000000000000000 --- a/src/atoms/chart.state.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { TimeStep } from 'enum/timeStep.enum' -import { atom } from 'recoil' - -export const previousTimeStepState = atom<TimeStep>({ - key: 'previousTimeStepState', - default: TimeStep.DAY, -}) - -export const maxLoadsState = atom<Record<string, number | null>>({ - key: 'maxLoadsState', - default: {}, -}) diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx index 7ded0d1aa75fd90705e0d39dbeed4bd65a3dc9d1..58c70e3a71fbe510de4f4da5157d586217f0a3e4 100644 --- a/src/components/Charts/BarChart.tsx +++ b/src/components/Charts/BarChart.tsx @@ -1,11 +1,12 @@ import React from 'react' +import { useSelector, useDispatch } from 'react-redux' +import { EcolyoState } from 'store' +import { addMaxLoad } from 'store/chart/chart.actions' import { scaleBand, ScaleBand, scaleLinear, ScaleLinear } from 'd3-scale' -import { useRecoilValue } from 'recoil' import { DateTime } from 'luxon' import { FluidType } from 'enum/fluid.enum' import { TimeStep } from 'enum/timeStep.enum' -import { maxLoadsState } from 'atoms/chart.state' import { Datachart, Dataload } from 'models' import Bar from 'components/Charts/Bar' @@ -62,7 +63,8 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => { isSwitching, isHome, } = props as PropsWithDefaults - const maxLoads = useRecoilValue(maxLoadsState) + const dispatch = useDispatch() + const { maxLoads } = useSelector((state: EcolyoState) => state.chart) const getContentWidth = () => { return width - marginLeft - marginRight @@ -85,10 +87,13 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => { const key = `${actualMonth}/${actualYear}-${isHome}-${fluidTypes.join( '-' )}-${timeStep}` - if (DateTime.local() < selectedDate && !maxLoads[key]) { - maxLoads[key] = 15 + let maxLoad = 0 + if (DateTime.local() < selectedDate && !maxLoads.has(key)) { + maxLoad = 15 + dispatch(addMaxLoad(new Map().set(key, maxLoad))) + } else { + maxLoad = maxLoads.get(key) || 0 } - const maxLoad = maxLoads[key] || 0 if (showCompare) { return Math.round(Math.max(maxLoad, maxCompare)) } diff --git a/src/components/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx index 98958364c82fab6acd1669272f29f4d6402ade60..9d3c47ff07f70e35bb359072ddd75caa77f94c99 100644 --- a/src/components/FluidChart/FluidChartSlide.tsx +++ b/src/components/FluidChart/FluidChartSlide.tsx @@ -1,12 +1,13 @@ import React, { useState, useEffect } from 'react' import { useClient } from 'cozy-client' -import { useRecoilValue } from 'recoil' +import { useDispatch } from 'react-redux' +import { addMaxLoad } from 'store/chart/chart.actions' + import { DateTime } from 'luxon' import { FluidType } from 'enum/fluid.enum' import { TimeStep } from 'enum/timeStep.enum' -import { maxLoadsState } from 'atoms/chart.state' -import { Datachart, Dataload, TimePeriod } from 'models' +import { Datachart, Dataload } from 'models' import ConsumptionService from 'services/consumption.service' import DateChartService from 'services/dateChart.service' @@ -44,14 +45,13 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({ isSwitching, }: FluidChartSlideProps) => { const client = useClient() + const dispatch = useDispatch() const [chartData, setChartData] = useState<Datachart>({ actualData: [], comparisonData: null, }) const [isLoaded, setIsLoaded] = useState<boolean>(false) - const maxLoads = useRecoilValue(maxLoadsState) - const isHome: boolean = !window.location.hash.split('/')[2] ? true : false useEffect(() => { @@ -102,8 +102,7 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({ compareMaxTimePeriod, isHome ) - - maxLoads[key] = graphMaxLoad + dispatch(addMaxLoad(new Map().set(key, graphMaxLoad))) } if (subscribed && graphData && graphData.actualData.length > 0) { diff --git a/src/components/Home/HomeView.tsx b/src/components/Home/HomeView.tsx index a34641b503d9938089c781445911cdc3d61e2dfa..8b9f6da5636fa377246f9eb60e9e0fdcbeb2b59e 100644 --- a/src/components/Home/HomeView.tsx +++ b/src/components/Home/HomeView.tsx @@ -1,13 +1,13 @@ import React, { useState, useEffect, useCallback } from 'react' import { useClient } from 'cozy-client' -import { useRecoilState, useRecoilValue } from 'recoil' +import { useRecoilValue } from 'recoil' import { useSelector, useDispatch } from 'react-redux' import { EcolyoState } from 'store' import { updateProfile } from 'store/profile/profile.actions' +import { setPreviousTimeStep } from 'store/chart/chart.actions' import { TimeStep } from 'enum/timeStep.enum' import { fluidStatusState, fluidTypeState } from 'atoms/fluidState.state' -import { previousTimeStepState } from 'atoms/chart.state' import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner' import CozyBar from 'components/Header/CozyBar' @@ -27,11 +27,9 @@ const HomeView: React.FC = () => { const client = useClient() const dispatch = useDispatch() const profile = useSelector((state: EcolyoState) => state.profile) + const { previousTimeStep } = useSelector((state: EcolyoState) => state.chart) const fluidTypes = useRecoilValue(fluidTypeState) const fluidStatus = useRecoilValue(fluidStatusState) - const [previousTimeStep, setPreviousTimeStep] = useRecoilState( - previousTimeStepState - ) const [timeStep, setTimeStep] = useState<TimeStep>( previousTimeStep !== TimeStep.HALF_AN_HOUR ? previousTimeStep : TimeStep.DAY @@ -65,7 +63,7 @@ const HomeView: React.FC = () => { const handleClickTimeStepForNavigation = (_timeStep: TimeStep) => { setResetReferenceDate(true) setTimeStep(_timeStep) - setPreviousTimeStep(_timeStep) + dispatch(setPreviousTimeStep(_timeStep)) } const handleClickTimeStepForFluidContainer = (_timeStep: TimeStep) => { diff --git a/src/components/SingleFluid/SingleFluidView.tsx b/src/components/SingleFluid/SingleFluidView.tsx index 53d5d42e7832e5a28518d53ab6afa659b360b961..f9b0e24ece7a84467c7d8582776bff01041a53a3 100644 --- a/src/components/SingleFluid/SingleFluidView.tsx +++ b/src/components/SingleFluid/SingleFluidView.tsx @@ -1,9 +1,10 @@ import React, { useState } from 'react' -import { useRecoilState } from 'recoil' +import { useSelector, useDispatch } from 'react-redux' +import { EcolyoState } from 'store' +import { setPreviousTimeStep } from 'store/chart/chart.actions' import { FluidType } from 'enum/fluid.enum' import { TimeStep } from 'enum/timeStep.enum' -import { previousTimeStepState } from 'atoms/chart.state' import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner' import CozyBar from 'components/Header/CozyBar' @@ -19,9 +20,8 @@ interface SingleFluidViewProps { const SingleFluidView: React.FC<SingleFluidViewProps> = ({ fluidTypes, }: SingleFluidViewProps) => { - const [previousTimeStep, setPreviousTimeStep] = useRecoilState( - previousTimeStepState - ) + const dispatch = useDispatch() + const { previousTimeStep } = useSelector((state: EcolyoState) => state.chart) const [timeStep, setTimeStep] = useState<TimeStep>( previousTimeStep !== TimeStep.HALF_AN_HOUR ? previousTimeStep : TimeStep.DAY @@ -43,7 +43,7 @@ const SingleFluidView: React.FC<SingleFluidViewProps> = ({ const handleClickTimeStepForNavigation = (_timeStep: TimeStep) => { setResetReferenceDate(true) setTimeStep(_timeStep) - setPreviousTimeStep(_timeStep) + dispatch(setPreviousTimeStep(_timeStep)) } const handleClickTimeStepForFluidContainer = (_timeStep: TimeStep) => { diff --git a/src/models/chart.model.ts b/src/models/chart.model.ts new file mode 100644 index 0000000000000000000000000000000000000000..b7c6a14dd08ee9a1d62c198a463c8f5c7fda3de3 --- /dev/null +++ b/src/models/chart.model.ts @@ -0,0 +1,6 @@ +import { TimeStep } from 'enum/timeStep.enum' + +export interface ChartState { + previousTimeStep: TimeStep + maxLoads: Map<string, number | null> +} diff --git a/src/models/index.ts b/src/models/index.ts index 3cf6149eded356ff9fed9414f1db4797d9aa5543..d7b5a894f83efaedb7200f73e0320b4594fca5d2 100644 --- a/src/models/index.ts +++ b/src/models/index.ts @@ -1,5 +1,4 @@ export * from './account.model' -export * from './challenge.model' export * from './config.model' export * from './datachart.model' export * from './dataload.model' diff --git a/src/store/chart/chart.actions.ts b/src/store/chart/chart.actions.ts new file mode 100644 index 0000000000000000000000000000000000000000..8a2047311aa342dd9270f78883623d9447be4af8 --- /dev/null +++ b/src/store/chart/chart.actions.ts @@ -0,0 +1,32 @@ +import { TimeStep } from 'enum/timeStep.enum' + +export const SET_PREVIOUS_TIMESTEP = 'SET_PREVIOUS_TIMESTEP' +export const ADD_MAX_LOAD = 'ADD_MAX_LOAD' + +interface SetPreviousTimeStep { + type: typeof SET_PREVIOUS_TIMESTEP + payload?: TimeStep +} + +interface AddMaxLoad { + type: typeof ADD_MAX_LOAD + payload?: Map<string, number | null> +} + +export type ChartActionTypes = SetPreviousTimeStep | AddMaxLoad + +export function setPreviousTimeStep(timeStep: TimeStep): ChartActionTypes { + return { + type: SET_PREVIOUS_TIMESTEP, + payload: timeStep, + } +} + +export function addMaxLoad( + maxload: Map<string, number | null> +): ChartActionTypes { + return { + type: ADD_MAX_LOAD, + payload: maxload, + } +} diff --git a/src/store/chart/chart.reducer.ts b/src/store/chart/chart.reducer.ts new file mode 100644 index 0000000000000000000000000000000000000000..b5d1af5a7e8566310396bfcdc13c166c88aca8ef --- /dev/null +++ b/src/store/chart/chart.reducer.ts @@ -0,0 +1,37 @@ +import { Reducer } from 'redux' +import { + SET_PREVIOUS_TIMESTEP, + ADD_MAX_LOAD, + ChartActionTypes, +} from 'store/chart/chart.actions' +import { ChartState } from 'models/chart.model' +import { TimeStep } from 'enum/timeStep.enum' + +const initialState: ChartState = { + previousTimeStep: TimeStep.DAY, + maxLoads: new Map(), +} + +export const chartReducer: Reducer<ChartState> = ( + state = initialState, + action: ChartActionTypes +): ChartState => { + switch (action.type) { + case SET_PREVIOUS_TIMESTEP: + return action.payload != undefined + ? { + ...state, + previousTimeStep: action.payload, + } + : state + case ADD_MAX_LOAD: + return action.payload != undefined + ? { + ...state, + maxLoads: new Map([...state.maxLoads, ...action.payload]), + } + : state + default: + return state + } +} diff --git a/src/store/index.ts b/src/store/index.ts index cd5bb566ffe0d22a4b502040eee20f3c9171f8fc..3df4c7aa5e9b4f39342010a5ef79d1cd6a1cc037 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,18 +1,22 @@ import { combineReducers } from 'redux' import { globalReducer } from 'store/global/global.reducer' import { profileReducer } from './profile/profile.reducer' +import { chartReducer } from './chart/chart.reducer' import { modalReducer } from 'store/modal/modal.reducer' import { GlobalState, ModalState, Profile } from 'models' +import { ChartState } from 'models/chart.model' export interface EcolyoState { global: GlobalState profile: Profile + chart: ChartState modal: ModalState } export const ecolyoReducer = combineReducers({ global: globalReducer, profile: profileReducer, + chart: chartReducer, modal: modalReducer, }) diff --git a/src/store/profile/profile.reducer.ts b/src/store/profile/profile.reducer.ts index e0625cfd7444ca411f7554d640b2e68cb884027b..906b9c19dd3f7f72380016c2e57a0cc8198c6c87 100644 --- a/src/store/profile/profile.reducer.ts +++ b/src/store/profile/profile.reducer.ts @@ -11,8 +11,8 @@ const initialState: Profile = { id: '', challengeTypeHash: '', ecogestureHash: '', - isFirstConnection: true, - haveSeenFavoriteModal: false, + isFirstConnection: false, + haveSeenFavoriteModal: true, haveSeenOldFluidModal: true, haveSeenLastReport: true, sendReportNotification: false,