Port local storage for display name from CallwithChat to Chat sample (#5681)

* Use a randomized default name

* Save name to local storage instead of using random name

* Change files

Author: palatter

change-beta/@azure-communication-react-45da9f59-d5f0-420c-a677-f6df8aa71cfd.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "",
+  "comment": "Port saving display name to local storage from CallwithChat Sample to Chat Sample",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-45da9f59-d5f0-420c-a677-f6df8aa71cfd.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "",
+  "comment": "Port saving display name to local storage from CallwithChat Sample to Chat Sample",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

samples/Chat/src/app/ConfigurationScreen.tsx

@@ -44,6 +44,11 @@ import { getEndpointUrl } from './utils/getEndpointUrl';
 import { refreshToken } from './utils/refreshToken';
 /* @conditional-compile-remove(rich-text-editor-composite-support) */
 import { RichTextEditorToggle } from './RichTextEditorToggle';
+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 {
@@ -94,6 +99,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> => {
@@ -183,6 +196,7 @@ export default (props: ConfigurationScreenProps): JSX.Element => {
     if (!name) {
       setEmptyWarning(true);
     } else {
+      saveDisplayNameToLocalStorage(name);
       setEmptyWarning(false);
       setDisableJoinChatButton(true);
       setConfigurationScreenState(CONFIGURATIONSCREEN_SHOWING_SPINNER_INITIALIZE_CHAT);
@@ -252,6 +266,7 @@ export default (props: ConfigurationScreenProps): JSX.Element => {
             </Stack>
           </FocusZone>
           <DisplayNameField
+            defaultName={name}
             setName={setName}
             setEmptyWarning={setEmptyWarning}
             validateName={validateName}

samples/Chat/src/app/utils/localStorage.ts

@@ -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.
  */