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>