Merge branch '431-analysis-error' into 'dev'

fix(analysis): crash page with gaz only

See merge request !842

src/components/Analysis/AnalysisConsumption.tsx

@@ -47,7 +47,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
   const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)
   const [homePriceConsumption, setHomePriceConsumption] = useState<number>(0)
   const [forecast, setForecast] = useState<MonthlyForecast | null>(null)
-  const [isLoading, setisLoading] = useState<boolean>(true)
+  const [isLoading, setIsLoading] = useState<boolean>(true)
 
   const [activeAverageHome, setActiveAverageHome] = useState<boolean>(false)
   const toggleAccordion = () => {
@@ -75,7 +75,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
   const emptyFluidTypes: FluidType[] = []
 
   for (let i = 0; i < performanceIndicators.length; i++) {
-    if (!performanceIndicators[i]?.value) {
+    if (!performanceIndicators[i]?.value && fluidTypes[i]) {
       emptyFluidTypes.push(fluidTypes[i])
     }
   }
@@ -102,7 +102,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
 
   useEffect(() => {
     let subscribed = true
-    async function loadAverageComsumption() {
+    async function loadAverageConsumption() {
       const profileTypeEntityService = new ProfileTypeEntityService(client)
       const profileType: ProfileType | null =
         await profileTypeEntityService.getProfileType(
@@ -123,11 +123,11 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
           if (monthlyForecast) {
             getTotalValueWithConnectedFluids(monthlyForecast)
           }
-          setisLoading(false)
+          setIsLoading(false)
         }
       }
     }
-    loadAverageComsumption()
+    loadAverageConsumption()
     return () => {
       subscribed = false
     }
@@ -163,35 +163,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
     </div>
   )
 
-  return (
-    <>
-      <div className="status-header">
-        <div>
-          <StyledIcon icon={AnalysisIcon} size={44} />
-          <p className="text-16-normal">{t('analysis.compare.title')}</p>
-        </div>
-        {profile.isProfileTypeCompleted && (
-          <Button
-            aria-label={t('analysis.accessibility.button_go_to_profil')}
-            onClick={goToForm}
-            classes={{
-              root: 'btn-secondary-negative',
-              label: 'text-16-normal',
-            }}
-          >
-            <StyledIcon icon={ProfileEditIcon} size={40} />
-          </Button>
-        )}
-      </div>
-
-      <div className="analysis-graph">
-        {!profile.isProfileTypeCompleted ? (
-          profileNotCompleted()
-        ) : isLoading ? (
-          <div className="loader-container">
-            <Loader color="elec" />
-          </div>
-        ) : (
+  const Consumption = (
     <>
       <div className="consumption-title text-20-bold">
         <div className="user-title">{t('analysis.user_consumption')}</div>
@@ -261,11 +233,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
             'profile_type.accessibility.button_toggle_average_home'
           )}
           expandIcon={
-                  <Icon
-                    icon={chevronDown}
-                    size={16}
-                    className="accordion-icon"
-                  />
+            <Icon icon={chevronDown} size={16} className="accordion-icon" />
           }
           classes={{
             root: 'expansion-panel-summary',
@@ -287,6 +255,37 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
         </AccordionDetails>
       </Accordion>
     </>
+  )
+
+  return (
+    <>
+      <div className="status-header">
+        <div>
+          <StyledIcon icon={AnalysisIcon} size={44} />
+          <p className="text-16-normal">{t('analysis.compare.title')}</p>
+        </div>
+        {profile.isProfileTypeCompleted && (
+          <Button
+            aria-label={t('analysis.accessibility.button_go_to_profil')}
+            onClick={goToForm}
+            classes={{
+              root: 'btn-secondary-negative',
+              label: 'text-16-normal',
+            }}
+          >
+            <StyledIcon icon={ProfileEditIcon} size={40} />
+          </Button>
+        )}
+      </div>
+
+      <div className="analysis-graph">
+        {!profile.isProfileTypeCompleted && profileNotCompleted()}
+        {profile.isProfileTypeCompleted && isLoading ? (
+          <div className="loader-container">
+            <Loader color="elec" />
+          </div>
+        ) : (
+          Consumption
         )}
       </div>
     </>