From 25aec637bbbe78cd518ed6a15d9b90c5ad063faf Mon Sep 17 00:00:00 2001
From: hhvrc <github@heavenvr.tech>
Date: Sat, 9 Nov 2024 23:26:26 +0100
Subject: [PATCH] Create ApiTokenStore

---
 src/lib/stores/ApiTokensStore.ts              | 34 +++++++++++
 src/lib/stores/AuthTokenStore.ts              | 56 -------------------
 src/lib/stores/index.ts                       |  4 +-
 .../settings/api-tokens/+page.svelte          | 32 ++---------
 4 files changed, 40 insertions(+), 86 deletions(-)
 create mode 100644 src/lib/stores/ApiTokensStore.ts
 delete mode 100644 src/lib/stores/AuthTokenStore.ts

diff --git a/src/lib/stores/ApiTokensStore.ts b/src/lib/stores/ApiTokensStore.ts
new file mode 100644
index 0000000..dbdf532
--- /dev/null
+++ b/src/lib/stores/ApiTokensStore.ts
@@ -0,0 +1,34 @@
+import { tokensApi } from "$lib/api";
+import type { TokenResponse } from "$lib/api/internal/v1";
+import { writable } from "svelte/store";
+
+export type ApiToken = TokenResponse;
+
+export const ApiTokensStore = writable<Map<string, ApiToken>>(new Map());
+
+export function refreshApiToken(id: string) {
+  tokensApi.tokensGetTokenById(id)
+    .then((token) => {
+      ApiTokensStore.update((state) => {
+        state.set(token.id, token);
+        return state;
+      });
+    })
+    .catch((error) => {
+      console.error(error); // TODO: Show toast
+    });
+}
+
+export function refreshApiTokens() {
+  tokensApi.tokensListTokens()
+    .then((tokens) => {
+        ApiTokensStore.set(new Map(tokens.map((t) => [t.id, t])));
+    })
+    .catch((error) => {
+      console.error(error); // TODO: Show toast
+    });
+}
+
+export function initializeApiTokenStore() {
+  refreshApiTokens();
+}
diff --git a/src/lib/stores/AuthTokenStore.ts b/src/lib/stores/AuthTokenStore.ts
deleted file mode 100644
index 0887724..0000000
--- a/src/lib/stores/AuthTokenStore.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { AuthToken } from "$lib/types/AuthToken";
-import { writable, type Writable } from "svelte/store";
-
-const LOCALSTORAGE_KEY = "authToken";
-
-const { subscribe, set, update } = writable<AuthToken | null>(null);
-
-function setAll(authToken: AuthToken | null) {
-  if (!authToken) {
-    localStorage.removeItem("authToken");
-    set(null);
-    return;
-  }
-
-  localStorage.setItem("authToken", JSON.stringify(authToken));
-  set(authToken);
-}
-
-function isAuthToken(value: unknown): value is AuthToken {
-  if (typeof value !== "object" || value === null) {
-    return false;
-  }
-
-  const authToken = value as AuthToken;
-  return typeof authToken.token === "string" && typeof authToken.expires === "number";
-}
-
-function updateFromJson(json: string | null) {
-  if (!json) {
-    setAll(null);
-    return;
-  }
-
-  const authToken = JSON.parse(json);
-  if (!isAuthToken(authToken)) {
-    console.error("Invalid auth token, clearing localStorage");
-    setAll(null);
-    return;
-  }
-
-  setAll(authToken);
-}
-
-export const authTokenStore: Writable<AuthToken | null> = {
-  subscribe,
-  set: setAll,
-  update,
-};
-
-export function initializeAuthTokenStore() {
-  window.addEventListener("storage", (event) => {
-    if (event.storageArea === localStorage && event.key === LOCALSTORAGE_KEY) {
-      updateFromJson(event.newValue);
-    }
-  });
-}
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index 8b23e7a..87ae48f 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -1,4 +1,4 @@
-import { initializeAuthTokenStore } from "./AuthTokenStore";
+import { initializeApiTokenStore } from "./ApiTokensStore";
 import { initializeDarkModeStore } from "./ColorSchemeStore";
 import { initializeDevicesStore } from "./DevicesStore";
 import { initializeFlashManagersStore } from "./FlashManagersStore";
@@ -9,7 +9,7 @@ import { browser } from '$app/environment';
 export function initializeStores() {
   if (!browser) return;
 
-  initializeAuthTokenStore();
+  initializeApiTokenStore
   initializeDarkModeStore();
   initializeDevicesStore();
   initializeFlashManagersStore();
diff --git a/src/routes/(authenticated)/settings/api-tokens/+page.svelte b/src/routes/(authenticated)/settings/api-tokens/+page.svelte
index 922f305..6f7d41e 100644
--- a/src/routes/(authenticated)/settings/api-tokens/+page.svelte
+++ b/src/routes/(authenticated)/settings/api-tokens/+page.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
-  import { tokensApi } from '$lib/api';
   import type { TokenResponse } from '$lib/api/internal/v1';
   import Button from '$lib/components/ui/button/button.svelte';
   import * as Card from '$lib/components/ui/card';
-  import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import { onMount } from 'svelte';
   import { columns, type ApiToken } from './columns';
   import DataTable from './data-table.svelte';
   import TokenGenerateDialog from './dialog-token-generate.svelte';
 
   import RotateCcw from 'lucide-svelte/icons/rotate-ccw';
+  import { refreshApiToken, refreshApiTokens } from '$lib/stores/ApiTokensStore';
 
   function apiTokenToTableToken(user: TokenResponse): ApiToken {
     return {
@@ -25,30 +24,7 @@
   let data = $state<ApiToken[]>([]);
   let showGenerateTokenModal = $state<boolean>(false);
 
-  function refreshToken(id: string) {
-    tokensApi
-      .tokensGetTokenById(id)
-      .then((response) => {
-        const index = data.findIndex((t) => t.id === id);
-        if (index >= 0) {
-          data[index] = apiTokenToTableToken(response);
-          data = Object.assign([], data); // Force update
-        } else {
-          data = [...data, apiTokenToTableToken(response)];
-        }
-      })
-      .catch(handleApiError);
-  }
-  function refreshTokens() {
-    tokensApi
-      .tokensListTokens()
-      .then((response) => {
-        data = response.map(apiTokenToTableToken);
-      })
-      .catch(handleApiError);
-  }
-
-  onMount(refreshTokens);
+  onMount(refreshApiTokens);
 
   setInterval(() => {
     data = Object.assign([], data); // Force update
@@ -57,7 +33,7 @@
 
 <TokenGenerateDialog
   open={showGenerateTokenModal}
-  onGenerated={(id) => refreshToken(id)}
+  onGenerated={(id) => refreshApiToken(id)}
   onClose={() => (showGenerateTokenModal = false)}
 />
 
@@ -65,7 +41,7 @@
   <Card.Header>
     <Card.Title class="text-3xl flex items-center space-x-2 justify-between">
       API Tokens
-      <Button class="btn variant-filled-primary" onclick={refreshTokens}>
+      <Button class="btn variant-filled-primary" onclick={refreshApiTokens}>
         <RotateCcw />
         <span> Refresh </span>
       </Button>