From ae651e08e95bc0a3a85c5a639074ba247ae5e0bf Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Fri, 9 Mar 2018 10:43:03 +0200
Subject: [PATCH] Reliable observers

---
 client/src/ui/automanip.js | 30 +++++++++++++++++++++++++-----
 client/src/ui/dom.js       | 13 ++++++-------
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/client/src/ui/automanip.js b/client/src/ui/automanip.js
index a990f63e..c40860c1 100644
--- a/client/src/ui/automanip.js
+++ b/client/src/ui/automanip.js
@@ -42,20 +42,32 @@ export default class extends EventListener {
 
     constructor() {
         super();
-        const filter = function (mutation) {
-            return mutation.removedNodes && mutation.removedNodes.length && mutation.removedNodes[0].className && mutation.removedNodes[0].className.includes('loading-more');
+        const messageFilter = function (m) {
+            return m.addedNodes && m.addedNodes.length && m.addedNodes[0].classList && m.addedNodes[0].classList.contains('message-group');
         }
 
-        DOM.observer.subscribe('loading-more-manip', filter, mutation => {
-            Events.emit('ui:loadedmore');
+        DOM.observer.subscribe('loading-more-manip', messageFilter, mutations => {
             this.setIds();
             this.makeMutable();
-        });
+            Events.emit('ui:laodedmore', mutations.map(m => m.addedNodes[0]));
+        }, 'filter');
+
+        const userFilter = function (m) {
+            return m.addedNodes && m.addedNodes.length && m.addedNodes[0].classList && m.addedNodes[0].classList.contains('member');
+        }
+
+        DOM.observer.subscribe('loading-more-users-manip', userFilter, mutations => {
+            this.setUserIds();
+            Events.emit('ui:loadedmoreusers', mutations.map(m => m.addedNodes[0]));
+        }, 'filter');
     }
 
     bindings() {
         this.manipAll = this.manipAll.bind(this);
         this.markupInjector = this.markupInjector.bind(this);
+        this.setIds = this.setIds.bind(this);
+        this.setMessageIds = this.setMessageIds.bind(this);
+        this.setUserIds = this.setUserIds.bind(this);
     }
 
     get eventBindings() {
@@ -142,9 +154,17 @@ export default class extends EventListener {
     }
 
     setIds() {
+        this.setMessageIds();
+        this.setUserIds();
+    }
+
+    setMessageIds() {
         for (let msg of document.querySelectorAll('.message')) {
             this.setId(msg);
         }
+    }
+
+    setUserIds() {
         for (let user of document.querySelectorAll('.channel-members-wrap .member')) {
             this.setUserId(user);
         }
diff --git a/client/src/ui/dom.js b/client/src/ui/dom.js
index 67ca8bbe..8f1008b1 100644
--- a/client/src/ui/dom.js
+++ b/client/src/ui/dom.js
@@ -43,11 +43,9 @@ class DOMObserver {
     observerCallback(mutations) {
         for (let sub of this.subscriptions) {
             try {
-                const f = mutations.find(sub.filter);
-                if (f) {
-                    sub.callback(f);
-                    continue;
-                }
+                const f = sub.type && sub.type === 'filter' ? mutations.filter(sub.filter) : mutations.find(sub.filter);
+                if (!f || !f.length) continue;
+                sub.callback(f);
             } catch(err) {}
         }
     }
@@ -68,12 +66,13 @@ class DOMObserver {
         return this._subscriptions || (this._subscriptions = []);
     }
 
-    subscribe(id, filter, callback) {
+    subscribe(id, filter, callback, type) {
         if (this.subscriptions.find(sub => sub.id === id)) return;
         this.subscriptions.push({
             id,
             filter,
-            callback
+            callback,
+            type
         });
     }