From 25b05e9b31bb97a4bb5eda164bce21fe6c488687 Mon Sep 17 00:00:00 2001
From: vikingowl <cw.nachtigall@gmail.com>
Date: Wed, 2 Feb 2022 19:18:00 +0100
Subject: [PATCH] added info-modal + updated error handling

---
 src/App.vue                     |   4 +-
 src/components/DamageSite.vue   |   2 +-
 src/components/Details.vue      |   2 +-
 src/components/EqValueGraph.vue |   2 +-
 src/components/InfoModal.vue    |  99 +++++
 src/components/Nav.vue          |  22 +-
 src/store/index.js              |  16 +-
 src/utils/ApiRequests.js        | 680 ++++++++++++++++++++++----------
 src/views/Explore.vue           |   4 +-
 src/views/Match.vue             |   4 +-
 src/views/Player.vue            |  76 ++--
 11 files changed, 645 insertions(+), 266 deletions(-)
 create mode 100644 src/components/InfoModal.vue

diff --git a/src/App.vue b/src/App.vue
index 9804b68..274513c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@
   </header>
   <main>
     <div :style="{height: offset + 'px'}"/>
+    <InfoModal/>
     <router-view name="main"/>
   </main>
   <footer class="mt-auto">
@@ -17,9 +18,10 @@ import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
 import CookieConsentBtn from "@/components/CookieConsentBtn";
 import {onMounted, ref} from "vue";
+import InfoModal from "@/components/InfoModal";
 
 export default {
-  components: {Footer, Nav, CookieConsentBtn},
+  components: {InfoModal, Footer, Nav, CookieConsentBtn},
   setup() {
     const offset = ref(0)
 
diff --git a/src/components/DamageSite.vue b/src/components/DamageSite.vue
index 46743bb..1096fa8 100644
--- a/src/components/DamageSite.vue
+++ b/src/components/DamageSite.vue
@@ -30,7 +30,7 @@ export default {
     })
 
     const getWeaponDamage = async () => {
-      const resData = await GetWeaponDmg(store.state.matchDetails.match_id)
+      const resData = await GetWeaponDmg(store, store.state.matchDetails.match_id)
       data.equipment_map = resData.equipment_map
       data.stats = resData.stats
     }
diff --git a/src/components/Details.vue b/src/components/Details.vue
index d78fbcd..12a4b28 100644
--- a/src/components/Details.vue
+++ b/src/components/Details.vue
@@ -29,7 +29,7 @@ export default {
     })
 
     const getWeaponDamage = async () => {
-      const resData = await GetWeaponDmg(store.state.matchDetails.match_id)
+      const resData = await GetWeaponDmg(store, store.state.matchDetails.match_id)
       data.spray = resData.spray
     }
 
diff --git a/src/components/EqValueGraph.vue b/src/components/EqValueGraph.vue
index b721bde..ed757dc 100644
--- a/src/components/EqValueGraph.vue
+++ b/src/components/EqValueGraph.vue
@@ -54,7 +54,7 @@ export default {
     }
 
     const parseObject = async () => {
-      data.rounds = await GetPlayerValue(store.state.matchDetails.match_id)
+      data.rounds = await GetPlayerValue(store, store.state.matchDetails.match_id)
 
       for (const round in data.rounds) {
         for (const player in data.rounds[round]) {
diff --git a/src/components/InfoModal.vue b/src/components/InfoModal.vue
new file mode 100644
index 0000000..1017658
--- /dev/null
+++ b/src/components/InfoModal.vue
@@ -0,0 +1,99 @@
+<template>
+  <div v-if="infos.data" id="modal">
+    <div v-for="(info, id) in infos.data" :key="id" class="custom-modal">
+      <div :class="info.type === 'error'
+              ? 'bg-danger text-white'
+              : info.type === 'warning'
+              ? 'bg-warning text-secondary'
+              : info.type === 'success'
+              ? 'bg-success text-white'
+              : 'bg-secondary text-white'"
+           class="card text-end">
+        <div class="card-header d-flex justify-content-between">
+          <div>
+            <span v-if="info.type !== 'success'">
+              Error <span class="mx-2">-</span> {{ info.statuscode }}
+            </span>
+            <span v-else>
+              Success
+            </span>
+          </div>
+          <button aria-label="Close" class="btn-close" type="button" @click="closeModal(id)"/>
+        </div>
+        <div class="card-body">
+          {{ info.message }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {useStore} from "vuex";
+import {onMounted, reactive} from "vue";
+
+export default {
+  name: "InfoModal",
+  setup() {
+    const store = useStore()
+    const infos = reactive({
+      data: []
+    })
+
+    const closeModal = (id) => {
+      store.commit('removeInfoState', id)
+    }
+
+    onMounted(() => {
+      store.subscribe(((mutation, state) => {
+        if (mutation.type === 'changeInfoState') {
+          infos.data = state.info
+
+          setTimeout(() => {
+            closeModal(store.state.info.length - 1)
+          }, 5000)
+        }
+      }))
+    })
+
+    return {infos, closeModal}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#modal {
+  --height: 100px;
+
+  .card {
+    z-index: 10;
+    position: absolute;
+    right: 1rem;
+    opacity: .8;
+    width: min(100vw - 2rem, 50ch);
+
+    .btn-close {
+      background-color: white;
+      opacity: .5;
+    }
+  }
+
+  @for $i from 1 through 10 {
+    .custom-modal:nth-of-type(#{$i}) {
+      .card {
+        @if $i == 1 {
+          margin: 1rem 0;
+        } @else {
+          margin-top: calc(#{$i}rem + (#{$i} - 1) * var(--height));
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #modal {
+    --height: 120px;
+  }
+}
+</style>
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index b4f0107..e296bd9 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -40,9 +40,6 @@
           >
             Search!
           </button>
-          <div v-if="data.error" class="alert alert-warning" role="alert">
-            {{ data.error }}
-          </div>
         </form>
       </div>
 
@@ -54,6 +51,7 @@
 import {reactive} from "vue";
 import {useStore} from 'vuex'
 import {closeNav, GetUser, GoToPlayer} from '@/utils'
+import {StatusCodes as STATUS} from "http-status-codes";
 
 export default {
   name: 'Nav',
@@ -61,7 +59,6 @@ export default {
     const store = useStore()
     const data = reactive({
       searchInput: '',
-      error: ''
     })
 
     const parseSearch = async () => {
@@ -70,7 +67,6 @@ export default {
       const profileUrlPattern = 'https://steamcommunity.com/profiles/'
       const id64Pattern = /^\d{17}$/
       const vanityPattern = /^[A-Za-z0-9-_]{3,32}$/
-      // const shareCodePattern = /.*CSGO(?:-?[ABCDEFGHJKLMNOPQRSTUVWXYZabcdefhijkmnopqrstuvwxyz23456789]{5}){5}.*/
 
       store.commit({
         type: 'changeVanityUrl',
@@ -108,15 +104,23 @@ export default {
         }
 
         if (store.state.vanityUrl && !vanityPattern.test(store.state.vanityUrl)) {
-          data.error = 'Only alphanumeric symbols, "_", and "-", between 3-32 characters'
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.NOT_ACCEPTABLE,
+              message: 'Only alphanumeric symbols, "_", and "-", between 3-32 characters',
+              type: 'warning'
+            }
+          })
           store.commit({
             type: 'changeVanityUrl',
             id: ''
           })
+          data.searchInput = ''
         }
 
         if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
-          const resData = await GetUser(store.state.vanityUrl || store.state.id64)
+          const resData = await GetUser(store, store.state.vanityUrl || store.state.id64)
 
           if (resData) {
             data.searchInput = ''
@@ -136,10 +140,6 @@ export default {
             }
           }
         }
-
-        setTimeout(() => {
-          data.error = ''
-        }, 5000)
       }
     }
 
diff --git a/src/store/index.js b/src/store/index.js
index 143c14b..a46a5f5 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -7,7 +7,8 @@ export default createStore({
     matchDetails: {},
     playerDetails: {},
     playersArr: [],
-    scroll_state: 0
+    scroll_state: 0,
+    info: []
   },
   mutations: {
     changeId64(state, payload) {
@@ -22,12 +23,15 @@ export default createStore({
     changePlayerDetails(state, payload) {
       state.playerDetails = payload.data
     },
-    changePlayesArr(state, payload) {
+    changePlayersArr(state, payload) {
       state.playersArr = payload.data
     },
     changeScrollState(state, payload) {
       state.scroll_state = payload
     },
+    changeInfoState(state, payload) {
+      state.info.push(payload.data)
+    },
     resetId64(state) {
       state.id64 = ''
     },
@@ -40,11 +44,17 @@ export default createStore({
     resetPlayerDetails(state) {
       state.playerDetails = {}
     },
-    resetPlayesArr(state) {
+    resetPlayersArr(state) {
       state.playersArr = []
     },
     resetScrollState(state) {
       state.scroll_state = 0
+    },
+    resetInfoState(state) {
+      state.info = []
+    },
+    removeInfoState(state, id) {
+      state.info.splice(id, 1)
     }
   },
   actions: {
diff --git a/src/utils/ApiRequests.js b/src/utils/ApiRequests.js
index da05d60..c29cebc 100644
--- a/src/utils/ApiRequests.js
+++ b/src/utils/ApiRequests.js
@@ -4,35 +4,8 @@ import {AUTHCODE_REGEX, SHARECODE_REGEX} from "@/constants";
 
 const API_URL = process.env.VUE_APP_API_URL
 
-export const GetMatches = async () => {
-  let response = null
-
-  await axios
-    .get(`${API_URL}/matches`)
-    .then((res) => {
-      if (res.status === STATUS.OK)
-        response = res.data
-    })
-    .catch((err) => {
-      switch (err.response.status) {
-        case STATUS.BAD_REQUEST:
-          // TODO: ERROR
-          console.log('GetMatches - bad request')
-          break
-        case STATUS.INTERNAL_SERVER_ERROR:
-          // TODO: ERROR
-          console.log('GetMatches - internal server error')
-          break
-        default:
-          // TODO: ERROR
-          console.log('GetMatches - default error')
-      }
-    })
-
-  return response
-}
-
-export const GetUser = async (id) => {
+// /player/<id>   GET   returns player <id> details (last 10 matches)
+export const GetUser = async (store, id) => {
   let response = null
 
   await axios
@@ -44,180 +17,52 @@ export const GetUser = async (id) => {
     .catch((err) => {
       switch (err.response.status) {
         case STATUS.BAD_REQUEST:
-          // TODO: ERROR
-          console.log('GetUser - bad request')
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.BAD_REQUEST,
+              message: 'Bad request',
+              type: 'error'
+            }
+          })
           break
         case STATUS.NOT_FOUND:
-          // TODO: ERROR
-          console.log('GetUser - not found')
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.NOT_FOUND,
+              message: 'Player not found',
+              type: 'error'
+            }
+          })
           break
         case STATUS.INTERNAL_SERVER_ERROR:
-          // TODO: ERROR
-          console.log('GetUser - internal server error')
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.INTERNAL_SERVER_ERROR,
+              message: 'Unable to get meta-stats or player',
+              type: 'error'
+            }
+          })
           break
         default:
-          // TODO: ERROR
-          console.log('GetUser - default error')
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: err.response.status,
+              message: 'An unknown error occured',
+              type: 'error'
+            }
+          })
       }
     })
 
   return response
 }
 
-export const TrackMe = async (id64, authcode, sharecode = '') => {
-  // TODO: NEEDS WORK!!!!!
-
-  let statusError = null
-  let status = 202
-
-  if (sharecode !== '' && !SHARECODE_REGEX.test(sharecode)) {
-    statusError = 'Sharecode is invalid or missing'
-    status = STATUS.IM_A_TEAPOT
-    return [status, statusError]
-  }
-  if (authcode === '' || !AUTHCODE_REGEX.test(authcode)) {
-    statusError = 'Authcode is invalid or missing'
-    status = STATUS.IM_A_TEAPOT
-    return [status, statusError]
-  }
-
-  await axios
-    .post({
-      url: `${API_URL}/player/${id64}/track`,
-      data: `authcode=${authcode}&sharecode=${sharecode}`
-    })
-    .then((res) => {
-      if (res.status === STATUS.ACCEPTED)
-        status = res.status
-    })
-    .catch((err) => {
-      status = err.response.status
-
-      switch (err.response.status) {
-        case STATUS.BAD_REQUEST:
-          statusError = 'Invalid arguments'
-          break
-        case STATUS.NOT_FOUND:
-          statusError = 'Player not found'
-          break
-        case STATUS.SERVICE_UNAVAILABLE:
-          statusError = 'Problem with request'
-          break
-        case STATUS.UNAUTHORIZED:
-          statusError = 'Authcode is invalid'
-          break
-        case STATUS.PRECONDITION_FAILED:
-          statusError = 'Sharecode is invalid or missing'
-          break
-        case STATUS.INTERNAL_SERVER_ERROR:
-          statusError = 'Service currently unavailable - please try again later'
-          break
-        default:
-          statusError = 'An unknown error occured'
-          console.log('TrackMe - An unknown error occured')
-      }
-    })
-
-  return [status, statusError]
-}
-
-export const GetPlayerValue = async (match_id) => {
-  let response = null
-
-  await axios
-    .get(`${API_URL}/match/${match_id}/rounds`)
-    .then((res) => {
-      if (res.status === STATUS.OK)
-        response = res.data
-    })
-    .catch((err) => {
-      switch (err.response.status) {
-        case STATUS.BAD_REQUEST:
-          // TODO: ERROR
-          console.log('GetPlayerValue - bad request')
-          break
-        case STATUS.NOT_FOUND:
-          // TODO: ERROR
-          console.log('GetPlayerValue - not found')
-          break
-        case STATUS.INTERNAL_SERVER_ERROR:
-          // TODO: ERROR
-          console.log('GetPlayerValue - internal server error')
-          break
-        default:
-          // TODO: ERROR
-          console.log('GetPlayerValue - default error')
-      }
-    })
-
-  return response
-}
-
-export const GetMatchDetails = async (match_id) => {
-  let response = null
-
-  await axios
-    .get(`${API_URL}/match/${match_id}`)
-    .then((res) => {
-      if (res.status === STATUS.OK)
-        response = res.data
-    })
-    .catch((err) => {
-      switch (err.response.status) {
-        case STATUS.BAD_REQUEST:
-          // TODO: ERROR
-          console.log('GetMatchDetails - bad request')
-          break
-        case STATUS.NOT_FOUND:
-          // TODO: ERROR
-          console.log('GetMatchDetails - not found')
-          break
-        case STATUS.INTERNAL_SERVER_ERROR:
-          // TODO: ERROR
-          console.log('GetMatchDetails - internal server errror')
-          break
-        default:
-          // TODO: ERROR
-          console.log('GetMatchDetails - default error')
-      }
-    })
-
-  return response
-}
-
-export const LoadMoreMatches = async (player_id, date) => {
-  let response = null
-
-  await axios
-    .get(`${API_URL}/player/${player_id}/next/${date}`)
-    .then((res) => {
-      if (res.status === STATUS.OK)
-        response = res.data
-    })
-    .catch((err) => {
-      switch (err.response.status) {
-        case STATUS.BAD_REQUEST:
-          // TODO: ERROR
-          console.log('GetUser - bad request')
-          break
-        case STATUS.NOT_FOUND:
-          // TODO: ERROR
-          console.log('GetUser - not found')
-          break
-        case STATUS.INTERNAL_SERVER_ERROR:
-          // TODO: ERROR
-          console.log('GetUser - internal server error')
-          break
-        default:
-          // TODO: ERROR
-          console.log('GetUser - default error')
-      }
-    })
-
-  return response
-}
-
-export const GetPlayerMeta = async (player_id, limit = 4) => {
+// /player/<id>/meta/<limit>   GET   returns player <id> meta-stats with <limit>
+export const GetPlayerMeta = async (store, player_id, limit = 4) => {
   let response = null
 
   await axios
@@ -229,27 +74,342 @@ export const GetPlayerMeta = async (player_id, limit = 4) => {
     .catch((err) => {
       switch (err.response.status) {
         case STATUS.BAD_REQUEST:
-          // TODO: ERROR
-          console.log('GetPlayerMeta - bad request')
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.BAD_REQUEST,
+              message: 'Bad request',
+              type: 'error'
+            }
+          })
           break
         case STATUS.NOT_FOUND:
-          // TODO: ERROR
-          console.log('GetPlayerMeta - not found')
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.BAD_REQUEST,
+              message: 'Player not found',
+              type: 'error'
+            }
+          })
           break
         case STATUS.INTERNAL_SERVER_ERROR:
-          // TODO: ERROR
-          console.log('GetPlayerMeta - internal server error')
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.INTERNAL_SERVER_ERROR,
+              message: 'Unable to get player meta',
+              type: 'error'
+            }
+          })
           break
         default:
-          // TODO: ERROR
-          console.log('GetPlayerMeta - default error')
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: err.response.status,
+              message: 'An unknown error occured',
+              type: 'error'
+            }
+          })
       }
     })
 
   return response
 }
 
-export const GetWeaponDmg = async (match_id) => {
+// /player/<id>/next/<unix>   GET   returns 20 matches after <unix> for player <id>
+export const LoadMoreMatches = async (store, player_id, date) => {
+  let response = null
+
+  await axios
+    .get(`${API_URL}/player/${player_id}/next/${date}`)
+    .then((res) => {
+      if (res.status === STATUS.OK)
+        response = res.data
+    })
+    .catch((err) => {
+      switch (err.response.status) {
+        case STATUS.BAD_REQUEST:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.BAD_REQUEST,
+              message: 'Bad request',
+              type: 'error'
+            }
+          })
+          break
+        case STATUS.NOT_FOUND:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.NOT_FOUND,
+              message: 'Player not found',
+              type: 'error'
+            }
+          })
+          break
+        case STATUS.INTERNAL_SERVER_ERROR:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.INTERNAL_SERVER_ERROR,
+              message: 'Unable to get meta-stats or player',
+              type: 'error'
+            }
+          })
+          break
+        default:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: err.response.status,
+              message: 'An unknown error occured',
+              type: 'error'
+            }
+          })
+      }
+    })
+
+  return response
+}
+
+// /player/<id>/track   POST   Track player <id> FORM_DATA: authcode, [sharecode]
+export const TrackMe = async (store, id64, authcode, sharecode = '') => {
+  if (sharecode !== '' && !SHARECODE_REGEX.test(sharecode)) {
+    store.commit({
+      type: 'changeInfoState',
+      data: {
+        statuscode: STATUS.IM_A_TEAPOT,
+        message: 'Sharecode is invalid or missing',
+        type: 'error'
+      }
+    })
+    return STATUS.IM_A_TEAPOT
+  }
+  if (authcode === '' || !AUTHCODE_REGEX.test(authcode)) {
+    store.commit({
+      type: 'changeInfoState',
+      data: {
+        statuscode: STATUS.IM_A_TEAPOT,
+        message: 'Authcode is invalid or missing',
+        type: 'error'
+      }
+    })
+    return STATUS.IM_A_TEAPOT
+  }
+
+  await axios
+    .post({
+      url: `${API_URL}/player/${id64}/track`,
+      data: `authcode=${authcode}&sharecode=${sharecode}`
+    })
+    .then((res) => {
+      if (res.status === STATUS.ACCEPTED) {
+        store.commit({
+          type: 'changeInfoState',
+          data: {
+            statuscode: STATUS.ACCEPTED,
+            message: 'Tracking successful',
+            type: 'success'
+          }
+        })
+        return STATUS.ACCEPTED
+      }
+    })
+    .catch((err) => {
+      switch (err.response.status) {
+        case STATUS.BAD_REQUEST:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.BAD_REQUEST,
+              message: 'Invalid arguments',
+              type: 'error'
+            }
+          })
+          return STATUS.BAD_REQUEST
+        case STATUS.NOT_FOUND:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.NOT_FOUND,
+              message: 'Player not found',
+              type: 'error'
+            }
+          })
+          return STATUS.NOT_FOUND
+        case STATUS.SERVICE_UNAVAILABLE:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.SERVICE_UNAVAILABLE,
+              message: 'Service currently unavailable - Please try again later',
+              type: 'error'
+            }
+          })
+          return STATUS.SERVICE_UNAVAILABLE
+        case STATUS.UNAUTHORIZED:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.UNAUTHORIZED,
+              message: 'Authcode is invalid',
+              type: 'error'
+            }
+          })
+          return STATUS.UNAUTHORIZED
+        case STATUS.PRECONDITION_FAILED:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.PRECONDITION_FAILED,
+              message: 'Sharecode is invalid or missing',
+              type: 'error'
+            }
+          })
+          return STATUS.PRECONDITION_FAILED
+        case STATUS.INTERNAL_SERVER_ERROR:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.INTERNAL_SERVER_ERROR,
+              message: 'Service currently unavailable - please try again later',
+              type: 'error'
+            }
+          })
+          return STATUS.INTERNAL_SERVER_ERROR
+        default:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: err.response.status,
+              message: 'An unknown error occured',
+              type: 'error'
+            }
+          })
+          return err.response.status
+      }
+    })
+}
+
+// /match/<id>   GET   returns details for match <id>
+export const GetMatchDetails = async (store, match_id) => {
+  let response = null
+
+  await axios
+    .get(`${API_URL}/match/${match_id}`)
+    .then((res) => {
+      if (res.status === STATUS.OK)
+        response = res.data
+    })
+    .catch((err) => {
+      switch (err.response.status) {
+        case STATUS.BAD_REQUEST:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.BAD_REQUEST,
+              message: 'Error parsing matchID',
+              type: 'error'
+            }
+          })
+          break
+        case STATUS.NOT_FOUND:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.NOT_FOUND,
+              message: 'Match not found',
+              type: 'error'
+            }
+          })
+          break
+        case STATUS.INTERNAL_SERVER_ERROR:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.INTERNAL_SERVER_ERROR,
+              message: 'Unable to get match data',
+              type: 'error'
+            }
+          })
+          break
+        default:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: err.response.status,
+              message: 'An unknown error occured',
+              type: 'error'
+            }
+          })
+      }
+    })
+
+  return response
+}
+
+// /match/<id>/rounds   GET   returns round-stats for match <id>
+export const GetPlayerValue = async (store, match_id) => {
+  let response = null
+
+  await axios
+    .get(`${API_URL}/match/${match_id}/rounds`)
+    .then((res) => {
+      if (res.status === STATUS.OK)
+        response = res.data
+    })
+    .catch((err) => {
+      switch (err.response.status) {
+        case STATUS.BAD_REQUEST:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.BAD_REQUEST,
+              message: 'Error parsing matchID',
+              type: 'error'
+            }
+          })
+          break
+        case STATUS.NOT_FOUND:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.NOT_FOUND,
+              message: 'Match not found',
+              type: 'error'
+            }
+          })
+          break
+        case STATUS.INTERNAL_SERVER_ERROR:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.INTERNAL_SERVER_ERROR,
+              message: 'Unable to get match data',
+              type: 'error'
+            }
+          })
+          break
+        default:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: err.response.status,
+              message: 'An unknown error occured',
+              type: 'error'
+            }
+          })
+      }
+    })
+
+  return response
+}
+
+// /match/<id>/weapons   GET   returns weapon-stats for match <id>
+export const GetWeaponDmg = async (store, match_id) => {
   let response = null
 
   await axios
@@ -261,27 +421,99 @@ export const GetWeaponDmg = async (match_id) => {
     .catch((err) => {
       switch (err.response.status) {
         case STATUS.BAD_REQUEST:
-          // TODO: ERROR
-          console.log('GetWeaponDmg - bad request')
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.BAD_REQUEST,
+              message: 'Bad request',
+              type: 'error'
+            }
+          })
           break
         case STATUS.NOT_FOUND:
-          // TODO: ERROR
-          console.log('GetWeaponDmg - not found')
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.NOT_FOUND,
+              message: 'Weapon damage not found',
+              type: 'error'
+            }
+          })
           break
         case STATUS.INTERNAL_SERVER_ERROR:
-          // TODO: ERROR
-          console.log('GetWeaponDmg - internal server error')
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.INTERNAL_SERVER_ERROR,
+              message: 'Unable to get weapon damage',
+              type: 'error'
+            }
+          })
           break
         default:
-          // TODO: ERROR
-          console.log('GetWeaponDmg - default error')
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: err.response.status,
+              message: 'An unknown error occured',
+              type: 'error'
+            }
+          })
       }
     })
 
   return response
 }
 
-export const LoadMoreMatchesExplore = async (date) => {
+// /matches   GET   returns last 20 matches in DB
+export const GetMatches = async (store) => {
+  let response = null
+
+  await axios
+    .get(`${API_URL}/matches`)
+    .then((res) => {
+      if (res.status === STATUS.OK)
+        response = res.data
+    })
+    .catch((err) => {
+      switch (err.response.status) {
+        case STATUS.BAD_REQUEST:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.BAD_REQUEST,
+              message: 'Bad request',
+              type: 'error'
+            }
+          })
+          break
+        case STATUS.INTERNAL_SERVER_ERROR:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.INTERNAL_SERVER_ERROR,
+              message: 'Unable to marshal JSON',
+              type: 'error'
+            }
+          })
+          break
+        default:
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: err.response.status,
+              message: 'An unknown error occured',
+              type: 'error'
+            }
+          })
+      }
+    })
+
+  return response
+}
+
+// /matches/next/<unix>   GET   returns 20 matches after time <unix>
+export const LoadMoreMatchesExplore = async (store, date) => {
   let response = null
 
   await axios
@@ -293,16 +525,34 @@ export const LoadMoreMatchesExplore = async (date) => {
     .catch((err) => {
       switch (err.response.status) {
         case STATUS.BAD_REQUEST:
-          // TODO: ERROR
-          console.log('GetMatches - bad request')
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.BAD_REQUEST,
+              message: 'Bad request',
+              type: 'error'
+            }
+          })
           break
         case STATUS.INTERNAL_SERVER_ERROR:
-          // TODO: ERROR
-          console.log('GetMatches - internal server error')
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.INTERNAL_SERVER_ERROR,
+              message: 'Unable to load more matches',
+              type: 'error'
+            }
+          })
           break
         default:
-          // TODO: ERROR
-          console.log('GetMatches - default error')
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: err.response.status,
+              message: 'An unknown error occured',
+              type: 'error'
+            }
+          })
       }
     })
 
diff --git a/src/views/Explore.vue b/src/views/Explore.vue
index f26daf9..38fa989 100644
--- a/src/views/Explore.vue
+++ b/src/views/Explore.vue
@@ -43,7 +43,7 @@ export default {
     })
 
     const setMoreMatches = async () => {
-      const res = await LoadMoreMatchesExplore(data.matches[data.matches.length - 1].date)
+      const res = await LoadMoreMatchesExplore(store, data.matches[data.matches.length - 1].date)
 
       res.forEach(e => data.matches.push(e))
 
@@ -53,7 +53,7 @@ export default {
     }
 
     onMounted(async () => {
-      data.matches = await GetMatches()
+      data.matches = await GetMatches(store)
 
       if (data.matches) {
         if (data.matches[0].map) {
diff --git a/src/views/Match.vue b/src/views/Match.vue
index 160fe06..bb8ffd5 100644
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -194,7 +194,7 @@ export default {
     // Functions
     const GetMatch = async () => {
       if (matchIdPattern.test(props.match_id)) {
-        const res = await GetMatchDetails(props.match_id)
+        const res = await GetMatchDetails(store, props.match_id)
 
         if (res) {
           if (res.map)
@@ -234,7 +234,7 @@ export default {
           LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random')
 
           store.commit({
-            type: 'changePlayesArr',
+            type: 'changePlayersArr',
             data: CreatePlayersArray(data.stats)
           })
 
diff --git a/src/views/Player.vue b/src/views/Player.vue
index 253b941..f88ffa1 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -68,17 +68,6 @@
                 >
                   Track Me!
                 </button>
-                <div v-if="data.statusErrorCode === 202" class="alert alert-success" role="alert">
-                  {{ data.statusError }}
-                </div>
-                <div v-if="data.statusErrorCode === 418" class="alert alert-warning" role="alert">
-                  {{ data.statusError }}
-                </div>
-                <div v-if="data.statusErrorCode !== 0 && data.statusErrorCode !== 202 && data.statusErrorCode !== 418"
-                     class="alert alert-danger"
-                     role="alert">
-                  {{ data.statusError }}
-                </div>
                 <div aria-labelledby="login-dropdown" class="dropdown-menu mt-2 border-2 border-primary bg-body"
                      style="width: 320px">
                   <form class="px-4 py-3">
@@ -171,11 +160,12 @@ import {
   scrollToPos,
   setTitle,
   TrackMe
-} from "../utils";
+} from "@/utils";
 import {FOOTER_HEIGHT, NAV_HEIGHT} from "@/constants";
 import MatchesTable from "@/components/MatchesTable";
 import router from "@/router";
 import PlayerSideInfo from "@/components/PlayerSideInfo";
+import {StatusCodes as STATUS} from "http-status-codes/build/cjs/status-codes";
 
 export default {
   name: 'Player',
@@ -194,8 +184,6 @@ export default {
       },
       tracked: false,
       matches: [],
-      statusError: '',
-      statusErrorCode: 0,
       match_stats: {
         loss: 0,
         win: 0,
@@ -268,7 +256,7 @@ export default {
 
     const GetPlayer = async (reset = false) => {
       if (props.id) {
-        const resData = await GetUser(props.id)
+        const resData = await GetUser(store, props.id)
 
         if (resData) {
           if (resData.steamid64 !== store.state.playerDetails.steamid64 || reset) {
@@ -287,7 +275,7 @@ export default {
     }
 
     const setMoreMatches = async () => {
-      const res = await LoadMoreMatches(store.state.playerDetails.steamid64, data.matches[data.matches.length - 1].date)
+      const res = await LoadMoreMatches(store, store.state.playerDetails.steamid64, data.matches[data.matches.length - 1].date)
 
       await res.matches.forEach(e => data.matches.push(e))
 
@@ -313,29 +301,59 @@ export default {
         }, 2000)
       })
 
-      data.playerMeta = await GetPlayerMeta(props.id, displayCounter)
+      data.playerMeta = await GetPlayerMeta(store, props.id, displayCounter)
     }
 
     const TrackPlayer = async () => {
-      if (data.userData.authcode !== '') {
-        [data.statusErrorCode, data.statusError] = await TrackMe(store.state.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)
+      let res
 
-        if (data.statusErrorCode === 202) {
-          data.statusErrorCode = 0
-          data.statusError = ''
-          data.tracked = true
+      if (data.matches === []) {
+        if (data.userData.sharecode !== '') {
+          if (data.userData.authcode !== '') {
+            res = await TrackMe(store, store.state.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)
+          } else {
+            store.commit({
+              type: 'changeInfoState',
+              data: {
+                statuscode: STATUS.IM_A_TEAPOT,
+                message: 'Authcode is invalid or missing',
+                type: 'error'
+              }
+            })
+          }
         } else {
-          setTimeout(() => {
-            data.statusError = ''
-            data.statusErrorCode = 0
-          }, 5000)
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.IM_A_TEAPOT,
+              message: 'Sharecode is invalid or missing',
+              type: 'error'
+            }
+          })
         }
+      } else {
+        if (data.userData.authcode !== '') {
+          res = await TrackMe(store, store.state.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)
+        } else {
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.IM_A_TEAPOT,
+              message: 'Authcode is invalid or missing',
+              type: 'error'
+            }
+          })
+        }
+      }
+
+      if (res === 202) {
+        location.reload()
       }
     }
 
     watch(() => props.id, async () => {
       await GetPlayer()
-      data.playerMeta = await GetPlayerMeta(props.id, displayCounter)
+      data.playerMeta = await GetPlayerMeta(store, props.id, displayCounter)
     })
 
     // watch(() => data.playerMeta, () => {
@@ -348,7 +366,7 @@ export default {
       wrapper.style.minHeight = height + 'px'
 
       await GetPlayer()
-      data.playerMeta = await GetPlayerMeta(props.id, displayCounter)
+      data.playerMeta = await GetPlayerMeta(store, props.id, displayCounter)
 
       scrollToPos(store.state.scroll_state)