add shared profile and messages data

src/render/components/bubble.vue

@@ -10,7 +10,7 @@
 
     <!-- message context -->
     <span class="context">
-      <div :class="`${type}-icon`">
+      <div :class="`${type}-icon`"/>
       {{ context }}
     </span>
 
@@ -22,23 +22,24 @@
  import { defineComponent, ref, onMounted } from 'vue';
 
  export default defineComponent({
-  name: "MessageItem",
+  name: "Bubble",
 
   props: ["text", "context", "type", "position"],
 
   setup() {
 
+    const seen = ref(false);
     /* initialize seen state */
-    const seen = ref(() => {
-      if (document.visibilityState === "visible") {
-        return true;
-      } else return false;
-    });
+    if (document.visibilityState === "visible") {
+        seen.value = true;
+    } else seen.value = false;
 
     onMounted(() => {
 
-      if (!seen) 
-      document.addEventListener("visibilitychange", () => seen = true);
+      if(seen.value)
+      document.addEventListener("visibilitychange", () => {
+          seen.value = true
+      });
 
     });
 

src/render/components/login.vue

@@ -35,7 +35,7 @@
 <script lang="ts">
 
 import { defineComponent, ref } from "vue";
-import useProfile from '@/render/composables/useProfile';
+import { setProfile } from '@/render/composables/useProfile';
 import { invokeLogin } from "@/render/ipc";
 
 export default defineComponent({
@@ -46,8 +46,6 @@ export default defineComponent({
     const usr = ref("");
     const pwd = ref("");
 
-    const { setProfile } = useProfile();
-
     // Submit login credentials to the backend.
     const submitForm = async () => {
 

src/render/components/messenger.vue

@@ -8,8 +8,8 @@
   <!-- List of message bubbles. -->
   <div id="messenger">
     <Bubble
-      v-for="message in messagesRef"
-      :text="message.text"
+      v-for="message in messages"
+      :text="message.content.text"
       :context="message.context"
       :key="message[0]"
     />
@@ -22,48 +22,24 @@
 import { defineComponent, onMounted, onUnmounted } from "vue";
 import InputItem from "@/render/components/inputItem.vue";
 import Settings from "@/render/components/settings.vue";
-import useMessages from "./controllers/messenger.control";
+import Bubble from "@/render/components/bubble.vue";
+
+import { profile } from "@/render/composables/useProfile";
+import { messages } from "@/render/composables/useMessages";
 
 export default defineComponent({
   name: "Messenger",
 
-  props: ["profile", "messages"],
-
   components: {
     InputItem,
-    Settings
+    Settings,
+    Bubble
   },
 
-  setup(props) {
-
-    // Handle messages in view.
-    const { messagesRef } = useMessages();
-
-    onMounted(() => {
-
-      /* seed messages */
-      window.ipcRenderer.on("init-messages", (e_: any, payload: any) => {
-        // seedMessages(payload.messages);
-      });
-
-      /* add a new message */
-      window.ipcRenderer.on("add-message", (_e: any, payload: any) => {
-        // addMessage(payload.message);
-      });
-
-      /* update an existing message */
-      window.ipcRenderer.on("update-message", (_e: any, payload: any) => {
-        // updateMessage(payload.message);
-      });
-
-    });
-
-    onUnmounted(() => {
-      window.ipcRenderer.removeAllListeners("new-message");
-    });
-
+  setup() {
     return {
-      messagesRef
+      messages,
+      profile
     };
 
   },

src/render/components/settings.vue

@@ -28,7 +28,7 @@
 <script lang="ts">
 
   import { defineComponent, ref } from "vue";
-  import useProfile from "@/render/composables/useProfile"
+  import { clearProfile } from "@/render/composables/useProfile"
   import { invokeLogout } from "@/render/ipc";
 
   export default defineComponent({
@@ -37,8 +37,6 @@
     setup() {
       const toggleSettings = ref(false);
 
-      const { clearProfile } = useProfile();
-
       // Listen for escape key to close settings.
       const onEscape = (e: any) => {
         if(e.key === "Escape") {