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>
 

polylan_submitter/src/components/MarketCard.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue";
-import { polylanSubmitterApiGetUserInfo, marketApiCreateBet, marketApiListUserBets, marketApiCloseMarket, marketApiResolveMarket } from "../api";
+import { storeToRefs } from "pinia";
+import { marketApiCreateBet, marketApiCloseMarket, marketApiResolveMarket } from "../api";
+import { useMarketStore } from "../stores/market";
 import type { Market, MarketOption } from "../types";
-import type { UserInfoOut, UserBetSchema } from "../api/types.gen";
+import type { UserBetSchema } from "../api/types.gen";
 
 const props = defineProps<{
   market: Market;
@@ -12,12 +14,13 @@ const emit = defineEmits<{
   refresh: [];
 }>();
 
+const marketStore = useMarketStore();
+const { userInfo, userBets } = storeToRefs(marketStore);
+
 const selectedOption = ref<string | null>(null);
 const betAmount = ref<number>(0);
 const loading = ref(false);
 const error = ref<string>("");
-const userInfo = ref<UserInfoOut | undefined>();
-const userBets = ref<UserBetSchema[]>([]);
 const existingBet = ref<UserBetSchema | null>(null);
 const showResolveModal = ref(false);
 const selectedWinningOption = ref<string | null>(null);
@@ -139,7 +142,8 @@ const placeBet = async () => {
 
     if (!response.error) {
       // Reload user bets to reflect the new bet
-      await loadUserBets();
+      await marketStore.loadUserBets();
+      updateExistingBet();
       betAmount.value = 0;
     } else {
       const err = response.error as any;
@@ -158,32 +162,20 @@ const placeBet = async () => {
   }
 };
 
-const initializeUserInfo = async () => {
-  const response = await polylanSubmitterApiGetUserInfo();
-  if (response.data) {
-    userInfo.value = response.data;
-  }
-};
+onMounted(() => {
+  // Update existing bet when component mounts or userBets changes
+  updateExistingBet();
+});
 
-const loadUserBets = async () => {
-  const response = await marketApiListUserBets();
-  if (response.data) {
-    userBets.value = response.data;
-    // Find if user has a bet on this market
-    existingBet.value = response.data.find(bet => bet.market?.uuid === props.market.uuid) || null;
+const updateExistingBet = () => {
+  if (userBets.value) {
+    existingBet.value = userBets.value.find(bet => bet.market?.uuid === props.market.uuid) || null;
     if (existingBet.value) {
       selectedOption.value = existingBet.value.option.uuid;
       betAmount.value = existingBet.value.amount;
     }
   }
 };
-
-onMounted(async () => {
-  await initializeUserInfo();
-  if (userInfo.value?.is_authenticated) {
-    await loadUserBets();
-  }
-});
 </script>
 
 <template>

polylan_submitter/src/components/UserBets.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue";
-import { marketApiListUserBets } from "../api";
-import type { UserBetSchema } from "../api/types.gen";
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useMarketStore } from "../stores/market";
 
 defineEmits<{
   refresh: [];
 }>();
 
-const userBets = ref<UserBetSchema[]>([]);
-const loading = ref(true);
+const marketStore = useMarketStore();
+const { userBets } = storeToRefs(marketStore);
+const loading = computed(() => marketStore.isLoading);
 
 const totalBetAmount = computed(() => {
   return userBets.value.reduce((sum, bet) => sum + bet.amount, 0);
@@ -35,14 +36,6 @@ const openBets = computed(() => {
 const totalWinnings = computed(() => {
   return winningBets.value.reduce((sum, bet) => sum + bet.amount, 0);
 });
-
-onMounted(async () => {
-  const response = await marketApiListUserBets();
-  if (response.data) {
-    userBets.value = response.data;
-  }
-  loading.value = false;
-});
 </script>
 
 <template>

polylan_submitter/src/market.ts

@@ -1,8 +1,10 @@
 import { createApp } from 'vue'
 import Market from '@/Market.vue'
+import { pinia } from '@/stores'
 import '@/style.css'
 
 const selector = "#app"
 const mountData = document.querySelector<HTMLElement>(selector)
 const app = createApp(Market, { ...mountData?.dataset })
+app.use(pinia)
 app.mount(selector)

polylan_submitter/src/stores/market.ts

@@ -0,0 +1,94 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { polylanSubmitterApiGetUserInfo, marketApiListMarkets, marketApiListUserBets } from '@/api'
+import type { Market } from '@/types'
+import type { UserInfoOut, UserBetSchema } from '@/api/types.gen'
+
+export const useMarketStore = defineStore('market', () => {
+  // State
+  const markets = ref<Market[]>([])
+  const userInfo = ref<UserInfoOut | undefined>()
+  const userBets = ref<UserBetSchema[]>([])
+  const isLoading = ref(true)
+  const error = ref<string>('')
+
+  // Actions
+  const loadUserInfo = async () => {
+    try {
+      const response = await polylanSubmitterApiGetUserInfo()
+      if (response.data) {
+        userInfo.value = response.data
+      }
+    } catch (err) {
+      error.value = 'Failed to load user info'
+      console.error('Error loading user info:', err)
+    }
+  }
+
+  const loadMarkets = async () => {
+    try {
+      const response = await marketApiListMarkets()
+      if (response.data) {
+        markets.value = response.data as unknown as Market[]
+      }
+    } catch (err) {
+      error.value = 'Failed to load markets'
+      console.error('Error loading markets:', err)
+    }
+  }
+
+  const loadUserBets = async () => {
+    try {
+      const response = await marketApiListUserBets()
+      if (response.data) {
+        userBets.value = response.data
+      }
+    } catch (err) {
+      error.value = 'Failed to load user bets'
+      console.error('Error loading user bets:', err)
+    }
+  }
+
+  const initializeMarketPage = async () => {
+    isLoading.value = true
+    error.value = ''
+
+    try {
+      await Promise.all([
+        loadUserInfo(),
+        loadMarkets(),
+      ])
+
+      // Load user bets if authenticated
+      if (userInfo.value?.is_authenticated) {
+        await loadUserBets()
+      }
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  const refreshPage = async () => {
+    await Promise.all([
+      loadUserInfo(),
+      loadMarkets(),
+      userInfo.value?.is_authenticated ? loadUserBets() : Promise.resolve(),
+    ])
+  }
+
+  return {
+    // State
+    markets,
+    userInfo,
+    userBets,
+    isLoading,
+    error,
+
+    // Actions
+    loadUserInfo,
+    loadMarkets,
+    loadUserBets,
+    initializeMarketPage,
+    refreshPage,
+  }
+})