move validation resource fetcher outside of useEffect

Citizen-Knowledge-Graph · Dec 17, 2024 · 54c34a0 · 54c34a0
1 parent d97593a
commit 54c34a0
Showing 1 changed file with 9 additions and 10 deletions.
diff --git a/src/ui/screens/benefit-page/components/BenefitPageRules.js b/src/ui/screens/benefit-page/components/BenefitPageRules.js
@@ -9,38 +9,37 @@ import VStack from "../../../shared-components/VStack";
 import BenefitPageRuleEntry from "./BenefitPageRuleEntry";
 import Divider from "@mui/material/Divider";
 import useTranslation from "../../../language/useTranslation";
+import useFetchData from "../../../shared-hooks/useFetchData";
+
 
 const BenefitPageRules = ({benefitId}) => {
-    const { t } = useTranslation();
-    const [loaded, setLoaded] = useState(false);
+    const {t} = useTranslation();
     const [rulesData, setRulesData] = useState({});
     const [benefitReport, setBenefitReport] = useState({});
 
     const metadata = useMetadataStore((state) => state.metadata);
     const validationReport = useValidationReportStore((state) => state.validationReport);
     const activeUser = useUserStore((state) => state.activeUserId);
     const userProfile = userManager.retrieveUserData(activeUser);
+    const validationConfig = useFetchData('assets/data/requirement-profiles/requirement-profiles.json');
 
     useEffect(() => {
-        if (loaded) return;
         let rpUri = benefitId.startsWith("ff:") ? "https://foerderfunke.org/default#" + benefitId.split(":")[1] : benefitId;
         const fetchRulesData = async () => {
-            const validationConfig = await resourceService.fetchResource('assets/data/requirement-profiles/requirement-profiles.json');
             let query = validationConfig['queries'].find(query => query['rpUri'] === rpUri);
             let rpTurtleStr = await resourceService.fetchResource(query.fileUrl);
             let rules = await transformRulesFromRequirementProfile(rpTurtleStr);
             setRulesData(rules);
             setBenefitReport(validationReport.reports.find(report => report.rpUri === rpUri));
-            setLoaded(true);
         };
         fetchRulesData();
-    }, [benefitId, rulesData, metadata, loaded, validationReport]);
+    }, [benefitId, rulesData, metadata, validationReport, validationConfig]);
 
     const rules = buildRulesOutput(rulesData, metadata, benefitReport, userProfile, t)
 
     return (
         <>
-            {loaded && (
+            {
                 <VStack sx={{width: '100%'}}>
                     <Typography sx={styles.sectionTitle}>
                         {t('app.benefitPage.rulesTable.header')}
@@ -55,14 +54,14 @@ const BenefitPageRules = ({benefitId}) => {
                             rules &&
                             rules.map((rule, index) => (
                                 <VStack gap={1} key={index}>
-                                    <BenefitPageRuleEntry ruleData={rule} />
-                                    {index < rules.length - 1 && <Divider />}
+                                    <BenefitPageRuleEntry ruleData={rule}/>
+                                    {index < rules.length - 1 && <Divider/>}
                                 </VStack>
                             ))
                         }
                     </VStack>
                 </VStack>
-            )}
+            }
         </>
     );
 }