Check if data is too old and konnector errored

src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx

@@ -13,9 +13,12 @@ import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorVi
 import OldFluidDataModal from 'components/ContentComponents/OldFluidDataModal/OldFluidDataModal'
 
 const HomeViewContainer: React.FC = () => {
-  const { fluidTypes, previousTimeStep, setPreviousTimeStep } = useContext(
-    AppContext
-  )
+  const {
+    fluidTypes,
+    fluidStatus,
+    previousTimeStep,
+    setPreviousTimeStep,
+  } = useContext(AppContext)
   const [timeStep, setTimeStep] = useState<TimeStep>(
     previousTimeStep && previousTimeStep !== TimeStep.HALF_AN_HOUR
       ? previousTimeStep
@@ -50,8 +53,16 @@ const HomeViewContainer: React.FC = () => {
     setHeaderHeight(height)
   }
   const checkFluidDataPeriod = () => {
-    const age = 10
-    age > 5 ? setopenOldFluidDataModal(true) : setopenOldFluidDataModal(false)
+    for (const fluid of fluidStatus) {
+      let diffInDays = 0
+      if (fluid && fluid.lastDataDate)
+        diffInDays = Math.round(
+          fluid.lastDataDate.diffNow('days').toObject().days
+        )
+
+      console.log(diffInDays)
+      if (diffInDays < -5) return setopenOldFluidDataModal(true)
+    }
   }
 
   const handleCloseClick = () => {
@@ -60,7 +71,7 @@ const HomeViewContainer: React.FC = () => {
 
   useEffect(() => {
     checkFluidDataPeriod()
-  }, [])
+  }, [fluidStatus])
 
   return (
     <React.Fragment>
@@ -106,10 +117,13 @@ const HomeViewContainer: React.FC = () => {
               <ChallengeCardContainer />
             </div>
           </Content>
-          <OldFluidDataModal
-            opened={openOldFluidDataModal}
-            handleCloseClick={handleCloseClick}
-          ></OldFluidDataModal>
+          {fluidStatus && (
+            <OldFluidDataModal
+              fluidStatus={fluidStatus}
+              opened={openOldFluidDataModal}
+              handleCloseClick={handleCloseClick}
+            ></OldFluidDataModal>
+          )}
         </>
       ) : (
         <>

src/components/ContentComponents/OldFluidDataModal/OldFluidDataModal.tsx

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { translate } from 'cozy-ui/react/I18n'
 import Modal from 'components/CommonKit/Modal/Modal'
 import WarnCross from 'assets/icons/ico/warn-cross.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import StyledButton from 'components/CommonKit/Button/StyledButton'
 import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
-import { Redirect, Router } from 'react-router-dom'
+import { Redirect } from 'react-router-dom'
+
+import { IFluidStatus } from 'services/fluidService'
+import { FluidType } from 'enum/fluid.enum'
 
 interface OldFluidDataModalProps {
   opened: boolean
   t: Function
+  fluidStatus: IFluidStatus[]
   handleCloseClick: () => void
   handleStartClick: () => void
 }
@@ -17,11 +21,24 @@ interface OldFluidDataModalProps {
 const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
   opened,
   t,
+  fluidStatus,
   handleCloseClick,
 }: OldFluidDataModalProps) => {
-  const [problem, setproblem] = useState(0)
+  const [konnectorError, setkonnectorError] = useState<boolean>(false)
+  const [erroredKonnectors, seterroredKonnectors] = useState<FluidType[]>([])
   const [redirect, setRedirect] = useState(false)
 
+  const checkFluidDataDate = () => {
+    fluidStatus &&
+      fluidStatus.length > 0 &&
+      fluidStatus.forEach(fluid => {
+        if (fluid.status === 'errored') {
+          erroredKonnectors.push(fluid.fluidType)
+        }
+      })
+    if (erroredKonnectors !== []) setkonnectorError(true)
+  }
+
   const redirectTrue = () => {
     handleCloseClick()
     setRedirect(true)
@@ -32,6 +49,12 @@ const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
     }
   }
 
+  useEffect(() => {
+    checkFluidDataDate()
+  }, [fluidStatus])
+
+  console.log('status', fluidStatus)
+  console.log('errored', erroredKonnectors)
   return (
     <>
       <Modal open={opened} handleCloseClick={handleCloseClick}>
@@ -41,12 +64,19 @@ const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
             <p>Aie ! </p>
           </div>
           <p className="od-main"> {t('modalData.oldData')}</p>
-          {problem == 0 ? (
+          {konnectorError ? (
             <div className="verifyState">
               <p>{t('modalData.verify')}</p>
               <ul className="od-konnectorsList">
-                <li>Electricité</li>
-                <li>Gaz</li>
+                {erroredKonnectors.map((err, index) => {
+                  return (
+                    <li key={index}>
+                      {err === 0 && t('modalData.elec')}
+                      {err === 1 && t('modalData.water')}
+                      {err === 2 && t('modalData.gas')}
+                    </li>
+                  )
+                })}
               </ul>
               <div className="buttons">
                 <StyledStopButton color="secondary" onClick={handleCloseClick}>

src/locales/fr.json

@@ -289,6 +289,9 @@
     "problem": "Vos connecteurs semblent bien connectés, il se peut qu’il y ait un problème au niveau de votre fournisseur de données (Enedis, GRDF, Eau du GrandLyon)",
     "contact": "Veuillez prendre contact directement avec eux.",
     "accessButton": "Accéder aux connecteurs",
-    "later": "Plus tard"
+    "later": "Plus tard",
+    "elec": "Electricité",
+    "water": "Eau",
+    "gas": "Gaz"
   }
 }