From d591b9c859ebad77e7cb9bdca4a63af3df3ab394 Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Tue, 13 May 2025 07:54:05 +0200
Subject: [PATCH] handle having no jwt token

---
 app/pages/index.vue        | 35 ++++++++++++++++++++++++++++++++---
 app/stores/useTagStore.ts  | 16 +++++++++++++---
 app/stores/useTodoStore.ts | 17 ++++++++++++++---
 3 files changed, 59 insertions(+), 9 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 9b2c6b3..8834817 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,16 +1,45 @@
 <script setup lang="ts">
 import Todos from "~/components/todo/Todos.vue";
+import { useLoginToken } from "~/composables/login/useLoginToken";
+
+const token = useLoginToken();
 
 const todoStore = useTodoStore();
 const tagStore = useTagStore();
 
-await callOnce(async () => {
+function initSSE() {
+  todoStore.initSSE();
+  tagStore.initSSE();
+}
+
+async function initData() {
   await Promise.all([todoStore.fetch(), tagStore.fetch()]);
+}
+
+async function init() {
+  initSSE();
+  await initData();
+}
+
+function reset() {
+  todoStore.reset();
+  tagStore.reset();
+}
+
+watch(token, async () => {
+  if (token.value) {
+    init();
+  } else {
+    reset();
+  }
 });
 
 onMounted(() => {
-  todoStore.initSSE();
-  tagStore.initSSE();
+  if (token.value) initSSE();
+});
+
+await callOnce(async () => {
+  if (token.value) await initData();
 });
 </script>
 <template>
diff --git a/app/stores/useTagStore.ts b/app/stores/useTagStore.ts
index 6736894..22ff037 100644
--- a/app/stores/useTagStore.ts
+++ b/app/stores/useTagStore.ts
@@ -2,8 +2,9 @@ import { v4 } from "uuid";
 import type { Tag, UUID } from "~~/shared/types";
 
 export const useTagStore = defineStore("tags", {
-  state: (): { data: Tag[] } => ({
+  state: (): { data: Tag[]; sse: EventSource | undefined } => ({
     data: [],
+    sse: undefined,
   }),
   actions: {
     async fetch() {
@@ -18,15 +19,24 @@ export const useTagStore = defineStore("tags", {
 
       this.data = data;
     },
+    reset() {
+      this.data = [];
+      this.stopSSE();
+    },
 
     async initSSE() {
-      const eventSource = new EventSource("/api/tags/sse");
+      this.stopSSE();
+      this.sse = new EventSource("/api/tags/sse");
 
-      eventSource.onmessage = (event) => {
+      this.sse.onmessage = (event) => {
         const tags = JSON.parse(event.data);
         this.data = tags;
       };
     },
+    stopSSE() {
+      if (!this.sse) return;
+      this.sse.close();
+    },
 
     async deleteTag(uuid: UUID) {
       this.data = this.data.filter((tag) => tag.uuid !== uuid);
diff --git a/app/stores/useTodoStore.ts b/app/stores/useTodoStore.ts
index 8cbb623..9734b33 100644
--- a/app/stores/useTodoStore.ts
+++ b/app/stores/useTodoStore.ts
@@ -3,8 +3,9 @@ import { v4 } from "uuid";
 import type { Todo, TodoData, UUID } from "~~/shared/types";
 
 export const useTodoStore = defineStore("todos", {
-  state: (): { data: Todo[] } => ({
+  state: (): { data: Todo[]; sse: EventSource | undefined } => ({
     data: [],
+    sse: undefined,
   }),
   actions: {
     async fetch() {
@@ -19,14 +20,24 @@ export const useTodoStore = defineStore("todos", {
 
       this.data = data;
     },
+    reset() {
+      this.data = [];
+      this.stopSSE();
+    },
+
     async initSSE() {
-      const eventSource = new EventSource("/api/todos/sse");
+      this.stopSSE();
+      this.sse = new EventSource("/api/todos/sse");
 
-      eventSource.onmessage = (event) => {
+      this.sse.onmessage = (event) => {
         const todos = JSON.parse(event.data);
         this.data = todos;
       };
     },
+    stopSSE() {
+      if (!this.sse) return;
+      this.sse.close();
+    },
 
     async removeTodo(uuid: UUID) {
       this.data = this.data.filter((todo) => todo.uuid !== uuid);
-- 
2.51.2