hook up validation reports into eligibility overview

Citizen-Knowledge-Graph · Jun 14, 2024 · e4b9d05 · e4b9d05
1 parent 1e11965
commit e4b9d05
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 }));
     },
 }));