Simple auctions index

src/components/auctions/Index.vue

@@ -0,0 +1,38 @@
+<script setup>
+import {watchEffect, ref, computed, watch} from "vue";
+  import {request} from "../lib/gateway.js";
+  import {useStore} from '@nanostores/vue'
+  import {$token, Loading, Anonymous} from "../stores/token.js";
+
+  const pending = Symbol('pending')
+
+  const qref = ref(pending)
+  const isPending = computed(() => qref.value === pending)
+  const data = computed(() => qref.value.data)
+
+$token.subscribe(async token => {
+  if (token.token) {
+    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}
+    }
+  }
+})
+
+</script>
+
+<template>
+  <ul v-if="!isPending && data != null && data.length > 0">
+    <li v-for="auction in data" :key="auction.id">
+      <span>{{ auction.name }}</span>
+      <span v-if="auction.current_bid">{{ auction.current_bid }}</span>
+    </li>
+  </ul>
+  <p v-else>No auctions available</p>
+</template>
+
+<style scoped>
+
+</style>

src/components/lib/check_user.js

@@ -0,0 +1,5 @@
+import {$token, Anonymous} from "../stores/token.js";
+
+$token.subscribe(token => {
+        if(token === Anonymous) { location.replace("/login") }
+})

src/components/lib/gateway.js

@@ -1,3 +1,5 @@
+import { ref, computed } from 'vue'
+
 export async function request(path, options) {
     options ||= {}
     if(path.startsWith('/')) {
@@ -9,7 +11,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}` : null
+    const authorization = (options.token) ? `Bearer ${options.token}` : ''
 
     const fetchInit = {
         method: options.method || 'GET',
@@ -24,5 +26,21 @@ export async function request(path, options) {
         }
     }
 
+    // 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/pages/auctions.astro

@@ -0,0 +1,11 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+import Auctions from '../components/auctions/Index.vue'
+---
+
+<Layout title="Auctions">
+    <Auctions client:load />
+
+    <script src="../components/lib/check_user.js"></script>
+</Layout>