From f26dd68bb59254166a845b95c4e5ffdb4fdb58b6 Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Mon, 22 Jul 2024 16:37:48 -0500 Subject: [PATCH 1/2] #293: prevent IRA page to load before data is ready --- CHANGELOG.md | 6 ++++ src/pages/IRAPage.tsx | 72 ++++++++++++++++++++----------------------- 2 files changed, 40 insertions(+), 38 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7d6365e..56a6fe0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). +## [unreleased] + +### Fixed +- Fixed the occasional bug where the IRA page failed to load because the summary data was not ready [#293](https://github.com/policy-design-lab/pdl-frontend/issues/293) + + ## [1.0.1] - 2024-07-19 ### Added diff --git a/src/pages/IRAPage.tsx b/src/pages/IRAPage.tsx index 3409750..2371af0 100644 --- a/src/pages/IRAPage.tsx +++ b/src/pages/IRAPage.tsx @@ -19,7 +19,7 @@ export default function IRAPage(): JSX.Element { // Fetching Data const [eqipStateDistributionData, setEqipStateDistributionData] = React.useState({}); - const [eqipPredictedData, setEqipPredictedDData] = React.useState({}); + const [eqipPredictedData, setEqipPredictedData] = React.useState({}); const [eqipSummaryData, setEqipSummaryData] = React.useState({}); const [eqipPracticeNames, setEqipPracticeNames] = React.useState({}); const [stateCodesData, setStateCodesData] = React.useState({}); @@ -27,42 +27,39 @@ export default function IRAPage(): JSX.Element { const [allStatesData, setAllStatesData] = React.useState([]); const [zeroCategories, setZeroCategories] = React.useState([]); const [totalAcep, setTotalAcep] = React.useState(0); - React.useEffect(() => { - const allstates_url = `${config.apiUrl}/states`; - getJsonDataFromUrl(allstates_url).then((response) => { - setAllStatesData(response); - }); - - const statecode_url = `${config.apiUrl}/statecodes`; - getJsonDataFromUrl(statecode_url).then((response) => { - setStateCodesArray(response); - const converted_json = convertAllState(response); - setStateCodesData(converted_json); - }); - - // eqip IRA data - const eqip_statedistribution_url = `${config.apiUrl}/titles/title-ii/programs/eqip-ira/state-distribution`; - getJsonDataFromUrl(eqip_statedistribution_url).then((response) => { - setEqipStateDistributionData(response); - }); - const eqip_predicted_url = `${config.apiUrl}/titles/title-ii/programs/eqip-ira/predicted`; - getJsonDataFromUrl(eqip_predicted_url).then((response) => { - setEqipPredictedDData(response); - }); - const eqip_summary_url = `${config.apiUrl}/titles/title-ii/programs/eqip-ira/summary`; - getJsonDataFromUrl(eqip_summary_url).then((response) => { - setEqipSummaryData(response); - }); - const eqip_practicenames_url = `${config.apiUrl}/titles/title-ii/programs/eqip-ira/practice-names`; - getJsonDataFromUrl(eqip_practicenames_url).then((response) => { - setEqipPracticeNames(response); - }); + const [isDataReady, setIsDataReady] = React.useState(false); - // csp IRA data - - // rccp IRA data - - // acep IRA data + React.useEffect(() => { + const fetchData = async () => { + try { + const [ + allStatesResponse, + stateCodesResponse, + eqipStateDistributionResponse, + eqipPredictedResponse, + eqipSummaryResponse, + eqipPracticeNamesResponse + ] = await Promise.all([ + getJsonDataFromUrl(`${config.apiUrl}/states`), + getJsonDataFromUrl(`${config.apiUrl}/statecodes`), + getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/eqip-ira/state-distribution`), + getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/eqip-ira/predicted`), + getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/eqip-ira/summary`), + getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/eqip-ira/practice-names`) + ]); + setAllStatesData(allStatesResponse); + setStateCodesArray(stateCodesResponse); + setStateCodesData(convertAllState(stateCodesResponse)); + setEqipStateDistributionData(eqipStateDistributionResponse); + setEqipPredictedData(eqipPredictedResponse); + setEqipSummaryData(eqipSummaryResponse); + setEqipPracticeNames(eqipPracticeNamesResponse); + setIsDataReady(true); + } catch (error) { + console.error("Error fetching data:", error); + } + }; + fetchData(); }, []); // Modal @@ -112,8 +109,7 @@ export default function IRAPage(): JSX.Element { {/* NOTE: Because of divider, the index are increased by 2 */} - {Object.keys(eqipStateDistributionData).length > 0 && - Object.keys(stateCodesData).length > 0 ? ( + {isDataReady ? ( Date: Tue, 23 Jul 2024 14:31:16 -0500 Subject: [PATCH 2/2] release 1.0.2 --- CHANGELOG.md | 3 ++- package-lock.json | 2 +- package.json | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 56a6fe0..f7f2053 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). -## [unreleased] +## [1.0.2] - 2024-07-23 ### Fixed - Fixed the occasional bug where the IRA page failed to load because the summary data was not ready [#293](https://github.com/policy-design-lab/pdl-frontend/issues/293) @@ -263,6 +263,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Map data json [#12](https://github.com/policy-design-lab/pdl-frontend/issues/12) - Final landing page changes for initial milestone [#15](https://github.com/policy-design-lab/pdl-frontend/issues/15) +[1.0.2]: https://github.com/policy-design-lab/pdl-frontend/compare/1.0.1...1.0.2 [1.0.1]: https://github.com/policy-design-lab/pdl-frontend/compare/1.0.0...1.0.1 [1.0.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.20.0...1.0.0 [0.20.0]: https://github.com/policy-design-lab/pdl-frontend/compare/0.19.0...0.20.0 diff --git a/package-lock.json b/package-lock.json index bd19a3b..93960c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "policy-design-lab", - "version": "1.0.1", + "version": "1.0.2", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/package.json b/package.json index 2148c66..4f95dae 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "policy-design-lab", - "version": "1.0.1", + "version": "1.0.2", "description": "the front end of policy design lab", "repository": "https://github.com/policy-design-lab/pdl-frontend", "main": "src/app.tsx",