load moar matches and save-scroll-state for player

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
     }
   }
 }