chore: market app build

polylan_submitter/src/Market.vue

@@ -1,36 +1,23 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { polylanSubmitterApiGetUserInfo, marketApiListMarkets } from "./api";
-import type { UserInfoOut } from "./api/types.gen";
-import type { Market } from "./types";
+import { onMounted } from "vue";
+import { storeToRefs } from "pinia";
+import { useMarketStore } from "./stores/market";
 import MarketCard from "./components/MarketCard.vue";
 import UserBets from "./components/UserBets.vue";
 
-const markets = ref<Market[]>([]);
-const loading = ref(true);
-const userInfo = ref<UserInfoOut | undefined>();
+const marketStore = useMarketStore();
+const { markets, userInfo, isLoading } = storeToRefs(marketStore);
 
 const goHome = () => {
   window.location.href = "/";
 };
 
-const reloadPage = () => {
-  window.location.reload();
+const reloadPage = async () => {
+  await marketStore.refreshPage();
 };
 
-onMounted(async () => {
-  // Fetch user info
-  const userResponse = await polylanSubmitterApiGetUserInfo();
-  if (userResponse.data) {
-    userInfo.value = userResponse.data;
-  }
-
-  // Fetch markets
-  const response = await marketApiListMarkets();
-  if (response.data) {
-    markets.value = response.data as unknown as Market[];
-  }
-  loading.value = false;
+onMounted(() => {
+  marketStore.initializeMarketPage();
 });
 </script>
 
@@ -68,7 +55,7 @@ onMounted(async () => {
       </div>
 
       <!-- Loading -->
-      <div v-if="loading" class="flex justify-center py-20">
+      <div v-if="isLoading" class="flex justify-center py-20">
         <span class="loading loading-spinner loading-lg"></span>
       </div>