save messages on window close

src/App.vue

@@ -25,8 +25,8 @@
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
 import { useIpc } from "@/modules/ipc";
-import { useAuth } from "@/modules/auth";
 import Splash from "@/components/splash.vue"
+import useMessages from '@/modules/messages';
 
 export default defineComponent({
   components: { Splash },
@@ -34,6 +34,7 @@ export default defineComponent({
   setup() {
     const { invoke } = useIpc();
     const ready = ref(false);
+    const { saveMessages } = useMessages();
 
     onMounted(() => {
         window.ipcRenderer.on('window-ready', (_event, payload: {message: boolean}) => {
@@ -46,6 +47,12 @@ export default defineComponent({
     })
 
     const callNavbar = (action: string) => {
+
+      // save messages before closing.
+      if (action === 'close') {
+        saveMessages();
+      }
+
       invoke('nav-bar', action);
     }
 

src/modules/messages.ts

@@ -0,0 +1,41 @@
+import { ref } from 'vue';
+import { RenderMessage, Annotation } from "@/types/message/index";
+
+const messages = ref(new Map());
+
+const messagesKey = "CRIMATA_MESSAGES";
+
+const messagesString = window.localStorage.getItem(messagesKey);
+
+if (messagesString) {
+  // parse stored messages.
+  const parsed = JSON.parse(messagesString);
+  // set messages.
+  messages.value = new Map(Object.entries(parsed));
+}
+
+export default function useMessages() {
+
+    const addMessage = (m: RenderMessage) => messages.value.set(m.uid, m);
+
+    const updateMessage = (m: Annotation) => {
+        // update message if in the map.
+        if (messages.value.has(m.uid)) {
+            messages.value.get(m.uid).context = m.context;
+            messages.value.get(m.uid).content.text = m.text;
+        }
+    }
+
+    const saveMessages = () => {
+        // de-reactivate message data before saving.
+        const messageData = Object.fromEntries(messages.value);
+        window.localStorage.setItem(messagesKey, JSON.stringify(messageData));
+    }
+
+    return {
+      messages,
+      saveMessages,
+      addMessage,
+      updateMessage
+    }
+}

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);
     });
 

tests/server.js

@@ -3,6 +3,7 @@ const WebSocket = require("ws");
 const wss = new WebSocket.Server({
   port: 8760
 });
+let auth = false;
 
 wss.on("connection", function connection(ws, req) {
   ws.on("message", function incoming(message) {
@@ -13,7 +14,15 @@ wss.on("connection", function connection(ws, req) {
     } else if (message instanceof String || typeof message === "string") {
       // audio message
       console.log('caught the token', message)
-      ws.send('success');
+      if (!auth) {
+        ws.send('success');
+        auth = true;
+      } else {
+        const parsed = JSON.parse(message);
+        console.log('got a message', message)
+
+      }
+
     } else {
       const parsed = JSON.parse(message);
       console.log('parsed', parsed)