Adding stats to home page

UNLV-CS472-672 · Apr 16, 2024 · 542970d · 542970d
1 parent 74ac243
commit 542970d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 28 deletions.
diff --git a/app/src/components/LifeQuestFormTriangle.js b/app/src/components/LifeQuestFormTriangle.js
@@ -1,36 +1,42 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
 import styles from "./LifeQuestFormTriangle.module.css";
 
 const LifeQuestFormTriangle = () => {
+  const [userData, setUserData] = useState({
+    MeStat: '',
+    WorkStat: '',
+    LoveStat: ''
+  });
+
+  useEffect(() => {
+    const fetchUserData = async () => {
+      try {
+        const response = await axios.get('http://localhost:9000/users/completedquiz@test.com');
+        const stats = response.data.stats;
+        setUserData({ MeStat: stats.MeStat, WorkStat: stats.WorkStat, LoveStat: stats.LoveStat });
+        console.log('User data fetched successfully:', response.data);
+        console.log('MeStat:', userData.MeStat);
+        console.log('WorkStat:', userData.WorkStat);
+        console.log('LoveStat:', userData.LoveStat);
+      } catch (error) {
+        console.error('Failed to fetch user data:', error);
+      }
+    };
+
+    fetchUserData();
+  }, []);
+
+
   return (
     <main className={styles.triangle} id="PageContent">
       <img className={styles.vectorIcon} alt="" src="/vector.svg" />
-      <textarea
-        className={styles.mestat}
-        placeholder="MeStat"
-        rows={1}
-        maxLength={4}
-        id="MeStat"
-        cols={1}
-      />
+      <div className={styles.mestat}>{userData.MeStat || "ME"}</div>
       <img className={styles.meicon} alt="" src="/meicon.svg" />
-      <textarea
-        className={styles.workstat}
-        placeholder="WorkStat"
-        rows={1}
-        maxLength={4}
-        id="WorkStat"
-        cols={1}
-      />
-      <img className={styles.workicon} alt="" src="/workicon.svg" />
-      <textarea
-        className={styles.lovestat}
-        placeholder="LoveStat"
-        rows={1}
-        maxLength={4}
-        id="LoveStat"
-        cols={1}
-      />
+      <div className={styles.lovestat}>{userData.LoveStat || "LOVE"}</div>
       <img className={styles.loveicon} alt="" src="/loveicon.svg" />
+      <div className={styles.workstat}>{userData.WorkStat || "WORK"}</div>
+      <img className={styles.workicon} alt="" src="/workicon.svg" />
     </main>
   );
 };

diff --git a/app/src/components/LifeQuestFormTriangle.module.css b/app/src/components/LifeQuestFormTriangle.module.css
@@ -24,16 +24,15 @@
   font-size: var(--font-size-13xl);
   outline: 0;
   top: 172px;
-  left: 120px;
+  left: 35%;
   color: var(--color-black);
 }
 .meicon {
   height: 15.9%;
   width: 21.01%;
   top: 0;
-  right: 42.45%;
   bottom: 84.1%;
-  left: 36.54%;
+  left: 36%;
   max-width: 100%;
   overflow: hidden;
   max-height: 100%;