Use new message type to update users (destinygg#308)

* Add field for user ID

This allows updating a user by ID. Updating by username is not possible
because usernames can change.

* Set the user on `UPDATEUSER` events

`onDISPATCH` will handle updates to users who aren't the authenticated
users.

* Handle updates by ID rather than by username

When handling by username, changes to usernames aren't processed
correctly.

* Delete handler for now-unused `REFRESH` messages

assets/chat/js/chat.js

@@ -112,7 +112,6 @@ class Chat {
     // The websocket connection, emits events from the chat server
     this.source = new ChatSource();
 
-    this.source.on('REFRESH', () => window.location.reload(false));
     this.source.on('PING', (data) => this.source.send('PONG', data));
     this.source.on('CONNECTING', (data) => this.onCONNECTING(data));
     this.source.on('ME', (data) => this.onME(data));
@@ -140,6 +139,7 @@ class Chat {
     this.source.on('GIFTSUB', (data) => this.onGIFTSUB(data));
     this.source.on('MASSGIFT', (data) => this.onMASSGIFT(data));
     this.source.on('DONATION', (data) => this.onDONATION(data));
+    this.source.on('UPDATEUSER', (data) => this.onUPDATEUSER(data));
 
     this.control.on('SEND', (data) => this.cmdSEND(data));
     this.control.on('HINT', (data) => this.cmdHINT(data));
@@ -1392,6 +1392,12 @@ class Chat {
     }
   }
 
+  onUPDATEUSER(data) {
+    if (this.user?.id === data.id) {
+      this.setUser(data);
+    }
+  }
+
   cmdSHOWPOLL() {
     if (this.chatpoll.poll) {
       this.chatpoll.show();

assets/chat/js/menus/ChatUserMenu.js

@@ -76,6 +76,7 @@ export default class ChatUserMenu extends ChatMenu {
     this.chat.source.on('JOIN', (data) => this.addAndRedraw(data));
     this.chat.source.on('QUIT', (data) => this.removeAndRedraw(data));
     this.chat.source.on('NAMES', (data) => this.addAll(data.users));
+    this.chat.source.on('UPDATEUSER', (data) => this.replaceAndRedraw(data));
     this.searchinput.on(
       'keyup',
       debounce(
@@ -175,6 +176,15 @@ export default class ChatUserMenu extends ChatMenu {
     }
   }
 
+  replaceAndRedraw(user) {
+    if (this.hasElement(user)) {
+      this.removeElement(user);
+      this.addElement(user, true);
+      this.filter();
+      this.redraw();
+    }
+  }
+
   highestSection(user) {
     const flairs = [...this.flairSection.keys()];
     if (flairs.length > 0) {
@@ -215,7 +225,7 @@ export default class ChatUserMenu extends ChatMenu {
   }
 
   removeElement(user) {
-    this.container.find(`.user-entry[data-username="${user.nick}"]`).remove();
+    this.container.find(`.user-entry[data-user-id="${user.id}"]`).remove();
     this.totalcount -= 1;
   }
 
@@ -226,7 +236,7 @@ export default class ChatUserMenu extends ChatMenu {
     const features =
       user.features.length === 0 ? 'nofeature' : user.features.join(' ');
     const usr = $(
-      `<div class="user-entry" data-username="${user.username}"><span class="user ${features}">${label}</span><div class="user-actions"><i class="mention-nick"></i><i class="whisper-nick"></i></div></div>`
+      `<div class="user-entry" data-username="${user.username}" data-user-id="${user.id}"><span class="user ${features}">${label}</span><div class="user-actions"><i class="mention-nick"></i><i class="whisper-nick"></i></div></div>`
     );
     const section = this.sections.get(this.highestSection(user));
 
@@ -251,8 +261,7 @@ export default class ChatUserMenu extends ChatMenu {
 
   hasElement(user) {
     return (
-      this.container.find(`.user-entry[data-username="${user.nick}"]`).length >
-      0
+      this.container.find(`.user-entry[data-user-id="${user.id}"]`).length > 0
     );
   }
 

assets/chat/js/user.js

@@ -3,11 +3,13 @@ import UserFeature from './features';
 class ChatUser {
   constructor(args = {}) {
     if (typeof args === 'string') {
+      this.id = null;
       this.nick = args;
       this.username = args;
       this.createdDate = args;
       this.features = [];
     } else {
+      this.id = args.id || null;
       this.nick = args.nick || '';
       this.username = args.nick || '';
       this.createdDate = args.createdDate || '';