bug-fixes from slack-clone testing

Author: vishalnarkhede

src/components/Message/MessageSimple/MessageActionSheet.tsx

@@ -6,7 +6,17 @@ import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { styled } from '../../../styles/styledComponents';
 import { MESSAGE_ACTIONS } from '../../../utils/utils';
-
+import type { Message as InsertDatesMessage } from '../../MessageList/utils/insertDates';
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../../types/types';
 const ActionSheetButtonContainer = styled.View`
   align-items: center;
   background-color: #fff;
@@ -62,7 +72,15 @@ export type ActionSheetStyles = {
   wrapper?: StyleProp<ViewStyle>;
 };
 
-export type MessageActionSheetProps = {
+export type MessageActionSheetProps<
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends UnknownType = DefaultUserType
+> = {
   /**
    * Handler to delete a current message
    */
@@ -72,6 +90,8 @@ export type MessageActionSheetProps = {
    * The `editing` prop is used by the MessageInput component to switch to edit mode.
    */
   handleEdit: () => void;
+  handleReaction: (reactionType: string) => Promise<void>;
+  message: InsertDatesMessage<At, Ch, Co, Ev, Me, Re, Us>;
   /**
    * Function that opens the reaction picker
    */
@@ -97,6 +117,7 @@ export type MessageActionSheetProps = {
    * React useState hook setter function that toggles action sheet visibility
    */
   setActionSheetVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  supportedReactions: Array<unknown>;
   /**
    * Style object for action sheet (used to style message actions)
    * Supported styles: https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js

src/components/Message/MessageSimple/MessageContent.tsx

@@ -146,6 +146,7 @@ export type ForwardedMessageProps<
    * e.g., user avatar (to which message belongs to) is only showed for last (bottom) message in group.
    */
   groupStyles: GroupType[];
+  disabled?: boolean;
   /**
    * Custom message footer component
    */
@@ -161,6 +162,7 @@ export type ForwardedMessageProps<
   MessageReplies?: React.ComponentType<
     MessageRepliesProps<At, Ch, Co, Ev, Me, Re, Us>
   >;
+  textBeforeAttachments?: boolean;
 };
 
 /**
@@ -229,9 +231,20 @@ export const MessageContent = <
     showActionSheet,
     supportedReactions = emojiData,
     threadList,
+    textBeforeAttachments = false,
+    disabled: disabledFromProps,
   } = props;
 
-  const { disabled } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { disabled: disabledFromContext } = useChannelContext<
+    At,
+    Ch,
+    Co,
+    Ev,
+    Me,
+    Re,
+    Us
+  >();
+  const disabled = disabledFromProps || disabledFromContext;
   const {
     Attachment: ContextAttachment,
     Message,
@@ -344,6 +357,53 @@ export const MessageContent = <
     return message.created_at;
   };
 
+  const renderAttachments = () => (
+    <>
+      {Array.isArray(message.attachments) &&
+        message.attachments.map((attachment, index) => {
+          // We handle files separately
+          if (
+            attachment.type === 'file' ||
+            (attachment.type === 'image' &&
+              !attachment.title_link &&
+              !attachment.og_scrape_url)
+          ) {
+            return null;
+          }
+
+          return (
+            <Attachment<At>
+              actionHandler={handleAction}
+              alignment={alignment}
+              attachment={attachment}
+              AttachmentActions={AttachmentActions}
+              Card={Card}
+              CardCover={CardCover}
+              CardFooter={CardFooter}
+              CardHeader={CardHeader}
+              FileAttachment={FileAttachment}
+              Giphy={Giphy}
+              key={`${message.id}-${index}`}
+              UrlPreview={UrlPreview}
+            />
+          );
+        })}
+      {files.length > 0 && (
+        <FileAttachmentGroup<At>
+          alignment={alignment}
+          AttachmentActions={AttachmentActions}
+          AttachmentFileIcon={AttachmentFileIcon}
+          FileAttachment={FileAttachment}
+          files={files}
+          handleAction={handleAction}
+          messageId={message.id}
+        />
+      )}
+      {images.length > 0 && (
+        <Gallery<At> alignment={alignment} images={images} />
+      )}
+    </>
+  );
   return (
     <MessageContentProvider value={context}>
       <Container
@@ -401,49 +461,7 @@ export const MessageContent = <
         {MessageHeader && <MessageHeader testID='message-header' {...props} />}
         {/* TODO: Look at this in production: Reason for collapsible: https://github.com/facebook/react-native/issues/12966 */}
         <ContainerInner alignment={alignment} collapsable={false}>
-          {Array.isArray(message.attachments) &&
-            message.attachments.map((attachment, index) => {
-              // We handle files separately
-              if (
-                attachment.type === 'file' ||
-                (attachment.type === 'image' &&
-                  !attachment.title_link &&
-                  !attachment.og_scrape_url)
-              ) {
-                return null;
-              }
-
-              return (
-                <Attachment<At>
-                  actionHandler={handleAction}
-                  alignment={alignment}
-                  attachment={attachment}
-                  AttachmentActions={AttachmentActions}
-                  Card={Card}
-                  CardCover={CardCover}
-                  CardFooter={CardFooter}
-                  CardHeader={CardHeader}
-                  FileAttachment={FileAttachment}
-                  Giphy={Giphy}
-                  key={`${message.id}-${index}`}
-                  UrlPreview={UrlPreview}
-                />
-              );
-            })}
-          {files.length > 0 && (
-            <FileAttachmentGroup<At>
-              alignment={alignment}
-              AttachmentActions={AttachmentActions}
-              AttachmentFileIcon={AttachmentFileIcon}
-              FileAttachment={FileAttachment}
-              files={files}
-              handleAction={handleAction}
-              messageId={message.id}
-            />
-          )}
-          {images.length > 0 && (
-            <Gallery<At> alignment={alignment} images={images} />
-          )}
+          {!textBeforeAttachments && renderAttachments()}
           <MessageTextContainer<At, Ch, Co, Ev, Me, Re, Us>
             alignment={alignment}
             disabled={message.status === 'failed' || message.type === 'error'}
@@ -456,6 +474,7 @@ export const MessageContent = <
             MessageText={MessageText}
             openThread={onOpenThread}
           />
+          {textBeforeAttachments && renderAttachments()}
         </ContainerInner>
         {repliesEnabled && (
           <MessageReplies<At, Ch, Co, Ev, Me, Re, Us>
@@ -484,13 +503,16 @@ export const MessageContent = <
             canEditMessage={canEditMessage}
             handleDelete={handleDelete}
             handleEdit={handleEdit}
+            handleReaction={handleReaction}
+            message={message}
             messageActions={messageActions}
             openReactionPicker={openReactionPicker}
             openThread={onOpenThread}
             reactionsEnabled={reactionsEnabled}
             ref={actionSheetRef}
             repliesEnabled={repliesEnabled}
             setActionSheetVisible={setActionSheetVisible}
+            supportedReactions={emojiData}
             threadList={threadList}
           />
         )}

src/components/Message/MessageSimple/MessageSimple.tsx

@@ -358,6 +358,7 @@ export type MessageSimpleProps<
       icon: string;
       id: string;
     }[];
+    textBeforeAttachment?: boolean;
     /**
      * Custom UI component to display enriched url preview.
      * Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Card.tsx

src/components/Message/MessageSimple/utils/renderText.tsx

@@ -76,7 +76,7 @@ export const renderText = <
 
   for (const urlInfo of urls) {
     const displayLink = truncate(urlInfo.encoded.replace(/^(www\.)/, ''), {
-      length: 20,
+      length: 200,
       omission: '...',
     });
     const markdown = `[${displayLink}](${urlInfo.protocol}${urlInfo.encoded})`;

src/components/MessageList/TypingIndicator.tsx

@@ -22,7 +22,7 @@ import type {
 } from '../../types/types';
 
 const Container = styled.View`
-  align-items: center;
+  align-items: flex-end;
   flex-direction: row;
   justify-content: flex-start;
   ${({ theme }) => theme.typingIndicator.container.css};
@@ -70,7 +70,7 @@ export const TypingIndicator = <
           image={user.image}
           key={`${user.id}${idx}`}
           name={user.name || user.id}
-          size={24}
+          size={20}
           testID={`typing-avatar-${idx}`}
         />
       ))}

src/components/Reaction/ReactionPicker.tsx

@@ -20,6 +20,8 @@ import type {
 
 const Container = styled.TouchableOpacity<{ leftAlign: boolean }>`
   align-items: ${({ leftAlign }) => (leftAlign ? 'flex-start' : 'flex-end')};
+  border-color: pink;
+  border-width: 10px;
   flex: 1;
   ${({ theme }) => theme.message.reactionPicker.container.css}
 `;
@@ -28,7 +30,8 @@ const ContainerView = styled.View`
   background-color: black;
   border-radius: 30px;
   flex-direction: row;
-  height: 60px;
+  flex-wrap: wrap;
+  height: 100px;
   padding-horizontal: 20px;
   ${({ theme }) => theme.message.reactionPicker.containerView.css}
 `;
@@ -87,6 +90,7 @@ export type ReactionPickerProps<
     | MessageWithDates<At, Ch, Co, Me, Re, Us>['reaction_counts']
     | null;
   reactionPickerVisible?: boolean;
+  rpBottom?: number;
   rpLeft?: number;
   rpRight?: number;
   rpTop?: number;
@@ -114,15 +118,15 @@ export const ReactionPicker = <
     reactionPickerVisible,
     rpLeft,
     rpRight,
-    rpTop = 40,
+    rpTop,
     supportedReactions = emojiData,
   } = props;
 
   if (!reactionPickerVisible) return null;
 
   return (
     <Modal
-      animationType='fade'
+      animationType='slide'
       onRequestClose={handleDismiss}
       testID='reaction-picker'
       transparent

src/components/Thread/Thread.tsx

@@ -171,11 +171,11 @@ export const Thread = <
   const headerComponent = (
     <>
       <DefaultMessage<At, Ch, Co, Ev, Me, Re, Us>
-        {...additionalParentMessageProps}
         groupStyles={['single']}
         message={thread}
         Message={Message}
         threadList
+        {...additionalParentMessageProps}
       />
       <NewThread>
         <NewThreadText>{t('Start of a new thread')}</NewThreadText>
@@ -186,15 +186,15 @@ export const Thread = <
   return (
     <React.Fragment key={`thread-${thread.id}-${channel?.cid || ''}`}>
       <MessageList<At, Ch, Co, Ev, Me, Re, Us>
-        {...additionalMessageListProps}
         HeaderComponent={headerComponent}
         Message={Message}
         threadList
+        {...additionalMessageListProps}
       />
       <MessageInput<At, Ch, Co, Ev, Me, Re, Us>
-        {...additionalMessageInputProps}
         additionalTextInputProps={{ autoFocus, editable: !disabled }}
         parent_id={thread.id as StreamMessage<At, Me, Us>['parent_id']}
+        {...additionalMessageInputProps}
       />
     </React.Fragment>
   );