feat: handle switching the active account (#2613)

* Update Chat component - Display different messages for different states - Fix typings Signed-off-by: Martin Musale <[email protected]> * Update the GraphNotificationClient - Add reconnect and closing of the connection methods - Add a method to unsubscribe from all the notifications Signed-off-by: Martin Musale <[email protected]> * Update the StatefulGraphChatClient - Add a new status 'no messages' - Perform state updates when the user account is changed - Add methods to handle connection closing or reconnection - Add methods to clear current user messages and update the current user name - Change state update logic when there is no chat ID passed Signed-off-by: Martin Musale <[email protected]> * Update getting the current user values Signed-off-by: Martin Musale <[email protected]> * Update sample to pass chatID and select a default chat Signed-off-by: Martin Musale <[email protected]> * Update packages Signed-off-by: Martin Musale <[email protected]> * Purge the cached subscriptions from the session Signed-off-by: Martin Musale <[email protected]> * Add ChatMessageBar template state messages Signed-off-by: Martin Musale <[email protected]> * Add event states that are changing in the provider Signed-off-by: Martin Musale <[email protected]> * Remove default chat selection from sampl Signed-off-by: Martin Musale <[email protected]> * Set the chat ID if only it has been changed Signed-off-by: Martin Musale <[email protected]> * Update the stateful client to emit errors Signed-off-by: Martin Musale <[email protected]> * Use property over the backing field Signed-off-by: Martin Musale <[email protected]> * Close and re-open signalR hub connection when acct changes This is way simpler to enable removing all the subscriptions for a given chat. The alternative that was using the connection.off method required precise handlers that were the same as the ones passed during creation of the subscriptions. Signed-off-by: Martin Musale <[email protected]> * Log error when loadChatData fails Signed-off-by: Martin Musale <[email protected]> * Remove guard checking chatId twice Signed-off-by: Musale Martin <[email protected]> * Remove CTA to select a chat to display messages Signed-off-by: Musale Martin <[email protected]> * Add additional information in the error block Signed-off-by: Martin Musale <[email protected]> --------- Signed-off-by: Martin Musale <[email protected]> Signed-off-by: Musale Martin <[email protected]>
microsoftgraph · Aug 22, 2023 · d73db51 · d73db51
1 parent 46b0d0f
commit d73db51
Show file tree

Hide file tree

Showing 9 changed files with 204 additions and 61 deletions.
diff --git a/packages/mgt-chat/src/components/Chat/Chat.tsx b/packages/mgt-chat/src/components/Chat/Chat.tsx
@@ -1,12 +1,14 @@
 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';
 
 registerAppIcons();
 
@@ -34,24 +36,35 @@ const useStyles = makeStyles({
   },
   fullHeight: {
     height: '100%'
+  },
+  spinner: {
+    justifyContent: 'center',
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%'
   }
 });
 
 export const Chat = ({ chatId }: IMgtChatProps) => {
   const styles = useStyles();
-  const chatClient = useGraphChatClient(chatId);
+  const chatClient: StatefulGraphChatClient = useGraphChatClient(chatId);
   const [chatState, setChatState] = useState(chatClient.getState());
   useEffect(() => {
     chatClient.onStateChange(setChatState);
     return () => {
       chatClient.offStateChange(setChatState);
     };
   }, [chatClient]);
+
+  const isLoading = ['creating server connections', 'subscribing to notifications', 'loading messages'].includes(
+    chatState.status
+  );
+
   return (
     <FluentThemeProvider fluentTheme={FluentTheme}>
       <FluentProvider theme={teamsLightTheme} className={styles.fullHeight}>
         <div className={styles.chat}>
-          {chatState.userId && chatState.messages.length > 0 ? (
+          {chatState.userId && chatId && chatState.messages.length > 0 ? (
             <>
               <ChatHeader
                 chat={chatState.chat}
@@ -96,8 +109,21 @@ export const Chat = ({ chatId }: IMgtChatProps) => {
             </>
           ) : (
             <>
-              {chatState.status}
-              <Spinner />
+              {isLoading && (
+                <div className={styles.spinner}>
+                  <Spinner /> <br />
+                  {chatState.status}
+                </div>
+              )}
+              {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>

diff --git a/packages/mgt-chat/src/components/ChatMessageBar/ChatMessageBar.tsx b/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;
diff --git a/packages/mgt-chat/src/components/styles/registerIcons.tsx b/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"

diff --git a/packages/mgt-chat/src/statefulClient/GraphNotificationClient.ts b/packages/mgt-chat/src/statefulClient/GraphNotificationClient.ts
@@ -223,12 +223,25 @@ export class GraphNotificationClient {
     }
   }
 
+  public async closeSignalRConnection() {
+    if (this.connection && this.connection?.state === signalR.HubConnectionState.Connected) {
+      await this.connection?.stop();
+    }
+  }
+
+  public async reConnectSignalR() {
+    if (!this.connection) await this.createSignalConnection();
+    if (this.connection?.state === signalR.HubConnectionState.Disconnected) {
+      await this.connection?.start();
+    }
+  }
+
   private async subscribeToResource(
     resourcePath: string,
     eventEmitter: ThreadEventEmitter,
     changeTypes: ChangeTypes[] = ['created', 'updated', 'deleted']
   ) {
-    if (!this.connection) throw new Error('SignalR connection not initialized');
+    if (!this.connection) throw new Error('subscribeToResource: SignalR connection is not initialized');
 
     const token = await this.getToken();