From 4065b9003d266ecf99c654968bfab39b91a56559 Mon Sep 17 00:00:00 2001 From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com> Date: Fri, 16 Sep 2022 15:45:05 +0200 Subject: [PATCH 1/3] Translate snackbar test --- qortal-ui-core/language/de.json | 7 ++++++- qortal-ui-core/language/es.json | 7 ++++++- qortal-ui-core/language/fr.json | 7 ++++++- qortal-ui-core/language/hindi.json | 7 ++++++- qortal-ui-core/language/hr.json | 7 ++++++- qortal-ui-core/language/hu.json | 7 ++++++- qortal-ui-core/language/it.json | 7 ++++++- qortal-ui-core/language/ko.json | 7 ++++++- qortal-ui-core/language/no.json | 7 ++++++- qortal-ui-core/language/pl.json | 7 ++++++- qortal-ui-core/language/pt.json | 7 ++++++- qortal-ui-core/language/ro.json | 7 ++++++- qortal-ui-core/language/rs.json | 7 ++++++- qortal-ui-core/language/ru.json | 7 ++++++- qortal-ui-core/language/us.json | 7 ++++++- qortal-ui-core/language/zhc.json | 7 ++++++- qortal-ui-core/language/zht.json | 7 ++++++- 17 files changed, 102 insertions(+), 17 deletions(-) diff --git a/qortal-ui-core/language/de.json b/qortal-ui-core/language/de.json index 33fa9b90..06dbe884 100644 --- a/qortal-ui-core/language/de.json +++ b/qortal-ui-core/language/de.json @@ -121,7 +121,12 @@ "import":"Knoten Importieren", "export":"Knoten Exportieren", "deletecustomnode":"Alle benutzerdefinierten Knoten entfernen", - "warning":"Ihre bestehenden Knoten werden gelöscht und aus dem Backup neu erstellt." + "warning":"Ihre bestehenden Knoten werden gelöscht und aus dem Backup neu erstellt.", + "snack1":"Standardknoten erfolgreich gelöscht und hinzugefügt", + "snack2":"UI mit Knoten verbunden", + "snack3":"Benutzerdefinierter Knoten erfolgreich hinzugefügt und gespeichert", + "snack4":"Knoten erfolgreich gespeichert als", + "snack5":"Knoten erfolgreich importiert" }, "appinfo":{ "blockheight":"Blockhöhe", diff --git a/qortal-ui-core/language/es.json b/qortal-ui-core/language/es.json index 11950861..36b86d98 100644 --- a/qortal-ui-core/language/es.json +++ b/qortal-ui-core/language/es.json @@ -121,7 +121,12 @@ "import":"Importar Nodos", "export":"Exportar Nodos", "deletecustomnode":"Eliminar todos los nodos personalizados", - "warning":"Sus nodos existentes se eliminarán y se crearán nuevos a partir de la copia de seguridad." + "warning":"Sus nodos existentes se eliminarán y se crearán nuevos a partir de la copia de seguridad.", + "snack1":"Nodos estándar eliminados y agregados con éxito", + "snack2":"UI conectada al nodo", + "snack3":"Nodo personalizado agregado y guardado con éxito", + "snack4":"Nodos guardados con éxito como", + "snack5":"Nodos importados con éxito" }, "appinfo":{ "blockheight":"Altura del Bloque", diff --git a/qortal-ui-core/language/fr.json b/qortal-ui-core/language/fr.json index fe29e711..0cbca9bd 100644 --- a/qortal-ui-core/language/fr.json +++ b/qortal-ui-core/language/fr.json @@ -121,7 +121,12 @@ "import":"Importer des Noeuds", "export":"Exporter des Noeuds", "deletecustomnode":"Supprimer tous les noeuds personnalisés", - "warning":"Vos noeuds existants seront supprimés et créés à partir de la sauvegarde." + "warning":"Vos noeuds existants seront supprimés et créés à partir de la sauvegarde.", + "snack1":"Noeuds standard supprimés et ajoutés avec succès", + "snack2":"Interface utilisateur connectée au noeud", + "snack3":"Noeud personnalisé ajouté et enregistré avec succès", + "snack4":"Les noeuds ont été enregistrés avec succès sous", + "snack5":"Les noeuds ont été importés avec succès" }, "appinfo":{ "blockheight":"Hauteur de bloc", diff --git a/qortal-ui-core/language/hindi.json b/qortal-ui-core/language/hindi.json index a83b625e..6c73abc1 100644 --- a/qortal-ui-core/language/hindi.json +++ b/qortal-ui-core/language/hindi.json @@ -122,7 +122,12 @@ "import":"आयात नोड्स", "export":"निर्यात नोड्स", "deletecustomnode":"सभी कस्टम नोड्स निकालें", - "warning":"आपके मौजूदा नोड्स हटा दिए जाएंगे और बैकअप से नया बनाया जाएगा।" + "warning":"आपके मौजूदा नोड्स हटा दिए जाएंगे और बैकअप से नया बनाया जाएगा।", + "snack1":"मानक नोड्स को सफलतापूर्वक हटा दिया गया और जोड़ा गया", + "snack2":"यूआई नोड से जुड़ा", + "snack3":"कस्टम नोड को सफलतापूर्वक जोड़ा और सहेजा गया", + "snack4":"नोड्स सफलतापूर्वक सहेजे गए", + "snack5":"नोड्स सफलतापूर्वक आयात किए गए" }, "appinfo":{ "blockheight":"ब्लॉक ऊँचाई", diff --git a/qortal-ui-core/language/hr.json b/qortal-ui-core/language/hr.json index f1ad38e6..3c5d6594 100644 --- a/qortal-ui-core/language/hr.json +++ b/qortal-ui-core/language/hr.json @@ -121,7 +121,12 @@ "import":"Uvoz Čvorovi", "export":"Izvozni Čvorovi", "deletecustomnode":"Ukloni sve prilagođene čvorove", - "warning":"Vaši postojeći čvorovi bit će izbrisani i novi će se stvoriti iz sigurnosne kopije." + "warning":"Vaši postojeći čvorovi bit će izbrisani i novi će se stvoriti iz sigurnosne kopije.", + "snack1":"Uspješno izbrisani i dodani standardni čvorovi", + "snack2":"UI spojen na čvor", + "snack3":"Uspješno dodan i spremljen prilagođeni čvor", + "snack4":"Čvorovi su uspješno spremljeni kao", + "snack5":"Čvorovi su uspješno uvezeni" }, "appinfo":{ "blockheight":"Visina bloka", diff --git a/qortal-ui-core/language/hu.json b/qortal-ui-core/language/hu.json index 59a7dee6..31e7d54a 100644 --- a/qortal-ui-core/language/hu.json +++ b/qortal-ui-core/language/hu.json @@ -121,7 +121,12 @@ "import":"Csomópontok Importálása", "export":"Csomópontok Exportálása", "deletecustomnode":"Távolítsa el az összes egyéni csomópontot", - "warning":"A meglévő csomópontok törlődnek, és a biztonsági másolatból újak jönnek létre." + "warning":"A meglévő csomópontok törlődnek, és a biztonsági másolatból újak jönnek létre.", + "snack1":"A szabványos csomópontok sikeresen törölve és hozzáadva", + "snack2":"UI csatlakozik a csomóponthoz", + "snack3":"Az egyéni csomópont sikeresen hozzáadva és mentve", + "snack4":"A csomópontok sikeresen mentve másként", + "snack5":"A csomópontok sikeresen importálva" }, "appinfo":{ "blockheight":"Blokk Magassága", diff --git a/qortal-ui-core/language/it.json b/qortal-ui-core/language/it.json index 94864748..04cfa409 100644 --- a/qortal-ui-core/language/it.json +++ b/qortal-ui-core/language/it.json @@ -121,7 +121,12 @@ "import":"Importa Nodi", "export":"Esporta Nodi", "deletecustomnode":"Rimuovi tutti i nodi personalizzati", - "warning":"I tuoi nodi esistenti verranno eliminati e dal backup verranno creati di nuovo." + "warning":"I tuoi nodi esistenti verranno eliminati e dal backup verranno creati di nuovo.", + "snack1":"Nodi standard eliminati e aggiunti con successo", + "snack2":"Interfaccia utente collegata al nodo", + "snack3":"Nodo personalizzato aggiunto e salvato con successo", + "snack4":"Nodi salvati con successo come", + "snack5":"Nodi importati correttamente" }, "appinfo":{ "blockheight":"Altezza blocco", diff --git a/qortal-ui-core/language/ko.json b/qortal-ui-core/language/ko.json index 9ba6614d..987f978c 100644 --- a/qortal-ui-core/language/ko.json +++ b/qortal-ui-core/language/ko.json @@ -121,7 +121,12 @@ "import":"노드 가져오기", "export":"노드 내보내기", "deletecustomnode":"모든 사용자 정의 노드 제거", - "warning":"기존 노드가 삭제되고 백업에서 새로 생성됩니다." + "warning":"기존 노드가 삭제되고 백업에서 새로 생성됩니다.", + "snack1":"표준 노드를 성공적으로 삭제 및 추가했습니다.", + "snack2":"노드에 연결된 UI", + "snack3":"사용자 정의 노드를 성공적으로 추가하고 저장했습니다.", + "snack4":"노드가 다음으로 성공적으로 저장되었습니다", + "snack5":"노드를 성공적으로 가져왔습니다." }, "appinfo":{ "blockheight":"블록 높이", diff --git a/qortal-ui-core/language/no.json b/qortal-ui-core/language/no.json index 586b881b..04aaddf3 100644 --- a/qortal-ui-core/language/no.json +++ b/qortal-ui-core/language/no.json @@ -121,7 +121,12 @@ "import":"Importer Noder", "export":"Eksporter Noder", "deletecustomnode":"Fjern alle egendefinerte noder", - "warning":"Dine eksisterende noder vil bli slettet og nye opprettet fra sikkerhetskopien." + "warning":"Dine eksisterende noder vil bli slettet og nye opprettet fra sikkerhetskopien.", + "snack1":"Slettet og lagt til standardnoder", + "snack2":"UI koblet til node", + "snack3":"Egendefinert node er lagt til og lagret", + "snack4":"Noder ble lagret som", + "snack5":"Noder ble importert" }, "appinfo":{ "blockheight":"Blokkhøyde", diff --git a/qortal-ui-core/language/pl.json b/qortal-ui-core/language/pl.json index eb3868ba..c5e0b57f 100644 --- a/qortal-ui-core/language/pl.json +++ b/qortal-ui-core/language/pl.json @@ -121,7 +121,12 @@ "import":"Importuj Węzły", "export":"Eksportuj Węzły", "deletecustomnode":"Usuń wszystkie niestandardowe węzły", - "warning":"Twoje istniejące węzły zostaną usunięte, a z kopii zapasowej utworzone nowe." + "warning":"Twoje istniejące węzły zostaną usunięte, a z kopii zapasowej utworzone nowe.", + "snack1":"Pomyślnie usunięto i dodano standardowe węzły", + "snack2":"Interfejs użytkownika połączony z węzłem", + "snack3":"Pomyślnie dodano i zapisano niestandardowy węzeł", + "snack4":"Węzły pomyślnie zapisane jako", + "snack5":"Węzły pomyślnie zaimportowane" }, "appinfo":{ "blockheight":"Wysokość bloku", diff --git a/qortal-ui-core/language/pt.json b/qortal-ui-core/language/pt.json index 079ac30e..d3463b86 100644 --- a/qortal-ui-core/language/pt.json +++ b/qortal-ui-core/language/pt.json @@ -121,7 +121,12 @@ "import":"Importar Nós", "export":"Exportar Nós", "deletecustomnode":"Remover todos os nós personalizados", - "warning":"Seus nós existentes serão excluídos e do backup será criado." + "warning":"Seus nós existentes serão excluídos e do backup será criado.", + "snack1":"Nós padrão excluídos e adicionados com sucesso", + "snack2":"UI conectada ao nó", + "snack3":"Nó personalizado adicionado e salvo com sucesso", + "snack4":"Nós salvos com sucesso como", + "snack5":"Nós importados com sucesso" }, "appinfo":{ "blockheight":"Altura do Bloco", diff --git a/qortal-ui-core/language/ro.json b/qortal-ui-core/language/ro.json index a479107b..286aab56 100644 --- a/qortal-ui-core/language/ro.json +++ b/qortal-ui-core/language/ro.json @@ -121,7 +121,12 @@ "import":"Import Noduri", "export":"Export Noduri", "deletecustomnode":"Eliminati toate nodurile personalizate", - "warning":"Nodurile dvs. existente vor fi sterse si din backup vor fi create noi." + "warning":"Nodurile dvs. existente vor fi sterse si din backup vor fi create noi.", + "snack1":"Noduri standard au fost sterse si adaugate cu succes", + "snack2":"Interfata de utilizare conectata la nod", + "snack3":"Nod personalizat adaugat si salvat cu succes", + "snack4":"Nodurile au fost salvate cu succes ca", + "snack5":"Nodurile au fost importate cu succes" }, "appinfo":{ "blockheight":"Dimensiunea blocului", diff --git a/qortal-ui-core/language/rs.json b/qortal-ui-core/language/rs.json index f6c7d8d0..8b82c8b6 100644 --- a/qortal-ui-core/language/rs.json +++ b/qortal-ui-core/language/rs.json @@ -121,7 +121,12 @@ "import":"Uvoz Čvorova", "export":"Izvoz Čvorova", "deletecustomnode":"Uklonite sve prilagođene čvorove", - "warning":"Vaši postojeći čvorovi će biti izbrisani, a iz rezervne kopije biće stvoreni novi." + "warning":"Vaši postojeći čvorovi će biti izbrisani, a iz rezervne kopije biće stvoreni novi.", + "snack1":"Uspešno su izbrisani i dodati standardni čvorovi", + "snack2":"UI je povezan sa čvorom", + "snack3":"Uspešno dodat i sačuvan prilagođeni čvor", + "snack4":"Čvorovi su uspešno sačuvani kao", + "snack5":"Čvorovi su uspešno uvezeni" }, "appinfo":{ "blockheight":"Visina Bloka", diff --git a/qortal-ui-core/language/ru.json b/qortal-ui-core/language/ru.json index 60b7542c..f2b49c40 100644 --- a/qortal-ui-core/language/ru.json +++ b/qortal-ui-core/language/ru.json @@ -121,7 +121,12 @@ "import":"Импорт Узлов", "export":"Экспорт Узлов", "deletecustomnode":"Удалить все пользовательские узлы", - "warning":"Существующие узлы будут удалены, а из резервной копии созданы новые." + "warning":"Существующие узлы будут удалены, а из резервной копии созданы новые.", + "snack1":"Успешно удалены и добавлены стандартные узлы", + "snack2":"Пользовательский интерфейс, подключенный к узлу", + "snack3":"Пользовательский узел успешно добавлен и сохранен", + "snack4":"Узлы успешно сохранены как", + "snack5":"Узлы успешно импортированы" }, "appinfo":{ "blockheight":"Высота блока", diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index 32f48d13..4ae2aa3b 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -121,7 +121,12 @@ "import":"Import Nodes", "export":"Export Nodes", "deletecustomnode":"Remove All Custom Nodes", - "warning":"Your existing nodes will be deleted and from backup new created." + "warning":"Your existing nodes will be deleted and from backup new created.", + "snack1":"Successfully deleted and added standard nodes", + "snack2":"UI conected to node", + "snack3":"Successfully added and saved custom node", + "snack4":"Nodes successfully saved as", + "snack5":"Nodes successfully imported" }, "appinfo":{ "blockheight":"Block Height", diff --git a/qortal-ui-core/language/zhc.json b/qortal-ui-core/language/zhc.json index f1489ee9..ffe1f5d7 100644 --- a/qortal-ui-core/language/zhc.json +++ b/qortal-ui-core/language/zhc.json @@ -121,7 +121,12 @@ "import":"导入节点", "export":"导出节点", "deletecustomnode":"删除所有自定义节点", - "warning":"您现有的节点将被删除并从备份中创建新的。" + "warning":"您现有的节点将被删除并从备份中创建新的。", + "snack1":"成功删除和添加标准节点", + "snack2":"连接到节点的 UI", + "snack3":"成功添加并保存自定义节点", + "snack4":"节点成功保存为", + "snack5":"节点成功导入" }, "appinfo":{ "blockheight":"区块高度", diff --git a/qortal-ui-core/language/zht.json b/qortal-ui-core/language/zht.json index fd437fde..ae241740 100644 --- a/qortal-ui-core/language/zht.json +++ b/qortal-ui-core/language/zht.json @@ -121,7 +121,12 @@ "import":"導入節點", "export":"導出節點", "deletecustomnode":"刪除所有自定義節點", - "warning":"您現有的節點將被刪除並從備份中創建新的。" + "warning":"您現有的節點將被刪除並從備份中創建新的。", + "snack1":"成功刪除和添加標準節點", + "snack2":"連接到節點的 UI", + "snack3":"成功添加並保存自定義節點", + "snack4":"節點成功保存為", + "snack5":"節點成功導入" }, "appinfo":{ "blockheight":"區塊高度", From a3d3d82d9ca11ad7264eef8d9f65e93f076beb56 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Fri, 16 Sep 2022 19:53:08 -0500 Subject: [PATCH 2/3] New Messages Refactored --- .../plugins/core/components/ChatPage.js | 58 +++++++------------ 1 file changed, 22 insertions(+), 36 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 69d18120..f07cebdd 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -314,7 +314,8 @@ class ChatPage extends LitElement { } } - async processMessages(messages, isInitial) { + async processMessages(messages, isInitial) { + if (isInitial) { this.messages = messages.map((eachMessage) => { @@ -330,7 +331,10 @@ class ChatPage extends LitElement { } }) - this._messages = [...this.messages] + this._messages = [...this.messages].sort(function (a, b) { + return a.timestamp + - b.timestamp + }) const adjustMessages = () => { @@ -341,46 +345,32 @@ 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.messagesRendered = this._initialMessages - - // try { - // const viewElement = this.shadowRoot.querySelector('chat-scroller') - // console.log({viewElement}) - // // viewElement.scrollTop = this.viewElement.scrollHeight + 50 - // } catch (error) { - // console.error(error) - // } - - + + this.isLoadingMessages = false setTimeout(() => this.downElementObserver(), 500) } else { - let _newMessages = messages.map((eachMessage) => { - if (eachMessage.isText === true) { - let _eachMessage = this.decodeMessage(eachMessage) + messages.forEach((eachMessage) => { + + const _eachMessage = this.decodeMessage(eachMessage) + + + this.renderNewMessage(_eachMessage) - if (this.messageSignature !== eachMessage.signature) { - this.messageSignature = eachMessage.signature - // What are we waiting for, send in the message immediately... - this.renderNewMessage(_eachMessage) - } - return _eachMessage - } else { - let _eachMessage = this.decodeMessage(eachMessage) - if (this.messageSignature !== eachMessage.signature) { - this.messageSignature = eachMessage.signature - this.renderNewMessage(_eachMessage) - } - return _eachMessage - } }) - this.newMessages = this.newMessages.concat(_newMessages) - + + // this.newMessages = this.newMessages.concat(_newMessages) + this.messagesRendered = [...this.messagesRendered].sort(function (a, b) { + return a.timestamp + - b.timestamp + }) + } } @@ -436,10 +426,6 @@ class ChatPage extends LitElement { async renderNewMessage(newMessage) { const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement'); - const downObserver = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('downObserver'); - const li = document.createElement('li'); - li.innerHTML = this.chatMessageTemplate(newMessage); - li.id = newMessage.signature; if (newMessage.sender === this.selectedAddress.address) { From e5d470843a827e432e31e818aba9ca9a63ab57c6 Mon Sep 17 00:00:00 2001 From: Phillip Lang Martinez Date: Sat, 24 Sep 2022 19:39:01 +0300 Subject: [PATCH 3/3] save messages locally and load them if they exist --- qortal-ui-plugins/package.json | 5 +- .../plugins/core/components/ChatPage.js | 165 +++++++++++++++--- 2 files changed, 140 insertions(+), 30 deletions(-) diff --git a/qortal-ui-plugins/package.json b/qortal-ui-plugins/package.json index af41573a..6a05c76c 100644 --- a/qortal-ui-plugins/package.json +++ b/qortal-ui-plugins/package.json @@ -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" } -} \ No newline at end of file +} diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index f07cebdd..970029f3 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -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] - await this.getUpdateComplete(); - scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' }); - return { oldMessages: this._messages.splice(this._messages.length - 15), scrollElement: scrollElement } } 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 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 {