added api util functions

src/utils/ApiRequests.js

@@ -15,14 +15,14 @@ export const GetUser = async (id) => {
   }
 }
 
-export const TrackMe = async (id64, authcode, sharecode) => {
+export const TrackMe = async (id64, authcode, sharecode = '') => {
   let statusError = ''
   let status = 202
 
   const shareCodeRegex = /^CSGO(?:-?[ABCDEFGHJKLMNOPQRSTUVWXYZabcdefhijkmnopqrstuvwxyz23456789]{5}){5}$/
   const authCodeRegex = /^[ABCDEFGHJKLMNOPQRSTUVWXYZ23456789]{4}-[ABCDEFGHJKLMNOPQRSTUVWXYZ23456789]{5}-[ABCDEFGHJKLMNOPQRSTUVWXYZ23456789]{4}$/
 
-  if (sharecode && !shareCodeRegex.test(sharecode)) {
+  if (sharecode !== '' && !shareCodeRegex.test(sharecode)) {
     statusError = 'Is not a valid sharecode'
     status = 418
     return [status, statusError]
@@ -67,9 +67,35 @@ export const getPlayerValue = async (match_id) => {
   }
 }
 
-export const loadMoreMatches = async (player_id, date) => {
+export const getMatchDetails = async (match_id) => {
   try {
-    const res = await axios.get(`${API_URL}/player/${player_id}/after/${date}`)
+    const res = await axios.get(`${API_URL}/match/${match_id}`)
+
+    if (res.status === 200) {
+      return res.data
+    }
+  } catch (err) {
+  //  TODO: 400, 404
+    console.log(err.response.status, err.response.statusText)
+  }
+}
+
+export const loadMoreMatches = async (player_id, date) => {
+  try {
+    const res = await axios.get(`${API_URL}/player/${player_id}/next/${date}`)
+
+    if (res.status === 200) {
+      return res.data
+    }
+  } catch (err) {
+  //  TODO: 400, 404
+    console.log(err.response.status, err.response.statusText)
+  }
+}
+
+export const getPlayerMeta = async (player_id, limit = 4) => {
+  try {
+    const res = await axios.get(`${API_URL}/player/${player_id}/meta/${limit}`)
 
     if (res.status === 200) {
       return res.data

src/utils/index.js

@@ -3,7 +3,7 @@ import {GoToLink, GoToMatch, GoToPlayer} from "./GoTo";
 import {SaveLastVisitedToLocalStorage} from "./LocalStorage";
 import {GetHLTV_1} from "./HLTV";
 import {DisplayRank, LoadImage} from "./Display";
-import {GetUser, TrackMe, getPlayerValue, loadMoreMatches} from "./ApiRequests";
+import {GetUser, TrackMe, getPlayerValue, loadMoreMatches, getPlayerMeta, getMatchDetails} from "./ApiRequests";
 import {setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank, FixMapName, closeNav} from "./Utils";
 
 export {
@@ -12,6 +12,6 @@ export {
   SaveLastVisitedToLocalStorage,
   GetHLTV_1,
   DisplayRank, LoadImage,
-  GetUser, TrackMe, getPlayerValue, loadMoreMatches,
+  GetUser, TrackMe, getPlayerValue, loadMoreMatches, getPlayerMeta, getMatchDetails,
   setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank, FixMapName, closeNav
 }

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 = () => {
+    const GetMatch = async () => {
-      if (matchIdPattern.test(props.match_id))
+      let res = {}
-        axios
+      if (matchIdPattern.test(props.match_id)) {
-            .get(`${process.env.VUE_APP_API_URL}/match/${props.match_id}`)
+        res = await getMatchDetails(props.match_id)
-            .then((response) => {
-              if (response.data.map)
-                document.title = `${FixMapName(response.data.map)} | csgoWTF`
-              else
-                document.title = `Match-Details | csgoWTF`
 
-              store.commit({
+        if (res.map)
-                type: 'changeMatchDetails',
+          document.title = `${FixMapName(res.map)} | csgoWTF`
-                data: response.data
+        else
-              })
+          document.title = `Match-Details | csgoWTF`
 
-              data.matchDetails = store.state.matchDetails
+        store.commit({
-              data.stats = data.matchDetails.stats
+          type: 'changeMatchDetails',
-              data.score = data.matchDetails.score
+          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)
+        data.avgRank = GetAvgRank(data.stats)
-            })
+
-            .catch((e) => {
+        console.log(data.matchDetails)
-              console.log(e)
+      } else {
-              // TODO: needs 404
-            })
-      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;