feat: lead user to the right date & timestep

src/components/Analysis/MonthlyAnalysis.tsx

@@ -155,6 +155,7 @@ const MonthlyAnalysis: React.FC = () => {
                       performanceIndicator={
                         performanceIndicators[fluid.fluidTypeId]
                       }
+                      date={analysisDate.minus({ month: 1 }).startOf('month')}
                     />
                   ) : null
                 })}

src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx

-import React from 'react'
-import { NavLink } from 'react-router-dom'
+import React, { useCallback } from 'react'
+import './fluidPerformanceIndicator.scss'
+import { useHistory } from 'react-router-dom'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useDispatch } from 'react-redux'
+import { DateTime } from 'luxon'
 
 import { FluidType } from 'enum/fluid.enum'
 import { PerformanceIndicator } from 'models'
@@ -11,17 +14,23 @@ import StyledCard from 'components/CommonKit/Card/StyledCard'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import BlackArrowIcon from 'assets/icons/ico/black-arrow.svg'
 import ConverterService from 'services/converter.service'
-import './fluidPerformanceIndicator.scss'
+import { setCurrentTimeStep, setSelectedDate } from 'store/chart/chart.actions'
+import { TimeStep } from 'enum/timeStep.enum'
+
 interface FluidPerformanceIndicatorProps {
   performanceIndicator: PerformanceIndicator
   fluidType: FluidType
+  date: DateTime
 }
 
 const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
   performanceIndicator,
   fluidType,
+  date,
 }: FluidPerformanceIndicatorProps) => {
   const { t } = useI18n()
+  const history = useHistory()
+  const dispatch = useDispatch()
   const iconType = getPicto(fluidType)
   const converterService = new ConverterService()
 
@@ -30,54 +39,56 @@ const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
     displayedValue = formatNumberValues(performanceIndicator.value).toString()
   else displayedValue = '-----'
 
-  return (
-    <NavLink
-      tabIndex={-1}
-      className="fpi-link"
-      to={`/consumption/${t(
+  const handleClick = useCallback(() => {
+    dispatch(setCurrentTimeStep(TimeStep.DAY))
+    dispatch(setSelectedDate(date))
+    history.push(
+      `/consumption/${t(
         'FLUID.' + FluidType[fluidType] + '.NAME'
-      ).toLowerCase()}`}
-    >
-      <StyledCard fluidType={fluidType}>
-        <div className="fpi">
-          <div className="fpi-left">
-            <div className="fpi-title card-title-on">
-              {t('FLUID.' + FluidType[fluidType] + '.LABEL')}
-            </div>
-            <div className="fpi-content">
-              <StyledIcon
-                className="fpi-content-icon"
-                icon={iconType}
-                size={50}
-              />
-              <div className="fpi-content-perf">
-                <div className="fpi-content-perf-result card-result">
-                  <span>{displayedValue}</span>
-                  <span className="card-indicator">
-                    {t('FLUID.' + FluidType[fluidType] + '.UNIT')}
-                  </span>
-                  <span
-                    className={`${FluidType[fluidType] + '-color euro-value'}`}
-                  >
-                    {performanceIndicator &&
-                      performanceIndicator.value &&
-                      `${formatNumberValues(
-                        converterService.LoadToEuro(
-                          performanceIndicator.value,
-                          fluidType
-                        )
-                      )} €`}
-                  </span>
-                </div>
+      ).toLowerCase()}`
+    )
+  }, [t, dispatch, history, date, fluidType])
+
+  return (
+    <StyledCard onClick={handleClick} fluidType={fluidType}>
+      <div className="fpi">
+        <div className="fpi-left">
+          <div className="fpi-title card-title-on">
+            {t('FLUID.' + FluidType[fluidType] + '.LABEL')}
+          </div>
+          <div className="fpi-content">
+            <StyledIcon
+              className="fpi-content-icon"
+              icon={iconType}
+              size={50}
+            />
+            <div className="fpi-content-perf">
+              <div className="fpi-content-perf-result card-result">
+                <span>{displayedValue}</span>
+                <span className="card-indicator">
+                  {t('FLUID.' + FluidType[fluidType] + '.UNIT')}
+                </span>
+                <span
+                  className={`${FluidType[fluidType] + '-color euro-value'}`}
+                >
+                  {performanceIndicator &&
+                    performanceIndicator.value &&
+                    `${formatNumberValues(
+                      converterService.LoadToEuro(
+                        performanceIndicator.value,
+                        fluidType
+                      )
+                    )} €`}
+                </span>
               </div>
             </div>
           </div>
-          <div className="fpi-right">
-            <StyledIcon icon={BlackArrowIcon} size={18} />
-          </div>
         </div>
-      </StyledCard>
-    </NavLink>
+        <div className="fpi-right">
+          <StyledIcon icon={BlackArrowIcon} size={18} />
+        </div>
+      </div>
+    </StyledCard>
   )
 }