Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-12 10:15:50 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'feature/control-chats-with-state-not-url' into feature/implement-logic-edit-reply-messages

Browse Source
This commit is contained in:
Phillip Lang Martinez 2022-12-11 18:35:27 -05:00
commit 3a9cb55451
4 changed files with 78 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
qortal-ui-plugins/plugins/core/components/ChatHead.js
View File

@ -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`
<li @click=${() => 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) {

63
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -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`
<chat-scroller
chatId=${this.chatId}
.messages=${this.messagesRendered}
.escapeHTML=${escape}
.getOldMessage=${this.getOldMessage}
@ -1151,22 +1166,22 @@ class ChatPage extends LitElement {
directSocketLink = `ws://${nodeUrl}/websockets/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}`;
}
const directSocket = new WebSocket(directSocketLink);
this.webSocket = new WebSocket(directSocketLink);
// Open Connection
directSocket.onopen = () => {
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)
}

6
qortal-ui-plugins/plugins/core/components/ChatScroller.js
View File

@ -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');
}

34
qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js
View File

@ -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 {
<span>${translate("chatpage.cchange5")} <mwc-icon style="font-size: 16px; vertical-align: bottom;">keyboard_arrow_down</mwc-icon></span>
</div>
<div class="chat-history">
${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()}`}
</div>
</div>
@ -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`<chat-head activeChatHeadUrl=${activeChatHeadUrl} chatInfo=${JSON.stringify(eachChatHead)}></chat-head>`
return html`<chat-head activeChatHeadUrl=${this.activeChatHeadUrl} .setActiveChatHeadUrl=${(val)=> this.setActiveChatHeadUrl(val)} chatInfo=${JSON.stringify(eachChatHead)}></chat-head>`
})
}
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`<chat-page .hideNewMesssageBar=${this.hideNewMesssageBar} .showNewMesssageBar=${this.showNewMesssageBar} myAddress=${window.parent.reduxStore.getState().app.selectedAddress.address} chatId=${chatId}></chat-page>`
return html`<chat-page .hideNewMesssageBar=${this.hideNewMesssageBar} .showNewMesssageBar=${this.showNewMesssageBar} myAddress=${window.parent.reduxStore.getState().app.selectedAddress.address} chatId=${this.activeChatHeadUrl}></chat-page>`
}
setChatHeads(chatObj) {