load moar matches and save-scroll-state for player

src/store/index.js

@@ -6,7 +6,8 @@ export default createStore({
     vanityUrl: '',
     matchDetails: {},
     playerDetails: {},
-    playersArr: []
+    playersArr: [],
+    scroll_state: 0
   },
   mutations: {
     changeId64(state, payload) {
@@ -24,6 +25,9 @@ export default createStore({
     changePlayesArr(state, payload) {
       state.playersArr = payload.data
     },
+    changeScrollState(state, payload) {
+      state.scroll_state = payload
+    },
     resetId64(state) {
       state.id64 = ''
     },
@@ -39,6 +43,9 @@ export default createStore({
     resetPlayesArr(state) {
       state.playersArr = []
     },
+    resetScrollState(state) {
+      state.scroll_state = 0
+    }
   },
   actions: {
   },

src/utils/ApiRequests.js

@@ -129,3 +129,16 @@ export const GetWeaponDmg = async (match_id) => {
     console.log(e)
   }
 }
+
+export const LoadMoreMatchesExplore = async (date) => {
+  try {
+    const res = await axios.get(`${API_URL}/matches/next/${date}`)
+
+    if (res.status === 200) {
+      return res.data
+    }
+  } catch (err) {
+    //  TODO: 400, 404
+    console.log(err.response.status, err.response.statusText)
+  }
+}

src/utils/Utils.js

@@ -93,3 +93,11 @@ export const CreatePlayersArray = (stats) => {
   }
   return arr
 }
+
+export const scrollToPos = (pos = 0) => {
+  window.scrollTo({
+    top: pos,
+    left: 0,
+    behavior: 'smooth'
+  })
+}

src/utils/index.js

@@ -1,20 +1,38 @@
-import {FormatDate, FormatDuration, FormatFullDate, FormatFullDuration, FormatVacDate, MatchNotParsedTime} from "./DateTime";
+import {
+  FormatDate,
+  FormatDuration,
+  FormatFullDate,
+  FormatFullDuration,
+  FormatVacDate,
+  MatchNotParsedTime
+} from "./DateTime";
 import {GoToLink, GoToMatch, GoToPlayer} from "./GoTo";
 import {SaveLastVisitedToLocalStorage} from "./LocalStorage";
 import {GetHLTV_1} from "./HLTV";
 import {DisplayRank, LoadImage} from "./Display";
-import {GetMatchDetails, GetPlayerMeta, GetPlayerValue, GetUser, LoadMoreMatches, TrackMe, GetWeaponDmg, GetMatches} from "./ApiRequests";
+import {
+  GetMatchDetails,
+  GetMatches,
+  GetPlayerMeta,
+  GetPlayerValue,
+  GetUser,
+  GetWeaponDmg,
+  LoadMoreMatches,
+  LoadMoreMatchesExplore,
+  TrackMe
+} from "./ApiRequests";
 import {
   checkStatEmpty,
   closeNav,
   constructAvatarUrl,
+  CreatePlayersArray,
   FixMapName,
   getPlayerArr,
   GetWinLoss,
   setTitle,
-  truncate,
   sortObjectValue,
-  CreatePlayersArray
+  truncate,
+  scrollToPos
 } from "./Utils";
 
 export {
@@ -48,5 +66,7 @@ export {
   sortObjectValue,
   GetWeaponDmg,
   CreatePlayersArray,
-  GetMatches
+  GetMatches,
+  LoadMoreMatchesExplore,
+  scrollToPos
 }

src/views/Explore.vue

@@ -5,13 +5,19 @@
     <div class="container-lg text-center">
       <h3>Recent matches</h3>
       <MatchesTable v-if="data.matches" :key="data.matches" :explore="true" :matches="data.matches"/>
+
+      <div class="load-more text-center">
+        <button class="btn border-2 btn-outline-info"
+                @click="setMoreMatches">Load More
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import {onMounted, reactive} from "vue";
-import {GetMatches, LoadImage, MatchNotParsedTime} from "@/utils";
+import {GetMatches, LoadImage, MatchNotParsedTime, LoadMoreMatchesExplore} from "@/utils";
 import MatchesTable from "@/components/MatchesTable";
 
 export default {
@@ -20,10 +26,19 @@ export default {
   // TODO: Events / Lans etc. +
   setup() {
     document.title = "Matches | csgoWTF"
+
     const data = reactive({
       matches: []
     })
 
+    const setMoreMatches = async () => {
+      const res = await LoadMoreMatchesExplore(data.matches[data.matches.length - 1].date)
+
+      res.forEach(e => data.matches.push(e))
+
+      console.log(data.matches)
+    }
+
     onMounted(async () => {
       data.matches = await GetMatches()
 
@@ -38,7 +53,7 @@ export default {
       console.log(data.matches)
     })
 
-    return {data}
+    return {data, setMoreMatches}
   }
 }
 </script>
@@ -63,6 +78,10 @@ export default {
   h3 {
     margin-bottom: 2rem;
   }
+
+  .load-more {
+    padding: 1rem 0;
+  }
 }
 
 @media (max-width: 1200px) {

src/views/Player.vue

@@ -202,8 +202,8 @@
         </div>
       </div>
       <div class="load-more col-lg-9 col-md-12 text-center">
-        <button v-if="data.match_stats.total !== data.matches.length" class="btn border-2 btn-outline-info"
-                @click="setMoreMatches">Load More
+        <button v-if="data.match_stats.total !== data.matches.length" :key="scrollToPos(store.state.scroll_state)"
+                class="btn border-2 btn-outline-info" @click="setMoreMatches">Load More
         </button>
       </div>
     </div>
@@ -211,7 +211,7 @@
 </template>
 
 <script>
-import {onBeforeMount, onMounted, reactive, ref, watch} from "vue";
+import {onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch} from "vue";
 import {useStore} from "vuex";
 import {
   constructAvatarUrl,
@@ -226,7 +226,7 @@ import {
   LoadImage,
   LoadMoreMatches,
   MatchNotParsedTime,
-  SaveLastVisitedToLocalStorage,
+  SaveLastVisitedToLocalStorage, scrollToPos,
   setTitle,
   sortObjectValue,
   TrackMe
@@ -276,6 +276,8 @@ export default {
     )
 
     const SetPlayerData = async () => {
+      await store.commit('changeScrollState', 0)
+
       data.tracked = store.state.playerDetails.tracked
       if (store.state.playerDetails.matches)
         data.matches = store.state.playerDetails.matches
@@ -345,7 +347,9 @@ 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))
+      await res.matches.forEach(e => data.matches.push(e))
+
+      scrollToPos(window.scrollY)
 
       console.log(store.state.playerDetails)
     }
@@ -453,6 +457,10 @@ export default {
       data.playerMeta = await GetPlayerMeta(props.id, displayCounter)
     })
 
+    onBeforeUnmount(() => {
+      store.commit('changeScrollState', window.scrollY)
+    })
+
     return {
       data,
       store,
@@ -468,7 +476,8 @@ export default {
       GoToPlayer,
       MatchNotParsedTime,
       setMoreMatches,
-      setDmgGraphWidth
+      setDmgGraphWidth,
+      scrollToPos
     }
   }
 }