fix: use vue-query; make less useless api call

polylan_submitter/src/Submissions.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed } from "vue";
 import { useRouter } from "vue-router";
-import { storeToRefs } from "pinia";
 import { useI18n } from "vue-i18n";
 import { useTitle } from "@vueuse/core";
-import { useUserStore } from "@/stores/user";
+import { useQueryClient } from "@tanstack/vue-query";
+import { useUser } from "@/composables/useUser";
+import { eventGamesQuery } from "@/queries";
 import { usePageHeaderStore } from "@/stores/pageHeader";
-import { gamesApiListEventGames, submissionsApiListAvailableScopes, submissionsApiCreateSubmission, submissionsApiListUserSubmissions, submissionsApiCreateImageCrop, submissionsApiDeleteImageCrop, submissionsApiProcessFileOcr, submissionsApiProcessCropOcr } from "@/api";
+import { submissionsApiListAvailableScopes, submissionsApiCreateSubmission, submissionsApiListUserSubmissions, submissionsApiCreateImageCrop, submissionsApiDeleteImageCrop, submissionsApiProcessFileOcr, submissionsApiProcessCropOcr } from "@/api";
 import { useSubmissionsWebSocket } from "@/composables/useSubmissionsWebSocket";
 import { provideEventPath } from "@/composables/useEventPath";
 
@@ -31,8 +32,8 @@ const gameSteamId = ref("");
 
 useTitle(computed(() => t("submissions.pageTitle", { game: gameName.value, scope: scopeName.value })));
 
-const userStore = useUserStore();
-const { userInfo } = storeToRefs(userStore);
+const queryClient = useQueryClient();
+const userInfo = useUser();
 
 const uploadedFiles = ref<File[]>([]);
 const isDragover = ref(false);
@@ -503,17 +504,16 @@ const handlePasteOnUploadArea = (event: ClipboardEvent) => {
 };
 
 onMounted(async () => {
-  userStore.loadUserData();
   loadUserSubmissions();
 
-  const [gamesResponse, scopesResponse] = await Promise.all([
-    gamesApiListEventGames({ path: { event_path: props.eventPath } }),
+  const [games, scopesResponse] = await Promise.all([
+    queryClient.ensureQueryData(eventGamesQuery(props.eventPath)),
     submissionsApiListAvailableScopes({
       path: { event_path: props.eventPath, game_path: props.gamePath },
     }),
   ]);
 
-  const game = gamesResponse.data?.find((g) => g.path === props.gamePath);
+  const game = games.find((g) => g.path === props.gamePath);
   if (game) {
     gameName.value = game.name;
     gameImage.value = game.image ?? "";