[UK-940] Bugfix: Add checking current channel condition and has separator (#13)

- Add a condition checking currentChannelUrl before getChannel
- Add params to renderChatItem with hasSeparator and menuDisabled

Author: HoonBaek

src/index.d.ts

@@ -322,6 +322,8 @@ interface RenderChatItemProps {
   emojiContainer: EmojiContainer;
   chainTop: boolean;
   chainBottom: boolean;
+  hasSeparator: boolean;
+  menuDisabled: boolean;
 }
 interface RenderChatHeaderProps {
   channel: Sendbird.GroupChannel;

src/smart-components/ChannelList/index.jsx

@@ -137,7 +137,7 @@ function ChannelList(props) {
   }
 
   useEffect(() => {
-    if (!sdk || !sdk.GroupChannel) { return; }
+    if (!sdk || !sdk.GroupChannel || !currentChannel) { return; }
     sdk.GroupChannel.getChannel(currentChannel, (groupChannel) => {
       if (groupChannel) {
         onChannelSelect(groupChannel);

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

@@ -133,7 +133,7 @@ export default class ConversationScroll extends Component {
                   const previousMessageCreatedAt = previousMessage && previousMessage.createdAt;
                   const currentCreatedAt = m.createdAt;
                   // https://stackoverflow.com/a/41855608
-                  const hasSeperator = !(previousMessageCreatedAt && (
+                  const hasSeparator = !(previousMessageCreatedAt && (
                     isSameDay(currentCreatedAt, previousMessageCreatedAt)
                   ));
                   if (renderChatItem) {
@@ -153,6 +153,8 @@ export default class ConversationScroll extends Component {
                             emojiContainer,
                             chainTop,
                             chainBottom,
+                            hasSeparator,
+                            menuDisabled: disabled,
                           })
                         }
                       </div>
@@ -175,7 +177,7 @@ export default class ConversationScroll extends Component {
                       emojiAllMap={emojiAllMap}
                       emojiContainer={emojiContainer}
                       editDisabled={editDisabled}
-                      hasSeperator={hasSeperator}
+                      hasSeparator={hasSeparator}
                       chainBottom={chainBottom}
                       updateMessage={updateMessage}
                       deleteMessage={deleteMessage}

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

@@ -19,7 +19,7 @@ export default function MessageHoc({
   userId,
   disabled,
   editDisabled,
-  hasSeperator,
+  hasSeparator,
   deleteMessage,
   updateMessage,
   resendMessage,
@@ -59,7 +59,8 @@ export default function MessageHoc({
   const RenderedMessage = useMemo(() => {
     if (renderCustomMessage) {
       return renderCustomMessage(message, currentGroupChannel, chainTop, chainBottom);
-      // Let's change this to object type on next major version up
+      // TODO: Let's change this to object type on next major version up
+      // and add params 'hasSeparator' and 'menuDisabled'
     }
     return null;
   }, [message, message.message, renderCustomMessage]);
@@ -77,9 +78,9 @@ export default function MessageHoc({
           ${isAnimated ? 'sendbird-msg-hoc__highlighted' : ''}
         `}
       >
-        {/* date-seperator */}
+        {/* date-separator */}
         {
-          hasSeperator && (
+          hasSeparator && (
             <DateSeparator>
               <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>
                 {format(message.createdAt, 'MMMM dd, yyyy')}
@@ -115,9 +116,9 @@ export default function MessageHoc({
       `}
       style={{ marginBottom: '2px' }}
     >
-      {/* date-seperator */}
+      {/* date-separator */}
       {
-        hasSeperator && (
+        hasSeparator && (
           <DateSeparator>
             <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>
               {format(message.createdAt, 'MMMM dd, yyyy')}
@@ -179,7 +180,7 @@ MessageHoc.propTypes = {
     isFileMessage: PropTypes.func,
     isAdminMessage: PropTypes.func,
     isUserMessage: PropTypes.func,
-    isDateSeperator: PropTypes.func,
+    isDateseparator: PropTypes.func,
     // should be a number, but there's a bug in SDK shich returns string
     messageId: PropTypes.number,
     type: PropTypes.string,
@@ -196,7 +197,7 @@ MessageHoc.propTypes = {
   ]),
   renderCustomMessage: PropTypes.func,
   currentGroupChannel: PropTypes.shape({}),
-  hasSeperator: PropTypes.bool,
+  hasSeparator: PropTypes.bool,
   disabled: PropTypes.bool,
   editDisabled: PropTypes.bool,
   deleteMessage: PropTypes.func.isRequired,
@@ -223,7 +224,7 @@ MessageHoc.defaultProps = {
   renderCustomMessage: null,
   currentGroupChannel: {},
   message: {},
-  hasSeperator: false,
+  hasSeparator: false,
   disabled: false,
   highLightedMessageId: null,
   toggleReaction: () => { },

src/smart-components/OpenchannelConversation/components/MessageHOC.tsx

@@ -33,7 +33,7 @@ interface Props {
   userId: string;
   disabled: boolean;
   editDisabled: boolean;
-  hasSeperator: boolean;
+  hasSeparator: boolean;
   channel: OpenChannel;
   renderCustomMessage?: types.RenderCustomMessage,
   deleteMessage(message: types.ClientUserMessage | types.ClientFileMessage, callback?: () => void): void;
@@ -49,7 +49,7 @@ export default function MessageHoc({
   userId,
   disabled,
   editDisabled,
-  hasSeperator,
+  hasSeparator,
   channel,
   renderCustomMessage,
   deleteMessage,
@@ -109,9 +109,9 @@ export default function MessageHoc({
 
   return (
     <div className="sendbird-msg-hoc sendbird-msg--scroll-ref">
-      {/* date-seperator */}
+      {/* date-separator */}
       {
-        hasSeperator && (
+        hasSeparator && (
           <DateSeparator>
             <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>
               {format(message.createdAt, 'MMMM dd, yyyy')}

src/smart-components/OpenchannelConversation/components/OpenchannelConversationScroll.tsx

@@ -112,7 +112,7 @@ function OpenchannelConversationScroll(
                   const previousMessageCreatedAt = previousMessage && previousMessage.createdAt;
                   const currentCreatedAt = message.createdAt;
                   // https://stackoverflow.com/a/41855608
-                  const hasSeperator = !(previousMessageCreatedAt && (
+                  const hasSeparator = !(previousMessageCreatedAt && (
                     isSameDay(currentCreatedAt, previousMessageCreatedAt)
                   ));
 
@@ -129,7 +129,7 @@ function OpenchannelConversationScroll(
                       userId={user.userId}
                       disabled={!isOnline}
                       editDisabled={openchannel.isFrozen}
-                      hasSeperator={hasSeperator}
+                      hasSeparator={hasSeparator}
                       chainTop={chainTop}
                       chainBottom={chainBottom}
                       deleteMessage={deleteMessage}

src/ui/UserProfile/index.scss

@@ -31,7 +31,7 @@
     }
   }
 
-  .sendbird__user-profile-seperator {
+  .sendbird__user-profile-separator {
     margin: 24px 0px;
     height: 1px;
     @include themed() {

src/ui/UserProfile/index.tsx

@@ -71,7 +71,7 @@ function UserProfile({
           </section>
         )
       }
-      <div className="sendbird__user-profile-seperator" />
+      <div className="sendbird__user-profile-separator" />
       <section className="sendbird__user-profile-userId">
         <Label
           className="sendbird__user-profile-userId--label"