hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Compare commits

base: hippoz:15cdf8033b46a0226e558e3f56e2c6f8c23ff1f7
Branches Tags
hippoz:master
...
compare: hippoz:268a6546171c6b99a37f8e3af445af1b28dc438c
Branches Tags
hippoz:master

3 commits
15cdf8033b ... 268a654617

Author SHA1 Message Date
hippoz
268a654617
optimize messages list computation 2022-09-20 23:15:27 +03:00
hippoz
63c2a80816
fix message list recomputation 2022-09-20 23:03:28 +03:00
hippoz
265af195da
show date marker at start of channels 2022-09-20 22:52:41 +03:00
1 changed files with 17 additions and 11 deletions
Show stats Expand all files Collapse all files

28
frontend/src/stores.js
View file

@ -14,6 +14,10 @@ class Store {
this.name = name; this.name = name;
} }
log(...e) {
return storeLog(`[${this.name}]`, ...e);
}
// like subscribe, but without initially calling the handler // like subscribe, but without initially calling the handler
watch(handler) { watch(handler) {
storeLog(`[Watch] (${this.name})`, "handler:", handler); storeLog(`[Watch] (${this.name})`, "handler:", handler);
@ -174,13 +178,18 @@ class MessageStore extends Store {
} }
_recomputeMessages() { _recomputeMessages() {
this.value = this.value.map((e, i) => this._processMessage(e, this.value[i - 1])); const start = performance.now();
for (let i = 0; i < this.value.length; i++) {
this.value[i] = this._processMessage(this.value[i], this.value[i - 1]);
}
const delta = performance.now() - start;
this.log(`[_recomputeMessages] Computed ${this.value.length} messages in ${delta}ms`);
} }
_processMessage(message, previous=null) { _processMessage(message, previous=null) {
message._createdAtDate = new Date(parseInt(message.created_at)); message._createdAtDate = message._createdAtDate || new Date(parseInt(message.created_at));
message._createdAtTimeString = new Intl.DateTimeFormat(getItem("ui:locale"), { hour: "numeric", minute: "numeric" }).format(message._createdAtDate); message._createdAtTimeString = message._createdAtTimeString || new Intl.DateTimeFormat(getItem("ui:locale"), { hour: "numeric", minute: "numeric" }).format(message._createdAtDate);
message._createdAtDateString = message._createdAtDate.toLocaleDateString(); message._createdAtDateString = message._createdAtDateString || message._createdAtDate.toLocaleDateString();
message._mentions = false; message._mentions = false;
message._editable = false; message._editable = false;
message._clumped = false; message._clumped = false;
@ -194,7 +203,7 @@ class MessageStore extends Store {
if (previous && (message._createdAtDate.getTime() - previous._createdAtDate.getTime()) <= 100 * 1000 && message.author_id === previous.author_id) { if (previous && (message._createdAtDate.getTime() - previous._createdAtDate.getTime()) <= 100 * 1000 && message.author_id === previous.author_id) {
message._clumped = true; message._clumped = true;
} }
if (previous && (previous._createdAtDateString !== message._createdAtDateString)) { if (!previous || (previous._createdAtDateString !== message._createdAtDateString && !message._aboveDateMarker)) {
message._aboveDateMarker = new Intl.DateTimeFormat(getItem("ui:locale"), { month: "long", day: "numeric", year: "numeric" }).format(message._createdAtDate); message._aboveDateMarker = new Intl.DateTimeFormat(getItem("ui:locale"), { month: "long", day: "numeric", year: "numeric" }).format(message._createdAtDate);
} }
return message; return message;
@ -262,10 +271,11 @@ class MessageStore extends Store {
if (!this.isCollectingOldMessages) if (!this.isCollectingOldMessages)
return false; return false;
const target = 50; const target = 25;
const delta = this.value.length - target; const delta = this.value.length - target;
if (delta >= 1) { if (delta >= 1) {
this.value.splice(0, delta); this.value.splice(0, delta);
this._recomputeMessages();
this.updated(); this.updated();
return true; return true;
} else { } else {
@ -291,12 +301,8 @@ class MessageStore extends Store {
if (beforeCommitToStore) if (beforeCommitToStore)
beforeCommitToStore(res.json); beforeCommitToStore(res.json);
res.json.reverse(); res.json.reverse();
for (let i = 0; i < res.json.length; i++) {
const message = res.json[i];
const previous = res.json[i - 1];
res.json[i] = this._processMessage(message, previous);
}
this.value = res.json.concat(this.value); this.value = res.json.concat(this.value);
this._recomputeMessages();
this.updated(); this.updated();
} else { } else {
overlayStore.toast("Messages failed to load"); overlayStore.toast("Messages failed to load");