From d487931038976230609fac4e01277d4eea0163e1 Mon Sep 17 00:00:00 2001
From: Ian <ian.dunkelberg@outlook.com>
Date: Mon, 27 Nov 2023 18:00:49 -0800
Subject: [PATCH] display name is being properly set now.

---
 .../ThreadPreview/ThreadPreview.vue           | 21 +++--
 .../WebTextingContainer.vue                   | 79 +++++++++++--------
 .../components/conversation/Conversation.vue  | 50 +++++++-----
 frontend/components/message/Message.vue       |  2 +-
 frontend/lib/backfill.ts                      |  8 +-
 frontend/main.ts                              |  4 +-
 frontend/routes/index.ts                      |  2 +-
 threadlist.php                                |  8 ++
 8 files changed, 107 insertions(+), 67 deletions(-)

diff --git a/frontend/components/ThreadPreview/ThreadPreview.vue b/frontend/components/ThreadPreview/ThreadPreview.vue
index ba8775d..f4df720 100644
--- a/frontend/components/ThreadPreview/ThreadPreview.vue
+++ b/frontend/components/ThreadPreview/ThreadPreview.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import Conversation from '../conversation/Conversation.vue';
-import { MessageData } from '../../lib/global'
+import { MessageData, emitter } from '../../lib/global'
 import { RouterLink } from 'vue-router';
 
 export type ThreadPreviewInterface = {
@@ -14,7 +14,7 @@ export type ThreadPreviewInterface = {
         type: String,
     },
     timestamp: {
-        type: Date,
+        type: String,
     },
     remoteNumber: {
         type: String,
@@ -96,16 +96,21 @@ export default {
     },
     methods: {
         routerLinkClickHandler(event) {
-            if (this.remoteNumber) {
-                this.$emit("thread-change", this.remoteNumber)
-                console.log("Hey! you clicked me!")
+            if(this.displayName){
+                emitter.emit("thread-change", this.displayName)
+                console.log(`Hey! you clicked me! I have displayName: ${this.displayName}`)
+                updateActiveComponent(event)
+            }
+            else if (this.remoteNumber) {
+                emitter.emit("thread-change", this.remoteNumber)
+                console.log(`Hey! you clicked me! I have remoteNumber: ${this.remoteNumber}`)
                 updateActiveComponent(event)
                 
             }
             else if (this.groupUUID) {
-                this.$emit("thread-change", this.groupUUID)
-                console.log("Hey! you clicked me!")
-                updateActiveComponent(event)
+                emitter.emit("thread-change", this.groupUUID)
+                console.log(`Hey! you clicked me! I have groupUUID: ${this.groupUUID}`)
+               updateActiveComponent(event)
 
 
             }
diff --git a/frontend/components/WebTextingContainer/WebTextingContainer.vue b/frontend/components/WebTextingContainer/WebTextingContainer.vue
index be4ba92..c365df2 100644
--- a/frontend/components/WebTextingContainer/WebTextingContainer.vue
+++ b/frontend/components/WebTextingContainer/WebTextingContainer.vue
@@ -3,7 +3,7 @@ import Conversation from '../conversation/Conversation.vue';
 import ThreadList from '../ThreadList/ThreadList.vue'
 import ConvoPlaceholder from '../ConvoPlaceholder.vue';
 import { RouterView } from 'vue-router';
-import { MessageData } from '../../lib/global';
+import { emitter } from '../../lib/global';
 
 
 
@@ -33,34 +33,51 @@ export default {
     //             type: Array<String>,
     //         }
     //     },
-    name:'WebTextingContainer',
-    props:{
+    name: 'WebTextingContainer',
+    props: {
         ownNumber: String,
-        username:String,
+        username: String,
         threads: Array<Object>,
-        threadPreviews:Array<Object>
+        threadPreviews: Array<Object>
+    },
+    computed: {
+        // a computed getter
+        conversationSelected() {
+            // `this` points to the component instance
+            let selectedConvo = false;
+            if (this.$route.query.number || this.$route.query.group) {
+                selectedConvo = true;
+            }
+            return selectedConvo;
+        },
     },
     components: { Conversation, ThreadList },
     beforeUpdate() {
         console.log(this.props.threadPreviews);
     },
-    methods:{
-        calculateDisplayName(){
-            if(this.$route.query.group){
-                for(let m in this.$props.threadPreviews){
+    methods: {
+        calculateDisplayName() {
+            if (this.$route.query.group) {
+                for (let m in this.$props.threadPreviews) {
                     console.log(`group: ${m}`);
                 }
             }
-            else{
-                for(let m in this.$props.threadPreviews){
+            else {
+                for (let m in this.$props.threadPreviews) {
                     console.log(`contact: ${m}`);
                 }
             }
             console.log("display name calculated");
             return "tested";
         }
-    }
-    
+    },
+    mounted() {
+        emitter.on('thread-change', (newDisplayName: String) => {
+            console.log("WTC event get", newDisplayName)
+            emitter.emit('thread-changed', newDisplayName);
+        })
+    },
+
 }
 </script>
 
@@ -70,24 +87,24 @@ The blank space should notify the user that they can select a thread to display
     <RouterView>
 
 
-    <div id="WEB_TEXT_ROOT">
-        <link type="text/css" href="../../../js/style.css">
-        <RouterView name="leftSide" :ownNumber="this.$props.ownNumber" 
-                                    :threads="this.$props.threads" 
-                                    :threadPreviews="this.$props.threadPreviews"/>
-        
-        
-    <suspense>
-        <RouterView name="rightSide" 
-            :extension_uuid="this.$route.query.extension_uuid" 
-            :remoteNumber="this.$route.query.number" 
-            :groupUUID="this.$route.query.group"
-            :ownNumber="this.$props.ownNumber" 
-            :displayName="this.$props.threadPreviews"
-            v-bind="calculateDisplayName"/> 
-    </suspense>
-    </div>
-</RouterView>
+        <div id="WEB_TEXT_ROOT">
+            <link type="text/css" href="../../../js/style.css">
+            <RouterView name="leftSide" :ownNumber="this.$props.ownNumber" :threads="this.$props.threads"
+                :threadPreviews="this.$props.threadPreviews" />
+
+
+            <suspense>
+                <RouterView name="rightSide" 
+                    :extension_uuid="this.$route.query.extension_uuid"
+                    :remoteNumber="this.$route.query.number" 
+                    :groupUUID="this.$route.query.group"
+                    :ownNumber="this.$props.ownNumber" 
+                    :displayName="this.$props.displayName"
+                    :selectedConvo="this.conversationSelected" 
+                    v-bind="calculateDisplayName" />
+            </suspense>
+        </div>
+    </RouterView>
 </template>
 
 <style scoped></style>
\ No newline at end of file
diff --git a/frontend/components/conversation/Conversation.vue b/frontend/components/conversation/Conversation.vue
index 4803f69..d40812c 100644
--- a/frontend/components/conversation/Conversation.vue
+++ b/frontend/components/conversation/Conversation.vue
@@ -106,7 +106,10 @@ export default {
         },
         groupMembers: {
             type: Array<String>,
-        }
+        },
+        selectedConvo: {
+            type:Boolean,
+        },
     },
     components: { Message, SendBox },
     async setup(props) {
@@ -128,22 +131,22 @@ export default {
     data() {
 
         let title = "";
-        if (this.displayName) {
-            title = this.displayName;
-        } else if (this.groupMembers) {
-            title = this.groupMembers.join(", ");
-        }
-
-        if (this.remoteNumber) {
-            if (title.length > 0) {
-                title += " (" + this.remoteNumber + ")";
-            } else {
-                title += this.remoteNumber;
-            }
-        }
-        else if(this.groupUUID){
-            title+= this.groupUUID;
-        }
+        // if (this.displayName) {
+        //     title = this.displayName;
+        // } else if (this.groupMembers) {
+        //     title = this.groupMembers.join(", ");
+        // }
+
+        // if (this.remoteNumber) {
+        //     if (title.length > 0) {
+        //         title += " (" + this.remoteNumber + ")";
+        //     } else {
+        //         title += this.remoteNumber;
+        //     }
+        // }
+        // else if(this.groupUUID){
+        //     title+= this.groupUUID;
+        // }
         let conversationKey = this.remoteNumber ? this.remoteNumber : this.groupUUID;
         return {
             bottomVisible: true,
@@ -207,6 +210,11 @@ export default {
             console.log('preventing future backfilling attempts, this conversation has been fully backfilled');
             this.backfillAvailable = false;
         })
+
+        emitter.on('thread-changed', (newDisplayName:String) => {
+            console.log(`thread changed new display name is ${newDisplayName}`);
+            this.title = newDisplayName;
+        })
         //console.log(this.state.messages);
         //console.log("Conversation.vue mounted with props:\nremoteNumber:", this.remoteNumber, "\ngroupUUID:", this.groupUUID, "\ndisplayName:", this.displayName, "\nownNumber:", this.ownNumber);
     },
@@ -223,7 +231,7 @@ export default {
     watch: {
         //this fires when we set remoteNumber to null or w/e
         remoteNumber: async function (rN) {
-            this.title = rN;
+            //this.title = rN;
             this.messages = [];
 
             this.backfillAvailable = true;
@@ -341,7 +349,7 @@ export default {
 </script>
 
 <template>
-    <div class="thread-container" id="THREAD">
+    <div class="thread-container" v-bind:class="selectedConvo ? 'show-convo': 'hide-if-no-thread'" id="THREAD">
         <div class="thread-header">
             <router-link class="back-link" :to="`/threadlist.php?extension_uuid=${this.$route.query.extension_uuid}`">Go Back!</router-link>
             {{ title }}
@@ -378,7 +386,9 @@ export default {
 }
 
 /* these are for conversation which we are sidestepping for now */
-
+.hide-if-no-thread{
+    display:none;
+}
 
 .messages {
     height: 80vh;
diff --git a/frontend/components/message/Message.vue b/frontend/components/message/Message.vue
index 210cd61..e3b6c2f 100644
--- a/frontend/components/message/Message.vue
+++ b/frontend/components/message/Message.vue
@@ -47,7 +47,7 @@ export default {
                 this.text = this.message.cpim.bodyText;
                 return;
             }
-            console.log(this.message.cpim.fileContentType);
+            //console.log(this.message.cpim.fileContentType);
             switch (this.message.cpim.fileContentType) {
                 case "text/plain":
                     this.text = await this.message.cpim.getTextBody()
diff --git a/frontend/lib/backfill.ts b/frontend/lib/backfill.ts
index 0b92640..6da6819 100644
--- a/frontend/lib/backfill.ts
+++ b/frontend/lib/backfill.ts
@@ -32,10 +32,10 @@ export async function backfillMessages(extensionUUID: string, remoteNumber?: str
         return;
     }
     if(group){
-        console.log(`group = ${group}`);
+        //console.log(`group = ${group}`);
     }
     if(remoteNumber){
-        console.log(`group = ${remoteNumber}`);
+        //console.log(`group = ${remoteNumber}`);
     }
     fetching = true;
     try {
@@ -48,8 +48,8 @@ export async function backfillMessages(extensionUUID: string, remoteNumber?: str
         if (group) {
             params.group = group;
         }
-        console.log(`backfilling conversations array, ${state.conversations}`)
-        console.log(`backfill key: ${key}`)
+        //console.log(`backfilling conversations array, ${state.conversations}`)
+        //console.log(`backfill key: ${key}`)
         //if state.conversations[key] exists we have already backfilled at least once
         const stateMessages = state.conversations[key];
         if(stateMessages){
diff --git a/frontend/main.ts b/frontend/main.ts
index 27827c3..8479464 100644
--- a/frontend/main.ts
+++ b/frontend/main.ts
@@ -85,11 +85,11 @@ export const initializeWebTextingContainer = function initializeWebTextingContai
         //console.log(`main.ts backfill key ${key}`)
         //key is either a uuid or phone number. uuid length is at least 16
         if(key.length<15){
-            //console.log("backfill using remotenumber")
+            console.log(`backfill using remotenumber: ${key}`)
             backfillMessages(opts.extensionUUID, key, null);
         }
         else{
-            //console.log("backfill using group")
+            console.log(`backfill using group ${key}`)
             backfillMessages(opts.extensionUUID, null, key);
         }
         
diff --git a/frontend/routes/index.ts b/frontend/routes/index.ts
index 449646b..3288d5a 100644
--- a/frontend/routes/index.ts
+++ b/frontend/routes/index.ts
@@ -15,7 +15,7 @@ export const router = createRouter({
                 path:"/threadlist.php",
                 components:{
                     leftSide: ThreadList,
-                    rightSide: ConvoPlaceholderVue,
+                    rightSide: ConversationVue,
                 },
             },
             {
diff --git a/threadlist.php b/threadlist.php
index 2131442..7d322ee 100644
--- a/threadlist.php
+++ b/threadlist.php
@@ -179,8 +179,16 @@
         $link .= "number=".$number;
     }
     $thread_preview_opts[$z]['link'] = $link;
+
     //Thread preview area 
     $body_preview = $last_message['content_type'] == "text/plain" ? $last_message['message'] : "[media]";
+    /* this is where we need to change stuff to see the removal of [media] as the default preview
+    if ($last_message['content_type'] == "text/plain" ) {
+        $body_preview  = $last_message['message'];
+    } else {
+        $body_preview = s3 retrieve nonsense logic;
+    }
+    */
     $thread_preview_opts[$z]['bodyPreview'] = $body_preview;
     $thread_preview_opts[$z]['ownNumber'] = $ownNumber;
     $thread_preview_opts[$z]['displayName']= $display_name;