Auction show loading

src/components/auctions/Index.vue

@@ -3,7 +3,7 @@ import {ref, computed, onMounted, defineProps} from "vue";
 
 import {request} from "../lib/gateway.js";
 import {loadToken} from "../scripts/load_token.js";
-import {setAuction} from "./current_auction_store.js";
+import {setAuctionId} from "./current_auction_store.js";
 
 const pending = Symbol('pending')
 
@@ -40,8 +40,8 @@ const auctionPath = (id) => path + `?id=${id}`
 function navigateToAuction(auction) {
   let {id} = auction
   let path = auctionPath(id)
-  history.pushState({...auction}, null, path)
-  setAuction(auction)
+  history.pushState(id, null, path)
+  setAuctionId(id)
 }
 
 </script>

src/components/auctions/ShowDialog.vue

@@ -1,22 +1,37 @@
 <script setup>
-import {watch, useTemplateRef, onMounted, defineProps} from "vue";
+import {ref, watch, useTemplateRef, onMounted, defineProps} from "vue";
 import {useStore} from "@nanostores/vue";
 
-import {$currentAuction, resetAuction} from "./current_auction_store.js";
+import {request} from "../lib/gateway.js";
+import {loadToken} from "../scripts/load_token.js";
+import {$currentAuctionId, resetAuction} from "./current_auction_store.js";
 
-const currentAuction = useStore($currentAuction)
+const Loading = Symbol("loading")
+
+const currentAuctionId = useStore($currentAuctionId)
+const currentAuction = ref(Loading)
 const dialogRef = useTemplateRef('dialog')
 const {path} = defineProps(['path'])
 
 const showDialog = () => dialogRef.value.showModal()
 
+async function loadAuction() {
+  currentAuction.value = Loading
+  if(currentAuctionId.value == null) return
+
+  const res = await request(`/auctions/${currentAuctionId.value}`, {cors: true, token: loadToken().token})
+  currentAuction.value = await res.json()
+
+  showDialog()
+}
+
 onMounted(() => {
-  if(currentAuction.value !== null) showDialog()
+  if(currentAuctionId.value !== null) loadAuction()
 })
 
-watch(currentAuction,
+watch(currentAuctionId,
     (val, prevVal) => {
-      if (val !== null && prevVal == null) showDialog()
+      if (val !== null && prevVal == null) loadAuction()
       if (val == null) dialogRef.value.close()
     },
     {flush: 'post'})
@@ -24,7 +39,7 @@ watch(currentAuction,
 
 <template>
   <dialog ref="dialog" @close="resetAuction(path)">
-    <div class="card" v-if="currentAuction !== null">
+    <div class="card" v-if="currentAuctionId !== null && currentAuction !== Loading">
       <div class="card-body">
         <h2 class="h5">{{currentAuction.name}}</h2>
         <div class="buttons">

src/components/auctions/current_auction_store.js

@@ -1,12 +1,12 @@
 import { atom } from "nanostores";
 
-export const $currentAuction = atom(null);
+export const $currentAuctionId = atom(null);
 
-export function setAuction(data) {
-    $currentAuction.set(data)
+export function setAuctionId(data) {
+    $currentAuctionId.set(data)
 }
 
 export function resetAuction(path) {
     history.pushState(null, null, path)
-    $currentAuction.set(null)
+    $currentAuctionId.set(null)
 }

src/components/auctions/scripts/current_auction_store_history.js

@@ -1,6 +1,6 @@
-import {setAuction} from "../current_auction_store.js";
+import {setAuctionId} from "../current_auction_store.js";
 
 window.addEventListener('popstate', (event) => {
     let {state} = event
-    setAuction(state)
+    setAuctionId(state)
 })