implemented API call to populate some fields of profile header

17th Website/src/components/ProfilePage/profileHeader.vue

@@ -1,12 +1,54 @@
 <script>
+import QueryApolloGraphQL from '../../api/request';
 
 export default {
     name: 'profileHeader',
     data() {
         return {
-            count: 0
+            count: 0,
+            items: [],
+            user: '',
         }
     },
+    mounted() {
+        this.user = this.$route.params.name;
+        QueryApolloGraphQL("getPageViewMemberRankStatusAll", `query GetPageViewMemberRankStatusAll {
+            getPageViewMemberRankStatusAll(filter: "member_name = ${this.user}") {
+                items {
+                member_name
+                status
+                rank
+                }
+            }
+            }`).then(value => { this.items = value; });
+    },
+    computed: {
+        headerInfo() {
+            console.log(this.items)
+            return this.items[0];
+        },
+        memberName() {
+            try {
+                return this.items[0].member_name;
+            } catch (E) {
+                console.log("too slow")
+            }
+        },
+        memberRank() {
+            try {
+                return this.items[0].rank;
+            } catch (E) {
+                console.log("too slow")
+            }
+        },
+        memberStatus() {
+            try {
+                return this.items[0].status;
+            } catch (E) {
+                console.log("too slow")
+            }
+        },
+    }
 }
 </script>
 
@@ -17,15 +59,14 @@ export default {
             <img id="rangerTab" src="../icons/misc/test.png" class="xl:w-32 w-28" />
         </div>
         <div id="mainInfo">
-            <h1>Big Name</h1>
+            <h1>{{ memberName }}</h1>
-            <h2>Rank</h2>
+            <h2>{{ memberRank }}</h2>
-            <h2>Unit</h2>
+            <h2>{{ memberStatus }}</h2>
         </div>
     </div>
 </template>
 
 <style>
-
 #mainInfo h1 {
     margin: 20px 0 10px 0px;
 }

17th Website/src/components/ProfilePage/profileSubNav.vue

@@ -9,9 +9,6 @@ export default {
         RouterLink,
         Icon
     },
-    setup(props) {
-        console.log(props.link);
-    },
     computed: {
         currentRouteName() {
             return this.$route.name;