save messages on window close

src/views/messenger.vue

@@ -10,56 +10,70 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, onMounted, onUnmounted } from "vue";
-import { RenderMessage , Annotation } from "@/types/message/index";
-
+import { defineComponent, ref, onMounted, onUnmounted } from "vue";
 import MessageItem from "@/components/messageItem.vue";
 import InputItem from "@/components/inputItem/inputItem.vue";
 import Settings from "@/components/settings.vue";
-
 import useMitt from "@/modules/mitt";
+import { useRouter } from "vue-router";
+import { useAuth } from "@/modules/auth";
+import  { useIpc } from "@/modules/ipc";
+import useMessages from '@/modules/messages';
 
 export default defineComponent({
   name: "Messenger",
-
   components: {
     MessageItem,
     InputItem,
     Settings
   },
-
   setup() {
+
+    const { post } = useIpc();
+    const { logout } = useAuth();
+    const router = useRouter();
     const { emitter } = useMitt();
+    const { messages, addMessage, updateMessage } = useMessages();
 
-    // List of messages in the view.
-    // Oldest message first.
-    const messages = reactive(new Map());
+    // controls settings rendering. 
+    const toggleSettings = ref(false);
 
-    let m: RenderMessage | Annotation;
+    // Listen for escape key to close settings.
+    const onEscape = (e: KeyboardEvent) => {
+      if(e.key === "Escape") {
+        toggleSettings.value = false;
+      }
+      window.removeEventListener("keydown", onEscape);
+    }
 
-    const onRenderMessage = (event: any, payload: any) => { 
+    // When user clicks settings button.
+    const onSettings = () => {
+      toggleSettings.value = true;
+      window.addEventListener("keydown", onEscape);
+    }
+
+    // When user clicks logout button in settings.
+    const onLogout = () => {
+      logout();
+      router.push({ name: "login" });
+      post("logout", "");
+    } 
+
+    const onRenderMessage = (_event: any, payload: any) => { 
 
       // render message if there is content.
       if (payload.message.content) {
-        m = payload.message as RenderMessage;
-
-        messages.set(m.uid, m);
-
+        addMessage(payload.message);
       } else {
-        // must be an annotation, update messages.
-        m = payload.message as Annotation;
-
-        if (messages.has(m.uid)) {
-          messages.get(m.uid).context = m.context;
-          messages.get(m.uid).content.text = m.text;
-        }
-
+        // must be an annotation, update message.
+        updateMessage(payload.message);
       }
+
     }
 
     onMounted(() => {
-      emitter.on('self-message', (message) => messages.set(message.uid, message));
       // Listen for new messages to render.
+      emitter.on('self-message', (message) => addMessage(message));
       window.ipcRenderer.on("render-message", onRenderMessage);
     });