updated ExploreView.vue to use new <script setup lang="ts"> syntax

src/views/ExploreView.vue

@@ -29,88 +29,80 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { onBeforeUnmount, onMounted, reactive } from "vue";
-import {
-  GetMatches,
-  LoadImage,
-  LoadMoreMatchesExplore,
-  MatchNotParsedTime,
-  scrollToPos,
-} from "/src/utils";
+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 router from "/src/router";
-import MatchesTable from "/src/components/MatchesTable";
+import router from "@/router";
+import MatchesTable from "@/components/MatchesTable.vue";
+import type { Match } from "@/api";
+import { useScrollStateStore } from "@/stores/scrollState";
+import { useMatchDetailsStore } from "@/stores/matchDetails";
 
-export default {
-  name: "ExploreView",
-  components: { MatchesTable },
-  setup() {
-    document.title = "Matches | csgoWTF";
+document.title = "Matches | csgoWTF";
 
-    const store = useStore();
+const store = useStore();
+const scrollStateStore = useScrollStateStore();
+const matchDetailsStore = useMatchDetailsStore();
 
-    const data = reactive({
-      matches: [],
-    });
+const data = reactive({
+  matches: ([] as Match[]) || null,
+});
 
-    const setMoreMatches = async () => {
-      const res = await LoadMoreMatchesExplore(
-        store,
-        data.matches[data.matches.length - 1].date
-      );
+const setMoreMatches = async () => {
+  const res = await LoadMoreMatchesExplore(
+    matchDetailsStore,
+    data.matches[data.matches.length - 1].date
+  );
 
-      if (res !== null) res.forEach((e) => data.matches.push(e));
+  if (res !== null) res.forEach((e) => data.matches.push(e));
 
-      scrollToPos(window.scrollY);
-
-      // console.log(data.matches)
-    };
-
-    onMounted(async () => {
-      data.matches = await GetMatches(store);
-
-      if (data.matches !== null) {
-        if (data.matches[0].map) {
-          await LoadImage(data.matches[0].map);
-        } else if (
-          !data.matches[0].map &&
-          MatchNotParsedTime(data.matches[0].date) &&
-          data.matches[1].map
-        ) {
-          await LoadImage(data.matches[1].map);
-        } else {
-          await LoadImage("random");
-        }
-      } else {
-        document.querySelector(".bg-img").style.display = "none";
-      }
-
-      scrollToPos(store.state.scroll_state);
-
-      // if (data.matches) {
-      //   console.log(data.matches)
-      // }
-
-      document.getElementById("app").style.background = "rgba(0, 0, 0, .7)";
-      document.querySelector(".bg-img").style.display = "initial";
-    });
-
-    onBeforeUnmount(() => {
-      store.commit("changeScrollState", window.scrollY);
-
-      router.beforeEach((to, from, next) => {
-        if (!to.fullPath.match("/match/") && !from.fullPath.match("/match/")) {
-          store.commit("changeScrollState", 0);
-        }
-        next();
-      });
-    });
-
-    return { data, setMoreMatches, store, scrollToPos };
-  },
+  scrollToPos(window.scrollY);
 };
+
+onMounted(async () => {
+  const res = await GetMatches(matchDetailsStore);
+  if (res !== null) data.matches = res;
+
+  if (data.matches !== null) {
+    if (data.matches[0].map) {
+      await LoadImage(data.matches[0].map);
+    } else if (
+      !data.matches[0].map &&
+      MatchNotParsedTime(data.matches[0].date) &&
+      data.matches[1].map
+    ) {
+      await LoadImage(data.matches[1].map);
+    } else {
+      await LoadImage("random");
+    }
+  } else {
+    const bgImg = document.querySelector(".bg-img") as HTMLImageElement;
+    bgImg.style.display = "none";
+  }
+
+  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";
+});
+
+onBeforeUnmount(() => {
+  scrollStateStore.scrollState = window.scrollY;
+
+  router.beforeEach((to, from, next) => {
+    if (!to.fullPath.match("/match/") && !from.fullPath.match("/match/")) {
+      scrollStateStore.scrollState = 0;
+    }
+    next();
+  });
+});
 </script>
 
 <style lang="scss" scoped>