Bug/2432257 - TopicName Bug Fixes (#183)

* [#2432257] Bugfix around topicname.

* [#2432257] Bugfix around topicname.

* [#2432257] Bugfix around topicname.

* [#2432257] Bugfix around topicname.

samples/Chat/src/app/ChatScreen.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { chatScreenBottomContainerStyle, chatScreenContainerStyle } from './styles/ChatScreen.styles';
 import { Stack } from '@fluentui/react';
 import { onRenderAvatar } from './Avatar';
-import { useChatThreadClient, useThreadId } from '@azure/communication-ui';
+import { useChatClient, useChatThreadClient, useThreadId } from '@azure/communication-ui';
 import { ChatHeader } from './ChatHeader';
 import { ChatArea } from './ChatArea';
 import { SidePanel, SidePanelTypes } from './SidePanel';
@@ -20,15 +20,24 @@ interface ChatScreenProps {
 }
 
 export const ChatScreen = (props: ChatScreenProps): JSX.Element => {
+  const { errorHandler, endChatHandler } = props;
+
   // People pane will be visible when a chat is joined if the window width is greater than 600
   const [selectedPane, setSelectedPane] = useState(
     window.innerWidth > 600 ? SidePanelTypes.People : SidePanelTypes.None
   );
   const isAllInitialParticipantsFetchedRef = useRef(false);
 
-  const { errorHandler, endChatHandler } = props;
+  const threadId = useThreadId();
+  const chatClient = useChatClient();
   const chatThreadClient = useChatThreadClient();
 
+  // Updates the thread state and populates attributes like topic, id, createdBy etc.
+  useEffect(() => {
+    chatClient.getChatThread(threadId);
+    // eslint-disable-next-line
+  }, []);
+
   // This code gets all participants who joined the chat earlier than the current user.
   // We need to do this to make the state in declaritive up to date.
   useEffect(() => {
@@ -54,9 +63,9 @@ export const ChatScreen = (props: ChatScreenProps): JSX.Element => {
     document.getElementById('sendbox')?.focus();
   }, []);
 
-  const chatHeaderProps = useSelector(chatHeaderSelector, { threadId: useThreadId() });
+  const chatHeaderProps = useSelector(chatHeaderSelector, { threadId: threadId });
   const chatHeaderHandlers = useHandlers(ChatHeader);
-  const chatParticipantProps = useSelector(chatParticipantListSelector, { threadId: useThreadId() });
+  const chatParticipantProps = useSelector(chatParticipantListSelector, { threadId: threadId });
 
   useEffect(() => {
     // We only want to check if we've fetched all the existing participants.

samples/Chat/src/app/SettingsManagement.tsx

@@ -27,28 +27,38 @@ export type SettingsManagementProps = {
 
 export const SettingsManagementComponent = (props: SettingsManagementProps): JSX.Element => {
   const { updateThreadTopicName, topicName, visible, parentId, onClose, onRenderFooter } = props;
-  const [edittedTopicName, setEdittedTopicName] = useState('');
+  const [editedTopicName, setEditedTopicName] = useState('');
   const [isOpen, setIsOpen] = useState<boolean>(visible ? visible : false);
-  const [isEditingTopicName, setIsEditingTopicName] = useState(false);
-  const [isTopicNameOverflow, setTopicNameOverflow] = useState(false);
   const [isSavingTopicName, setIsSavingTopicName] = useState(false);
+  const [topicValidationError, setTopicValidationError] = useState<string | undefined>(undefined);
 
-  const onTopicNameTextChange = (event: any): void => {
-    setIsEditingTopicName(true);
-    setEdittedTopicName(event.target.value);
-    if (event.target.value.length > MAXIMUM_LENGTH_OF_TOPIC) {
-      setTopicNameOverflow(true);
+  useEffect(() => {
+    if (topicName && editedTopicName.length === 0 && topicName?.length > 0) {
+      setEditedTopicName(topicName);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [topicName]);
+
+  const validateTopic = (input: string): void => {
+    if (input.length > MAXIMUM_LENGTH_OF_TOPIC) {
+      setTopicValidationError(`Topic cannot be over ${MAXIMUM_LENGTH_OF_TOPIC} characters`);
+    } else if (input.length <= 0) {
+      setTopicValidationError('Topic cannot be blank');
     } else {
-      setTopicNameOverflow(false);
+      setTopicValidationError(undefined);
     }
   };
 
-  const onTopicNameSubmit = async (): Promise<void> => {
-    if (edittedTopicName.length > MAXIMUM_LENGTH_OF_TOPIC) return;
+  const onChangeTopicName = (event: any): void => {
+    setEditedTopicName(event.target.value);
+    validateTopic(event.target.value);
+  };
+
+  const onSubmitTopicName = async (): Promise<void> => {
+    if (topicValidationError || editedTopicName.length === 0) return;
     setIsSavingTopicName(true);
-    await updateThreadTopicName(edittedTopicName);
+    await updateThreadTopicName(editedTopicName);
     setIsSavingTopicName(false);
-    setIsEditingTopicName(false);
     setTimeout(() => {
       document.getElementById('focusButton')?.focus();
     }, 100);
@@ -88,29 +98,26 @@ export const SettingsManagementComponent = (props: SettingsManagementProps): JSX
           <div className={settingsGroupNameStyle}>Group Name</div>
           <TextField
             key={topicName}
-            className={isTopicNameOverflow ? settingsGroupNameInputBoxWarningStyle : settingsGroupNameInputBoxStyle}
+            className={topicValidationError ? settingsGroupNameInputBoxWarningStyle : settingsGroupNameInputBoxStyle}
             inputClassName={inputBoxTextStyle}
             borderless={true}
-            defaultValue={isEditingTopicName ? edittedTopicName : topicName ? topicName : ''}
-            placeholder={topicName ? undefined : 'Type a group name'}
+            value={editedTopicName}
+            placeholder={editedTopicName.length > 0 ? undefined : 'Type a group name'}
             autoComplete="off"
-            onSubmit={onTopicNameSubmit}
-            onChange={onTopicNameTextChange}
+            onSubmit={onSubmitTopicName}
+            onChange={onChangeTopicName}
             onKeyUp={(ev) => {
               if (ev.which === ENTER_KEY) {
-                onTopicNameSubmit();
+                onSubmitTopicName();
               }
             }}
           />
-          {(isTopicNameOverflow && (
-            <div className={settingsTopicWarningStyle}> Topic cannot be over 30 characters </div>
-          )) ||
-            (!isTopicNameOverflow && <div className={settingsTopicWarningStyle} />)}
+          <div className={settingsTopicWarningStyle}> {topicValidationError} </div>
           <PrimaryButton
             id="editThreadTopicButton"
             className={settingsSaveChatNameButtonStyle}
-            onClick={() => onTopicNameSubmit()}
-            disabled={isSavingTopicName}
+            onClick={onSubmitTopicName}
+            disabled={isSavingTopicName || !!topicValidationError}
           >
             <Icon iconName="Save" className={settingsTextFieldIconStyle} />
             <div className={settingsSaveButtonTextStyle}>{isSavingTopicName ? 'Saving...' : 'Save'}</div>