updated ExploreView.vue

src/views/ExploreView.vue

@@ -11,7 +11,7 @@
 
         <div class="load-more text-center">
           <button
-            :key="scrollToPos(store.state.scroll_state)"
+            :key="scrollToPos(scrollStateStore.scrollState)"
             class="btn border-2 btn-outline-info"
             @click="setMoreMatches"
           >
@@ -31,41 +31,45 @@
 
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, reactive } from "vue";
-import { GetMatches, LoadMoreMatchesExplore } from "@/utils/ApiRequests";
-import { LoadImage } from "@/utils/Display";
-import { MatchNotParsedTime } from "@/utils/DateTime";
-import { scrollToPos } from "@/utils/Utils";
-
-import { useStore } from "vuex";
+import {
+  scrollToPos,
+  setAppDivBackground,
+  setBgImgDisplay,
+  MatchNotParsedTime,
+  LoadImage,
+  GetMatches, LoadMoreMatchesExplore
+} from "@/utils";
 import router from "@/router";
 import MatchesTable from "@/components/MatchesTable.vue";
-import type { Match } from "@/api";
+import type { Match } from "@/types";
 import { useScrollStateStore } from "@/stores/scrollState";
 import { useMatchDetailsStore } from "@/stores/matchDetails";
+import {useInfoStateStore} from "@/stores/infoState";
 
 document.title = "Matches | csgoWTF";
 
-const store = useStore();
 const scrollStateStore = useScrollStateStore();
 const matchDetailsStore = useMatchDetailsStore();
+const infoStateStore = useInfoStateStore()
 
 const data = reactive({
   matches: ([] as Match[]) || null,
 });
 
 const setMoreMatches = async () => {
-  const res = await LoadMoreMatchesExplore(
-    matchDetailsStore,
+  const [res, info] = await LoadMoreMatchesExplore(
     data.matches[data.matches.length - 1].date
   );
 
+  if (info.message !== "") infoStateStore.addInfo(info)
   if (res !== null) res.forEach((e) => data.matches.push(e));
 
   scrollToPos(window.scrollY);
 };
 
 onMounted(async () => {
-  const res = await GetMatches(matchDetailsStore);
+  const [res, info] = await GetMatches();
+  if (info.message !== "") infoStateStore.addInfo(info)
   if (res !== null) data.matches = res;
 
   if (data.matches !== null) {
@@ -81,16 +85,12 @@ onMounted(async () => {
       await LoadImage("random");
     }
   } else {
-    const bgImg = document.querySelector(".bg-img") as HTMLImageElement;
-    bgImg.style.display = "none";
+    setBgImgDisplay("none", HTMLImageElement);
   }
 
   scrollToPos(scrollStateStore.scrollState);
-
-  const appDiv = document.getElementById("app") as HTMLDivElement;
-  appDiv.style.background = "rgba(0, 0, 0, .7)";
-  const bgImg = document.querySelector(".bg-img") as HTMLImageElement;
-  bgImg.style.display = "initial";
+  setAppDivBackground("rgba(0, 0, 0, 0.7)", HTMLDivElement);
+  setBgImgDisplay("initial", HTMLImageElement);
 });
 
 onBeforeUnmount(() => {