added load-more button to player match-list

src/utils/ApiRequests.js

@@ -66,3 +66,16 @@ export const getPlayerValue = async (match_id) => {
     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}/after/${date}`)
+
+    if (res.status === 200) {
+      return res.data
+    }
+  } catch (err) {
+  //  TODO: 400, 404
+    console.log(err.response.status, err.response.statusText)
+  }
+}

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} from "./ApiRequests";
+import {GetUser, TrackMe, getPlayerValue, loadMoreMatches} 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,
+  GetUser, TrackMe, getPlayerValue, loadMoreMatches,
   setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank, FixMapName, closeNav
 }

src/views/Player.vue

@@ -254,6 +254,9 @@
         </div>
       </div>
 
+      <div class="load-more col-9 text-center">
+        <button class="btn border-2 btn-outline-info" @click="setMoreMatches">Load More</button>
+      </div>
     </div>
   </div>
 </template>
@@ -277,7 +280,8 @@ import {
   SaveLastVisitedToLocalStorage,
   setTitle,
   TrackMe,
-  FormatVacDate
+  FormatVacDate,
+  loadMoreMatches
 } from "../utils";
 
 export default {
@@ -369,6 +373,14 @@ export default {
       }
     }
 
+    const setMoreMatches = async () => {
+      const res = await loadMoreMatches(store.state.playerDetails.steamid64, data.matches[data.matches.length - 1].date)
+
+      res.matches.forEach(e => data.matches.push(e))
+
+      console.log(store.state.playerDetails)
+    }
+
     const RefreshData = async () => {
       const refreshButton = document.querySelector('.refresh-btn .fas')
       refreshButton.classList.add('animate')
@@ -419,7 +431,8 @@ export default {
       GetHLTV_1,
       DisplayRank,
       constructAvatarUrl,
-      FormatVacDate
+      FormatVacDate,
+      setMoreMatches
     }
   }
 }
@@ -437,11 +450,14 @@ export default {
 }
 
 .wrapper {
-  padding-bottom: 1rem;
   background: rgba(0, 0, 0, .7);
   min-width: 100%;
   min-height: 100%;
 
+  .load-more {
+    padding: 1rem 0;
+  }
+
   .trackme-btn,
   .refresh-btn {
     position: absolute;
@@ -486,7 +502,6 @@ export default {
   padding-top: 10px;
 
   .badges {
-    width: 70%;
     height: 30px;
 
     img {