add shared profile and messages data

src/composables/useEmitter.ts

@@ -8,7 +8,7 @@ export const backgroundMitt = new BackgroundMitt();
 
 export const ipcEmit = (channel: string, payload: any) => {
     backgroundMitt.emit('ipc-renderer', {
-        endpoint: channel,
+        channel: channel,
         message: payload
     });
 };

src/render/App.vue

@@ -4,14 +4,12 @@
 
     <Header />
 
-    <!-- Main Components
     <Messenger
-    v-if="profile"
-    :profile="profile"
-    :messages="state.messages"
+        v-if="profile"
     />
+
+    <!-- Main Components
     -->
-    <div v-if="profile">{{profile}}</div>
     <Login v-else />
 
   </main>
@@ -31,7 +29,7 @@ import Messenger from "@/render/components/messenger.vue";
 import Login from "@/render/components/login.vue";
 import Header from "@/render/components/header.vue";
 
-import useProfile from "@/render/composables/useProfile";
+import { profile, authComplete } from "@/render/composables/useProfile";
 import { postAppMount } from "@/render/ipc";
 
 export default defineComponent({
@@ -45,8 +43,6 @@ export default defineComponent({
 
   setup() {
 
-    const { profile, authComplete } = useProfile();
-
     onMounted(() => postAppMount());
 
     return {

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") {

src/render/composables/useMessages.ts

@@ -0,0 +1,33 @@
+// shared
+import { ref, Ref } from "vue";
+import useScroll from "@/render/composables/useScroll";
+
+export let messages: Ref<Array<Message>> = ref([]);
+
+export const setMessages: IpcListenerCallback<Array<Message>> = (payload) => {
+    messages.value = payload as Array<Message>;
+}
+
+export const addMessage: IpcListenerCallback<Message> = (payload) => {
+    messages.value.push(payload as Message);
+}
+
+export const updateMessage: IpcListenerCallback<Message> = (payload) => {
+    const message = payload as Message;
+
+    let targetMessage = messages.value.filter((m: Message) => {
+        return m.uid = message.uid;
+    })[0];
+
+    if (targetMessage) {
+        targetMessage = message;
+    }
+
+}
+
+export default {
+    messages,
+    setMessages,
+    addMessage,
+    updateMessage
+};

src/render/composables/useProfile.ts

@@ -1,33 +1,27 @@
+// shared
 import { ref } from "vue";
 
-const profile = ref();
+export let profile = ref();
 
-const authComplete = ref(false);
+export let authComplete = ref(false);
 
-const useProfile = () => {
+export const setProfile: IpcListenerCallback<Profile | null> = (payload) => {
+    payload ? profile.value = payload : clearProfile();
+    showRender();
+};
 
-    const setProfile: IpcListenerCallback<Profile | null> = (payload) => {
-        payload ? profile.value = payload : clearProfile();
-        showRender();
-    }
+export const clearProfile = () => {
+    profile.value = null;
+};
 
-    const clearProfile = () => {
-        profile.value = null;
-    }
+export const showRender = () => {
+    authComplete.value = true;
+};
 
-    const showRender = () => {
-        authComplete.value = true;
-    }
-
-
-    return {
-        setProfile,
-        clearProfile,
-        profile,
-        showRender,
-        authComplete,
-    }
-
-}
-
-export default  useProfile;
+export default {
+    setProfile,
+    clearProfile,
+    profile,
+    showRender,
+    authComplete,
+};

src/render/listeners.ts

@@ -1,8 +1,7 @@
 
 import { IpcRendererListener } from "./composables/useIpcRend"
-import useProfile from "./composables/useProfile";
-
-const { setProfile } = useProfile();
+import { setProfile } from "./composables/useProfile";
+import { setMessages, addMessage, updateMessage } from "./composables/useMessages";
 
 const SET_PROFILE_CHANNEL = "set-profile";
 
@@ -17,16 +16,17 @@ export const setProfileListener = new IpcRendererListener({
 
 export const initMessagesListener = new IpcRendererListener({
     channel: INIT_MESSAGES_CHANNEL,
-    listenerCallback: () => {}
+    listenerCallback: setMessages
 });
 
 
 export const addMessagesListener = new IpcRendererListener({
     channel: ADD_MESSAGE_CHANNEL,
-    listenerCallback: () => {}
+    listenerCallback: addMessage
 });
 
 export const updateMessagesListener = new IpcRendererListener({
     channel: UPDATE_MESSAGE_CHANNEL,
-    listenerCallback: () => {}
+    listenerCallback: updateMessage
 });
+

src/session.ts

@@ -3,7 +3,7 @@
 
 
 // import useAudio from "@/audio";
-import ipcEmit from "@/composables/useEmitter";
+import { ipcEmit } from "@/composables/useEmitter";
 import useWebsockets from "./composables/useWebsockets";
 import {config} from "@/config";
 
@@ -14,7 +14,6 @@ const uiState: any | null = null;
 // const { initAudio, closeAudio } = useAudio();
 
 const isInitMessage = (message: any): boolean => {
-    console.log(message)
     return true;
 };
 
@@ -23,7 +22,6 @@ const deauthenticate = (): void => {
 };
 
 const isAddMessage = (message: any): boolean => {
-    console.log(message)
     return true;
 };
 
@@ -33,38 +31,45 @@ const isAddMessage = (message: any): boolean => {
  */
 
 
-const onMessageCallback = (message: string) => {
+const onMessageCallback = (payload: string) => {
 
-    const content  = JSON.parse(message);
+    const message  = JSON.parse(payload);
+    console.log(typeof message);
 
     /* if the platform fails to authenticate, we must back down */
-    if (content === "CLOSE_AUTH_FAIL") {
+    if (message === "CLOSE_AUTH_FAIL") {
         deauthenticate();
         return;
     }
 
+    ipcEmit("add-message", message)
+    return
+
     /* on init, platform sends state, used to init canvas */
-    if (isInitMessage(content)) {
-        // uiState.set(content);
+    if (isInitMessage(message)) {
+        ipcEmit("init-messages", message)
     }
 
 
-    else if (isAddMessage(content)) {
-        // uiState.add(content);
+    else if (isAddMessage(message)) {
+        ipcEmit("add-messages", message)
     }
 
     else {
-        // uiState.update(content);
+        ipcEmit("update-messages", message)
     }
+
 }
 
 const onConnectionStatusCallback = (alive: boolean) => {
-
     // console.log('[Session]: Connection Alive: ', alive);
     // ipcEmit('connection-state', alive);
 }
 
-const { connect, send, close } = useWebsockets(onMessageCallback, onConnectionStatusCallback);
+const { connect, send, close } = useWebsockets(
+    onMessageCallback,
+    onConnectionStatusCallback
+);
 
 /* send a message to the platform */
 export function sendMessage<Message>(message: Message): void {

src/types.ts

@@ -40,7 +40,7 @@ interface AccountCredentials {
 }
 
 /*
- * Electron Ipc Main
+ * Electron Ipc
  */
 interface IpcHandlerCallback<I, O> {
     (payload: I | null): Promise<Error | O>;

src/window.ts

@@ -10,7 +10,7 @@ import { config } from "@/config";
 const { autoUpdater } = require('electron-updater');
 
 interface IpcRendererPayload {
-  endpoint: string;
+  channel: string;
   message: Message | null;
 }
 
@@ -50,8 +50,9 @@ const onNavBar = (_event: any, action: string): void => {
 
 // Util function to render message on ipc-renderer event.
 const renderMessage = (payload: IpcRendererPayload): void => {
+    console.log('sending to browser window', payload);
     if (win) {
-        win.webContents.send(payload.endpoint, {
+        win.webContents.send(payload.channel, {
             message: payload.message
         });
     }