From f19c6ce6734d5e4c048ba9b6c77a2658f357c494 Mon Sep 17 00:00:00 2001
From: Justin Ferrari <‘justinwesleyferrari@gmail.com’>
Date: Sat, 7 Jan 2023 18:16:51 -0500
Subject: [PATCH] Fixed Avatar Bug + Fixed User Info Translations

---
 qortal-ui-core/language/us.json               |  5 +-
 .../plugins/core/components/ChatRightPanel.js |  8 +-
 .../plugins/core/components/ChatScroller.js   | 16 ++--
 .../core/components/ChatSideNavHeads.js       | 75 ++++++++++++++-----
 .../plugins/core/components/TipUser.js        |  1 -
 .../plugins/core/components/UserInfo.js       |  0
 6 files changed, 72 insertions(+), 33 deletions(-)
 create mode 100644 qortal-ui-plugins/plugins/core/components/UserInfo.js

diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json
index a35ec919..c7d90de2 100644
--- a/qortal-ui-core/language/us.json
+++ b/qortal-ui-core/language/us.json
@@ -557,7 +557,10 @@
       "cchange53": "Receiver cannot be empty!",
       "cchange54": "Invalid Receiver!",
       "cchange55": "Transaction Successful!",
-      "cchange56": "Transaction Failed!"
+      "cchange56": "Transaction Failed!",
+      "cchange57": "User Info",
+      "cchange58": "SEND MESSAGE",
+      "cchange59": "TIP USER"
    },
    "welcomepage": {
       "wcchange1": "Welcome to Q-Chat",
diff --git a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js
index ef94570e..ec38a6fd 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js
@@ -280,8 +280,6 @@ class ChatRightPanel extends LitElement {
     }
 
 	render() {
-        console.log('this.groupMembers', this.groupMembers);
-        console.log(28, "Chat Right Panel Here");
         const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner)
 		return html`
         <div class="container">
@@ -360,7 +358,7 @@ class ChatRightPanel extends LitElement {
                 ?disabled="${this.isLoading}">
                 </vaadin-icon>
                 <div class="user-info-header">
-                ${translate("grouppage.gchange35")}
+                ${translate("chatpage.cchange57")}
                 </div>
                 <div 
                     class="send-message-button" 
@@ -372,7 +370,7 @@ class ChatRightPanel extends LitElement {
                         this.openUserInfo = false
                     }   
                 }">
-                    ${translate("grouppage.gchange56")}
+                    ${translate("chatpage.cchange58")}
                 </div>
                     <div 
                     style=${"margin-top: 5px;"} 
@@ -382,7 +380,7 @@ class ChatRightPanel extends LitElement {
                         this.openUserInfo = false
                         this.chatEditor.disable();
                     }}>
-                        ${translate("grouppage.gchange57")}
+                        ${translate("chatpage.cchange59")}
                     </div>
                 <div ?hidden="${!this.isLoading || this.message === ""}" style="text-align: right; height: 36px;">
                     <span ?hidden="${!this.isLoading}">
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
index 5d72946b..5c0a7954 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
@@ -28,15 +28,15 @@ class ChatScroller extends LitElement {
             escapeHTML: { attribute: false },
             messages: { type: Array },
             hideMessages: { type: Array },
-            setRepliedToMessageObj: {attribute: false},
-            setEditedMessageObj: {attribute: false},
-            focusChatEditor: {attribute: false},
-            sendMessage: {attribute: false},
-            sendMessageForward: {attribute: false},
-            showLastMessageRefScroller: { type: Function },
+            setRepliedToMessageObj: { attribute: false },
+            setEditedMessageObj: { attribute: false },
+            focusChatEditor: { attribute: false },
+            sendMessage: { attribute: false },
+            sendMessageForward: { attribute: false },
+            showLastMessageRefScroller: { attribute: false },
             emojiPicker: { attribute: false },
             isLoadingMessages: { type: Boolean},
-            setIsLoadingMessages: {attribute: false},
+            setIsLoadingMessages: { attribute: false },
             chatId: { type: String },
             chatEditor: { type: Object },
             setForwardProperties: { attribute: false },
@@ -62,8 +62,6 @@ class ChatScroller extends LitElement {
     }
 
     render() {
-        console.log(6, "chat scroller here");
-        console.log(this.openTipUser, "openTipUser here");
         let formattedMessages = this.messages.reduce((messageArray, message, index) => {
             const lastGroupedMessage = messageArray[messageArray.length - 1];
             let timestamp;
diff --git a/qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js b/qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js
index daa9e478..220aeb79 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js
@@ -93,6 +93,7 @@ class ChatSideNavHeads extends LitElement {
         }
         imageHTMLRes.onload = () => {
             this.isImageLoaded = true;
+            this.requestUpdate();
         }
         imageHTMLRes.onerror = () => {   
             if (this.imageFetches < 4) {
@@ -101,36 +102,67 @@ class ChatSideNavHeads extends LitElement {
                     imageHTMLRes.src = imageUrl;
                 }, 500);
             } else {
-               
-
-                this.isImageLoaded = false
+               this.isImageLoaded = false
             }
         };
+        console.log(imageHTMLRes, "here8")
         return imageHTMLRes;
       }
 
     render() {
-        let avatarImg = '';
-        let backupAvatarImg = ''
-        if(this.chatInfo.name){
+        console.log(9, 'chat side nav head');
+        console.log(this.isImageLoaded, 'Is image loaded');
+        console.log(this.chatInfo, 'Chat Info Here');
+        let avatarImg = ""
+        if (this.chatInfo.name) {
             const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
             const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
             const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.chatInfo.name}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`;
-            avatarImg= this.createImage(avatarUrl)
-          
+           avatarImg = this.createImage(avatarUrl)
         }
 
         return html`
             <li @click=${() => this.getUrl(this.chatInfo)} class="clearfix">
-                ${this.isImageLoaded ? html`${avatarImg}` : html`` }
-                ${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName ? html`<mwc-icon class="img-icon">account_circle</mwc-icon>` : html`` }
-                ${!this.isImageLoaded && this.chatInfo.name ? html`<div  style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.name.charAt(0)}</div>`: ''}
-                ${!this.isImageLoaded && this.chatInfo.groupName ? html`<div  style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.groupName.charAt(0)}</div>`: ''}
-                <div>
-                    <div class="name"><span style="float:left; padding-left: 8px; color: var(--chat-group);">${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} </span> </div>
-                </div>
-            </li>
-        `
+      ${this.isImageLoaded ? html`${avatarImg}` : html``}
+      ${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName
+        ? html`<mwc-icon class="img-icon">account_circle</mwc-icon>`
+        : html``}
+      ${!this.isImageLoaded && this.chatInfo.name
+        ? html`<div
+            style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url
+              ? "var(--chatHeadBgActive)"
+              : "var(--chatHeadBg)"}; color: ${this.activeChatHeadUrl ===
+            this.chatInfo.url
+              ? "var(--chatHeadTextActive)"
+              : "var(--chatHeadText)"}; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize"
+          >
+            ${this.chatInfo.name.charAt(0)}
+          </div>`
+        : ""}
+      ${!this.isImageLoaded && this.chatInfo.groupName
+        ? html`<div
+            style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url
+              ? "var(--chatHeadBgActive)"
+              : "var(--chatHeadBg)"}; color: ${this.activeChatHeadUrl === this.chatInfo.url
+              ? "var(--chatHeadTextActive)"
+              : "var(--chatHeadText)"}; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize"
+          >
+            ${this.chatInfo.groupName.charAt(0)}
+          </div>`
+        : ""}
+      <div>
+        <div class="name">
+          <span style="float:left; padding-left: 8px; color: var(--chat-group);">
+            ${this.chatInfo.groupName
+              ? this.chatInfo.groupName
+              : this.chatInfo.name !== undefined
+              ? this.chatInfo.name
+              : this.chatInfo.address.substr(0, 15)}
+          </span>
+        </div>
+      </div>
+    </li>
+    `
     }
 
     firstUpdated() {
@@ -154,6 +186,12 @@ class ChatSideNavHeads extends LitElement {
         
     }
 
+    updated(changedProperties) {
+        if (changedProperties && changedProperties.has("avatarImg")) {
+            console.log(this.avatarImg, "avatarImg");
+        }
+    }
+
     shouldUpdate(changedProperties) {
         if(changedProperties.has('activeChatHeadUrl')){
             return true
@@ -161,6 +199,9 @@ class ChatSideNavHeads extends LitElement {
         if(changedProperties.has('chatInfo')){
             return true
         }
+        if(changedProperties.has('isImageLoaded')){
+            return true
+        }
         
         return false
       }
diff --git a/qortal-ui-plugins/plugins/core/components/TipUser.js b/qortal-ui-plugins/plugins/core/components/TipUser.js
index ac389a94..2beefd48 100644
--- a/qortal-ui-plugins/plugins/core/components/TipUser.js
+++ b/qortal-ui-plugins/plugins/core/components/TipUser.js
@@ -236,7 +236,6 @@ export class TipUser extends LitElement {
     }
 
   render() {
-    console.log(7, "Tip User Here");
     return html`
       <div class="tip-user-header">      
         <img src="/img/qort.png" width="32" height="32">
diff --git a/qortal-ui-plugins/plugins/core/components/UserInfo.js b/qortal-ui-plugins/plugins/core/components/UserInfo.js
new file mode 100644
index 00000000..e69de29b