From 33add3f7193d44e3f82bfbae750f338f499478f6 Mon Sep 17 00:00:00 2001
From: Hajar RAHMOUNI <hajar.rahmouni@etu.univ-lehavre.fr>
Date: Sat, 6 Jan 2024 19:55:11 +0000
Subject: [PATCH] async api calls

---
 pwa/app/page.jsx | 145 +++++++++++++++++++++++++----------------------
 1 file changed, 78 insertions(+), 67 deletions(-)

diff --git a/pwa/app/page.jsx b/pwa/app/page.jsx
index 0d7157b..accc5ca 100644
--- a/pwa/app/page.jsx
+++ b/pwa/app/page.jsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 
@@ -13,101 +13,112 @@ import DataForm from "./components/bar-chart/form";
 import BarChart from "./components/bar-chart/chart";
 import Timeseries from "./components/timeseries/timeseries.jsx";
 
-
 export default function Page() {
     const [donutValues, setDonutValues] = useState([]);
     const [chartData, setChartData] = useState([]);
     const [timeseries, setTimeseries] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
 
-    const [isLoadingBar, setIsLoadingBar] = useState(false);
-    const [isLoadingDonut, setIsLoadingDonut] = useState(false);
-    const [isLoadingTimeseries, setIsLoadingTimesseries] = useState(false);
 
     const handleFormSubmit = async (formData) => {
-        setIsLoadingBar(true);
-        const response = await FetchService.fetchBarChartData(formData);
-        if (!response.ok) {
-            throw new Error(`HTTP error! Status: ${response.status}`);
+        setIsLoading(true);
+        try {
+            const response = await FetchService.fetchBarChartData(formData);
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            const data = await response.json();
+            setChartData(data);
+        } catch (error) {
+            console.error('Error fetching bar chart data:', error);
+        } finally {
+            setIsLoading(false);
         }
-        const data = await response.json();
-        setChartData(data);
-        setIsLoadingBar(false);
     };
 
     const handleYearSubmit = async (year) => {
-        setIsLoadingDonut(true);
-        const response = await FetchService.getDonutContent(year);
-        if (!response.ok) {
-            throw new Error(`HTTP error! Status: ${response.status}`);
+        setIsLoading(true);
+        try {
+            const response = await FetchService.getDonutContent(year);
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            const data = await response.json();
+            setDonutValues(data);
+        } catch (error) {
+            console.error('Error fetching donut data:', error);
+        } finally {
+            setIsLoading(false);
         }
-        const data = await response.json();
-        setDonutValues(data);
-        setIsLoadingDonut(false);
-    }
+    };
 
-    useEffect(() => {
-        (async () => {
-            // bar chart
+    const fetchAllData = async () => {
+        setIsLoading(true);
+
+        try {
             const formData = {
                 startDate: `${constants.initialBarChartFormData.startDate}`,
                 endDate: `${constants.initialBarChartFormData.endDate}`,
                 granularity: `${constants.initialBarChartFormData.granularity}`
             };
-            await handleFormSubmit(formData);
-
-            // time series
-            try {
-                setIsLoadingTimesseries(true);
-                const response = await FetchService.getTimesSeries();
-                if (!response.ok) {
-                    throw new Error(`HTTP error! Status: ${response.status}`);
-                }
-                const data = await response.json();
-                setTimeseries(data);
-                setIsLoadingTimesseries(false);
-            } catch (error) {
-                console.error('Error fetching time series data:', error);
+
+            const [barResponse, timeResponse, donutResponse] = await Promise.all([
+                FetchService.fetchBarChartData(formData),
+                FetchService.getTimesSeries(),
+                FetchService.getDonutContent(2020)
+            ]);
+
+            if (!barResponse.ok || !timeResponse.ok || !donutResponse.ok) {
+                throw new Error("Erreur lors de la récupération des données");
             }
 
-            // donut
-            await handleYearSubmit(2020);
+            const barData = await barResponse.json();
+            const timeData = await timeResponse.json();
+            const donutData = await donutResponse.json();
+
+            setChartData(barData);
+            setTimeseries(timeData);
+            setDonutValues(donutData);
+        } catch (error) {
+            console.error('Error fetching data:', error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
 
-        })();
+    useEffect(() => {
+        fetchAllData();
     }, []);
 
     return (
         <>
             <div className="card-container">
-                <div className="card">
-                    <h3>L’évolution du prix de vente moyen du mètre carré </h3>
-                    {isLoadingTimeseries? (
-                        <FontAwesomeIcon className="spinner" icon={faSpinner} spin size="3x" />
-                    ): (
-                        <Timeseries data={timeseries} />
-                    )}
-                </div>
-                <div className="card">
-                    <h3>Nombre des ventes par période</h3>
-                    <DataForm onSubmit={handleFormSubmit}/>
-                    {isLoadingBar? (
-                        <FontAwesomeIcon className="spinner" icon={faSpinner} spin size="3x" />
-                    ) : (
-                        <BarChart data={chartData}/>
-                    )}
-                </div>
-                <div className="card donut-card">
-                    <h3>Répartition des ventes par régions</h3>
-                    <YearInput onDateChange={handleYearSubmit}/>
-                    {isLoadingDonut? (
+                {isLoading ? (
+                    <div className="loading-indicator">
                         <FontAwesomeIcon className="spinner" icon={faSpinner} spin size="3x" />
-                    ):(
-                        <div className="donut-container">
-                            <Donut data={donutValues} />
+                    </div>
+                ) : (
+                    <>
+                        <div className="card">
+                            <h3>L’évolution du prix de vente moyen du mètre carré</h3>
+                            <Timeseries data={timeseries} />
                         </div>
-                    )}
-                </div>
+                        <div className="card">
+                            <h3>Nombre des ventes par période</h3>
+                            <DataForm onSubmit={handleFormSubmit} />
+                            <BarChart data={chartData} />
+                        </div>
+                        <div className="card donut-card">
+                            <h3>Répartition des ventes par régions</h3>
+                            <YearInput onDateChange={handleYearSubmit} />
+                            <div className="donut-container">
+                                <Donut data={donutValues} />
+                            </div>
+                        </div>
+                    </>
+                )}
             </div>
         </>
     );
-}
 
+}
-- 
GitLab