hydrate eligibility overview

public/assets/data/requirement-profiles/requirement-profiles-hydration.json

@@ -0,0 +1,11 @@
+{
+  "https://foerderfunke.org/default#eauto": {
+    "title": "E-Auto"
+  },
+  "https://foerderfunke.org/default#kindergeld": {
+    "title": "Kindergeld"
+  },
+  "https://foerderfunke.org/default#kinderzuschlag": {
+    "title": "Kinderzuschlag"
+  }
+}

src/screens/eligibilty-overview/EligibilityOverviewScreen.js

@@ -4,15 +4,19 @@ import Layout from "../../components/Layout";
 import EligibilityOverviewList from "./components/EligibilityOverviewList";
 import { useValidationReportStore } from '../../storage/zustand';
 import {useFetchEligibilityReports} from "./hooks/useFetchEligibilityReports";
+import {useFetchHydrationData} from "./hooks/useFetchHydrationData";
 
 const EligibilityOverviewScreen = () => {
     const [eligibilityData, setEligibilityData] = useState();
     const validationReport = useValidationReportStore((state) => state.validationReport);
-    const fetchEligibilityReports = useFetchEligibilityReports({validationReport});
+    const hydrationData = useFetchHydrationData();
+    const fetchEligibilityReports = useFetchEligibilityReports({validationReport, hydrationData});
 
     useEffect(() => {
-        setEligibilityData(fetchEligibilityReports());
-    }, [fetchEligibilityReports]);
+        if (hydrationData) {
+            setEligibilityData(fetchEligibilityReports());
+        }
+    }, [fetchEligibilityReports, hydrationData]);
 
 
     return (

src/screens/eligibilty-overview/components/EligibilityOverviewList.js

@@ -25,7 +25,7 @@ const EligibilityOverviewList = ({items, eligble}) => {
                         <HStack justifyContent={'flex-start'}>
                             <Circle sx={{color: color}}/>
                             <Typography variant="body1" gutterBottom sx={styles.itemTitle}>
-                                {item}
+                                {item.title}
                             </Typography>
                         </HStack>
                         <Add/>

src/screens/eligibilty-overview/hooks/useFetchEligibilityReports.js

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { ValidationResult } from '@foerderfunke/matching-engine';
 
-export const useFetchEligibilityReports = ({ validationReport }) => {
+export const useFetchEligibilityReports = ({ validationReport, hydrationData }) => {
     return useCallback(() => {
         if (!validationReport || !('reports' in validationReport)) {
             return {
@@ -20,17 +20,18 @@ export const useFetchEligibilityReports = ({ validationReport }) => {
 
         for (let report of reports) {
             let { rpUri, result } = report;
+            const title = hydrationData[rpUri]?.title || 'Unknown Title';
             if (result === ValidationResult.ELIGIBLE) {
-                eligibilityData.eligible.push(rpUri);
+                eligibilityData.eligible.push({uri: rpUri, title: title});
             }
             if (result === ValidationResult.INELIGIBLE) {
-                eligibilityData.nonEligible.push(rpUri);
+                eligibilityData.nonEligible.push({uri: rpUri, title: title});
             }
             if (result === ValidationResult.UNDETERMINABLE) {
-                eligibilityData.missingData.push(rpUri);
+                eligibilityData.missingData.push({uri: rpUri, title: title});
             }
         }
 
         return eligibilityData;
-    }, [validationReport]);
+    }, [validationReport, hydrationData]);
 };

src/screens/eligibilty-overview/hooks/useFetchHydrationData.js

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+import readJson from '../../../utilities/readJson';
+
+export const useFetchHydrationData = () => {
+    const [hydrationData, setHydrationData] = useState(null);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const data = await readJson('assets/data/requirement-profiles/requirement-profiles-hydration.json');
+            setHydrationData(data);
+        };
+
+        fetchData();
+    }, []); // Empty dependency array ensures this runs only once
+
+    return hydrationData;
+};

src/services/validationService.js

@@ -17,7 +17,7 @@ export const runValidation = async (activeUser) => {
     const userProfileString = await convertUserProfileToTurtle(userProfile);
 
     // load validation config
-    const validationConfig = await readJson('assets/data/requirement-profiles.json');
+    const validationConfig = await readJson('assets/data/requirement-profiles/requirement-profiles.json');
 
     // validate user profile against datafields
     const datafieldsString = await fetchTurtleResource(validationConfig['datafields']);