Auction show loading

src/components/auctions/Index.vue

@@ -1,7 +1,9 @@
 <script setup>
-import {ref, computed, onMounted} from "vue";
+import {ref, computed, onMounted, defineProps} from "vue";
+
 import {request} from "../lib/gateway.js";
 import {loadToken} from "../scripts/load_token.js";
+import {setAuctionId} from "./current_auction_store.js";
 
 const pending = Symbol('pending')
 
@@ -9,6 +11,8 @@ const qref = ref(pending)
 const isPending = computed(() => qref.value === pending)
 const data = computed(() => qref.value.data)
 
+const {path} = defineProps(['path'])
+
 async function loadAuctions() { // TODO: add params
   let token = loadToken()
   if(!token.token) return;
@@ -30,6 +34,16 @@ function formatPrice(price) {
 
   return fmt.format(price)
 }
+
+const auctionPath = (id) => path + `?id=${id}`
+
+function navigateToAuction(auction) {
+  let {id} = auction
+  let path = auctionPath(id)
+  history.pushState(id, null, path)
+  setAuctionId(id)
+}
+
 </script>
 
 <template>
@@ -40,8 +54,10 @@ function formatPrice(price) {
   <div v-else-if="!isPending && data != null && data.length > 0" class="auctions-section" role="list">
     <div v-for="auction in data" :key="auction.id" class="card" role="listitem">
       <div class="card-body">
-        <h2 class="h5">{{ auction.name }}</h2>
-        <p class="text-end">{{ formatPrice(auction.current_bid || auction.starting_price) }}</p>
+        <h2 class="h5">
+          <a :href="auctionPath(auction.id)" @click.prevent="navigateToAuction(auction)">{{ auction.name }}</a>
+        </h2>
+        <p class="text-end">{{ formatPrice(auction.currentBid || auction.startingPrice) }}</p>
       </div>
     </div>
   </div>

src/components/auctions/ShowDialog.vue

@@ -0,0 +1,60 @@
+<script setup>
+import {ref, watch, useTemplateRef, onMounted, defineProps} from "vue";
+import {useStore} from "@nanostores/vue";
+
+import {request} from "../lib/gateway.js";
+import {loadToken} from "../scripts/load_token.js";
+import {$currentAuctionId, resetAuction} from "./current_auction_store.js";
+
+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(currentAuctionId.value !== null) loadAuction()
+})
+
+watch(currentAuctionId,
+    (val, prevVal) => {
+      if (val !== null && prevVal == null) loadAuction()
+      if (val == null) dialogRef.value.close()
+    },
+    {flush: 'post'})
+</script>
+
+<template>
+  <dialog ref="dialog" @close="resetAuction(path)">
+    <div class="card" v-if="currentAuctionId !== null && currentAuction !== Loading">
+      <div class="card-body">
+        <h2 class="h5">{{currentAuction.name}}</h2>
+        <div class="buttons">
+          <button type="button" class="btn btn-primary">Bid</button>
+          <button type="button" class="btn btn-outline-secondary" @click="$el.close()">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<style scoped>
+dialog {
+  /* TODO: maybe make it global */
+  min-width: min(90vw, 20rem);
+  padding: 0;
+}
+</style>

src/components/auctions/current_auction_store.js

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

src/components/auctions/scripts/current_auction_store_history.js

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

src/components/scripts/load_token.js

@@ -2,9 +2,10 @@ const LOCAL_STORAGE_KEY="token"
 
 export const Anonymous = Symbol("anonymous")
 class Token {
-    constructor({token, expiresAt}) {
+    constructor({token, expiresAt, userId}) {
         this.token = token
         this.expiresAt = new Date(expiresAt)
+        this.userId = userId
     }
 }
 

src/components/top_nav/UserAction.vue

@@ -1,22 +1,31 @@
 <script setup>
 import {ref, onMounted} from "vue";
 import {loadToken, Anonymous} from "../scripts/load_token.js";
+import {request} from "../lib/gateway.js";
 
 const Loading = Symbol("loading")
 const token = ref(Loading)
+const userData = ref(Loading)
 
-onMounted(() => {
-  token.value = loadToken()
+onMounted(async () => {
+  let tokenData = loadToken()
+  token.value = tokenData
+  if(tokenData !== Anonymous) {
+    let response = await request("/user_data", {cors: true, token: tokenData.token})
+    userData.value = await response.json()
+  } else {
+    userData.value = null
+  }
 })
 </script>
 
 <template>
   <li :class="['nav-item', {'dropdown': (token !== Loading && token !== Anonymous)}]">
-    <div v-if="token === Loading" class="placeholder"></div>
+    <div v-if="token === Loading || userData === Loading" class="placeholder"></div>
     <a v-else-if="token === Anonymous" class="nav-link" href="/login">Login</a>
     <template v-else>
       <a href="#" class="btn btn-secondary dropdown-toggle" role="button"
-         data-bs-toggle="dropdown">{{ token.username || "Username" }}</a>
+         data-bs-toggle="dropdown">{{ userData.username || "Username" }}</a>
       <ul class="dropdown-menu dropdown-menu-end">
         <li><a href="#" class="dropdown-item">Logout</a></li>
       </ul>

src/pages/auctions.astro

@@ -2,10 +2,13 @@
 import Layout from '../layouts/Layout.astro';
 
 import Auctions from '../components/auctions/Index.vue'
+import AuctionShowDialog from '../components/auctions/ShowDialog.vue'
 ---
 
 <Layout title="Auctions">
-    <Auctions client:load />
+    <Auctions path={ Astro.url.pathname } client:load />
+    <AuctionShowDialog path={ Astro.url.pathname } client:load />
 
     <script src="../components/lib/check_user.js"></script>
+    <script src="../components/auctions/scripts/current_auction_store_history.js"></script>
 </Layout>