feat: handle switching the active account

packages/mgt-chat/src/components/Chat/Chat.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { ErrorBar, FluentThemeProvider, MessageThread, SendBox } from '@azure/communication-react';
 import { Person, PersonCardInteraction, Spinner } from '@microsoft/mgt-react';
-import { FluentTheme } from '@fluentui/react';
+import { FluentTheme, MessageBarType } from '@fluentui/react';
 import { FluentProvider, makeStyles, shorthands, teamsLightTheme } from '@fluentui/react-components';
 import { useGraphChatClient } from '../../statefulClient/useGraphChatClient';
 import ChatHeader from '../ChatHeader/ChatHeader';
+import ChatMessageBar from '../ChatMessageBar/ChatMessageBar';
 import { registerAppIcons } from '../styles/registerIcons';
 import { ManageChatMembers } from '../ManageChatMembers/ManageChatMembers';
 import { StatefulGraphChatClient } from 'src/statefulClient/StatefulGraphChatClient';
@@ -114,8 +115,18 @@ export const Chat = ({ chatId }: IMgtChatProps) => {
                   {chatState.status}
                 </div>
               )}
-              {chatState.status === 'initial' && <p>Select a chat to display messages.</p>}
-              {chatState.status === 'no messages' && <p>No messages to display.</p>}
+              {chatState.status === 'initial' && (
+                <ChatMessageBar messageBarType={MessageBarType.info} message={'Select a chat to display messages.'} />
+              )}
+              {chatState.status === 'no messages' && (
+                <ChatMessageBar
+                  messageBarType={MessageBarType.error}
+                  message={`No messages were found for the id ${chatId}.`}
+                />
+              )}
+              {chatState.status === 'no chat id' && (
+                <ChatMessageBar messageBarType={MessageBarType.error} message={'A valid chat id is required.'} />
+              )}
             </>
           )}
         </div>

packages/mgt-chat/src/components/ChatMessageBar/ChatMessageBar.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { MessageBar, MessageBarType } from '@fluentui/react';
+
+interface ChatMessageBarProps {
+  messageBarType: MessageBarType;
+  message: string;
+}
+
+const ChatMessageBar = ({ messageBarType, message }: ChatMessageBarProps) => {
+  return <MessageBar messageBarType={messageBarType}> {message}</MessageBar>;
+};
+
+export default ChatMessageBar;

packages/mgt-chat/src/components/styles/registerIcons.tsx

@@ -5,6 +5,7 @@ import { buttonIconStyles } from './common.styles';
 
 const registerAppIcons = () => {
   const icons = Object.assign(DEFAULT_COMPONENT_ICONS, {
+    // TODO: Register the info and errorbadge icons
     'add-friend': (
       <svg
         xmlns="http://www.w3.org/2000/svg"

packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts

@@ -21,7 +21,7 @@ import {
   MembersAddedEventMessageDetail,
   MembersDeletedEventMessageDetail
 } from '@microsoft/microsoft-graph-types';
-import { IGraph, LoginChangedEvent, Providers, ProviderState } from '@microsoft/mgt-element';
+import { ActiveAccountChanged, IGraph, LoginChangedEvent, Providers, ProviderState } from '@microsoft/mgt-element';
 import { produce } from 'immer';
 import { v4 as uuid } from 'uuid';
 import {
@@ -44,6 +44,7 @@ import { IDynamicPerson } from '@microsoft/mgt-react';
 import { updateMessageContentWithImage } from './updateMessageContentWithImage';
 import { graph } from '../utils/graph';
 import { currentUserId, getCurrentUser, currentUserName } from '../utils/currentUser';
+import { GraphError } from '@microsoft/microsoft-graph-client';
 
 // 1x1 grey pixel
 const placeholderImageContent =
@@ -94,6 +95,7 @@ type GraphChatClient = Pick<
       | 'creating server connections'
       | 'subscribing to notifications'
       | 'loading messages'
+      | 'no chat id'
       | 'no messages'
       | 'ready'
       | 'error';
@@ -241,14 +243,14 @@ class StatefulGraphChatClient implements StatefulClient<GraphChatClient> {
    * @memberof StatefulGraphChatClient
    */
   private readonly onLoginStateChanged = (e: LoginChangedEvent) => {
-    switch (Providers.globalProvider.state) {
+    switch (e.detail) {
       case ProviderState.SignedIn:
         // update userId and displayName
         this.updateUserInfo();
         // load messages?
         // configure subscriptions
         // emit new state;
-        if (this._chatId) {
+        if (this.chatId) {
           void this.updateFollowedChat();
         }
         return;
@@ -265,13 +267,16 @@ class StatefulGraphChatClient implements StatefulClient<GraphChatClient> {
     }
   };
 
-  private readonly onActiveAccountChanged = () => {
-    this.unregisterNotifications();
-    this.clearCurrentUserMessages();
-    // void this.closeCurrentSignalRConnections();
-    // void this.reconnectSignalRConnection();
-    this.updateUserInfo();
-    void this.updateFollowedChat();
+  private readonly onActiveAccountChanged = (e: ActiveAccountChanged) => {
+    if (this.userId !== e.detail.id) {
+      this.unregisterNotifications();
+      this.clearCurrentUserMessages();
+      sessionStorage.removeItem('graph-subscriptions');
+      // void this.closeCurrentSignalRConnections();
+      // void this.reconnectSignalRConnection();
+      this.updateUserInfo();
+      void this.updateFollowedChat();
+    }
   };
 
   private unregisterNotifications() {
@@ -300,15 +305,35 @@ class StatefulGraphChatClient implements StatefulClient<GraphChatClient> {
     this.updateCurrentUserName();
   }
 
+  /**
+   * Changes the userDisplayName to the current value.
+   */
   private updateCurrentUserName() {
     this._userDisplayName = currentUserName();
   }
 
+  /**
+   * Changes the current user ID value to the current value.
+   */
   private updateCurrentUserId() {
     this.userId = currentUserId();
   }
 
+  /**
+   * Current User ID.
+   */
   private _userId = '';
+
+  /**
+   * Returns the current User ID.
+   */
+  public get userId() {
+    return this._userId;
+  }
+
+  /**
+   * Sets the current User ID and updates the state value.
+   */
   private set userId(userId: string) {
     if (this._userId === userId) {
       return;
@@ -319,15 +344,30 @@ class StatefulGraphChatClient implements StatefulClient<GraphChatClient> {
     });
   }
 
+  /**
+   * Current chat ID.
+   */
   private _chatId = '';
 
+  /**
+   * Get the current chat ID.
+   */
+  public get chatId() {
+    return this._chatId;
+  }
+
+  /**
+   * Set the current chat ID and tries to get the chat data.
+   */
   public set chatId(value: string) {
     // take no action if the chatId is the same
-    if (this._chatId === value) {
+    if (value && this._chatId === value) {
       return;
     }
     this._chatId = value;
-    void this.updateFollowedChat();
+    if (this._chatId) {
+      void this.updateFollowedChat();
+    }
   }
 
   /**
@@ -337,34 +377,44 @@ class StatefulGraphChatClient implements StatefulClient<GraphChatClient> {
    * @memberof StatefulGraphChatClient
    */
   private async updateFollowedChat() {
-    // reset state to initial
-    this.notifyStateChange((draft: GraphChatClient) => {
-      draft.status = 'initial';
-      draft.messages = [];
-      draft.chat = undefined;
-      draft.participants = [];
-    });
-    // Subscribe to notifications for messages
-    this.notifyStateChange((draft: GraphChatClient) => {
-      draft.status = 'creating server connections';
-    });
     // avoid subscribing to a resource with an empty chatId
     if (this._chatId) {
-      const promises: Promise<void>[] = [];
-      promises.push(this.loadChatData());
-      // subscribing to notifications will trigger the chatMessageNotificationsSubscribed event
-      // this client will then load the chat and messages when that event listener is called
-      promises.push(
-        this._notificationClient.subscribeToChatNotifications(this._userId, this._chatId, this._eventEmitter, () =>
+      // reset state to initial
+      this.notifyStateChange((draft: GraphChatClient) => {
+        draft.status = 'initial';
+        draft.messages = [];
+        draft.chat = undefined;
+        draft.participants = [];
+      });
+      // Subscribe to notifications for messages
+      this.notifyStateChange((draft: GraphChatClient) => {
+        draft.status = 'creating server connections';
+      });
+
+      try {
+        // Prefer sequential promise resolving to catch loading message errors
+        // TODO: in parallel promise resolving, find out how to trigger different
+        // TODO: state for failed subscriptions in GraphChatClient.onSubscribeFailed
+        await this.loadChatData();
+        await this._notificationClient.subscribeToChatNotifications(
+          this._userId,
+          this._chatId,
+          this._eventEmitter,
+          () =>
+            this.notifyStateChange((draft: GraphChatClient) => {
+              draft.status = 'subscribing to notifications';
+            })
+        );
+      } catch (error) {
+        if (error instanceof GraphError) {
           this.notifyStateChange((draft: GraphChatClient) => {
-            draft.status = 'subscribing to notifications';
-          })
-        )
-      );
-      await Promise.all(promises);
+            draft.status = 'no messages';
+          });
+        }
+      }
     } else {
       this.notifyStateChange((draft: GraphChatClient) => {
-        draft.status = 'no messages';
+        draft.status = 'no chat id';
       });
     }
   }
@@ -373,15 +423,13 @@ class StatefulGraphChatClient implements StatefulClient<GraphChatClient> {
     this.notifyStateChange((draft: GraphChatClient) => {
       draft.status = 'loading messages';
     });
-    if (this._chatId) {
+    try {
       this._chat = await loadChat(this.graph, this._chatId);
-      const messages: MessageCollection = await loadChatThread(this.graph, this._chatId, this._messagesPerCall);
-      await this.writeMessagesToState(messages);
-    } else {
-      this.notifyStateChange((draft: GraphChatClient) => {
-        draft.status = 'no messages';
-      });
+    } catch (error) {
+      return Promise.reject(error);
     }
+    const messages: MessageCollection = await loadChatThread(this.graph, this._chatId, this._messagesPerCall);
+    await this.writeMessagesToState(messages);
   }
 
   /**

packages/mgt-chat/src/statefulClient/useGraphChatClient.ts

@@ -10,7 +10,9 @@ import { StatefulGraphChatClient } from './StatefulGraphChatClient';
 
 export const useGraphChatClient = (chatId: string): StatefulGraphChatClient => {
   const [chatClient] = useState<StatefulGraphChatClient>(new StatefulGraphChatClient());
-  chatClient.chatId = chatId;
+  if (chatClient.chatId !== chatId) {
+    chatClient.chatId = chatId;
+  }
 
   return chatClient;
 };

packages/mgt-element/src/providers/IProvider.ts

@@ -148,7 +148,7 @@ export abstract class IProvider implements AuthenticationProvider {
   public setState(state: ProviderState) {
     if (state !== this._state) {
       this._state = state;
-      this._loginChangedDispatcher.fire({});
+      this._loginChangedDispatcher.fire({ detail: this._state });
     }
   }
 
@@ -211,7 +211,7 @@ export abstract class IProvider implements AuthenticationProvider {
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public setActiveAccount?(user: IProviderAccount) {
-    this.fireActiveAccountChanged();
+    this.fireActiveAccountChanged({ detail: user });
   }
 
   /**
@@ -239,8 +239,8 @@ export abstract class IProvider implements AuthenticationProvider {
    *
    * @memberof IProvider
    */
-  private fireActiveAccountChanged() {
-    this._activeAccountChangedDispatcher.fire({});
+  private fireActiveAccountChanged(account: { detail: IProviderAccount }) {
+    this._activeAccountChangedDispatcher.fire(account);
   }
 
   /**
@@ -272,15 +272,19 @@ export abstract class IProvider implements AuthenticationProvider {
  * @interface ActiveAccountChanged
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface ActiveAccountChanged {}
+export interface ActiveAccountChanged {
+  detail: IProviderAccount;
+}
 /**
  * loginChangedEvent
  *
  * @export
  * @interface LoginChangedEvent
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface LoginChangedEvent {}
+export interface LoginChangedEvent {
+  detail: ProviderState;
+}
 
 /**
  * LoginType

samples/react-chat/src/components/ChatListTemplate/ChatListTemplate.tsx

@@ -7,7 +7,7 @@ const ChatListTemplate = (props: MgtTemplateProps & ChatInteractionProps) => {
   const { value } = props.dataContext;
   const chats: Chat[] = value;
   // Select a default chat to display
-  props.onSelected(chats[0]);
+  // props.onSelected(chats[0]);
   return (
     <ul>
       {chats.map(c => (