Qortal
/
qortal-ui
mirror of https://github.com/qortal/qortal-ui
4
1
Fork 4
Code Issues Projects Releases Wiki Activity
Browse Source

save messages locally and load them if they exist

pull/127/head
Phillip Lang Martinez 2 years ago
parent
04eda0354c
commit
e5d470843a
2 changed files with 139 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      qortal-ui-plugins/package.json
  2. 163
      qortal-ui-plugins/plugins/core/components/ChatPage.js

5
qortal-ui-plugins/package.json
Unescape View File

@ -19,7 +19,8 @@
"dependencies": {
"@material/mwc-list": "0.27.0",
"@material/mwc-select": "0.27.0",
"emoji-picker-js": "https://github.com/Qortal/emoji-picker-js"
"emoji-picker-js": "https://github.com/Qortal/emoji-picker-js",
"localforage": "^1.10.0"
},
"devDependencies": {
"@babel/core": "7.19.1",
@ -62,4 +63,4 @@
"engines": {
"node": ">=14.17.0"
}
}
}

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

@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js'
import { Epml } from '../../../epml.js'
import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
import localForage from "localforage";
registerTranslateConfig({
loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
})
@ -20,6 +20,10 @@ import '@material/mwc-button'
import '@material/mwc-dialog'
import '@material/mwc-icon'
const messagesCache = localForage.createInstance({
name: "messages-cache",
});
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
class ChatPage extends LitElement {
@ -152,9 +156,12 @@ class ChatPage extends LitElement {
`
}
firstUpdated() {
async firstUpdated() {
const keys = await messagesCache.keys()
console.log({ keys })
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
// this.changeLanguage();
this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
@ -263,6 +270,20 @@ class ChatPage extends LitElement {
parentEpml.imReady();
}
async updated(changedProperties) {
if (changedProperties.has('messagesRendered')) {
let data = {}
console.log('chatId', this._chatId)
console.log(this.isReceipient)
const chatReference1 = this.isReceipient ? 'direct' : 'group';
const chatReference2 = this._chatId
if (chatReference1 && chatReference2) {
await messagesCache.setItem(`${chatReference1}-${chatReference2}`, this.messagesRendered);
}
}
}
changeLanguage() {
const checkLanguage = localStorage.getItem('qortalLanguage')
@ -293,25 +314,60 @@ class ChatPage extends LitElement {
async getOldMessage(scrollElement) {
if (this._messages.length <= 15 && this._messages.length >= 1) { // 15 is the default number of messages...
let __msg = [...this._messages]
this._messages = []
this.messagesRendered = [...__msg, ...this.messagesRendered]
if (this.isReceipient) {
const getInitialMessages = await parentEpml.request('apiCall', {
type: 'api',
url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=20&reverse=true&before=${scrollElement.messageObj.timestamp}`,
});
const decodeMsgs = getInitialMessages.map((eachMessage) => {
return this.decodeMessage(eachMessage)
})
this.messagesRendered = [...decodeMsgs, ...this.messagesRendered].sort(function (a, b) {
return a.timestamp
- b.timestamp
})
await this.getUpdateComplete();
scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' });
return { oldMessages: __msg, scrollElement: scrollElement }
} else if (this._messages.length > 15) {
this.messagesRendered = [...this._messages.splice(this._messages.length - 15), ...this.messagesRendered]
} else {
const getInitialMessages = await parentEpml.request('apiCall', {
type: 'api',
url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=20&reverse=true&before=${scrollElement.messageObj.timestamp}`,
});
const decodeMsgs = getInitialMessages.map((eachMessage) => {
return this.decodeMessage(eachMessage)
})
this.messagesRendered = [...decodeMsgs, ...this.messagesRendered].sort(function (a, b) {
return a.timestamp
- b.timestamp
})
await this.getUpdateComplete();
scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' });
return { oldMessages: this._messages.splice(this._messages.length - 15), scrollElement: scrollElement }
} else {
return false
}
}
async processMessages(messages, isInitial) {
@ -344,7 +400,7 @@ class ChatPage extends LitElement {
}
// TODO: Determine number of initial messages by screen height...
this._messages.length <= 15 ? adjustMessages() : this._initialMessages = this._messages.splice(this._messages.length - 15);
this._initialMessages = this._messages
this.messagesRendered = this._initialMessages
@ -423,27 +479,27 @@ class ChatPage extends LitElement {
}
}
async renderNewMessage(newMessage) {
async renderNewMessage(newMessage) {
const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement');
if (newMessage.sender === this.selectedAddress.address) {
this.messagesRendered = [...this.messagesRendered, newMessage]
await this.getUpdateComplete();
this.messagesRendered = [...this.messagesRendered, newMessage]
await this.getUpdateComplete();
viewElement.scrollTop = viewElement.scrollHeight;
} else if (this.isUserDown) {
// Append the message and scroll to the bottom if user is down the page
this.messagesRendered = [...this.messagesRendered, newMessage]
await this.getUpdateComplete();
this.messagesRendered = [...this.messagesRendered, newMessage]
await this.getUpdateComplete();
viewElement.scrollTop = viewElement.scrollHeight;
} else {
this.messagesRendered = [...this.messagesRendered, newMessage]
await this.getUpdateComplete();
this.messagesRendered = [...this.messagesRendered, newMessage]
await this.getUpdateComplete();
this.showNewMesssageBar();
}
@ -487,7 +543,7 @@ class ChatPage extends LitElement {
async fetchChatMessages(chatId) {
const initDirect = (cid) => {
const initDirect = async (cid) => {
let initial = 0
@ -507,6 +563,9 @@ 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);
// Open Connection
@ -516,13 +575,37 @@ class ChatPage extends LitElement {
}
// Message Event
directSocket.onmessage = (e) => {
directSocket.onmessage = async (e) => {
if (initial === 0) {
const isReceipient = this.chatId.includes('direct')
const chatReference1 = isReceipient ? 'direct' : 'group';
const chatReference2 = this.chatId.split('/')[1];
const cachedData = await messagesCache.getItem(`${chatReference1}-${chatReference2}`);
let getInitialMessages = []
if (cachedData && cachedData.length !== 0) {
const lastMessage = cachedData[cachedData.length - 1]
const newMessages = await parentEpml.request('apiCall', {
type: 'api',
url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}&limit=20&reverse=true&after=${lastMessage.timestamp}`,
});
getInitialMessages = [...cachedData, ...newMessages]
} else {
getInitialMessages = await parentEpml.request('apiCall', {
type: 'api',
url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}&limit=20&reverse=true`,
});
}
this.processMessages(getInitialMessages, true)
this.isLoadingMessages = true
this.processMessages(JSON.parse(e.data), true)
initial = initial + 1
} else {
this.processMessages(JSON.parse(e.data), false)
@ -578,12 +661,38 @@ class ChatPage extends LitElement {
}
// Message Event
groupSocket.onmessage = (e) => {
groupSocket.onmessage = async (e) => {
if (initial === 0) {
const isGroup = this.chatId.includes('group')
const chatReference1 = isGroup ? 'group' : 'direct';
const chatReference2 = this.chatId.split('/')[1];
const cachedData = await messagesCache.getItem(`${chatReference1}-${chatReference2}`);
let getInitialMessages = []
if (cachedData && cachedData.length !== 0) {
const lastMessage = cachedData[cachedData.length - 1]
const newMessages = await parentEpml.request('apiCall', {
type: 'api',
url: `/chat/messages?txGroupId=${groupId}&limit=20&reverse=true&after=${lastMessage.timestamp}`,
});
getInitialMessages = [...cachedData, ...newMessages]
} else {
getInitialMessages = await parentEpml.request('apiCall', {
type: 'api',
url: `/chat/messages?txGroupId=${groupId}&limit=20&reverse=true`,
});
}
this.processMessages(getInitialMessages, true)
this.isLoadingMessages = true
this.processMessages(JSON.parse(e.data), true)
initial = initial + 1
} else {

Write Preview
Loading…
Cancel
Save