Wire up chat message props. Add username highlighting. Closes #1921

web/components/stores/ClientConfigStore.tsx

@@ -47,6 +47,16 @@ export const chatDisplayNameAtom = atom<string>({
   default: null,
 });
 
+export const chatUserIdAtom = atom<string>({
+  key: 'chatUserIdAtom',
+  default: null,
+});
+
+export const isChatModeratorAtom = atom<boolean>({
+  key: 'isModeratorAtom',
+  default: false,
+});
+
 export const accessTokenAtom = atom<string>({
   key: 'accessTokenAtom',
   default: null,
@@ -135,6 +145,8 @@ export function ClientConfigStore() {
   const [appState, appStateSend, appStateService] = useMachine(appStateModel);
 
   const setChatDisplayName = useSetRecoilState<string>(chatDisplayNameAtom);
+  const setChatUserId = useSetRecoilState<string>(chatUserIdAtom);
+  const setIsChatModerator = useSetRecoilState<boolean>(isChatModeratorAtom);
   const setClientConfig = useSetRecoilState<ClientConfig>(clientConfigStateAtom);
   const setServerStatus = useSetRecoilState<ServerStatus>(serverStatusState);
   const setClockSkew = useSetRecoilState<Number>(clockSkewAtom);
@@ -236,7 +248,12 @@ export function ClientConfigStore() {
         resetAndReAuth();
         break;
       case MessageType.CONNECTED_USER_INFO:
-        handleConnectedClientInfoMessage(message as ConnectedClientInfoEvent, setChatDisplayName);
+        handleConnectedClientInfoMessage(
+          message as ConnectedClientInfoEvent,
+          setChatDisplayName,
+          setChatUserId,
+          setIsChatModerator,
+        );
         break;
       case MessageType.CHAT:
         handleChatMessage(message as ChatEvent, chatMessages, setChatMessages);

web/components/stores/eventhandlers/connected-client-info-handler.ts

@@ -3,8 +3,12 @@ import { ConnectedClientInfoEvent } from '../../../interfaces/socket-events';
 export default function handleConnectedClientInfoMessage(
   message: ConnectedClientInfoEvent,
   setChatDisplayName: (string) => void,
+  setChatUserId: (number) => void,
+  setIsChatModerator: (boolean) => void,
 ) {
   const { user } = message;
-  const { displayName } = user;
+  const { id, displayName, scopes } = user;
   setChatDisplayName(displayName);
+  setChatUserId(id);
+  setIsChatModerator(scopes.includes('moderator'));
 }