forked from Qortal/qortal-ui
control chat with state
This commit is contained in:
parent
6e4e171257
commit
f980196988
@ -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) {
|
||||
|
||||
@ -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() {
|
||||
@ -1151,22 +1165,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 +1213,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 +1251,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 +1302,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)
|
||||
}
|
||||
|
||||
@ -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,13 @@ class Chat extends LitElement {
|
||||
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
|
||||
this.blockedUsers = []
|
||||
this.blockedUserList = []
|
||||
this.activeChatHeadUrl = ''
|
||||
|
||||
|
||||
}
|
||||
|
||||
setActiveChatHeadUrl(url){
|
||||
this.activeChatHeadUrl = url
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -349,7 +357,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 +425,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 +458,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 +575,8 @@ class Chat extends LitElement {
|
||||
hidelist.push(item)
|
||||
})
|
||||
localStorage.setItem("MessageBlockedAddresses", JSON.stringify(hidelist))
|
||||
|
||||
this.blockedUserList = hidelist
|
||||
})
|
||||
}
|
||||
|
||||
@ -604,6 +609,7 @@ class Chat extends LitElement {
|
||||
obj.push(noName)
|
||||
}
|
||||
localStorage.setItem("ChatBlockedAddresses", JSON.stringify(obj))
|
||||
this.blockedUserList = JSON.parse(localStorage.getItem("ChatBlockedAddresses") || "[]")
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -681,20 +687,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) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user