Prevent callback hell in usePopup by using await

Theodo-UK · Jul 6, 2023 · 961dfa4 · 961dfa4
1 parent 7b20da3
commit 961dfa4
Showing 1 changed file with 11 additions and 7 deletions.
diff --git a/src/usePopup.ts b/src/usePopup.ts
@@ -188,21 +188,25 @@ export const usePopup = () => {
     }, [selectedCountries, averageSpecificEmissions, calculationsRepository]);
 
     useMountEffect(() => {
-        selectedCountriesRepository
-            .getSelectedCountriesAndPercentages()
-            .then((newMap) => {
-                setSelectedCountries(newMap);
-            });
+        const getSelectedCountriesAndSetState = async () => {
+            const newMap =
+                await selectedCountriesRepository.getSelectedCountriesAndPercentages();
+            setSelectedCountries(newMap);
+        };
+        getSelectedCountriesAndSetState();
     });
 
     useMountEffect(() => {
-        calculationsRepository.getLastCalculation().then((calculationData) => {
+        const getLastCalculationAndSetState = async () => {
+            const calculationData =
+                await calculationsRepository.getLastCalculation();
             settotalBytesTransferred(calculationData?.bytes ?? 0);
             setEmissions(calculationData?.emissions ?? 0);
             setAverageSpecificEmissions(
                 calculationData?.specificEmissions ?? 0
             );
-        });
+        };
+        getLastCalculationAndSetState();
     });
 
     return {