Implement date separators in message list (#80)

Author: martinmitrevski

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### ✅ Added
 - Possibility to view channel info on channel options
+- Date separators in the message list
 
 ### 🐞 Fixed
 - Bug about link attachments not opening when the URL was missing the scheme

DemoAppSwiftUI/AppDelegate.swift

@@ -62,7 +62,8 @@ class AppDelegate: NSObject, UIApplicationDelegate {
         }
         #endif
 
-        streamChat = StreamChat(chatClient: chatClient)
+        let utils = Utils(messageListConfig: MessageListConfig(dateIndicatorPlacement: .messageList))
+        streamChat = StreamChat(chatClient: chatClient, utils: utils)
 
         DispatchQueue.main.asyncAfter(deadline: .now() + 2.5) {
             withAnimation {

Sources/StreamChatSwiftUI/ChatChannel/ChatChannelViewModel.swift

@@ -28,12 +28,7 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
     private var isActive = true
     private var readsString = ""
 
-    private let messageListDateOverlay: DateFormatter = {
-        let df = DateFormatter()
-        df.setLocalizedDateFormatFromTemplate("MMMdd")
-        df.locale = .autoupdatingCurrent
-        return df
-    }()
+    private let messageListDateOverlay: DateFormatter = DateFormatter.messageListDateOverlay
 
     private lazy var messagesDateFormatter = utils.dateFormatter
     private lazy var messageCachingUtils = utils.messageCachingUtils
@@ -150,6 +145,7 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
         if index >= messages.count {
             return
         }
+        
         let message = messages[index]
         checkForNewMessages(index: index)
         if utils.messageListConfig.dateIndicatorPlacement == .overlay {

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListConfig.swift

@@ -62,7 +62,7 @@ public struct MessagePaddings {
 public enum DateIndicatorPlacement {
     case none
     case overlay
-    case messageList // Not supported yet.
+    case messageList
 }
 
 /// Used to show and hide different helper views around the message.
@@ -72,6 +72,7 @@ public struct MessageDisplayOptions {
     let showMessageDate: Bool
     let showAuthorName: Bool
     let animateChanges: Bool
+    let dateLabelSize: CGFloat
     let currentUserMessageTransition: AnyTransition
     let otherUserMessageTransition: AnyTransition
     var messageLinkDisplayResolver: (ChatMessage) -> [NSAttributedString.Key: Any]
@@ -81,6 +82,7 @@ public struct MessageDisplayOptions {
         showMessageDate: Bool = true,
         showAuthorName: Bool = true,
         animateChanges: Bool = true,
+        overlayDateLabelSize: CGFloat = 40,
         currentUserMessageTransition: AnyTransition = .identity,
         otherUserMessageTransition: AnyTransition = .identity,
         messageLinkDisplayResolver: @escaping (ChatMessage) -> [NSAttributedString.Key: Any] = MessageDisplayOptions
@@ -90,6 +92,7 @@ public struct MessageDisplayOptions {
         self.showAuthorName = showAuthorName
         self.showMessageDate = showMessageDate
         self.animateChanges = animateChanges
+        dateLabelSize = overlayDateLabelSize
         self.currentUserMessageTransition = currentUserMessageTransition
         self.otherUserMessageTransition = otherUserMessageTransition
         self.messageLinkDisplayResolver = messageLinkDisplayResolver

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListDateUtils.swift

@@ -0,0 +1,80 @@
+//
+// Copyright © 2022 Stream.io Inc. All rights reserved.
+//
+
+import Foundation
+import StreamChat
+
+class MessageListDateUtils {
+    
+    private let messageListConfig: MessageListConfig
+    
+    init(messageListConfig: MessageListConfig) {
+        self.messageListConfig = messageListConfig
+    }
+    
+    /// Returns index for a message, only if .messageList date indicator placement is enabled.
+    /// - Parameters:
+    ///   - message, the message whose index is searched for.
+    ///   - messages: the list of messages.
+    ///  - Returns: optional index.
+    func indexForMessageDate(
+        message: ChatMessage,
+        in messages: LazyCachedMapCollection<ChatMessage>
+    ) -> Int? {
+        if messageListConfig.dateIndicatorPlacement != .messageList {
+            // Index computation will be done onAppear.
+            return nil
+        }
+        
+        return index(for: message, in: messages)
+    }
+    
+    /// Returns index for a message, if it exists.
+    /// - Parameters:
+    ///   - message, the message whose index is searched for.
+    ///   - messages: the list of messages.
+    ///  - Returns: optional index.
+    func index(
+        for message: ChatMessage,
+        in messages: LazyCachedMapCollection<ChatMessage>
+    ) -> Int? {
+        let index = messages.firstIndex { msg in
+            msg.id == message.id
+        }
+        
+        return index
+    }
+    
+    /// Returns whether a date should be presented above a message.
+    /// - Parameters:
+    ///   - index, the index of a message.
+    ///   - messages: the list of messages.
+    ///  - Returns: optional date, shown above a message.
+    func showMessageDate(
+        for index: Int?,
+        in messages: LazyCachedMapCollection<ChatMessage>
+    ) -> Date? {
+        guard let index = index else {
+            return nil
+        }
+
+        let message = messages[index]
+        let previousIndex = index + 1
+        if previousIndex < messages.count {
+            let previous = messages[previousIndex]
+            let isDifferentDay = !Calendar.current.isDate(
+                message.createdAt,
+                equalTo: previous.createdAt,
+                toGranularity: .day
+            )
+            if isDifferentDay {
+                return message.createdAt
+            } else {
+                return nil
+            }
+        } else {
+            return message.createdAt
+        }
+    }
+}

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListView.swift

@@ -41,6 +41,10 @@ public struct MessageListView<Factory: ViewFactory>: View, KeyboardReadable {
         utils.messageListConfig
     }
 
+    private var messageListDateUtils: MessageListDateUtils {
+        utils.messageListDateUtils
+    }
+    
     private var shouldShowTypingIndicator: Bool {
         !channel.currentlyTypingUsersFiltered(currentUserId: chatClient.currentUserId).isEmpty
             && messageListConfig.typingIndicatorPlacement == .bottomOverlay
@@ -106,6 +110,8 @@ public struct MessageListView<Factory: ViewFactory>: View, KeyboardReadable {
 
                     LazyVStack(spacing: 0) {
                         ForEach(messages, id: \.messageId) { message in
+                            var index: Int? = messageListDateUtils.indexForMessageDate(message: message, in: messages)
+                            let messageDate: Date? = messageListDateUtils.showMessageDate(for: index, in: messages)
                             factory.makeMessageContainerView(
                                 channel: channel,
                                 message: message,
@@ -117,16 +123,25 @@ public struct MessageListView<Factory: ViewFactory>: View, KeyboardReadable {
                                 onLongPress: handleLongPress(messageDisplayInfo:),
                                 isLast: message == messages.last
                             )
-                            .flippedUpsideDown()
                             .onAppear {
-                                let index = messages.firstIndex { msg in
-                                    msg.id == message.id
+                                if index == nil {
+                                    index = messageListDateUtils.index(for: message, in: messages)
                                 }
-
                                 if let index = index {
                                     onMessageAppear(index)
                                 }
                             }
+                            .overlay(
+                                messageDate != nil ?
+                                    VStack {
+                                        factory.makeMessageListDateIndicator(date: messageDate!)
+                                            .offset(y: -messageListConfig.messageDisplayOptions.dateLabelSize)
+                                        Spacer()
+                                    }
+                                    : nil
+                            )
+                            .padding(.top, messageDate != nil ? messageListConfig.messageDisplayOptions.dateLabelSize : 0)
+                            .flippedUpsideDown()
                         }
                         .id(listId)
                     }
@@ -303,11 +318,19 @@ public struct DateIndicatorView: View {
     @Injected(\.colors) private var colors
     @Injected(\.fonts) private var fonts
 
-    var date: String
+    var dateString: String
+    
+    public init(date: Date) {
+        dateString = DateFormatter.messageListDateOverlay.string(from: date)
+    }
+    
+    public init(dateString: String) {
+        self.dateString = dateString
+    }
 
     public var body: some View {
         VStack {
-            Text(date)
+            Text(dateString)
                 .font(fonts.footnote)
                 .padding(.vertical, 4)
                 .padding(.horizontal, 8)

Sources/StreamChatSwiftUI/DefaultViewFactory.swift

@@ -412,7 +412,11 @@ extension ViewFactory {
     }
 
     public func makeDateIndicatorView(dateString: String) -> some View {
-        DateIndicatorView(date: dateString)
+        DateIndicatorView(dateString: dateString)
+    }
+    
+    public func makeMessageListDateIndicator(date: Date) -> some View {
+        DateIndicatorView(date: date)
     }
 
     public func makeGiphyBadgeViewType(

Sources/StreamChatSwiftUI/Utils.swift

@@ -24,6 +24,7 @@ public class Utils {
     public var shouldSyncChannelControllerOnAppear: (ChatChannelController) -> Bool
 
     var messageCachingUtils = MessageCachingUtils()
+    var messageListDateUtils: MessageListDateUtils
 
     public init(
         dateFormatter: DateFormatter = .makeDefault(),
@@ -55,5 +56,6 @@ public class Utils {
         self.messageListConfig = messageListConfig
         self.composerConfig = composerConfig
         self.shouldSyncChannelControllerOnAppear = shouldSyncChannelControllerOnAppear
+        messageListDateUtils = MessageListDateUtils(messageListConfig: messageListConfig)
     }
 }

Sources/StreamChatSwiftUI/Utils/Common/DateFormatter+Extensions.swift

@@ -15,7 +15,7 @@ extension DateFormatter {
 
     /// Formatter that is used to format date for scrolling overlay that should display
     /// day when message below was sent
-    public static let messageListDateOverlay: DateFormatter = {
+    public static var messageListDateOverlay: DateFormatter = {
         let df = DateFormatter()
         df.setLocalizedDateFormatFromTemplate("MMMdd")
         df.locale = .autoupdatingCurrent

Sources/StreamChatSwiftUI/ViewFactory.swift

@@ -418,6 +418,12 @@ public protocol ViewFactory: AnyObject {
     /// - Parameter dateString: the displayed date string.
     /// - Returns: view in the date indicator slot.
     func makeDateIndicatorView(dateString: String) -> DateIndicatorViewType
+
+    associatedtype MessageListDateIndicatorViewType: View
+    /// Creates the date indicator view in the message list.
+    /// - Parameter date: the date that will be displayed.
+    /// - Returns: view shown above messages separated by date.
+    func makeMessageListDateIndicator(date: Date) -> MessageListDateIndicatorViewType
 
     associatedtype GiphyBadgeViewType: View
     /// Creates giphy badge view.