Made use of axois, fixed loading so it isnt jank and actually works.

mustafa-tariqk · Mar 29, 2024 · bac9273 · bac9273
1 parent e9e0c80
commit bac9273
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 52 deletions.
diff --git a/client/package.json b/client/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^1.6.8",
     "chart.js": "^4.4.2",
     "dotenv": "^16.4.5",
     "file-loader": "^6.2.0",

diff --git a/client/src/pages/Complete.jsx b/client/src/pages/Complete.jsx
@@ -8,6 +8,7 @@ Chart.register(Tooltip);
 Chart.register(Legend);
 import { useState, useEffect } from 'react';
 import simScale from "../img/simScale.png";
+import axios from 'axios'
 
 const SERVER_URL = process.env.SERVER_URL;
 
@@ -53,66 +54,93 @@ const Complete = ({chatId}) => {
     const [experienceClassData, setExperienceClassData] = useState([]);
     const [wordCloudData, setWordCloudData] = useState([]);
     const [emotionalExperienceData, setEmotionalExperienceData] = useState([]);
+    const [isToggled, setIsToggled] = useState(false);
+    const [isInfo, setIsInfo] = useState(false);
+    const [isWords, setIsWords] = useState(false);
 
     useEffect(() => {
-        // handle submission. required for some later calls
-        fetch(SERVER_URL+'/api/submit', {
-            method: 'POST',
-            timeout: 0,
-            mode: 'cors',
-            credentials: 'include',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({chatId})
-            // body: JSON.stringify({chatId, test: true})
-        })
-        .then(response => response.json())
-        .then(data => {
-            setExperienceClassData(data)
-        });
-    }, [chatId]);
+        const fetchData = async () => {
+          try {
+            const response = await axios.post(
+              SERVER_URL + '/api/submit',
+              { chatId /*, test: true */ },
+              {
+                timeout: 0,
+                mode: 'cors',
+                credentials: true,
+                headers: {
+                  'Content-Type': 'application/json'
+                }
+              }
+            );
+            setExperienceClassData(response.data);
+            setIsInfo(true);
+          } catch (error) {
+            console.error('Error:', error.message);
+          }
+        };
+
+        fetchData();
+      }, [chatId]);
 
     //Use Effect calls the data from the server when the chatID is updated/passed. (On load)
     useEffect(() => {
         if (experienceClassData.length == 0) { return; }
         // Only happens once submit has been completed
         // wordCloud data
-        fetch(SERVER_URL + "/api/analytics/get_frequent_words?" + new URLSearchParams({
-            chat_id: chatId,
-            k: 25,
-        }), {
-            method: 'GET',
-            timeout: 0,
-            mode: 'cors',
-            credentials: 'include',
-            headers: {
-                'Content-Type': 'application/json'
+        const fetchData2 = async () => {
+            try {
+                const response = await axios.get(
+                SERVER_URL + '/api/analytics/get_frequent_words',
+                {
+                    params: {
+                    chat_id: chatId,
+                    k: 25,
+                    // test: true,
+                    },
+                    timeout: 0,
+                    mode: 'cors',
+                    credentials: true,
+                    headers: {
+                    'Content-Type': 'application/json'
+                    }
+                }
+                );
+                setWordCloudData(response.data);
+                setIsWords(true);
+            } catch (error) {
+                console.error('Error:', error.message);
             }
-        })
-        .then(response => response.json())
-        .then(data => {
-            setWordCloudData(data)
-        });
+        };
+        fetchData2();
         // experience Data
-        fetch(SERVER_URL + "/api/analytics/experience?" + new URLSearchParams({
-            //test: true,
-            chat_id: chatId,
-            k: 3,
-        }), {
-            method: 'GET',
-            timeout: 0,
-            mode: 'cors',
-            credentials: 'include',
-            headers: {
-                'Content-Type': 'application/json'
+        const fetchData3 = async () => {
+            try {
+              const response = await axios.get(
+                `${SERVER_URL}/api/analytics/experience`,
+                {
+                  params: {
+                    chat_id: chatId,
+                    k: 3,
+                    // test: true,
+                  },
+                  timeout: 0,
+                  mode: 'cors',
+                  credentials: true,
+                  headers: {
+                    'Content-Type': 'application/json'
+                  }
+                }
+              );
+              setEmotionalExperienceData(response.data);
+              setIsToggled(true);
+            } catch (error) {
+              console.error('Error:', error.message);
             }
-        })
-        .then(response => response.json())
-        .then(data => {
-            setEmotionalExperienceData(data)
-        });
-    }, [experienceClassData])
+          };
+
+          fetchData3();
+    }, [experienceClassData]);
 
 
     /*
@@ -297,6 +325,20 @@ const Complete = ({chatId}) => {
     Chart.overrides["doughnut"].plugins.legend.display = false;
     Chart.overrides["pie"].plugins.legend.display = false;
 
+    /*
+    Name: TextComponent
+    Functionality: while loading, show loading, when done show nothing
+    Intake: takes in a boolean isToggled
+    Returns: --
+    */
+   const TextComponent = ({ isToggled }) => {
+    return (
+        <p>
+          {isToggled ? '             ' : 'LOADING...'}
+        </p>
+      );
+   }
+
     //Final return statement
     return (
         <div className='bg'>
@@ -307,6 +349,7 @@ const Complete = ({chatId}) => {
                     <div className='subtitle'>Below are your results</div>
                     <div className='graphs'>
                         <div className='wordCloud'>
+                            <TextComponent isToggled={isWords} />
                             <WordCloud
                             className="wordCloud"
                             data={transformWordData()}
@@ -322,18 +365,17 @@ const Complete = ({chatId}) => {
                             random={Math.random}
                             />
                         </div>
-                        <div className='loadingtext'>
-                            LOADING
-                        </div>
                         <div className='similarity'>
                             <div className='pieChartInfo'>See similarity range below!</div>
                             <img src={simScale}></img>
                             <div className='pieChartStyle'>
+                                <TextComponent isToggled={isToggled} />
                                 <PieChart data={createPieChartData()}/>
                             </div>
                         </div>
                         <div className='experience'>
                             {/* First Grid is for Dosage Information*/}
+                            <TextComponent isToggled={isInfo} />
                             <GridList items={createClassificationData()}/>
                         </div>
                     </div>

diff --git a/client/src/style.scss b/client/src/style.scss
@@ -229,6 +229,13 @@
             display: flex;
             flex-direction: row;
             .wordCloud {
+
+                .textcomponent {
+                    display: flex;
+                    justify-content: center; /* Center horizontally */
+                    align-items: center; /* Center vertically */
+                }
+
                 flex: 1;
                 margin-top: 5%;
                 z-index: 1;
@@ -241,9 +248,17 @@
                 font-weight: bolder;
                 font-size: 20;
                 z-index: 0;
+                transform: translate('translate(-100%, -100%)')
             }
 
             .similarity {
+
+                .textcomponent {
+                    display: flex;
+                    justify-content: center; /* Center horizontally */
+                    align-items: center; /* Center vertically */
+                }
+
                 flex: 1;
                 max-width: 33%;
                 z-index: 1;
@@ -284,6 +299,12 @@
                 flex: 1;
                 margin-top: 10%;
 
+                .textcomponent {
+                    display: flex;
+                    justify-content: center; /* Center horizontally */
+                    align-items: center; /* Center vertically */
+                }
+
                 .grid-item {
                     display: flex;
                     justify-content: center;