(WIP) Auction show

astro.config.mjs

@@ -5,18 +5,5 @@ import vue from '@astrojs/vue';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [vue()],
+  integrations: [vue()]
-  vite: {
-    css: {
-      preprocessorOptions: {
-        scss: {
-          quietDeps: true,
-          silenceDeprecations: [
-            // For Bootstrap
-            'import',
-          ],
-        }
-      }
-    }
-  }
 });

package.json

@@ -9,14 +9,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/vue": "^7.0.2",
+    "@astrojs/vue": "^5.1.3",
     "@nanostores/vue": "^1.0.1",
-    "@popperjs/core": "^2.11.8",
+    "astro": "^5.16.6",
-    "astro": "^7.2.10",
-    "bootstrap": "^5.3.8",
     "nanostores": "^1.1.0",
-    "sass-embedded": "^1.104.0",
+    "vue": "^3.5.26"
-    "vue": "^3.5.42"
   },
   "devDependencies": {
     "@nanostores/logger": "^1.0.0"

src/components/LoginForm.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {ref} from "vue";
-import {saveToken} from "./scripts/load_token.js";
+import {setLoggedInUser} from "./stores/user.js";
 import * as gateway from "./lib/gateway.js";
 
 const formData = ref({username: '', password: ''})
@@ -17,7 +17,7 @@ async function formSubmit() {
   if(response.status === 200) {
     const responseData = await response.json()
     console.log(responseData)
-    saveToken(responseData)
+    setLoggedInUser(responseData.token, responseData.expiresAt)
   }
 }
 </script>

src/components/TopNav.astro

@@ -3,15 +3,34 @@ import Link from './top_nav/Link.astro'
 import UserAction from './top_nav/UserAction.vue'
 ---
 
-<nav class="navbar navbar-expand bg-primary-subtle">
+<nav>
-    <div class="container-fluid">
+    <a class="brand" href="/">NV</a>
-        <a class="brand p-2" href="/">NV</a>
+    <ul class="center">
-
+        <li><Link href="/auctions">Auctions</Link></li>
-        <ul class="navbar-nav me-auto">
+    </ul>
-            <li class="nav-item"><Link href="/auctions">Auctions</Link></li>
+    <ul class="right">
-        </ul>
+        <li><UserAction client:load /></li>
-        <ul class="navbar-nav">
+    </ul>
-            <UserAction client:load />
-        </ul>
-    </div>
 </nav>
+
+<style>
+    nav {
+        display: flex;
+        flex-flow: row nowrap;
+        width: 100%;
+
+        > ul {
+            list-style: none;
+            display: flex;
+            flex-flow: row nowrap;
+        }
+
+        > .center {
+            margin-inline: auto;
+        }
+
+        > .right {
+            margin-left: auto;
+        }
+    }
+</style>

src/components/auctions/Index.vue

@@ -1,73 +1,31 @@
 <script setup>
-import {ref, computed, onMounted, defineProps} from "vue";
+import {ref, watch} from 'vue'
+import {useStore} from '@nanostores/vue'
+import {$user} from '../stores/user'
+import * as gateway from '../lib/gateway.js'
 
-import {request} from "../lib/gateway.js";
+const user = useStore($user)
-import {loadToken} from "../scripts/load_token.js";
+const auctions = ref([])
-import {setAuctionId} from "./current_auction_store.js";
 
-const pending = Symbol('pending')
+watch(user, async (userVal) => {
+  if(userVal == null) return;
 
-const qref = ref(pending)
+  const response = await gateway.request('/auctions',
-const isPending = computed(() => qref.value === pending)
+      {cors: true, token: userVal.token, searchParams: {page: 1, per: 50}}
-const data = computed(() => qref.value.data)
+  )
 
-const {path} = defineProps(['path'])
+  if (response.ok) {
-
+    auctions.value = await response.json()
-async function loadAuctions() { // TODO: add params
-  let token = loadToken()
-  if(!token.token) return;
-
-  try {
-    let response = await request("/auctions", {cors: true, token: token.token})
-    qref.value = {error: null, headers: response.headers, data: await response.json()}
-  } catch (error) {
-    qref.value = {error}
   }
-}
+}, {immediate: true})
-
-onMounted(async () => {
-  await loadAuctions()
-})
-
-function formatPrice(price) {
-  const fmt = new Intl.NumberFormat("en-US", {style: "currency", currency: "USD"}) // TODO: maybe load currency from backend or env
-
-  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>
-  <template v-if="isPending">
+  <ul>
-    <div class="spinner-border me-1" role="status"></div>
+    <li v-for="auction in auctions" :key="auction.id">
-    <span>Loading…</span>
+      <h3>{{ auction.summary }}</h3>
-  </template>
+      <a :href="`/auctions/auction?id=${auction.id}`">See more</a>
-  <div v-else-if="!isPending && data != null && data.length > 0" class="auctions-section" role="list">
+    </li>
-    <div v-for="auction in data" :key="auction.id" class="card" role="listitem">
+  </ul>
-      <div class="card-body">
-        <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>
-  <p v-else>No auctions available</p>
 </template>
-
-<style scoped>
-.auctions-section {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
-  gap: 1em;
-}
-</style>

src/components/auctions/Show.vue

@@ -0,0 +1,17 @@
+<script setup>
+  import {useStore} from "@nanostores/vue";
+  import {$user} from "../stores/user.js";
+
+  const id = new URL(location).searchParams.get("id")
+</script>
+
+<template>
+  <template v-if="id">
+    <span>{{ id }}</span>
+  </template>
+  <div v-else>ERROR</div>
+</template>
+
+<style scoped>
+
+</style>

src/components/auctions/ShowDialog.vue

@@ -1,60 +0,0 @@
-<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

@@ -1,12 +0,0 @@
-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

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

src/components/lib/check_user.js

@@ -1,3 +0,0 @@
-import {loadToken, Anonymous} from "../scripts/load_token.js";
-
-if(loadToken() === Anonymous) { location.replace("/login") }

src/components/lib/gateway.js

@@ -1,5 +1,3 @@
-import { ref, computed } from 'vue'
-
 export async function request(path, options) {
     options ||= {}
     if(path.startsWith('/')) {
@@ -11,7 +9,7 @@ export async function request(path, options) {
     searchParams.forEach((v, k) => url.searchParams.append(k, v))
 
     const safeFetch = (options.method === 'GET') || (options.method === 'HEAD')
-    const authorization = (options.token) ? `Bearer ${options.token}` : ''
+    const authorization = (options.token) ? `Bearer ${options.token}` : null
 
     const fetchInit = {
         method: options.method || 'GET',
@@ -21,26 +19,9 @@ export async function request(path, options) {
         headers: {
             'Content-Type': options.contentType ||
                 (safeFetch ? null : 'application/json'),
-            'X-Requested-With': 'fetch',
             'Authorization': authorization
         }
     }
 
-    // TODO: add processing for 4xx and 5xx
     return await fetch(url, fetchInit)
 }
-
-const Pending = Symbol('pending')
-
-export function useRequest(path, options) {
-    let responseRef = ref(Pending)
-    request(path, options).then(e => responseRef.value = {error: null, headers: e.headers, data: e.json()})
-        .catch(reason => responseRef.value = {error: reason})
-
-    return {
-        isPending: computed(() => responseRef.value === Pending),
-        data: computed(() => responseRef.value.data),
-        error: computed(() => responseRef.value.error),
-        rref: responseRef
-    }
-}

src/components/scripts/load_bootstrap.js

@@ -1 +0,0 @@
-import * as bootstrap from 'bootstrap'

src/components/scripts/load_token.js

@@ -1,27 +0,0 @@
-const LOCAL_STORAGE_KEY="token"
-
-export const Anonymous = Symbol("anonymous")
-class Token {
-    constructor({token, expiresAt, userId}) {
-        this.token = token
-        this.expiresAt = new Date(expiresAt)
-        this.userId = userId
-    }
-}
-
-export function loadToken() {
-    let data = localStorage[LOCAL_STORAGE_KEY]
-    if (data == null) { return Anonymous }
-    data = JSON.parse(data)
-    if (data == null || data.token == null) { return Anonymous }
-
-    let token = new Token(data)
-    if(token.expiresAt < new Date()) { return Anonymous }
-
-    return token
-}
-
-export function saveToken(value) {
-    if(value == null || !value.token) return;
-    localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(value)
-}

src/components/scripts/user_store.js

@@ -0,0 +1,18 @@
+import {$user, setAnonUser, setLoggedInUser} from "../stores/user.js";
+
+const LOCAL_STORAGE_KEY="user"
+
+$user.subscribe(value => {
+    if(value == null || !value.initialized) return;
+    localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(value)
+})
+
+window.addEventListener('load', () => {
+    let data = localStorage[LOCAL_STORAGE_KEY]
+    if (data == null) { return setAnonUser() }
+    data = JSON.parse(data)
+    if (data == null || data.token == null) { return setAnonUser() }
+    if(Date.parse(data.expiresAt) < Date()) { return setAnonUser() }
+
+    setLoggedInUser(data.token, data.expiresAt)
+})

src/components/stores/user.js

@@ -0,0 +1,11 @@
+import { atom } from 'nanostores'
+
+export const $user = atom({})
+
+export function setAnonUser() {
+    $user.set({initialized: true})
+}
+
+export function setLoggedInUser(token, expiresAt) {
+    $user.set({initialized: true, loggedIn: true, token: token, expiresAt: expiresAt})
+}

src/components/top_nav/Link.astro

@@ -3,6 +3,6 @@ const {href} = Astro.props
 const isActive = Astro.url.pathname.startsWith(href)
 ---
 
-<a class:list={["nav-link", {active: isActive}]} href={href}>
+<a class:list={[{active: isActive}]} href={href}>
     <slot></slot>
 </a>

src/components/top_nav/UserAction.vue

@@ -1,41 +1,21 @@
 <script setup>
-import {ref, onMounted} from "vue";
+import {useStore} from '@nanostores/vue'
-import {loadToken, Anonymous} from "../scripts/load_token.js";
+import {$user} from "../stores/user.js";
-import {request} from "../lib/gateway.js";
 
-const Loading = Symbol("loading")
+const user = useStore($user)
-const token = ref(Loading)
-const userData = ref(Loading)
-
-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="!user.initialized" class="placeholder"></div> <!-- TODO: replace with an actual placeholder -->
-    <div v-if="token === Loading || userData === Loading" class="placeholder"></div>
+  <a href="/login" v-else-if="!user.loggedIn">Login</a>
-    <a v-else-if="token === Anonymous" class="nav-link" href="/login">Login</a>
+  <span v-else>{{ user.username || "Username" }}</span>
-    <template v-else>
-      <a href="#" class="btn btn-secondary dropdown-toggle" role="button"
-         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>
-    </template>
-  </li>
 </template>
 
 <style scoped>
-.placeholder {
+  .placeholder {
-  display: inline-block;
+    display: inline-block;
-  width: 2em;
+    width: 2em;
-}
+    height: 1em;
+    background: gray;
+  }
 </style>

src/layouts/Layout.astro

@@ -1,6 +1,5 @@
 ---
-import '../styles/app.scss'
+import '../styles/app.css'
-
 import TopNav from '../components/TopNav.astro'
 
 const {title} = Astro.props
@@ -14,22 +13,21 @@ const {title} = Astro.props
         <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
         <meta name="generator" content={Astro.generator}/>
         <title>Neon Vertigo</title>
-        <script src="../components/scripts/load_bootstrap.js"></script>
+        <script src="../components/scripts/user_store.js"></script>
     </head>
     <body>
         <header>
             <TopNav />
         </header>
-        <main class="container">
+        <h1>{title}</h1>
-            <h1>{title}</h1>
+        <slot/>
-            <slot/>
-        </main>
 
         {import.meta.env.DEV &&
             <script>
                 import {logger} from '@nanostores/logger'
+                import {$user} from "../components/stores/user";
 
-                let _destroy = logger({})
+                let _destroy = logger({user: $user})
                 </script>
         }
     </body>

src/pages/auctions.astro

@@ -1,14 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-
-import Auctions from '../components/auctions/Index.vue'
-import AuctionShowDialog from '../components/auctions/ShowDialog.vue'
----
-
-<Layout title="Auctions">
-    <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>

src/pages/auctions/auction.astro

@@ -0,0 +1,8 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import AuctionShow from "../../components/auctions/Show.vue"
+---
+
+<Layout title="See auction">
+    <AuctionShow client:only />
+</Layout>

src/pages/auctions/index.astro

@@ -0,0 +1,8 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import AuctionsIndex from '../../components/auctions/Index.vue'
+---
+
+<Layout title="Auctions">
+	<AuctionsIndex client:load />
+</Layout>

src/styles/app.css

@@ -0,0 +1,14 @@
+@layer reset, base, components;
+
+@layer reset {
+    html, body {
+        margin: 0;
+        min-height: 100%;
+    }
+}
+
+@layer base {
+    body {
+        font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
+    }
+}

src/styles/app.scss

@@ -1,7 +0,0 @@
-@import "bootstrap/scss/bootstrap";
-
-/* Minor adjustments */
-
-.card-body > p:last-child {
-  margin-bottom: 0;
-}