From d335277352488f15e28a6f9470f545f158cc71a2 Mon Sep 17 00:00:00 2001
From: SebClem <seb6596@gmail.com>
Date: Wed, 26 Oct 2022 11:41:08 +0200
Subject: [PATCH] :hammer: Add message id + refresh messages

---
 .../backend/src/tools/messageManager.ts       |  2 ++
 nextcloud_backup/backend/src/types/message.ts |  1 +
 .../frontend/src/components/MessageBar.vue    | 20 +++++++++++++------
 .../frontend/src/types/messages.ts            |  1 +
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/nextcloud_backup/backend/src/tools/messageManager.ts b/nextcloud_backup/backend/src/tools/messageManager.ts
index 5b3d6af..b0915ad 100644
--- a/nextcloud_backup/backend/src/tools/messageManager.ts
+++ b/nextcloud_backup/backend/src/tools/messageManager.ts
@@ -1,3 +1,4 @@
+import { randomUUID } from "crypto";
 import { DateTime } from "luxon";
 import { Message, MessageType } from "../types/message.js";
 
@@ -8,6 +9,7 @@ class MessageManager {
 
   public addMessage(type: MessageType, message: string, detail?: string, isImportant = false) {
     this.messages.push({
+      id: randomUUID(),
       message: message,
       type: type,
       time: DateTime.now(),
diff --git a/nextcloud_backup/backend/src/types/message.ts b/nextcloud_backup/backend/src/types/message.ts
index 859636e..cff0e96 100644
--- a/nextcloud_backup/backend/src/types/message.ts
+++ b/nextcloud_backup/backend/src/types/message.ts
@@ -9,6 +9,7 @@ export enum MessageType {
 
 
 export interface Message {
+  id: string;
   time: DateTime;
   type: MessageType;
   message: string;
diff --git a/nextcloud_backup/frontend/src/components/MessageBar.vue b/nextcloud_backup/frontend/src/components/MessageBar.vue
index 3a40f78..519e73f 100644
--- a/nextcloud_backup/frontend/src/components/MessageBar.vue
+++ b/nextcloud_backup/frontend/src/components/MessageBar.vue
@@ -9,7 +9,7 @@
       <v-divider></v-divider>
       <v-responsive max-height="350px" class="overflow-y-auto">
         <v-list class="py-0">
-          <template v-for="(item, index) in messages" :key="item.message">
+          <template v-for="(item, index) in messages" :key="item.id">
             <v-divider v-if="index != 0"></v-divider>
             <v-list-item :class="{ 'bg-brown-darken-4': !item.viewed }">
               <v-list-item-title>
@@ -69,13 +69,17 @@
 import { getMessages } from "@/services/messageService";
 import { MessageType, type Message } from "@/types/messages";
 import { DateTime } from "luxon";
-import { ref } from "vue";
+import { onBeforeUnmount, ref } from "vue";
 
 const messages = ref<Message[]>([]);
 
-getMessages().then((values) => {
-  messages.value = values;
-});
+const interval = setInterval(refreshMessages, 1000);
+
+function refreshMessages() {
+  getMessages().then((values) => {
+    messages.value = values;
+  });
+}
 
 function getMessageColor(messageType: MessageType) {
   switch (messageType) {
@@ -132,6 +136,10 @@ function getTimeDelta(time: string) {
     } as any);
   }
 }
-
 const show = ref<boolean[]>([]);
+refreshMessages();
+
+onBeforeUnmount(() => {
+  clearInterval(interval);
+});
 </script>
diff --git a/nextcloud_backup/frontend/src/types/messages.ts b/nextcloud_backup/frontend/src/types/messages.ts
index 192a5a0..ad67d52 100644
--- a/nextcloud_backup/frontend/src/types/messages.ts
+++ b/nextcloud_backup/frontend/src/types/messages.ts
@@ -8,6 +8,7 @@ export enum MessageType {
 }
 
 export interface Message {
+  id: string;
   time: string;
   type: MessageType;
   message: string;