diff --git a/qortal-ui-plugins/plugins/core/components/ChatHead.js b/qortal-ui-plugins/plugins/core/components/ChatHead.js index a16b11fc..4e9c170c 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatHead.js +++ b/qortal-ui-plugins/plugins/core/components/ChatHead.js @@ -14,6 +14,7 @@ class ChatHead extends LitElement { iconName: { type: String }, activeChatHeadUrl: { type: String }, isImageLoaded: { type: Boolean }, + setActiveChatHeadUrl: {attribute: false} } } @@ -116,8 +117,6 @@ class ChatHead extends LitElement { } - - return html`
  • this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}"> ${this.isImageLoaded ? html`${avatarImg}` : html`` } @@ -150,8 +149,19 @@ class ChatHead extends LitElement { parentEpml.imReady() } + shouldUpdate(changedProperties) { + if(changedProperties.has('activeChatHeadUrl')){ + return true + } + if(changedProperties.has('chatInfo')){ + return true + } + + return false + } + getUrl(chatUrl) { - this.onPageNavigation(`/app/q-chat/${chatUrl}`) + this.setActiveChatHeadUrl(chatUrl) } onPageNavigation(pageUrl) { diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index ad197b91..07b6c9ea 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -67,7 +67,8 @@ class ChatPage extends LitElement { userLanguage: { type: String }, lastMessageRefVisible: { type: Boolean }, isLoadingOldMessages: {type: Boolean}, - isEditMessageOpen: { type: Boolean } + isEditMessageOpen: { type: Boolean }, + webSocket: {attribute: false} } } @@ -746,13 +747,11 @@ class ChatPage extends LitElement { this.initChatEditor(); } - async firstUpdated() { - window.addEventListener('storage', () => { - const checkLanguage = localStorage.getItem('qortalLanguage'); - use(checkLanguage); - this.userLanguage = checkLanguage; - }) - + async initUpdate(){ + if(this.webSocket){ + this.webSocket.close() + this.webSocket= '' + } const getAddressPublicKey = () => { parentEpml.request('apiCall', { @@ -794,6 +793,16 @@ class ChatPage extends LitElement { // this.initChatEditor(); }, 100) + + } + + async firstUpdated() { + window.addEventListener('storage', () => { + const checkLanguage = localStorage.getItem('qortalLanguage'); + use(checkLanguage); + this.userLanguage = checkLanguage; + }) + parentEpml.ready().then(() => { parentEpml.subscribe('selected_address', async selectedAddress => { this.selectedAddress = {} @@ -817,10 +826,11 @@ class ChatPage extends LitElement { }) }) parentEpml.imReady(); + + await this.initUpdate() } async updated(changedProperties) { - if (changedProperties && changedProperties.has('userLanguage')) { const userLang = changedProperties.get('userLanguage') @@ -830,6 +840,10 @@ class ChatPage extends LitElement { } } + if (changedProperties && changedProperties.has('chatId') && changedProperties.get('chatId')) { + await this.initUpdate() + } + } async renderPlaceholder() { @@ -862,6 +876,7 @@ class ChatPage extends LitElement { renderChatScroller() { return html` { + this.webSocket.onopen = () => { setTimeout(pingDirectSocket, 50) } // Message Event - directSocket.onmessage = async (e) => { + this.webSocket.onmessage = async (e) => { if (initial === 0) { const isReceipient = this.chatId.includes('direct') - - const chatReference1 = isReceipient ? 'direct' : 'group'; - const chatReference2 = this.chatId.split('/')[1]; + // commented out code= localstorage persistance + // const chatReference1 = isReceipient ? 'direct' : 'group'; + // const chatReference2 = this.chatId.split('/')[1]; // const cachedData = await messagesCache.getItem(`${chatReference1}-${chatReference2}`); const cachedData = null let getInitialMessages = [] @@ -1199,17 +1214,17 @@ class ChatPage extends LitElement { } // Closed Event - directSocket.onclose = () => { + this.webSocket.onclose = () => { clearTimeout(directSocketTimeout) } // Error Event - directSocket.onerror = (e) => { + this.webSocket.onerror = (e) => { clearTimeout(directSocketTimeout) } const pingDirectSocket = () => { - directSocket.send('ping') + this.webSocket.send('ping') directSocketTimeout = setTimeout(pingDirectSocket, 295000) } @@ -1237,16 +1252,16 @@ class ChatPage extends LitElement { groupSocketLink = `ws://${nodeUrl}/websockets/chat/messages?txGroupId=${groupId}`; } - const groupSocket = new WebSocket(groupSocketLink); + this.webSocket = new WebSocket(groupSocketLink); // Open Connection - groupSocket.onopen = () => { + this.webSocket.onopen = () => { setTimeout(pingGroupSocket, 50) } // Message Event - groupSocket.onmessage = async (e) => { + this.webSocket.onmessage = async (e) => { if (initial === 0) { const isGroup = this.chatId.includes('group') @@ -1288,17 +1303,17 @@ class ChatPage extends LitElement { } // Closed Event - groupSocket.onclose = () => { + this.webSocket.onclose = () => { clearTimeout(groupSocketTimeout) } // Error Event - groupSocket.onerror = (e) => { + this.webSocket.onerror = (e) => { clearTimeout(groupSocketTimeout) } const pingGroupSocket = () => { - groupSocket.send('ping') + this.webSocket.send('ping') groupSocketTimeout = setTimeout(pingGroupSocket, 295000) } diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 05ad663b..2893b3a5 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -33,7 +33,8 @@ class ChatScroller extends LitElement { showLastMessageRefScroller: { type: Function }, emojiPicker: { attribute: false }, isLoadingMessages: { type: Boolean}, - setIsLoadingMessages: {attribute: false} + setIsLoadingMessages: {attribute: false}, + chatId: { type: String } } } @@ -112,6 +113,9 @@ class ChatScroller extends LitElement { if(changedProperties.has('isLoadingMessages')){ return true } + if(changedProperties.has('chatId') && changedProperties.get('chatId')){ + return true + } // Only update element if prop1 changed. return changedProperties.has('messages'); } diff --git a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js index 5de97d52..d05083d3 100644 --- a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js +++ b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js @@ -34,7 +34,8 @@ class Chat extends LitElement { balance: { type: Number }, theme: { type: String, reflect: true }, blockedUsers: { type: Array }, - blockedUserList: { type: Array } + blockedUserList: { type: Array }, + activeChatHeadUrl: {type: String} } } @@ -324,6 +325,15 @@ class Chat extends LitElement { this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' this.blockedUsers = [] this.blockedUserList = [] + this.activeChatHeadUrl = '' + + + } + + async setActiveChatHeadUrl(url){ + this.activeChatHeadUrl = '' + await this.updateComplete; + this.activeChatHeadUrl = url } render() { @@ -349,7 +359,8 @@ class Chat extends LitElement { ${translate("chatpage.cchange5")} keyboard_arrow_down
    - ${window.parent.location.pathname !== "/app/q-chat" ? html`${this.renderChatPage(this.chatId)}` : html`${this.renderChatWelcomePage()}`} + + ${window.parent.location.pathname !== "/app/q-chat" || this.activeChatHeadUrl ? html`${this.renderChatPage(this.chatId)}` : html`${this.renderChatWelcomePage()}`}
    @@ -416,21 +427,15 @@ class Chat extends LitElement { } firstUpdated() { - this.changeLanguage() this.changeTheme() this.getChatBlockedList() this.getLocalBlockedList() - setInterval(() => { - this.blockedUserList = JSON.parse(localStorage.getItem("ChatBlockedAddresses") || "[]") - }, 1000) - const getBlockedUsers = async () => { let blockedUsers = await parentEpml.request('apiCall', { url: `/lists/blockedAddresses?apiKey=${this.getApiKey()}` }) - this.blockedUsers = blockedUsers setTimeout(getBlockedUsers, 60000) } @@ -455,7 +460,7 @@ class Chat extends LitElement { const runFunctionsAfterPageLoad = () => { // Functions to exec after render while waiting for page info... - getDataFromURL() + // getDataFromURL() try { let key = `${window.parent.reduxStore.getState().app.selectedAddress.address.substr(0, 10)}_chat-heads` @@ -572,6 +577,8 @@ class Chat extends LitElement { hidelist.push(item) }) localStorage.setItem("MessageBlockedAddresses", JSON.stringify(hidelist)) + + this.blockedUserList = hidelist }) } @@ -604,6 +611,7 @@ class Chat extends LitElement { obj.push(noName) } localStorage.setItem("ChatBlockedAddresses", JSON.stringify(obj)) + this.blockedUserList = JSON.parse(localStorage.getItem("ChatBlockedAddresses") || "[]") }) }) }) @@ -681,20 +689,20 @@ class Chat extends LitElement { let tempUrl = document.location.href let splitedUrl = decodeURI(tempUrl).split('?') - let activeChatHeadUrl = splitedUrl[1] === undefined ? '' : splitedUrl[1] + // let activeChatHeadUrl = splitedUrl[1] === undefined ? '' : splitedUrl[1] return chatHeadArr.map(eachChatHead => { - return html`` + return html` this.setActiveChatHeadUrl(val)} chatInfo=${JSON.stringify(eachChatHead)}>` }) } renderChatPage(chatId) { + // Check for the chat ID from and render chat messages // Else render Welcome to Q-CHat // TODO: DONE: Do the above in the ChatPage - - return html`` + return html`` } setChatHeads(chatObj) {