From e4b9d05ba19f1283e788075eed37f81b2d174fc5 Mon Sep 17 00:00:00 2001
From: wbglaeser <ben.glaeser@tuta.io>
Date: Fri, 14 Jun 2024 15:11:55 +0200
Subject: [PATCH] hook up validation reports into eligibility overview

---
 src/AppValidation.js                          |  1 -
 .../EligibilityOverviewScreen.js              | 27 ++++++++++++++++---
 .../components/EligibilityOverviewList.js     | 21 +++------------
 src/storage/zustand.js                        |  2 +-
 4 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/AppValidation.js b/src/AppValidation.js
index 7fa3b6cc..daffd135 100644
--- a/src/AppValidation.js
+++ b/src/AppValidation.js
@@ -5,7 +5,6 @@ import { runValidation } from "./services/validationService";
 const AppValidation = () => {
     const activeUserId = useUserStore((state) => state.activeUserId);
 
-
     // initialise session store
     useEffect(() => {
         const validate = async () => {
diff --git a/src/screens/eligibilty-overview/EligibilityOverviewScreen.js b/src/screens/eligibilty-overview/EligibilityOverviewScreen.js
index 5c86a976..4bb7c9bb 100644
--- a/src/screens/eligibilty-overview/EligibilityOverviewScreen.js
+++ b/src/screens/eligibilty-overview/EligibilityOverviewScreen.js
@@ -1,15 +1,34 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import EligibilityOverviewHeader from "./components/EligibilityOverviewHeader";
 import Layout from "../../components/Layout";
 import EligibilityOverviewList from "./components/EligibilityOverviewList";
+import { useValidationReportStore } from '../../storage/zustand';
+import {useFetchEligibilityReports} from "./hooks/useFetchEligibilityReports";
 
 const EligibilityOverviewScreen = () => {
+    const [eligibilityData, setEligibilityData] = useState();
+    const validationReport = useValidationReportStore((state) => state.validationReport);
+    const fetchEligibilityReports = useFetchEligibilityReports({validationReport});
+
+    useEffect(() => {
+        setEligibilityData(fetchEligibilityReports());
+    }, [fetchEligibilityReports]);
+
+
     return (
         <Layout>
             <EligibilityOverviewHeader/>
-            <EligibilityOverviewList eligble={'eligible'} />
-            <EligibilityOverviewList eligble={'non-eligible'} />
-            <EligibilityOverviewList eligble={'indeterminate'} />
+            {
+                eligibilityData ? (
+                    <>
+                        <EligibilityOverviewList items={eligibilityData.eligible} eligble={'eligible'} />
+                        <EligibilityOverviewList items={eligibilityData.nonEligible} eligble={'non-eligible'} />
+                        <EligibilityOverviewList items={eligibilityData.missingData} eligble={'indeterminate'} />
+                    </>
+                ) : null
+            }
+
+
         </Layout>
     );
 };
diff --git a/src/screens/eligibilty-overview/components/EligibilityOverviewList.js b/src/screens/eligibilty-overview/components/EligibilityOverviewList.js
index c1ce99ef..1247c25f 100644
--- a/src/screens/eligibilty-overview/components/EligibilityOverviewList.js
+++ b/src/screens/eligibilty-overview/components/EligibilityOverviewList.js
@@ -5,22 +5,7 @@ import HStack from "../../../components/HStack";
 import {green, red, grey} from "@mui/material/colors";
 import {Circle, Add} from "@mui/icons-material";
 
-const data = [
-    {
-        id: "Kindergeld",
-        title: 'Kindergeld',
-    },
-    {
-        id: "Elterngeld",
-        title: 'Elterngeld',
-    },
-    {
-        id: "Wohngeld",
-        title: 'Wohngeld',
-    }
-]
-
-const EligibilityOverviewList = ({eligble}) => {
+const EligibilityOverviewList = ({items, eligble}) => {
     const color = (eligble === 'eligible') ? green[500] : ((eligble === 'non-eligible') ? red[500] :
         grey[500]);
     const headerText = (eligble === 'eligible') ? 'Berechtigt für:' : ((eligble === 'non-eligible') ? 'Nicht berechtigt für:' :
@@ -35,12 +20,12 @@ const EligibilityOverviewList = ({eligble}) => {
                 </Typography>
             </HStack>
             <VStack gap={1} alignItems={'center'} sx={{width: '100%'}}>
-                {data.map((item, index) => (
+                {items.map((item, index) => (
                     <HStack key={index} justifyContent={'space-between'} sx={{width: '100%'}}>
                         <HStack justifyContent={'flex-start'}>
                             <Circle sx={{color: color}}/>
                             <Typography variant="body1" gutterBottom sx={styles.itemTitle}>
-                                {item.title}
+                                {item}
                             </Typography>
                         </HStack>
                         <Add/>
diff --git a/src/storage/zustand.js b/src/storage/zustand.js
index 8122b79c..162c17d3 100644
--- a/src/storage/zustand.js
+++ b/src/storage/zustand.js
@@ -55,7 +55,7 @@ export const useMetadataStore = create((set) => ({
 export const useValidationReportStore = create((set) => ({
     validationReport: {},
     updateValidationReport: (newValidationReport) => {
-        console.log('STATE UPDATE: We are updating the validation report');
+        console.log('STATE UPDATE: We are updating the validation report: ', newValidationReport);
         set((state) => ({ validationReport: newValidationReport }));
     },
 }));