Removed the token store

src/components/LoginForm.vue

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

src/components/auctions/Index.vue

@@ -1,30 +1,35 @@
 <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";
+import {ref, computed, onMounted} from "vue";
+import {request} from "../lib/gateway.js";
+import {loadToken} from "../scripts/load_token.js";
 
-  const pending = Symbol('pending')
+const pending = Symbol('pending')
 
-  const qref = ref(pending)
-  const isPending = computed(() => qref.value === pending)
-  const data = computed(() => qref.value.data)
+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}
-    }
+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}
   }
+}
+
+onMounted(async () => {
+  await loadAuctions()
 })
 
 </script>
 
 <template>
-  <ul v-if="!isPending && data != null && data.length > 0">
+  <div class="placeholder" v-if="isPending"></div>
+  <ul v-else-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>

src/components/lib/check_user.js

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

src/components/scripts/load_token.js

@@ -0,0 +1,26 @@
+const LOCAL_STORAGE_KEY="token"
+
+export const Anonymous = Symbol("anonymous")
+class Token {
+    constructor({token, expiresAt}) {
+        this.token = token
+        this.expiresAt = new Date(expiresAt)
+    }
+}
+
+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

@@ -1,17 +0,0 @@
-import {$token, setAnon, setToken} from "../stores/token.js";
-
-const LOCAL_STORAGE_KEY="token"
-
-$token.subscribe(value => {
-    if(value == null || !value.token) return;
-    localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(value)
-})
-
-window.addEventListener('load', () => {
-    let data = localStorage[LOCAL_STORAGE_KEY]
-    if (data == null) { return setAnon() }
-    data = JSON.parse(data)
-    if (data == null || data.token == null) { return setAnon() }
-
-    setToken(data)
-})

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

@@ -1,8 +1,13 @@
 <script setup>
-import {useStore} from '@nanostores/vue'
-import {$token, Loading, Anonymous} from "../stores/token.js";
+import {ref, onMounted} from "vue";
+import {loadToken, Anonymous} from "../scripts/load_token.js";
 
-const token = useStore($token)
+const Loading = Symbol("loading")
+const token = ref(Loading)
+
+onMounted(() => {
+  token.value = loadToken()
+})
 </script>
 
 <template>