some more refactoring

src/views/Match.vue

@@ -79,9 +79,9 @@
 </template>
 
 <script>
-import {onBeforeMount, onMounted, reactive, watch} from "vue";
+import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue";
 import axios from 'axios'
-import {DisplayRank, FormatFullDate, GetHLTV_1, GoToLink, GoToPlayer, LoadImage} from "../utils";
+import {DisplayRank, FormatFullDate, GetAvgRank, GoToLink, LoadImage} from "../utils";
 import {useStore} from "vuex";
 import {useRoute} from 'vue-router'
 
@@ -92,7 +92,7 @@ export default {
     const store = useStore()
     const route = useRoute()
 
-    store.state.matchDetails = {}
+    const matchIdPattern = /^\d{19}$/
 
     // Refs
     const data = reactive({
@@ -105,56 +105,57 @@ export default {
 
     // Functions
     const GetMatch = () => {
-      axios
-          .get(`${process.env.VUE_APP_API_URL}/match/${props.match_id}`)
-          .then((response) => {
-            document.title = `${response.data.map} | csgoWTF`
-            data.matchDetails = response.data
-            data.stats = response.data.stats
-            data.score = response.data.score
+      if (matchIdPattern.test(props.match_id))
+        axios
+            .get(`${process.env.VUE_APP_API_URL}/match/${props.match_id}`)
+            .then((response) => {
+              document.title = `${response.data.map} | csgoWTF`
+              store.commit({
+                type: 'changeMatchDetails',
+                data: response.data
+              })
 
-            store.state.matchDetails = response.data
+              data.matchDetails = store.state.matchDetails
+              data.stats = data.matchDetails.stats
+              data.score = data.matchDetails.score
 
-            LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random')
+              LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random')
 
-            console.log(response.data)
-          })
-          .catch((e) => {
-            console.log(e)
-          })
-    }
+              GetAvgRank(data.stats)
 
-    const GetAvgRank = () => {
-      let count = 0
-      let fullRank = 0
-
-      data.stats?.map(player => {
-        if (player.rank?.old) {
-          fullRank += player.rank?.old
-          count += 1
-        }
-      })
-
-      if (count === 0)
-        data.avgRank = 0
-      else
-        data.avgRank = Math.floor(fullRank / count)
+              console.log(data.matchDetails)
+            })
+            .catch((e) => {
+              console.log(e)
+              // TODO: needs 404
+            })
+      else {
+        console.log('Match not found')
+        // TODO: needs 404
+      }
     }
 
     const checkRoute = () => {
       if (route.fullPath.split('/')[3]) {
         const sub = route.fullPath.split('/')[3]
-        GoToLink(`/match/${props.match_id}/${sub}`)
+        if (matchIdPattern.test(props.match_id))
+          GoToLink(`/match/${props.match_id}/${sub}`)
+        else {
+          console.log('Match not found')
+          // TODO: needs 404
+        }
       } else if (route.fullPath.split('/')[3] === undefined) {
-        // setTimeout(() => {
+        if (matchIdPattern.test(props.match_id))
           GoToLink(`/match/${props.match_id}/overview`)
-        // }, 200)
+        else {
+          console.log('Match not found')
+          // TODO: needs 404
+        }
       }
     }
 
     // Watchers
     watch(() => props.match_id, GetMatch)
-    watch(() => data.stats, GetAvgRank)
 
     // Run on create
     onBeforeMount(() => {
@@ -165,8 +166,15 @@ export default {
       checkRoute()
     })
 
+    onBeforeUnmount(() => {
+      store.commit({
+        type: 'changeMatchDetails',
+        data: {}
+      })
+    })
+
     return {
-      GetMatch, GetAvgRank, data, GoToPlayer, GetHLTV_1, DisplayRank, FormatFullDate, LoadImage
+      data, DisplayRank, FormatFullDate
     }
   }
 }
@@ -241,6 +249,9 @@ export default {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
+
+  padding-left: 70px;
+
   z-index: 1;
   height: 100%;
   width: 100%;
@@ -252,4 +263,11 @@ export default {
       rgba(0, 0, 0, .6) 100%
   );
 }
+
+@media screen and (max-width: 991px) {
+  #scoreWrapper {
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+}
 </style>