bug-fix: Change feedback process to submit on feedback icon click (#936)

Fixes: [AC-1071](https://sendbird.atlassian.net/browse/AC-1071)

### Changelogs
- Changed behaivour of the feedback process:
  - old: On feedback icon button click -> open feedback form/menu
- new: On feedback icon button click -> submit feedback -> open feedback
form/menu

[AC-1071]:
https://sendbird.atlassian.net/browse/AC-1071?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: chohongm

src/modules/Channel/components/MessageFeedbackModal/index.tsx

@@ -11,11 +11,11 @@ import { FeedbackRating } from '@sendbird/chat/message';
 import { useKeyDown } from '../../../../hooks/useKeyDown/useKeyDown';
 
 export interface MessageFeedbackModalProps {
-  selectedFeedback: FeedbackRating;
+  selectedFeedback: FeedbackRating | undefined;
   message: CoreMessageType;
   onClose?: () => void;
-  onSubmit?: (comment: string) => void;
-  onUpdate?: (comment: string) => void;
+  onSubmit?: (selectedFeedback: FeedbackRating, comment: string) => void;
+  onUpdate?: (selectedFeedback: FeedbackRating, comment: string) => void;
   onRemove?: () => void;
 }
 
@@ -33,17 +33,19 @@ export default function MessageFeedbackModal(props: MessageFeedbackModalProps):
   const { isMobile } = useMediaQueryContext();
 
   const isEdit = message?.myFeedback && selectedFeedback === message.myFeedback.rating;
+  const hasComment = message?.myFeedback?.comment;
+
   const onSubmitWrapper = () => {
     if (!selectedFeedback) return;
     const comment = inputRef.current.value ?? '';
     if (isEdit) {
       if (comment !== message.myFeedback.comment) {
-        onUpdate?.(comment);
+        onUpdate?.(selectedFeedback, comment);
       } else {
         onClose?.();
       }
     } else if (!message.myFeedback) {
-      onSubmit?.(comment);
+      onSubmit?.(selectedFeedback, comment);
     }
   };
 
@@ -97,7 +99,7 @@ export default function MessageFeedbackModal(props: MessageFeedbackModalProps):
               </Button>
               <Button onClick={() => onSubmitWrapper()}>
                 <Label type={LabelTypography.BUTTON_3} color={LabelColors.ONCONTENT_1}>
-                  { isEdit ? stringSet.BUTTON__SAVE : stringSet.BUTTON__SUBMIT }
+                  { hasComment ? stringSet.BUTTON__SAVE : stringSet.BUTTON__SUBMIT }
                 </Label>
               </Button>
             </div>

src/ui/MessageContent/index.tsx

@@ -139,7 +139,6 @@ export default function MessageContent(props: MessageContentProps): ReactElement
   const [mouseHover, setMouseHover] = useState(false);
   const [supposedHover, setSupposedHover] = useState(false);
   // Feedback states
-  const [selectedFeedback, setSelectedFeedback] = useState<FeedbackRating>(null);
   const [showFeedbackOptionsMenu, setShowFeedbackOptionsMenu] = useState(false);
   const [showFeedbackModal, setShowFeedbackModal] = useState(false);
   const [feedbackFailedText, setFeedbackFailedText] = useState('');
@@ -171,10 +170,17 @@ export default function MessageContent(props: MessageContentProps): ReactElement
   const feedbackMessageClassName = isFeedbackEnabled ? 'sendbird-message-content__feedback' : '';
 
   const onCloseFeedbackForm = () => {
-    setSelectedFeedback(null);
     setShowFeedbackModal(false);
   };
 
+  const openFeedbackFormOrMenu = () => {
+    if (isMobile) {
+      setShowFeedbackOptionsMenu(true);
+    } else {
+      setShowFeedbackModal(true);
+    }
+  };
+
   // onMouseDown: (e: React.MouseEvent<T>) => void;
   // onTouchStart: (e: React.TouchEvent<T>) => void;
   // onMouseUp: (e: React.MouseEvent<T>) => void;
@@ -339,12 +345,19 @@ export default function MessageContent(props: MessageContentProps): ReactElement
             >
               <FeedbackIconButton
                 isSelected={message?.myFeedback?.rating === FeedbackRating.GOOD}
-                onClick={() => {
-                  setSelectedFeedback(FeedbackRating.GOOD);
-                  if (isMobile && message?.myFeedback?.rating === FeedbackRating.GOOD) {
-                    setShowFeedbackOptionsMenu(true);
+                onClick={async () => {
+                  if (!message?.myFeedback?.rating) {
+                    try {
+                      await message.submitFeedback({
+                        rating: FeedbackRating.GOOD,
+                      });
+                      openFeedbackFormOrMenu();
+                    } catch (error) {
+                      config?.logger?.error?.('Channel: Submit feedback failed.', error);
+                      setFeedbackFailedText(stringSet.FEEDBACK_FAILED_SUBMIT);
+                    }
                   } else {
-                    setShowFeedbackModal(true);
+                    openFeedbackFormOrMenu();
                   }
                 }}
                 disabled={message?.myFeedback && message.myFeedback.rating !== FeedbackRating.GOOD}
@@ -357,12 +370,19 @@ export default function MessageContent(props: MessageContentProps): ReactElement
               </FeedbackIconButton>
               <FeedbackIconButton
                 isSelected={message?.myFeedback?.rating === FeedbackRating.BAD}
-                onClick={() => {
-                  setSelectedFeedback(FeedbackRating.BAD);
-                  if (isMobile && message?.myFeedback?.rating === FeedbackRating.BAD) {
-                    setShowFeedbackOptionsMenu(true);
+                onClick={async () => {
+                  if (!message?.myFeedback?.rating) {
+                    try {
+                      await message.submitFeedback({
+                        rating: FeedbackRating.BAD,
+                      });
+                      openFeedbackFormOrMenu();
+                    } catch (error) {
+                      config?.logger?.error?.('Channel: Submit feedback failed.', error);
+                      setFeedbackFailedText(stringSet.FEEDBACK_FAILED_SUBMIT);
+                    }
                   } else {
-                    setShowFeedbackModal(true);
+                    openFeedbackFormOrMenu();
                   }
                 }}
                 disabled={message?.myFeedback && message.myFeedback.rating !== FeedbackRating.BAD}
@@ -465,7 +485,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
         )
       }
       {
-        showFeedbackOptionsMenu && (
+        message?.myFeedback?.rating && showFeedbackOptionsMenu && (
           <MobileFeedbackMenu
             hideMenu={() => {
               setShowFeedbackOptionsMenu(false);
@@ -475,32 +495,24 @@ export default function MessageContent(props: MessageContentProps): ReactElement
               setShowFeedbackModal(true);
             }}
             onRemoveFeedback={async () => {
-              await message.deleteFeedback(message.myFeedback.id);
-              setSelectedFeedback(null);
+              try {
+                await message.deleteFeedback(message.myFeedback.id);
+              } catch (error) {
+                config?.logger?.error?.('Channel: Delete feedback failed.', error);
+                setFeedbackFailedText(stringSet.FEEDBACK_FAILED_DELETE);
+              }
               setShowFeedbackOptionsMenu(false);
             }}
           />
         )
       }
       {/* Feedback modal */}
       {
-        showFeedbackModal && (
+        message?.myFeedback?.rating && showFeedbackModal && (
           <MessageFeedbackModal
-            selectedFeedback={selectedFeedback}
+            selectedFeedback={message.myFeedback.rating}
             message={message}
-            onSubmit={async (comment: string) => {
-              try {
-                await message.submitFeedback({
-                  rating: selectedFeedback,
-                  comment,
-                });
-              } catch (error) {
-                config?.logger?.error?.('Channel: Submit feedback failed.', error);
-                setFeedbackFailedText(stringSet.FEEDBACK_FAILED_SUBMIT);
-              }
-              onCloseFeedbackForm();
-            }}
-            onUpdate={async (comment: string) => {
+            onUpdate={async (selectedFeedback: FeedbackRating, comment: string) => {
               const newFeedback: Feedback = new Feedback({
                 id: message.myFeedback.id,
                 rating: selectedFeedback,