Bump @azure/communication-react to 1.25.0 (#181)

Author: JamesBurnside

Chat/package-lock.json

@@ -21,7 +21,7 @@
     "@azure/communication-chat": "^1.5.4",
     "@azure/communication-common": "^2.3.1",
     "@azure/communication-identity": "^1.3.0",
-    "@azure/communication-react": "1.24.0",
+    "@azure/communication-react": "1.25.0",
     "@azure/logger": "^1.0.4",
     "@fluentui/react": "^8.115.2",
     "@fluentui/react-file-type-icons": "8.11.4",

Chat/package.json

@@ -42,6 +42,11 @@ import {
 import { joinThread } from './utils/joinThread';
 import { getEndpointUrl } from './utils/getEndpointUrl';
 import { refreshToken } from './utils/refreshToken';
+import {
+  getDisplayNameFromLocalStorage,
+  localStorageAvailable,
+  saveDisplayNameToLocalStorage
+} from './utils/localStorage';
 
 // These props are set by the caller of ConfigurationScreen in the JSX and not found in context
 export interface ConfigurationScreenProps {
@@ -90,6 +95,14 @@ export default (props: ConfigurationScreenProps): JSX.Element => {
   const theme = useTheme();
   const { joinChatHandler, setToken, setUserId, setDisplayName, setThreadId, setEndpointUrl } = props;
 
+  useEffect(() => {
+    // Get display name from local storage if available
+    const defaultDisplayName = localStorageAvailable ? getDisplayNameFromLocalStorage() : null;
+    if (defaultDisplayName) {
+      setName(defaultDisplayName);
+    }
+  }, []);
+
   // Used when new user is being registered.
   const setupAndJoinChatThreadWithNewUser = useCallback(() => {
     const internalSetupAndJoinChatThread = async (): Promise<void> => {
@@ -179,6 +192,7 @@ export default (props: ConfigurationScreenProps): JSX.Element => {
     if (!name) {
       setEmptyWarning(true);
     } else {
+      saveDisplayNameToLocalStorage(name);
       setEmptyWarning(false);
       setDisableJoinChatButton(true);
       setConfigurationScreenState(CONFIGURATIONSCREEN_SHOWING_SPINNER_INITIALIZE_CHAT);
@@ -246,6 +260,7 @@ export default (props: ConfigurationScreenProps): JSX.Element => {
             </Stack>
           </FocusZone>
           <DisplayNameField
+            defaultName={name}
             setName={setName}
             setEmptyWarning={setEmptyWarning}
             validateName={validateName}

Chat/src/app/ConfigurationScreen.tsx

@@ -4,9 +4,22 @@
 export const localStorageAvailable = typeof Storage !== 'undefined';
 
 export enum LocalStorageKeys {
+  DisplayName = 'DisplayName',
   Theme = 'AzureCommunicationUI_Theme'
 }
 
+/**
+ * Get display name from local storage.
+ */
+export const getDisplayNameFromLocalStorage = (): string | null =>
+  window.localStorage.getItem(LocalStorageKeys.DisplayName);
+
+/**
+ * Save display name into local storage.
+ */
+export const saveDisplayNameToLocalStorage = (displayName: string): void =>
+  window.localStorage.setItem(LocalStorageKeys.DisplayName, displayName);
+
 /**
  * Get theme from local storage.
  */