[Bugfix] Final QA of message threading (#59)

- Lift restriction of replyType props of App and Channel components
- [QU-361] Disable message delete submit button on modal when the message has replies
- [QU-382] Do not allow the message grouping to pending and failed messages
- [QU-385] Disable the delete button on FileViewer when the message has replies
- Clear message input value and quoted message when the current channel is changed
- Affect UI components to apply the on thread info updated event
- Check if the left user is me

Author: HoonBaek

src/smart-components/App/index.jsx

@@ -26,7 +26,7 @@ export default function App(props) {
     profileUrl,
     config = {},
     useReaction,
-    // replyType,
+    replyType,
     useMessageGrouping,
     colorSet,
     stringSet,
@@ -97,7 +97,7 @@ export default function App(props) {
             startingPoint={startingPoint}
             highlightedMessage={highlightedMessage}
             useReaction={useReaction}
-            // replyType={replyType}
+            replyType={replyType}
             useMessageGrouping={useMessageGrouping}
           />
         </div>
@@ -158,7 +158,7 @@ App.propTypes = {
     ]),
   }),
   useReaction: PropTypes.bool,
-  // replyType: PropTypes.oneOf(['NONE', 'QUOTE_REPLY', 'THREAD']),
+  replyType: PropTypes.oneOf(['NONE', 'QUOTE_REPLY', 'THREAD']),
   showSearchIcon: PropTypes.bool,
   useMessageGrouping: PropTypes.bool,
   stringSet: PropTypes.objectOf(PropTypes.string),
@@ -189,7 +189,7 @@ App.defaultProps = {
   renderUserProfile: null,
   config: {},
   useReaction: true,
-  // replyType: 'NONE',
+  replyType: 'NONE',
   useMessageGrouping: true,
   stringSet: null,
   colorSet: null,

src/smart-components/App/stories/index.stories.js

@@ -179,6 +179,7 @@ const array = [
   `hoon${age}1`,
   `hoon${age}2`,
   `hoon${age}3`,
+  `hoon${age}4`,
   `eunseo${age}1`,
 ];
 const addProfile = null; // 'https://static.sendbird.com/sample/profiles/profile_12_512px.png';
@@ -220,6 +221,7 @@ export const user2 = () => fitPageSize(
     allowProfileEdit
     profileUrl={addProfile}
     replyType="QUOTE_REPLY"
+    useMessageGrouping={false}
     imageCompression={{
       compressionRate: 0.5,
       resizingWidth: 100,
@@ -239,6 +241,19 @@ export const user3 = () => fitPageSize(
     replyType="QUOTE_REPLY"
   />
 );
+export const user4 = () => fitPageSize(
+  <App
+    appId={appId}
+    userId={array[3]}
+    nickname={array[3]}
+    theme="dark"
+    showSearchIcon
+    allowProfileEdit
+    useMessageGrouping={false}
+    profileUrl={addProfile}
+    replyType="QUOTE_REPLY"
+  />
+);
 
 const UseSendbirdChannelList = (props) => {
   const [queries] = useState({ channelListQuery: { customTypesFilter: ['apple'] } });
@@ -267,8 +282,8 @@ const CustomApp = () => {
   return (
     <Sendbird
       appId={appId}
-      userId={array[3]}
-      nickname={array[3]}
+      userId={array[4]}
+      nickname={array[4]}
       theme="dark"
       showSearchIcon
       allowProfileEdit

src/smart-components/ChannelList/dux/reducers.js

@@ -104,7 +104,7 @@ export default function reducer(state, action) {
           allChannels: state.allChannels.filter(({ url }) => url !== channel.url),
         };
       }
-      const filteredChannels = state.allChannels.filter((c) => c.url !== channel.url);
+      const filteredChannels = state.allChannels.filter((c) => !(c.url === channel.url && isMe));
       return {
         ...state,
         currentChannel: (isMe && (channel.url === state.currentChannel))

src/smart-components/Conversation/components/MessageHOC.jsx

@@ -178,6 +178,7 @@ export default function MessageHoc({
       {
         showRemove && (
           <RemoveMessageModal
+            message={message}
             onCloseModal={() => setShowRemove(false)}
             onDeleteMessage={() => {
               deleteMessage(message);

src/smart-components/Conversation/components/MessageInputWrapper.tsx

@@ -66,6 +66,7 @@ const MessageInputWrapper = ({
       )}
       <MessageInput
         className="sendbird-message-input-wrapper__message-input"
+        channelUrl={channel?.url}
         placeholder={
           (quoteMessage && stringSet.MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER)
           || (utils.isDisabledBecauseFrozen(channel) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED)

src/smart-components/Conversation/components/RemoveMessage.jsx

@@ -2,16 +2,20 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import Modal from '../../../ui/Modal';
+import { ButtonTypes } from '../../../ui/Button';
 import { LocalizationContext } from '../../../lib/LocalizationContext';
 
 const RemoveMessage = (props) => {
   const {
     onCloseModal,
     onDeleteMessage,
+    message,
   } = props;
   const { stringSet } = useContext(LocalizationContext);
   return (
     <Modal
+      type={ButtonTypes.DANGER}
+      disabled={message?.threadInfo?.replyCount > 0}
       onCancel={onCloseModal}
       onSubmit={onDeleteMessage}
       submitText="Delete"
@@ -23,6 +27,11 @@ const RemoveMessage = (props) => {
 RemoveMessage.propTypes = {
   onCloseModal: PropTypes.func.isRequired,
   onDeleteMessage: PropTypes.func.isRequired,
+  message: PropTypes.shape({
+    threadInfo: PropTypes.shape({
+      replyCount: PropTypes.number,
+    }),
+  }).isRequired,
 };
 
 export default RemoveMessage;

src/smart-components/Conversation/index.jsx

@@ -61,7 +61,7 @@ export const ConversationPanel = (props) => {
     startingPoint,
     highlightedMessage,
     useReaction,
-    // replyType,
+    replyType,
     showSearchIcon,
     onSearchClick,
     renderChatItem,
@@ -76,7 +76,6 @@ export const ConversationPanel = (props) => {
     onBeforeSendFileMessage,
     onBeforeUpdateUserMessage,
   } = props;
-  const replyType = 'NONE'; // TODO: Get back replyType for message threading
   const { sdk } = sdkStore;
   const { config } = props;
   const sdkError = sdkStore.error;
@@ -201,6 +200,10 @@ export const ConversationPanel = (props) => {
     { messagesDispatcher, sdk, logger },
   );
 
+  useEffect(() => {
+    setQuoteMessage(null);
+  }, [channelUrl]);
+
   // Hook to handle ChannelEvents and send values to useReducer using messagesDispatcher
   useHandleChannelEvents(
     { currentGroupChannel, sdkInit, hasMoreToBottom },
@@ -509,7 +512,7 @@ ConversationPanel.propTypes = {
   onSearchClick: PropTypes.func,
   onChatHeaderActionClick: PropTypes.func,
   useReaction: PropTypes.bool,
-  // replyType: PropTypes.oneOf(['NONE', 'QUOTE_REPLY', 'THREAD']),
+  replyType: PropTypes.oneOf(['NONE', 'QUOTE_REPLY', 'THREAD']),
   disableUserProfile: PropTypes.bool,
   renderUserProfile: PropTypes.func,
   useMessageGrouping: PropTypes.bool,
@@ -528,7 +531,7 @@ ConversationPanel.defaultProps = {
   renderMessageInput: null,
   renderChatHeader: null,
   useReaction: true,
-  // replyType: 'NONE',
+  replyType: 'NONE',
   showSearchIcon: false,
   onSearchClick: noop,
   disableUserProfile: false,

src/smart-components/Conversation/utils.js

@@ -2,7 +2,10 @@ import format from 'date-fns/format';
 import * as channelActions from './dux/actionTypes';
 import * as topics from '../../lib/pubSub/topics';
 
-import { getSendingMessageStatus, getOutgoingMessageStates } from '../../utils';
+import {
+  getSendingMessageStatus,
+  getOutgoingMessageStates,
+} from '../../utils';
 
 const MessageStatusType = getOutgoingMessageStates();
 const UNDEFINED = 'undefined';
@@ -207,12 +210,14 @@ export const compareMessagesForGrouping = (
   prevMessage,
   currMessage,
   nextMessage,
-) => (
-  [
-    isSameGroup(prevMessage, currMessage),
-    isSameGroup(currMessage, nextMessage),
-  ]
-);
+) => {
+  const sendingStatus = currMessage?.sendingStatus || '';
+  const isAcceptable = sendingStatus !== 'pending' && sendingStatus !== 'failed';
+  return [
+    isSameGroup(prevMessage, currMessage) && isAcceptable,
+    isSameGroup(currMessage, nextMessage) && isAcceptable,
+  ];
+};
 
 export const hasOwnProperty = (property) => (payload) => {
   // eslint-disable-next-line no-prototype-builtins

src/ui/Button/index.scss

@@ -20,6 +20,7 @@
   &.sendbird-button__disabled {
     cursor: not-allowed;
     @include themed() {
+      border: none;
       background-color: t(bg-2);
     }
     &:hover {

src/ui/Button/stories/Button.stories.js

@@ -5,13 +5,16 @@ import { Type, Size } from '../type';
 
 export default { title: 'UI Components/Button' };
 
-export const defaultButton = () => <Button />;
-export const primaryButton = () => <Button type={Type.PRIMARY}>PRIMARY</Button>;
-export const secondaryButton = () => <Button type={Type.SECONDARY}>SECONDARY</Button>;
-export const dangerButton = () => <Button type={Type.DANGER}>DANGER</Button>;
-export const disabledButton = () => <Button type={Type.DISABLED}>DISABLED</Button>;
-
-export const smallPrimaryButton = () => <Button type={Type.PRIMARY} size={Size.SMALL}>PRIMARY</Button>;
-export const smallSecondaryButton = () => <Button type={Type.SECONDARY} size={Size.SMALL}>SECONDARY</Button>;
-export const smallDangerButton = () => <Button type={Type.DANGER} size={Size.SMALL}>DANGER</Button>;
-export const smallDisabledButton = () => <Button type={Type.DISABLED} size={Size.SMALL}>DISABLED</Button>;
+export const defaultButton = () => [
+  <Button>DEFAULT</Button>,
+  <Button type={Type.PRIMARY}>PRIMARY</Button>,
+  <Button type={Type.SECONDARY}>SECONDARY</Button>,
+  <Button type={Type.DANGER}>DANGER</Button>,
+  <Button type={Type.DISABLED}>DISABLED</Button>,
+];
+export const smallButton = () => [
+  <Button type={Type.PRIMARY} size={Size.SMALL}>PRIMARY</Button>,
+  <Button type={Type.SECONDARY} size={Size.SMALL}>SECONDARY</Button>,
+  <Button type={Type.DANGER} size={Size.SMALL}>DANGER</Button>,
+  <Button type={Type.DISABLED} size={Size.SMALL}>DISABLED</Button>,
+];