stream-chat-react-native-core 4.0.0-beta.3 → 4.0.0-beta.7

package/src/components/Reply/Reply.tsx

@@ -3,6 +3,8 @@ import { Image, ImageStyle, StyleSheet, View, ViewStyle } from 'react-native';
 
 import merge from 'lodash/merge';
 
+import type { Attachment } from 'stream-chat';
+
 import { useMessageContext } from '../../contexts/messageContext/MessageContext';
 import {
   MessageInputContextValue,
@@ -17,16 +19,7 @@ import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { emojiRegex } from '../../utils/utils';
 
@@ -62,15 +55,9 @@ const styles = StyleSheet.create({
 });
 
 type ReplyPropsWithContext<
-  At extends DefaultAttachmentType = 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,
-> = Pick<MessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'quotedMessage'> &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'FileAttachmentIcon' | 'MessageAvatar'> &
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessageInputContextValue<StreamChatGenerics>, 'quotedMessage'> &
+  Pick<MessagesContextValue<StreamChatGenerics>, 'FileAttachmentIcon' | 'MessageAvatar'> &
   Pick<TranslationContextValue, 't'> & {
     attachmentSize?: number;
     styles?: Partial<{
@@ -83,15 +70,9 @@ type ReplyPropsWithContext<
   };
 
 const ReplyWithContext = <
-  At extends DefaultAttachmentType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ReplyPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ReplyPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     FileAttachmentIcon,
@@ -123,7 +104,7 @@ const ReplyWithContext = <
 
   if (typeof quotedMessage === 'boolean') return null;
 
-  const lastAttachment = quotedMessage.attachments?.slice(-1)[0];
+  const lastAttachment = quotedMessage.attachments?.slice(-1)[0] as Attachment<StreamChatGenerics>;
 
   const messageType = lastAttachment
     ? lastAttachment.type === 'file' || lastAttachment.type === 'audio'
@@ -196,7 +177,7 @@ const ReplyWithContext = <
             />
           ) : null
         ) : null}
-        <MessageTextContainer<At, Ch, Co, Ev, Me, Re, Us>
+        <MessageTextContainer<StreamChatGenerics>
           markdownStyles={
             quotedMessage.deleted_at
               ? merge({ em: { color: grey } }, deletedText)
@@ -251,17 +232,9 @@ const ReplyWithContext = <
   );
 };
 
-const areEqual = <
-  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,
->(
-  prevProps: ReplyPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: ReplyPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: ReplyPropsWithContext<StreamChatGenerics>,
+  nextProps: ReplyPropsWithContext<StreamChatGenerics>,
 ) => {
   const { quotedMessage: prevQuotedMessage } = prevProps;
   const { quotedMessage: nextQuotedMessage } = nextProps;
@@ -283,39 +256,27 @@ const areEqual = <
 const MemoizedReply = React.memo(ReplyWithContext, areEqual) as typeof ReplyWithContext;
 
 export type ReplyProps<
-  At extends DefaultAttachmentType = 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,
-> = Partial<ReplyPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<ReplyPropsWithContext<StreamChatGenerics>>;
 
 /**
  * UI Component for reply
  */
 export const Reply = <
-  At extends DefaultAttachmentType = 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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ReplyProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ReplyProps<StreamChatGenerics>,
 ) => {
-  const { message } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { message } = useMessageContext<StreamChatGenerics>();
 
   const { FileAttachmentIcon = FileIconDefault, MessageAvatar = MessageAvatarDefault } =
-    useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+    useMessagesContext<StreamChatGenerics>();
 
-  const { editing, quotedMessage } = useMessageInputContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { editing, quotedMessage } = useMessageInputContext<StreamChatGenerics>();
 
   const quotedEditingMessage = (
     typeof editing !== 'boolean' ? editing?.quoted_message || false : false
-  ) as MessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us>['quotedMessage'];
+  ) as MessageInputContextValue<StreamChatGenerics>['quotedMessage'];
 
   const { t } = useTranslationContext();
 
@@ -325,15 +286,7 @@ export const Reply = <
         FileAttachmentIcon,
         MessageAvatar,
         quotedMessage: message
-          ? (message.quoted_message as MessageInputContextValue<
-              At,
-              Ch,
-              Co,
-              Ev,
-              Me,
-              Re,
-              Us
-            >['quotedMessage'])
+          ? (message.quoted_message as MessageInputContextValue<StreamChatGenerics>['quotedMessage'])
           : quotedMessage || quotedEditingMessage,
         t,
       }}

package/src/components/Thread/Thread.tsx

@@ -10,16 +10,7 @@ import {
 } from '../../contexts/messagesContext/MessagesContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import {
   MessageInput as DefaultMessageInput,
   MessageInputProps,
@@ -27,29 +18,23 @@ import {
 import type { MessageListProps } from '../MessageList/MessageList';
 
 type ThreadPropsWithContext<
-  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,
-> = Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'> &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'MessageList'> &
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
+  Pick<MessagesContextValue<StreamChatGenerics>, 'MessageList'> &
   Pick<
-    ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    ThreadContextValue<StreamChatGenerics>,
     'closeThread' | 'loadMoreThread' | 'reloadThread' | 'thread'
   > & {
     /**
      * Additional props for underlying MessageInput component.
      * Available props - https://getstream.github.io/stream-chat-react-native/v3/#messageinput
      * */
-    additionalMessageInputProps?: Partial<MessageInputProps<At, Ch, Co, Ev, Me, Re, Us>>;
+    additionalMessageInputProps?: Partial<MessageInputProps<StreamChatGenerics>>;
     /**
      * Additional props for underlying MessageList component.
      * Available props - https://getstream.github.io/stream-chat-react-native/v3/#messagelist
      * */
-    additionalMessageListProps?: Partial<MessageListProps<At, Ch, Co, Ev, Me, Re, Us>>;
+    additionalMessageListProps?: Partial<MessageListProps<StreamChatGenerics>>;
     /** Make input focus on mounting thread */
     autoFocus?: boolean;
     /** Closes thread on dismount, defaults to true */
@@ -60,7 +45,7 @@ type ThreadPropsWithContext<
      * **Customized MessageInput component to used within Thread instead of default MessageInput
      * **Available from [MessageInput](https://getstream.github.io/stream-chat-react-native/v3/#messageinput)**
      */
-    MessageInput?: React.ComponentType<MessageInputProps<At, Ch, Co, Ev, Me, Re, Us>>;
+    MessageInput?: React.ComponentType<MessageInputProps<StreamChatGenerics>>;
     /**
      * Call custom function on closing thread if handling thread state elsewhere
      */
@@ -68,15 +53,9 @@ type ThreadPropsWithContext<
   };
 
 const ThreadWithContext = <
-  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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ThreadPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ThreadPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     additionalMessageInputProps,
@@ -123,7 +102,7 @@ const ThreadWithContext = <
         threadList
         {...additionalMessageListProps}
       />
-      <MessageInput<At, Ch, Co, Ev, Me, Re, Us>
+      <MessageInput<StreamChatGenerics>
         additionalTextInputProps={{ autoFocus, editable: !disabled }}
         threadList
         {...additionalMessageInputProps}
@@ -133,14 +112,8 @@ const ThreadWithContext = <
 };
 
 export type ThreadProps<
-  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,
-> = Partial<ThreadPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<ThreadPropsWithContext<StreamChatGenerics>>;
 
 /**
  * Thread - The Thread renders a parent message with a list of replies. Use the standard message list of the main channel's messages.
@@ -152,21 +125,15 @@ export type ThreadProps<
  * - additionalMessageInputProps
  */
 export const Thread = <
-  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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ThreadProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ThreadProps<StreamChatGenerics>,
 ) => {
-  const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { threadList } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { MessageList } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { client } = useChatContext<StreamChatGenerics>();
+  const { threadList } = useChannelContext<StreamChatGenerics>();
+  const { MessageList } = useMessagesContext<StreamChatGenerics>();
   const { closeThread, loadMoreThread, reloadThread, thread } =
-    useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
+    useThreadContext<StreamChatGenerics>();
 
   if (thread?.id && !threadList) {
     throw new Error(
@@ -175,7 +142,7 @@ export const Thread = <
   }
 
   return (
-    <ThreadWithContext<At, Ch, Co, Ev, Me, Re, Us>
+    <ThreadWithContext<StreamChatGenerics>
       {...{
         client,
         closeThread,

package/src/components/Thread/components/ThreadFooterComponent.tsx

@@ -12,16 +12,7 @@ import {
   useThreadContext,
 } from '../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { vw } from '../../../utils/utils';
 
 const styles = StyleSheet.create({
@@ -45,26 +36,14 @@ const styles = StyleSheet.create({
 });
 
 type ThreadFooterComponentPropsWithContext<
-  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,
-> = Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'Message'> &
-  Pick<ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'thread'>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessagesContextValue<StreamChatGenerics>, 'Message'> &
+  Pick<ThreadContextValue<StreamChatGenerics>, 'thread'>;
 
 const ThreadFooterComponentWithContext = <
-  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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ThreadFooterComponentPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ThreadFooterComponentPropsWithContext<StreamChatGenerics>,
 ) => {
   const { Message, thread } = props;
   const { t } = useTranslationContext();
@@ -124,17 +103,9 @@ const ThreadFooterComponentWithContext = <
   );
 };
 
-const areEqual = <
-  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,
->(
-  prevProps: ThreadFooterComponentPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: ThreadFooterComponentPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: ThreadFooterComponentPropsWithContext<StreamChatGenerics>,
+  nextProps: ThreadFooterComponentPropsWithContext<StreamChatGenerics>,
 ) => {
   const { thread: prevThread } = prevProps;
   const { thread: nextThread } = nextProps;
@@ -166,16 +137,10 @@ const MemoizedThreadFooter = React.memo(
 ) as typeof ThreadFooterComponentWithContext;
 
 export const ThreadFooterComponent = <
-  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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >() => {
-  const { Message } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { thread } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { Message } = useMessagesContext<StreamChatGenerics>();
+  const { thread } = useThreadContext<StreamChatGenerics>();
 
   return (
     <MemoizedThreadFooter

package/src/components/docs/data.js

@@ -1,7 +1,6 @@
 /* global require */
-
-const StreamChat = require('stream-chat').StreamChat;
 const Dayjs = require('dayjs');
+const StreamChat = require('stream-chat').StreamChat;
 export const client = new StreamChat('qk4nn7rpcn75');
 
 client.connectUser(
@@ -18,8 +17,8 @@ export const channel = client.channel('messaging', 'general', {
 });
 
 export const channelContext = {
-  client,
   channel,
+  client,
 };
 
 export const translationContext = {
@@ -27,13 +26,13 @@ export const translationContext = {
   tDateTimeParser: (date) => Dayjs(date),
 };
 export const suggestionsContext = {
-  openSuggestions: () => {},
   closeSuggestions: () => {},
+  openSuggestions: () => {},
   setInputBoxContainerRef: () => {},
   updateSuggestions: () => {},
 };
 
-const filters = { type: 'team', example: 1 };
+const filters = { example: 1, type: 'team' };
 const sort = { last_message_at: -1 };
 
 export const channels = client.queryChannels(filters, sort, {
@@ -41,11 +40,14 @@ export const channels = client.queryChannels(filters, sort, {
 });
 
 export const message = {
+  __html:
+    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
   attachments: [],
   command: '',
   created_at: '2019-01-25T00:18:59.675Z',
   html:
     '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
+  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   own_reactions: [
     {
       created_at: '2019-01-25T16:24:00.173967Z',
@@ -111,8 +113,8 @@ export const message = {
     },
   ],
   reply_count: 0,
+  status: 'received',
   text: 'Hey this is getstream message',
-  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   type: 'regular',
   updated_at: '2019-01-25T16:24:00.181Z',
   user: {
@@ -125,12 +127,11 @@ export const message = {
     role: 'user',
     updated_at: '2019-01-25T16:23:47.052538Z',
   },
-  __html:
-    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
-  status: 'received',
 };
 
 export const messageWithImages = {
+  __html:
+    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
   attachments: [
     {
       image_url:
@@ -164,6 +165,7 @@ export const messageWithImages = {
   command: '',
   created_at: '2019-01-25T00:18:59.675Z',
   html: '',
+  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   own_reactions: [
     {
       created_at: '2019-01-25T16:24:00.173967Z',
@@ -229,8 +231,8 @@ export const messageWithImages = {
     },
   ],
   reply_count: 0,
+  status: 'received',
   text: 'This message contains images',
-  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   type: 'regular',
   updated_at: '2019-01-25T16:24:00.181Z',
   user: {
@@ -243,12 +245,12 @@ export const messageWithImages = {
     role: 'user',
     updated_at: '2019-01-25T16:23:47.052538Z',
   },
-  __html:
-    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
-  status: 'received',
+  
 };
 
 export const messageWithUrlPreview = {
+  __html:
+    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
   attachments: [
     {
       image_url:
@@ -267,6 +269,7 @@ export const messageWithUrlPreview = {
   created_at: '2019-01-25T00:18:59.675Z',
   html:
     '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
+  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   own_reactions: [
     {
       created_at: '2019-01-25T16:24:00.173967Z',
@@ -332,8 +335,8 @@ export const messageWithUrlPreview = {
     },
   ],
   reply_count: 0,
+  status: 'received',
   text: 'https://unsplash.com/photos/lxuB4abGzXc',
-  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   type: 'regular',
   updated_at: '2019-01-25T16:24:00.181Z',
   user: {
@@ -346,12 +349,11 @@ export const messageWithUrlPreview = {
     role: 'user',
     updated_at: '2019-01-25T16:23:47.052538Z',
   },
-  __html:
-    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
-  status: 'received',
 };
 
 export const thread = {
+  __html:
+    '<p>this place looks amazing: <a href="https://unsplash.com/photos/f3hDGOHptrM" rel="nofollow">https://unsplash.com/photos/f3hDGOHptrM</a></p>\n',
   attachments: [
     {
       image_url:
@@ -370,12 +372,13 @@ export const thread = {
   created_at: '2019-01-25T21:25:45.306Z',
   html:
     '<p>this place looks amazing: <a href="https://unsplash.com/photos/f3hDGOHptrM" rel="nofollow">https://unsplash.com/photos/f3hDGOHptrM</a></p>\n',
+  id: 'thierry-ec4eac2b-1278-4f49-8b20-2ebcd76dace5',
   own_reactions: [],
   reaction_counts: null,
   reactions: [],
   reply_count: 2,
+  status: 'received',
   text: 'this place looks amazing: https://unsplash.com/photos/f3hDGOHptrM',
-  id: 'thierry-ec4eac2b-1278-4f49-8b20-2ebcd76dace5',
   type: 'regular',
   updated_at: '2019-01-25T21:25:45.306Z',
   user: {
@@ -385,24 +388,24 @@ export const thread = {
     role: 'user',
     updated_at: '2019-01-25T21:27:39.606466Z',
   },
-  __html:
-    '<p>this place looks amazing: <a href="https://unsplash.com/photos/f3hDGOHptrM" rel="nofollow">https://unsplash.com/photos/f3hDGOHptrM</a></p>\n',
-  status: 'received',
+  
 };
 
 export const threadMessages = [
   {
+    __html: '<p>whow, where is that?</p>\n',
     attachments: [],
     command: '',
     created_at: new Date('2019-01-25T21:26:06.346Z'),
     html: '<p>whow, where is that?</p>\n',
+    id: 'thierry-97a02ade-3a38-4400-9377-001c10fc2663',
     own_reactions: [],
     parent_id: '6312fb0b-0c94-4107-a036-376ac5ab650b',
     reaction_counts: null,
     reactions: [],
     reply_count: 0,
+    status: 'received',
     text: 'whow, where is that?',
-    id: 'thierry-97a02ade-3a38-4400-9377-001c10fc2663',
     type: 'reply',
     updated_at: '2019-01-25T21:26:06.346Z',
     user: {
@@ -415,21 +418,21 @@ export const threadMessages = [
       role: 'user',
       updated_at: '2019-01-25T21:27:39.606466Z',
     },
-    __html: '<p>whow, where is that?</p>\n',
-    status: 'received',
   },
   {
+    __html: '<p>it’s soo green, amazing</p>\n',
     attachments: [],
     command: '',
     created_at: new Date('2019-01-25T21:26:11.863Z'),
     html: '<p>it’s soo green, amazing</p>\n',
+    id: 'thierry-264fdc4d-03c5-4f93-b97c-cfe5612968aa',
     own_reactions: [],
     parent_id: '6312fb0b-0c94-4107-a036-376ac5ab650b',
     reaction_counts: null,
     reactions: [],
     reply_count: 0,
+    status: 'received',
     text: "it's soo green, amazing",
-    id: 'thierry-264fdc4d-03c5-4f93-b97c-cfe5612968aa',
     type: 'reply',
     updated_at: '2019-01-25T21:26:11.863Z',
     user: {
@@ -442,24 +445,24 @@ export const threadMessages = [
       role: 'user',
       updated_at: '2019-01-25T21:27:39.606466Z',
     },
-    __html: '<p>it’s soo green, amazing</p>\n',
-    status: 'received',
   },
 ];
 
 export const messages = [
   {
+    __html: '<p>whow, where is that?</p>\n',
     attachments: [],
     command: '',
     created_at: new Date('2019-01-25T21:26:06.346Z'),
     html: '<p>whow, where is that?</p>\n',
+    id: 'thierry-97a02ade-3a38-4400-9377-001c10fc2663',
     own_reactions: [],
     parent_id: '6312fb0b-0c94-4107-a036-376ac5ab650b',
     reaction_counts: null,
     reactions: [],
     reply_count: 0,
+    status: 'received',
     text: 'whow, where is that?',
-    id: 'thierry-97a02ade-3a38-4400-9377-001c10fc2663',
     type: 'reply',
     updated_at: '2019-01-25T21:26:06.346Z',
     user: {
@@ -472,21 +475,21 @@ export const messages = [
       role: 'user',
       updated_at: '2019-01-25T21:27:39.606466Z',
     },
-    __html: '<p>whow, where is that?</p>\n',
-    status: 'received',
   },
   {
+    __html: '<p>it’s soo green, amazing</p>\n',
     attachments: [],
     command: '',
     created_at: new Date('2019-01-25T21:26:11.863Z'),
     html: '<p>it’s soo green, amazing</p>\n',
+    id: 'thierry-264fdc4d-03c5-4f93-b97c-cfe5612968aa',
     own_reactions: [],
     parent_id: '6312fb0b-0c94-4107-a036-376ac5ab650b',
     reaction_counts: null,
     reactions: [],
     reply_count: 0,
+    status: 'received',
     text: "it's soo green, amazing",
-    id: 'thierry-264fdc4d-03c5-4f93-b97c-cfe5612968aa',
     type: 'reply',
     updated_at: '2019-01-25T21:26:11.863Z',
     user: {
@@ -499,8 +502,6 @@ export const messages = [
       role: 'user',
       updated_at: '2019-01-25T21:27:39.606466Z',
     },
-    __html: '<p>it’s soo green, amazing</p>\n',
-    status: 'received',
   },
 ];
 
@@ -516,12 +517,12 @@ export const users = [
 ];
 
 export const MessageMock = {
-  handleFlag: console.log,
-  handleMute: console.log,
-  handleEdit: console.log,
-  handleDelete: console.log,
   canDeleteMessage: () => true,
   canEditMessage: () => true,
+  handleDelete: console.log,
+  handleEdit: console.log,
+  handleFlag: console.log,
+  handleMute: console.log,
 };
 
 // Based on: https://javascript.info/promise-basics#example-loadscript