(WIP) Auction show

package.json

@@ -9,11 +9,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/vue": "^7.0.2",
+    "@astrojs/vue": "^5.1.3",
     "@nanostores/vue": "^1.0.1",
-    "astro": "^7.2.10",
+    "astro": "^5.16.6",
     "nanostores": "^1.1.0",
-    "vue": "^3.5.42"
+    "vue": "^3.5.26"
   },
   "devDependencies": {
     "@nanostores/logger": "^1.0.0"

src/components/LoginForm.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {ref} from "vue";
-import {setToken} from "./stores/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)
-    setToken(responseData)
+    setLoggedInUser(responseData.token, responseData.expiresAt)
   }
 }
 </script>

src/components/TopNav.astro

@@ -9,7 +9,7 @@ import UserAction from './top_nav/UserAction.vue'
         <li><Link href="/auctions">Auctions</Link></li>
     </ul>
     <ul class="right">
-        <li><UserAction client:only /></li>
+        <li><UserAction client:load /></li>
     </ul>
 </nav>
 

src/components/auctions/Index.vue

@@ -1,38 +1,31 @@
 <script setup>
-import {watchEffect, ref, computed, watch} from "vue";
+import {ref, watch} from 'vue'
-  import {request} from "../lib/gateway.js";
 import {useStore} from '@nanostores/vue'
-  import {$token, Loading, Anonymous} from "../stores/token.js";
+import {$user} from '../stores/user'
+import * as gateway from '../lib/gateway.js'
 
-  const pending = Symbol('pending')
+const user = useStore($user)
+const auctions = ref([])
 
-  const qref = ref(pending)
+watch(user, async (userVal) => {
-  const isPending = computed(() => qref.value === pending)
+  if(userVal == null) return;
-  const data = computed(() => qref.value.data)
 
-$token.subscribe(async token => {
+  const response = await gateway.request('/auctions',
-  if (token.token) {
+      {cors: true, token: userVal.token, searchParams: {page: 1, per: 50}}
-    try {
+  )
-      let response = await request("/auctions", {cors: true, token: token.token})
+
-      qref.value = {error: null, headers: response.headers, data: await response.json()}
+  if (response.ok) {
-    } catch (error) {
+    auctions.value = await response.json()
-      qref.value = {error}
   }
-  }
+}, {immediate: true})
-})
 
 </script>
 
 <template>
-  <ul v-if="!isPending && data != null && data.length > 0">
+  <ul>
-    <li v-for="auction in data" :key="auction.id">
+    <li v-for="auction in auctions" :key="auction.id">
-      <span>{{ auction.name }}</span>
+      <h3>{{ auction.summary }}</h3>
-      <span v-if="auction.current_bid">{{ auction.current_bid }}</span>
+      <a :href="`/auctions/auction?id=${auction.id}`">See more</a>
     </li>
   </ul>
-  <p v-else>No auctions available</p>
 </template>
-
-<style scoped>
-
-</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/lib/check_user.js

@@ -1,5 +0,0 @@
-import {$token, Anonymous} from "../stores/token.js";
-
-$token.subscribe(token => {
-        if(token === 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/user_store.js

@@ -1,17 +1,18 @@
-import {$token, setAnon, setToken} from "../stores/token.js";
+import {$user, setAnonUser, setLoggedInUser} from "../stores/user.js";
 
-const LOCAL_STORAGE_KEY="token"
+const LOCAL_STORAGE_KEY="user"
 
-$token.subscribe(value => {
+$user.subscribe(value => {
-    if(value == null || !value.token) return;
+    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 setAnon() }
+    if (data == null) { return setAnonUser() }
     data = JSON.parse(data)
-    if (data == null || data.token == null) { return setAnon() }
+    if (data == null || data.token == null) { return setAnonUser() }
+    if(Date.parse(data.expiresAt) < Date()) { return setAnonUser() }
 
-    setToken(data)
+    setLoggedInUser(data.token, data.expiresAt)
 })

src/components/stores/token.js

@@ -1,23 +0,0 @@
-import { atom } from 'nanostores'
-
-export const Loading = Symbol("loading")
-export const Anonymous = Symbol("anonymous")
-class Token {
-    constructor({token, expiresAt}) {
-        this.token = token
-        this.expiresAt = new Date(expiresAt)
-    }
-}
-
-export const $token = atom(Loading)
-
-export function setAnon() {
-    $token.set(Anonymous)
-}
-
-export function setToken(data) {
-    let token = new Token(data)
-    if(token.expiresAt >= new Date()) {
-        $token.set(token)
-    } else { setAnon() }
-}

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/UserAction.vue

@@ -1,14 +1,14 @@
 <script setup>
 import {useStore} from '@nanostores/vue'
-import {$token, Loading, Anonymous} from "../stores/token.js";
+import {$user} from "../stores/user.js";
 
-const token = useStore($token)
+const user = useStore($user)
 </script>
 
 <template>
-  <div v-if="token === Loading" class="placeholder"></div> <!-- TODO: replace with an actual placeholder -->
+  <div v-if="!user.initialized" class="placeholder"></div> <!-- TODO: replace with an actual placeholder -->
-  <a href="/login" v-else-if="token === Anonymous">Login</a>
+  <a href="/login" v-else-if="!user.loggedIn">Login</a>
-  <span v-else>{{ token.username || "Username" }}</span>
+  <span v-else>{{ user.username || "Username" }}</span>
 </template>
 
 <style scoped>

src/layouts/Layout.astro

@@ -25,9 +25,9 @@ const {title} = Astro.props
         {import.meta.env.DEV &&
             <script>
                 import {logger} from '@nanostores/logger'
-                import {$token} from "../components/stores/token";
+                import {$user} from "../components/stores/user";
 
-                let _destroy = logger({user: $token})
+                let _destroy = logger({user: $user})
                 </script>
         }
     </body>

src/pages/auctions.astro

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

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>