From: Enrique Hernandez <hernandeze2@xavier.edu>
Date: Sun, 14 Feb 2021 21:46:48 +0000 (-0600)
Subject: remove old message event listeners
X-Git-Tag: v0.9~82^2~8
X-Git-Url: https://andrewgundersen.net/repos?a=commitdiff_plain;h=3cf22d61ac901dd6178fd516ea77047ce4c795c4;p=mime-chat

remove old message event listeners
---

diff --git a/src/background/window.ts b/src/background/window.ts
index 1fb69e9..8967dea 100644
--- a/src/background/window.ts
+++ b/src/background/window.ts
@@ -3,7 +3,6 @@
 import { BrowserWindow, ipcMain } from "electron";
 import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
 import { backgroundMitt } from './emitter';
-import { sendMessage } from './session';
 import { updateRecorder } from './audio';
 import * as path from "path";
 
@@ -13,46 +12,35 @@ interface WindowSettings {
   resizable: boolean;
 }
 
-interface TextMessage {
-    audio: 0;
-    content: string;
-}
-
 interface RenderMessage {
-    content: string;
-    context: string;
-    subContext: string;
-    modifiers: string;
-    time: string;
-    id: string;
+  content: string;
+  context: string;
+  subContext: string;
+  modifiers: string;
+  time: string;
+  id: string;
 }
 
 interface IpcRendererPayload {
-    endpoint: string;
-    message: RenderMessage | null;
+  endpoint: string;
+  message: RenderMessage | null;
 }
 
 let win: BrowserWindow | null;
 
-const handleMessage = (_event, arg: TextMessage | Buffer ) => {
-  sendMessage(arg);
-}
-
 const windowMount = (): void => {
   backgroundMitt.emit('window-active', true);
-  ipcMain.on('send-message', handleMessage);
   ipcMain.on('update-recorder', updateRecorder);
 }
 
 const windowDismount = (): void => {
-    win = null;
-    backgroundMitt.emit('window-active', false);
-    ipcMain.removeAllListeners('send-message');
-    ipcMain.removeAllListeners('update-recorder');
+  win = null;
+  backgroundMitt.emit('window-active', false);
+  ipcMain.removeAllListeners('update-recorder');
 }
 
 backgroundMitt.on('ipc-renderer', (payload: IpcRendererPayload) => {
-    if (win)
+  if (win)
     win.webContents.send(payload.endpoint, {
       message: payload.message
     });
@@ -63,7 +51,7 @@ export const createWindow = async (options: WindowSettings): Promise<void> => {
 
     if (win) resolve();
 
-    win= new BrowserWindow({
+    win = new BrowserWindow({
       width: options.width,
       height: options.height,
       resizable: options.resizable,
@@ -90,7 +78,7 @@ export const createWindow = async (options: WindowSettings): Promise<void> => {
 
     win.webContents.on('did-finish-load', () => {
       windowMount();
-      if (win)resolve();
+      resolve();
     });
 
   });
diff --git a/src/components/home/index.vue b/src/components/home/index.vue
deleted file mode 100644
index a85b92c..0000000
--- a/src/components/home/index.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <svg
-    id="messenger"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    @click="emittMessage"
-  >
-    <MessageVisualizer />
-    <TextAudioInput />
-  </svg>
-</template>
-
-<script lang="ts">
-
-// child components
-import MessageVisualizer from "./messageVisualizer/index.vue";
-import TextAudioInput from "@/components/taInput/index.vue";
-
-// event emitter
-import { Mitt } from "@/types/mitt/index";
-
-import { defineComponent, ref, inject } from "vue";
-
-export default defineComponent({
-
-  name: "Messenger",
-  components: { MessageVisualizer, TextAudioInput },
-  
-  setup() {
-    const count = ref(0);
-
-    // imports mitt Emitter safely
-    let emitter: Mitt;
-    const emitterInject: Mitt | undefined = inject("mitt");
-
-    if (emitterInject) {
-      emitter = emitterInject;
-    }
-
-    // Render message when render-message event called.
-    window.ipcRenderer.on("render-message", (event, payload) => {
-      console.log(payload.message);
-      emitter.emit("renderMessage", payload.message);
-    });
-
-  },
-});
-
-</script>
-
-<style lang="scss" scoped>
-  #messenger {
-    width: 350px;
-    height: 500px;
-    background-color: #e6e6e6;
-    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
-    // border-radius: 20px;
-  }
-</style>
diff --git a/src/components/home/messageVisualizer/index.vue b/src/components/home/messageVisualizer/index.vue
deleted file mode 100644
index 57657eb..0000000
--- a/src/components/home/messageVisualizer/index.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <svg
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    :viewBox="scrollView"
-  >
-    <g id="messageVisualizer" transform="translate(0, 5)">
-      <g
-        v-for="(item, index) in renderArr"
-        :key="index"
-        class="messageList"
-        transform="translate(0, 25)"
-        preserverAspectRatio="none"
-      >
-        <transition
-          appear
-          v-on:before-appear="beforeEnter"
-          v-on:appear="enter"
-          v-on:after-enter="afterEnter"
-        >
-          <MessageItem :item="item" :key="index" />
-        </transition>
-      </g>
-    </g>
-  </svg>
-</template>
-
-<script lang="ts">
-import useMessageVisualizer from "./viewDetails/visualizer";
-import useScrollView from "@/modules/scrollView";
-import MessageItem from "../messageBubble/index.vue";
-import { Message } from "@/types/message/index";
-import {onMounted, defineComponent, reactive, inject, ref, watch, onUnmounted } from "vue";
-import useMitt from '@/modules/mitt';
-import { useIpc } from '@/modules/ipc';
-
-export default defineComponent({
-  name: "MessageVisualizer",
-  components: { MessageItem },
-  setup() {
-    const renderArr: Message[] = reactive([]);
-    const { emitter } = useMitt();
-    const { data, invoke } = useIpc('async-message')
-    const rendering = ref(false)
-
-    onMounted(() => {
-
-        emitter.on("renderMessage", (payload: Message | undefined) => {
-          if (payload) renderArr.push(payload);
-        });
-
-        emitter.on("animateSend", async (message) => {
-            rendering.value = true;
-            try {
-                await invoke(message);
-                renderArr.push(data.value);
-            } catch(e) {
-                console.log('No response. Do not render.')
-            }
-            rendering.value = true;
-        })
-
-    })
-
-    onUnmounted(() => {
-        emitter.all.clear();
-    })
-
-    const { beforeEnter, enter, afterEnter } = useMessageVisualizer();
-    const { scrollView } = useScrollView({
-      targetId: "messageVisualizer",
-    });
-
-    return {
-      renderArr,
-      beforeEnter,
-      enter,
-      afterEnter,
-      scrollView,
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-svg {
-  height: 1%;
-  overflow: hidden;
-}
-#messageRenderer {
-  margin: 0;
-}
-</style>
diff --git a/src/components/messageView/index.vue b/src/components/messageView/index.vue
new file mode 100644
index 0000000..56f04f0
--- /dev/null
+++ b/src/components/messageView/index.vue
@@ -0,0 +1,91 @@
+<template>
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    :viewBox="scrollView"
+  >
+    <g id="messageView" transform="translate(0, 5)">
+      <g
+        v-for="(item, index) in renderArr"
+        :key="index"
+        class="messageList"
+        transform="translate(0, 25)"
+        preserverAspectRatio="none"
+      >
+        <transition
+          appear
+          v-on:before-appear="beforeEnter"
+          v-on:appear="enter"
+          v-on:after-enter="afterEnter"
+        >
+          <TextBubble :item="item" :key="index" />
+        </transition>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script lang="ts">
+import useMessageView from "./viewDetails/visualizer";
+import useScrollView from "@/modules/scrollView";
+import TextBubble from "@/components/textBubble/index.vue";
+import { Message } from "@/types/message/index";
+import { defineComponent, reactive, onMounted, onUnmounted } from "vue";
+import useMitt from "@/modules/mitt";
+import { useIpc } from "@/modules/ipc";
+
+export default defineComponent({
+  name: "MessageView",
+  components: { TextBubble },
+  setup() {
+    const renderArr: Message[] = reactive([]);
+    const { emitter } = useMitt();
+    const { data, invoke } = useIpc("async-message");
+
+    onMounted(() => {
+      window.ipcRenderer.on("render-message", (event, payload) => {
+        const message = payload.message;
+        if (message) renderArr.push(message);
+      });
+
+      emitter.on("animateSend", async (message) => {
+        try {
+          await invoke(message);
+          renderArr.push(data.value);
+        } catch (e) {
+          console.log("No response. Do not render.");
+        }
+      });
+    });
+
+    onUnmounted(() => {
+      window.ipcRenderer.removeAllListeners("render-message");
+      emitter.all.clear();
+    });
+
+    const { beforeEnter, enter, afterEnter } = useMessageView();
+    const { scrollView } = useScrollView({
+      targetId: "messageView",
+    });
+
+    return {
+      renderArr,
+      beforeEnter,
+      enter,
+      afterEnter,
+      scrollView,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+svg {
+  height: 1%;
+  overflow: hidden;
+}
+#messageRenderer {
+  margin: 0;
+}
+</style>
diff --git a/src/components/home/messageVisualizer/viewDetails/anime.ts b/src/components/messageView/viewDetails/anime.ts
similarity index 100%
rename from src/components/home/messageVisualizer/viewDetails/anime.ts
rename to src/components/messageView/viewDetails/anime.ts
diff --git a/src/components/home/messageVisualizer/viewDetails/offsetCalculator.ts b/src/components/messageView/viewDetails/offsetCalculator.ts
similarity index 100%
rename from src/components/home/messageVisualizer/viewDetails/offsetCalculator.ts
rename to src/components/messageView/viewDetails/offsetCalculator.ts
diff --git a/src/components/home/messageVisualizer/viewDetails/visualizer.ts b/src/components/messageView/viewDetails/visualizer.ts
similarity index 97%
rename from src/components/home/messageVisualizer/viewDetails/visualizer.ts
rename to src/components/messageView/viewDetails/visualizer.ts
index 894b2f8..f99ddf4 100644
--- a/src/components/home/messageVisualizer/viewDetails/visualizer.ts
+++ b/src/components/messageView/viewDetails/visualizer.ts
@@ -6,7 +6,7 @@ import useOffsetCalculator from './offsetCalculator';
  * handles visualization of view messages through
  * vue transition callbacks and anime-js animations
  */
-export default function useMessageVisualizer(): {
+export default function useMessageView(): {
     beforeEnter: VueTransitionCallback;
     enter: VueTransitionCallback;
     afterEnter: VueTransitionCallback;
diff --git a/src/components/taInput/inputController.ts b/src/components/taInput/inputController.ts
index 82b6931..8284999 100644
--- a/src/components/taInput/inputController.ts
+++ b/src/components/taInput/inputController.ts
@@ -17,24 +17,16 @@ export default function useInputController() {
     const paths = ref([]);
     const audioBubbleWidth = ref(10);
     let stream: MediaStream;
-     const emitter: any = inject("mitt");
+    const emitter: any = inject("mitt");
 
     // send message on ENTER
     const enterCallback = (input: string) => {
 
         const message = {
-          audio: 0,
-          text: input
+            audio: 0,
+            text: input
         };
-        console.log('emit message on enter', message);
         emitter.emit("animateSend", message);
-
-        // await response
-        // window.postMessage({
-        //   myTypeField: 'send-message',
-        //   message: message
-        // }, '*')
-
     }
 
     const { visualizeStreamAsPaths, expandBubble } = useAudioVisualizer(visualizeStream);
@@ -42,13 +34,13 @@ export default function useInputController() {
     const { textInputXoffset, renderTextInput } = useTextVisualizer(input);
 
     // stops stream recording on space key up
-    function keyupHandler(e: any) {
+    function keyupHandler(_e) {
         if (e.key === " " && visualizeStream.value) {
             console.log("stop recording");
 
             window.postMessage({
-              myTypeField: 'update-recorder',
-              record: false
+                myTypeField: 'update-recorder',
+                record: false
             }, '*')
 
             visualizeStream.value = false;
@@ -80,8 +72,8 @@ export default function useInputController() {
             visualizeStream.value = true;
 
             window.postMessage({
-              myTypeField: 'update-recorder',
-              record: true
+                myTypeField: 'update-recorder',
+                record: true
             }, '*')
 
             expandBubble(audioBubbleWidth);
diff --git a/src/components/home/messageBubble/bubbleDetails/computed.ts b/src/components/textBubble/bubbleDetails/computed.ts
similarity index 96%
rename from src/components/home/messageBubble/bubbleDetails/computed.ts
rename to src/components/textBubble/bubbleDetails/computed.ts
index 4e28ec4..c3b4769 100644
--- a/src/components/home/messageBubble/bubbleDetails/computed.ts
+++ b/src/components/textBubble/bubbleDetails/computed.ts
@@ -49,7 +49,7 @@ export default function useComputedBubble(m: string, id: string) {
     }
 
     const startingOffset = computed(() => {
-        const parentView = document.getElementById('messageVisualizer');
+        const parentView = document.getElementById('messageView');
         if (parentView) {
             const rect = parentView.getBoundingClientRect();
             let Y = 600;
diff --git a/src/components/home/messageBubble/bubbleDetails/drawer.ts b/src/components/textBubble/bubbleDetails/drawer.ts
similarity index 100%
rename from src/components/home/messageBubble/bubbleDetails/drawer.ts
rename to src/components/textBubble/bubbleDetails/drawer.ts
diff --git a/src/components/home/messageBubble/index.vue b/src/components/textBubble/index.vue
similarity index 97%
rename from src/components/home/messageBubble/index.vue
rename to src/components/textBubble/index.vue
index 03041b1..a19ac84 100644
--- a/src/components/home/messageBubble/index.vue
+++ b/src/components/textBubble/index.vue
@@ -29,13 +29,11 @@
 <script lang="ts">
 import useComputedBubble from "./bubbleDetails/computed";
 import useBubbleDrawer from "./bubbleDetails/drawer";
-
-// text wrap composition
 import useTextWrap from "@/modules/textWrap";
-
 import { defineComponent, onMounted, ref, reactive } from "vue";
+
 export default defineComponent({
-  name: "MessageItem",
+  name: "TextBubble",
   props: {
     item: {
       type: Object,
diff --git a/src/preload.ts b/src/preload.ts
index b0cd4b9..ce5f0bf 100644
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -17,10 +17,6 @@ process.once("loaded", () => {
     // do something with custom event
     const message = event.data;
 
-    if (message.myTypeField === "send-message") {
-      ipcRenderer.send("send-message", message.message);
-    }
-
     if (message.myTypeField === "update-menu-bar") {
       ipcRenderer.send("update-menu-bar", message);
     }
@@ -29,10 +25,6 @@ process.once("loaded", () => {
       ipcRenderer.send("update-recorder", message.record);
     }
 
-    if (message.myTypeField === "submit-creds") {
-      ipcRenderer.send("submit-creds", message)
-    }
-
   });
 
-});
\ No newline at end of file
+});
diff --git a/src/views/home.vue b/src/views/home.vue
index 0efa2ba..2250cc6 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,17 +1,33 @@
 <template>
-  <HomeComponent />
+  <svg
+    id="messenger"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    @click="emittMessage"
+  >
+    <MessageView />
+    <TextAudioInput />
+  </svg>
 </template>
 
 <script lang="ts">
-
+import MessageView from "@/components/messageView/index.vue";
+import TextAudioInput from "@/components/taInput/index.vue";
 import { defineComponent } from "vue";
-import HomeComponent from "@/components/home/index.vue";
 
 export default defineComponent({
-    
-  name: "Home",
-  components: { HomeComponent },
-
+  name: "Messenger",
+  components: { MessageView, TextAudioInput },
 });
-
 </script>
+
+<style lang="scss" scoped>
+#messenger {
+  width: 350px;
+  height: 500px;
+  background-color: #e6e6e6;
+  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
+  // border-radius: 20px;
+}
+</style>