CRNS-59: Add support for custom date format in ChannelPreviewMessanger

Resolves #121
GetStream · Jan 28, 2020 · 9a8d9a3 · 9a8d9a3
1 parent ef5b887
commit 9a8d9a3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/src/components/ChannelPreview.js b/src/components/ChannelPreview.js
@@ -60,7 +60,7 @@ export class ChannelPreview extends PureComponent {
     const latestMessage = {
       text: '',
       created_at: '',
-      originalMessageObject: { ...message },
+      messageObject: { ...message },
     };
 
     if (!message) {

diff --git a/src/components/ChannelPreviewMessenger.js b/src/components/ChannelPreviewMessenger.js
@@ -77,6 +77,16 @@ export const ChannelPreviewMessenger = themed(
       unread: PropTypes.number,
       /** Length at which latest message should be truncated */
       latestMessageLength: PropTypes.number,
+      /**
+       * Formatter function for date of latest message.
+       * @param date Message date
+       * @returns Formatted date string
+       *
+       * By default today's date is shown in 'HH:mm A' format and other dates
+       * are displayed in 'DD/MM/YY' format. props.latestMessage.created_at is the
+       * default formated date. This default logic is part of ChannelPreview component.
+       */
+      formatLatestMessageDate: PropTypes.func,
     };
 
     static defaultProps = {
@@ -115,7 +125,7 @@ export const ChannelPreviewMessenger = themed(
           .map((member) => member.user.name || member.user.id || 'Unnamed User')
           .join(', ');
       }
-
+      const formatLatestMessageDate = this.props.formatLatestMessageDate;
       return (
         <Container onPress={this.onSelectChannel}>
           {this.renderAvatar(otherMembers)}
@@ -124,7 +134,13 @@ export const ChannelPreviewMessenger = themed(
               <Title ellipsizeMode="tail" numberOfLines={1}>
                 {name}
               </Title>
-              <Date>{this.props.latestMessage.created_at}</Date>
+              <Date>
+                {formatLatestMessageDate
+                  ? formatLatestMessageDate(
+                      this.props.latestMessage.messageObject.created_at,
+                    )
+                  : this.props.latestMessage.created_at}
+              </Date>
             </DetailsTop>
             <Message
               unread={this.props.unread > 0 ? this.props.unread : undefined}

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -324,7 +324,7 @@ export interface ChannelPreviewUIComponentProps
   latestMessage: {
     text: string;
     created_at: string;
-    originalMessageObject: Client.MessageResponse;
+    messageObject: Client.MessageResponse;
   };
   /** Length at which latest message should be truncated */
   latestMessageLength: number;