Use Effect for pieChartcomponent

Regarding task #82 Co-authored-by: Sai Varun Varanasi <varun.sai.varanasi@fau.de>
amosproj · Jun 24, 2021 · c7b1f32 · c7b1f32
1 parent 5655a71
commit c7b1f32
Showing 1 changed file with 12 additions and 15 deletions.
diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx
@@ -17,24 +17,18 @@ const PieChartComponent = () => {
     const [series, setSeries] = useState([]);
     const [labels, setLabels] = useState([]);
 
-    useEffect(() => {
-        async function getValues() {
-            const values = await Array.from(getMaterialCompositionData());
-            setSeries(values);
+    const [isLoading, setLoading] = useState(true);
 
-            console.log(values);
-        }
-        getValues();
-        console.log('inside use effect');
-    }, []);
     useEffect(() => {
-        async function getLabels() {
-            const label = await Array.from(getMaterialCompositionLabels());
+        const fetchData = async () => {
+            const values = Array.from(getMaterialCompositionData());
+            setSeries(values);
+            const label = Array.from(getMaterialCompositionLabels());
             setLabels(label);
-            console.log(label);
-        }
-        getLabels();
-        console.log('inside use effect');
+
+            setLoading(false);
+        };
+        fetchData();
     }, []);
 
     console.log('after');
@@ -85,6 +79,9 @@ const PieChartComponent = () => {
             }
         ]
     };
+    if (isLoading) {
+        return <div> Loading ... </div>;
+    }
     return (
         <div className='ChartItems' id='chart'>
             <ReactApexChart options={options} series={series} type='donut' />