Make testing for moderator state centralized in User class

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -17,6 +17,7 @@ import { ScrollToBotBtn } from './ScrollToBotBtn';
 import { ChatActionMessage } from '../ChatActionMessage/ChatActionMessage';
 import { ChatSocialMessage } from '../ChatSocialMessage/ChatSocialMessage';
 import { ChatNameChangeMessage } from '../ChatNameChangeMessage/ChatNameChangeMessage';
+import { User } from '../../../interfaces/user.model';
 
 export type ChatContainerProps = {
   messages: ChatMessage[];
@@ -75,15 +76,11 @@ function shouldCollapseMessages(
 }
 
 function checkIsModerator(message: ChatMessage | ConnectedClientInfoEvent) {
-  const {
-    user: { scopes },
-  } = message;
+  const { user } = message;
 
-  if (!scopes || scopes.length === 0) {
-    return false;
-  }
+  const u = new User(user);
 
-  return scopes.includes('MODERATOR');
+  return u.isModerator();
 }
 
 export const ChatContainer: FC<ChatContainerProps> = ({

web/components/chat/chat.js

@@ -140,15 +140,3 @@ export function emojify(HTML, emojiList) {
   }
   return HTML;
 }
-
-// MODERATOR UTILS
-export function checkIsModerator(message) {
-  const { user } = message;
-  const { scopes } = user;
-
-  if (!scopes || scopes.length === 0) {
-    return false;
-  }
-
-  return scopes.includes('MODERATOR');
-}

web/components/stores/ClientConfigStore.tsx

@@ -292,13 +292,14 @@ export const ClientConfigStore: FC = () => {
           setChatAuthenticated,
           setCurrentUser,
         );
-        if (
-          !hasBeenModeratorNotified &&
-          (message as ChatEvent).user?.scopes.includes('MODERATOR')
-        ) {
+        if (message as ChatEvent) {
+          const m = new ChatEvent(message);
+          if (!hasBeenModeratorNotified && m.user?.isModerator()) {
             setChatMessages(currentState => [...currentState, message as ChatEvent]);
             hasBeenModeratorNotified = true;
           }
+        }
+
         break;
       case MessageType.CHAT:
         setChatMessages(currentState => [...currentState, message as ChatEvent]);

web/interfaces/socket-events.ts

@@ -28,8 +28,25 @@ export interface SocketEvent {
 export interface ConnectedClientInfoEvent extends SocketEvent {
   user: User;
 }
-export interface ChatEvent extends SocketEvent {
+export class ChatEvent implements SocketEvent {
+  constructor(message) {
+    this.id = message.id;
+    this.timestamp = message.timestamp;
+    this.type = message.type;
+    this.body = message.body;
+    if (message.user) {
+      this.user = new User(message.user);
+    }
+  }
+
+  timestamp: Date;
+
+  type: MessageType;
+
+  id: string;
+
   user: User;
+
   body: string;
 }
 

web/interfaces/user.fixture.ts

@@ -9,6 +9,8 @@ export const createUser = (name: string, color: number, createdAt: Date): User =
   nameChangedAt: createdAt,
   previousNames: [],
   scopes: [],
+
+  isModerator: () => false,
 });
 
 export const spidermanUser = createUser('Spiderman', 1, new Date(2020, 1, 2));

web/interfaces/user.model.ts

@@ -1,10 +1,37 @@
-export interface User {
+/* eslint-disable import/prefer-default-export */
+export class User {
+  constructor(u) {
+    this.id = u.id;
+    this.displayName = u.displayName;
+    this.displayColor = u.displayColor;
+    this.createdAt = u.createdAt;
+    this.previousNames = u.previousNames;
+    this.nameChangedAt = u.nameChangedAt;
+    this.scopes = u.scopes;
+    this.authenticated = u.authenticated;
+  }
+
   id: string;
+
   displayName: string;
+
   displayColor: number;
+
   createdAt: Date;
+
   previousNames: string[];
+
   nameChangedAt: Date;
+
   scopes: string[];
+
   authenticated: boolean;
+
+  public isModerator = (): boolean => {
+    if (!this.scopes || this.scopes.length === 0) {
+      return false;
+    }
+
+    return this.scopes.includes('moderator');
+  };
 }