more changes

src/render/components/controllers/messenger.control.ts

@@ -1,143 +1,38 @@
 import { ref } from 'vue';
-import invokeSavedMessages from "@/render/ipc";
 import useScroll from "@/render/composables/scroll";
 
-const messages = ref(new Map());
+const canvas = ref();
 
-function getTimeStamp(): number {  
-  const currentdate = new Date();
-  return currentdate.getTime();
+/* seed the canvas with messages */
+const seedCanvas = (messages: Message[]) => {
+  canvas.value = messages;
 }
 
-const newViewMessage = (message: Message): ViewMessage => {
-  return {
-    text: message.text,
-    context: message.context,
-    audio: message.audio,
-    from: message.from,
-    uid: message.uid,
-    time: getTimeStamp(),
-    isChild: "none",
-    seen: false,
-    newMessage: false
-  };
-}
-
-const addMessage = (message: Message, newMessage=false) => {
-  const viewMessage = newViewMessage(message);
-  if (newMessage) viewMessage.newMessage = true;
-  messages.value.set(viewMessage.uid, viewMessage);
+const addMessage = (message: Message) => {
+  canvas.value.push(message);
 }
 
 const updateMessage = (message: Message) => {
-  const viewMessage = messages.value.get(message.uid);
-  viewMessage.context = message.context;
-  viewMessage.text = message.text;
-}
 
-const loadSavedMessages = async () => {
-  const messageData = await invokeSavedMessages();
-  messages.value = new Map(Object.entries(messageData));
-}
+  let target_message = canvas.value.filter((m: Message) => {
+      return m.uid = message.uid;
+  })[0];
 
-const saveMessages = () => {
-  const messageData = Object.fromEntries(messages.value);
-  // must save to json.
-}
-
-const pruneMessages = (limit=200) => {
-  if (messages.value.size >= limit) {
-    const oldest = Array.from(messages.value.keys()).shift();
-    messages.value.delete(oldest);
-  }
-}
-
-const updateGrouping = () => {
-
-  const isSimmilar = (messageA: ViewMessage, messageB: ViewMessage) => {
-    if ((Math.abs(messageA.time - messageB.time) < 20000) && (messageA.from == messageB.from) && (messageA.context == messageB.context)) {
-      return true
-    }
-    return false
+  if (target_message) {
+    target_message = message;
   }
 
-  const refs = Array.from(messages.value.keys())
-
-  // Get the last three messages.
-  const first = messages.value.get(refs[refs.length - 1])
-  const second = messages.value.get(refs[refs.length - 2])
-  const third = messages.value.get(refs[refs.length - 3])
-
-  // If messages are simmilar, update the classes.
-  if ((first) && (second)) {
-    if (isSimmilar(first, second)) {
-      first.isChild = "last" // i.e. last in group.
-      second.isChild = "first"
-
-      if (third) {
-        if ((third.isChild == "first") || (third.isChild == "middle")) {
-          second.isChild = "middle"
-        }
-      }
-    }
-  }
 }
 
 export default function useMessages() {
 
   const { updateScrollRef, adjustScroll } = useScroll("messenger");
 
-  /* Given new message object, update the view accordingly */
-  const updateMessageView = (newMessages: Message[]) => {
-
-    const bottom = updateScrollRef(); // see if the user is scrolled down
-
-    // take each message and apply view
-    newMessages.forEach((message: Message) => {
-
-      // add or update message depending
-      if (messages.value.has(message.uid)) {
-        updateMessage(message);
-      } else addMessage(message);
-
-      pruneMessages(); // pop off old messages from view
-      updateGrouping(); // group like message together
-
-      if (bottom) adjustScroll(); // only scroll if user was at bottom
-      
-      saveMessages();
-
-    });
-
-  }
-
   return {
-    messages,
-    updateMessageView,
-    loadSavedMessages
-  }
+    canvas,
+    seedCanvas,
+    addMessage,
+    updateMessage
+  };
 
-}
-
-
-  // // Seed message view with message history.
-  // const prepMessageView = async (newMessages: Message[]) => {
-  //   console.log("MSGR:Prepping messenger view.")
-
-  //   // Load and render saved messages and immediately scroll to bottom.
-  //   await loadSavedMessages();
-  //   setTimeout(setScroll.bind(false), 10);
-
-  //   // Render new messages, then wait 1s to scroll.
-  //   if (newMessages.length) {
-
-  //     console.log("MSGR:Adding new messages")
-
-  //     newMessages.forEach(message => {
-  //       addMessage(message, true);
-  //     })
-
-  //     setTimeout(setScroll.bind(true), 1000);
-
-  //   }
-  // }
+}

src/render/components/messenger.vue

@@ -11,6 +11,7 @@
       v-for="message in messages"
       :text="message.text"
       :context="message.context"
+      :child
       :key="message[0]"
     />
   </div>
@@ -28,7 +29,7 @@ import useMessages from "@/render/composables/messages";
 export default defineComponent({
   name: "Messenger",
 
-  props: ["state"],
+  props: ["profile", "messages"],
 
   components: {
     Message,
@@ -43,12 +44,19 @@ export default defineComponent({
 
     onMounted(() => {
 
-      /* populate the message view with existing messages */
-      updateMessageView(state.savedMessages, state.newMessages);
+      /* seed messages */
+      window.ipcRenderer.on("init-messages", (e_: any, payload: any) => {
+        seedMessages(payload.messages);
+      });
 
-      /* wait and listen for new messages to come in */
-      window.ipcRenderer.on("new-message", (_e: any, payload: any) => {
-        updateMessageView(payload.message);
+      /* 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);
       });
 
     });