diff --git a/src/components/TotalConsumption/TotalConsumption.tsx b/src/components/TotalConsumption/TotalConsumption.tsx index 281b7acd175eaeed56f6a35750302500d450cda7..032b6a78c8abf542b0480657790b67bfe6bf510a 100644 --- a/src/components/TotalConsumption/TotalConsumption.tsx +++ b/src/components/TotalConsumption/TotalConsumption.tsx @@ -18,13 +18,13 @@ const TotalConsumption = ({ fluidType }: { fluidType: FluidType }) => { (state: AppStore) => state.ecolyo.chart ) const client = useClient() - const [totalValue, setTotalValue] = useState<string>() - const [previousTotalValue, setPreviousTotalValue] = useState<string>() + const [totalValue, setTotalValue] = useState<string>('-----') + const [previousTotalValue, setPreviousTotalValue] = useState<string>('-----') const computeTotal = useCallback( async ( dataload: Dataload[], - setState: React.Dispatch<React.SetStateAction<string | undefined>> + setState: React.Dispatch<React.SetStateAction<string>> ) => { const consumptionService = new ConsumptionService(client) const activateHalfHourLoad = @@ -74,9 +74,19 @@ const TotalConsumption = ({ fluidType }: { fluidType: FluidType }) => { ) useEffect(() => { - computeTotal(currentDatachart.actualData, setTotalValue) - if (currentDatachart.comparisonData) { - computeTotal(currentDatachart.comparisonData, setPreviousTotalValue) + let isMounted = true + const fetchTotal = async () => { + await computeTotal(currentDatachart.actualData, setTotalValue) + if (currentDatachart.comparisonData) { + await computeTotal( + currentDatachart.comparisonData, + setPreviousTotalValue + ) + } + } + isMounted && fetchTotal() + return () => { + isMounted = false } }, [currentDatachart, fluidType, currentTimeStep, client, computeTotal]) @@ -98,7 +108,6 @@ const TotalConsumption = ({ fluidType }: { fluidType: FluidType }) => { {showCompare && ( <div className="compare"> <span className="euro-value">{previousTotalValue}</span> - <span className="euro-symbol"> €</span> </div> )} </div>