added api util functions

src/views/Match.vue

@@ -122,7 +122,8 @@ import {
   FormatFullDate,
   GetAvgRank,
   GoToLink,
-  LoadImage
+  LoadImage,
+  getMatchDetails
 } from "../utils";
 import {useStore} from "vuex";
 import {useRoute} from 'vue-router'
@@ -146,36 +147,31 @@ export default {
     })
 
     // Functions
-    const GetMatch = () => {
-      if (matchIdPattern.test(props.match_id))
-        axios
-            .get(`${process.env.VUE_APP_API_URL}/match/${props.match_id}`)
-            .then((response) => {
-              if (response.data.map)
-                document.title = `${FixMapName(response.data.map)} | csgoWTF`
-              else
-                document.title = `Match-Details | csgoWTF`
+    const GetMatch = async () => {
+      let res = {}
+      if (matchIdPattern.test(props.match_id)) {
+        res = await getMatchDetails(props.match_id)
 
-              store.commit({
-                type: 'changeMatchDetails',
-                data: response.data
-              })
+        if (res.map)
+          document.title = `${FixMapName(res.map)} | csgoWTF`
+        else
+          document.title = `Match-Details | csgoWTF`
 
-              data.matchDetails = store.state.matchDetails
-              data.stats = data.matchDetails.stats
-              data.score = data.matchDetails.score
+        store.commit({
+          type: 'changeMatchDetails',
+          data: res
+        })
 
-              LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random')
+        data.matchDetails = store.state.matchDetails
+        data.stats = data.matchDetails.stats
+        data.score = data.matchDetails.score
 
-              data.avgRank = GetAvgRank(data.stats)
+        LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random')
 
-              console.log(data.matchDetails)
-            })
-            .catch((e) => {
-              console.log(e)
-              // TODO: needs 404
-            })
-      else {
+        data.avgRank = GetAvgRank(data.stats)
+
+        console.log(data.matchDetails)
+      } else {
         console.log('Match not found')
         // TODO: needs 404
       }

src/views/Player.vue

@@ -222,10 +222,9 @@
               <li>Mate 2</li>
               <li>Mate 3</li>
               <li>Mate 4</li>
-              <li>Mate 5</li>
             </ul>
           </div>
-          <div class="side-info-box best-mate">
+          <div class="side-info-box most-played-with">
             <div class="heading">
               <h5>Most played with</h5>
             </div>
@@ -235,10 +234,9 @@
               <li>Player 2</li>
               <li>Player 3</li>
               <li>Player 4</li>
-              <li>Player 5</li>
             </ul>
           </div>
-          <div class="side-info-box best-mate">
+          <div class="side-info-box preferred-weapons">
             <div class="heading">
               <h5>Preferred Weapons</h5>
             </div>
@@ -248,7 +246,18 @@
               <li>Weapon 2</li>
               <li>Weapon 3</li>
               <li>Weapon 4</li>
-              <li>Weapon 5</li>
+            </ul>
+          </div>
+          <div class="side-info-box best-map">
+            <div class="heading">
+              <h5>Best Map</h5>
+            </div>
+            <hr>
+            <ul class="list-unstyled">
+              <li>Map 1</li>
+              <li>Map 2</li>
+              <li>Map 3</li>
+              <li>Map 4</li>
             </ul>
           </div>
         </div>
@@ -595,7 +604,10 @@ export default {
       border-radius: 5px;
     }
 
-    .best-mate {
+    .best-mate,
+    .preferred-weapons,
+    .most-played-with,
+    .best-map {
       .heading {
         display: flex;
         align-items: center;