Merge branch '23-navigation-interfluide' into 'dev'

Resolve "Navigation interfluide"

Closes #23

See merge request web-et-numerique/llle_project/ecolyo!44

src/components/ContainerComponents/Header/Header.tsx

@@ -74,7 +74,7 @@ const Header: React.FC<HeaderProps> = ({
             >
               {displayBackArrow && (
                 <StyledIconButton
-                  className="cv-button"
+                  className="header-back-button"
                   icon={BackArrowIcon}
                   onClick={() => handleClickBack()}
                 />

src/components/ContainerComponents/IndicatorsContainer/SingleFluidIndicatorsContainer.tsx

@@ -108,7 +108,10 @@ const SingleFluidIndicatorsContainer: React.FC<SingleFluidIndicatorsContainerPro
                   {t('COMMON.MINI_CARDS_LABEL')}
                 </div>
                 <div className="sfi-redirect">
-                  <RedirectionMiniCard fluidTypes={filteredFluidTypes} />
+                  <RedirectionMiniCard
+                    fluidTypes={filteredFluidTypes}
+                    timeStep={timeStep}
+                  />
                 </div>
               </>
             )}

src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx

@@ -12,9 +12,13 @@ import ChallengeCardContainer from 'components/ContainerComponents/ChallengeCard
 import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer'
 
 const HomeViewContainer: React.FC = () => {
-  const [timeStep, setTimeStep] = useState<TimeStep>(20)
+  const { fluidTypes, previousTimeStep, setPreviousTimeStep } = useContext(
+    AppContext
+  )
+  const [timeStep, setTimeStep] = useState<TimeStep>(
+    previousTimeStep ? previousTimeStep : 20
+  )
   const [resetRefenceDate, setResetReferenceDate] = useState<boolean>(false)
-  const { fluidTypes } = useContext(AppContext)
   const [headerHeight, setHeaderHeight] = useState<number>(0)
   const [isChartLoading, setChartLoading] = useState<boolean>(true)
   const [isIndicatorsLoading, setIndicatorsLoading] = useState<boolean>(true)
@@ -30,6 +34,7 @@ const HomeViewContainer: React.FC = () => {
   const handleClickTimeStepForNavigation = (_timeStep: TimeStep) => {
     setResetReferenceDate(true)
     setTimeStep(_timeStep)
+    setPreviousTimeStep(_timeStep)
   }
 
   const handleClickTimeStepForFluidContainer = (_timeStep: TimeStep) => {

src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx

-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
 import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
 import Header from 'components/ContainerComponents/Header/Header'
@@ -8,6 +8,7 @@ import { FluidType } from 'enum/fluid.enum'
 import { TimeStep } from 'services/dataConsumptionContracts'
 import ConsumptionNavigator from 'components/ContentComponents/ConsumptionNavigator/ConsumptionNavigator'
 import SingleFluidIndicatorsContainer from 'components/ContainerComponents/IndicatorsContainer/SingleFluidIndicatorsContainer'
+import { AppContext } from 'components/Contexts/AppContextProvider'
 
 interface SingleFluidViewContainerProps {
   fluidTypes: FluidType[]
@@ -15,7 +16,11 @@ interface SingleFluidViewContainerProps {
 const SingleFluidViewContainer: React.FC<SingleFluidViewContainerProps> = ({
   fluidTypes,
 }: SingleFluidViewContainerProps) => {
-  const [timeStep, setTimeStep] = useState<TimeStep>(20)
+  const { setPreviousTimeStep, previousTimeStep } = useContext(AppContext)
+
+  const [timeStep, setTimeStep] = useState<TimeStep | null>(
+    previousTimeStep ? previousTimeStep : 20
+  )
   const [resetRefenceDate, setResetReferenceDate] = useState<boolean>(false)
   const [headerHeight, setHeaderHeight] = useState<number>(0)
 
@@ -33,6 +38,7 @@ const SingleFluidViewContainer: React.FC<SingleFluidViewContainerProps> = ({
   const handleClickTimeStepForNavigation = (_timeStep: TimeStep) => {
     setResetReferenceDate(true)
     setTimeStep(_timeStep)
+    setPreviousTimeStep(_timeStep)
   }
 
   const handleClickTimeStepForFluidContainer = (_timeStep: TimeStep) => {

src/components/ContentComponents/Card/RedirectionMiniCard.tsx

@@ -6,15 +6,18 @@ import { getPicto, getCardColor } from 'utils/utils'
 import { ProcessedData } from 'services/fluidService'
 import StyledIconCard from 'components/CommonKit/Card/StyledIconCard'
 import { NavLink } from 'react-router-dom'
+import { TimeStep } from 'services/dataConsumptionContracts'
 
 export interface RedirectionMiniCard {
   fluidTypes: FluidType[]
   t: Function
+  timeStep: TimeStep
 }
 
 const RedirectionMiniCard: React.FC<RedirectionMiniCard> = ({
   fluidTypes,
   t,
+  timeStep,
 }: RedirectionMiniCard) => {
   return (
     <>

src/components/Contexts/AppContextProvider.tsx

@@ -6,6 +6,7 @@ import { ScreenType } from 'enum/screen.enum'
 import InitDataManager from 'services/initDataManagerService'
 import UserProfileDataManager from 'services/userProfileDataManagerService'
 import { UserChallenge, UserProfile } from 'services/dataChallengeContracts'
+import { TimeStep } from 'services/dataConsumptionContracts'
 
 interface AppContextProps {
   isIndexesLoading: boolean
@@ -24,6 +25,8 @@ interface AppContextProps {
   isContextLoaded: boolean
   isError: boolean
   screenType: ScreenType
+  previousTimeStep: TimeStep
+  setPreviousTimeStep: Function
   userProfile: UserProfile | null
   setWelcomeModalViewed: Function
 }
@@ -45,7 +48,9 @@ export const AppContext = React.createContext<AppContextProps>({
   isContextLoaded: false,
   isError: false,
   screenType: ScreenType.MOBILE,
+  previousTimeStep: TimeStep.DAY,
   userProfile: null,
+  setPreviousTimeStep: () => null,
   setWelcomeModalViewed: () => null,
 })
 
@@ -94,6 +99,9 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({
   const [isContextLoaded, setContextLoaded] = useState<boolean>(false)
   const [isError, setError] = useState<boolean>(false)
   const [screenType, setScreenType] = useState<ScreenType>(ScreenType.MOBILE)
+  const [previousTimeStep, setPreviousTimeStep] = useState<TimeStep>(
+    TimeStep.DAY
+  )
 
   const [isUserProfileLoadingSuccess, setUserProfileLoadingSuccess] = useState<
     boolean | null
@@ -306,6 +314,8 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({
         isError,
         screenType,
         userProfile,
+        previousTimeStep,
+        setPreviousTimeStep,
         setWelcomeModalViewed,
       }}
     >

src/styles/base/_layout.scss

@@ -80,6 +80,9 @@ body {
       padding: 2rem 1.25rem;
       color: $text-bright;
     }
+    .header-back-button {
+      padding: 0 0.75rem;
+    }
     @media #{$tablet} {
       margin: 0;
     }