Composable approach for ChatMessageHeaderDecoratorView (#2534)

* Follow composable approach to create ChatMessageHeaderDecoratorView

* Fix flacky unit test

* Address PR comments

* Address PR comments

* Update specs

* Address PR comments

* Address PR comments

Author: polqf

Sources/StreamChat/Database/DTOs/ChannelReadDTO.swift

@@ -136,8 +136,8 @@ extension NSManagedObjectContext {
             return
         }
 
-        let lastReadAt = lastReadAt?.bridgeDate ?? message.createdAt
-        read.lastReadAt = lastReadAt
+        let lastReadAt = lastReadAt ?? message.createdAt.bridgeDate
+        read.lastReadAt = lastReadAt.bridgeDate
 
         let messagesCount = unreadMessagesCount ?? MessageDTO.countOtherUserMessages(
             in: read.channel.cid,

Sources/StreamChat/Database/DTOs/MessageDTO.swift

@@ -448,12 +448,12 @@ class MessageDTO: NSManagedObject {
 
     static func countOtherUserMessages(
         in cid: String,
-        createdAtFrom: DBDate,
+        createdAtFrom: Date,
         context: NSManagedObjectContext
     ) -> Int {
         let subpredicates: [NSPredicate] = [
             sentMessagesPredicate(for: cid),
-            .init(format: "createdAt >= %@", createdAtFrom),
+            .init(format: "createdAt >= %@", createdAtFrom.bridgeDate),
             .init(format: "user.currentUser == nil")
         ]
 

Sources/StreamChatUI/ChatChannel/ChatChannelVC.swift

@@ -290,27 +290,22 @@ open class ChatChannelVC: _ViewController,
         headerViewForMessage message: ChatMessage,
         at indexPath: IndexPath
     ) -> ChatMessageDecorationView? {
-        let dateHeaderView = dateHeaderView(
-            vc,
-            headerViewForMessage: message,
-            at: indexPath,
-            components: components
-        )
+        let shouldShowDate = vc.shouldShowDateSeparator(forMessage: message, at: indexPath)
+        let shouldShowUnreadMessages = message.id == firstUnreadMessageId
 
-        var unreadMessagesView: ChatMessageDecorationView?
-        if message.id == firstUnreadMessageId, let unreadCount = channelController.channel?.unreadCount.messages {
-            let view = components.unreadMessagesCounterDecorationView.init()
-            view.content = L10n.Message.Unread.count(unreadCount)
-            unreadMessagesView = view
+        guard (shouldShowDate || shouldShowUnreadMessages), let channel = channelController.channel else {
+            return nil
         }
 
-        guard let dateView = dateHeaderView, let unreadView = unreadMessagesView else {
-            return dateHeaderView ?? unreadMessagesView
-        }
-
-        let stackView = StackViewDecoratorView()
-        stackView.content = [dateView, unreadView]
-        return stackView
+        let header = components.messageHeaderDecorationView.init()
+        header.content = ChatChannelMessageHeaderDecoratorViewContent(
+            message: message,
+            channel: channel,
+            dateFormatter: vc.dateSeparatorFormatter,
+            shouldShowDate: shouldShowDate,
+            shouldShowUnreadMessages: shouldShowUnreadMessages
+        )
+        return header
     }
 
     open func chatMessageListVC(

Sources/StreamChatUI/ChatMessageList/ChatMessage/ChatMessageDecorationView.swift renamed to Sources/StreamChatUI/ChatMessageList/ChatMessage/Decorators/ChatMessageDecorationView.swift

@@ -0,0 +1,69 @@
+//
+// Copyright © 2023 Stream.io Inc. All rights reserved.
+//
+
+import StreamChat
+import UIKit
+
+public struct ChatChannelMessageHeaderDecoratorViewContent {
+    public let message: ChatMessage
+    public let channel: ChatChannel
+    public let dateFormatter: MessageDateSeparatorFormatter
+    public let shouldShowDate: Bool
+    public let shouldShowUnreadMessages: Bool
+
+    public init(
+        message: ChatMessage,
+        channel: ChatChannel,
+        dateFormatter: MessageDateSeparatorFormatter,
+        shouldShowDate: Bool,
+        shouldShowUnreadMessages: Bool
+    ) {
+        self.message = message
+        self.channel = channel
+        self.dateFormatter = dateFormatter
+        self.shouldShowDate = shouldShowDate
+        self.shouldShowUnreadMessages = shouldShowUnreadMessages
+    }
+}
+
+/// The decorator view that is used as a container for the chat message header view decorators.
+public final class ChatChannelMessageHeaderDecoratorView: ChatMessageDecorationView, ThemeProvider {
+    /// The container for the stacked views.
+    public private(set) lazy var container = UIStackView()
+        .withoutAutoresizingMaskConstraints
+        .withAccessibilityIdentifier(identifier: "chatMessageHeaderDecoratorView")
+
+    public private(set) lazy var dateView = components.messageListDateSeparatorView.init()
+        .withoutAutoresizingMaskConstraints
+    public private(set) lazy var unreadCountView = components.unreadMessagesCounterDecorationView.init()
+        .withoutAutoresizingMaskConstraints
+
+    public var content: ChatChannelMessageHeaderDecoratorViewContent? {
+        didSet {
+            updateContentIfNeeded()
+        }
+    }
+
+    override public func setUpLayout() {
+        super.setUpLayout()
+        embed(container, insets: .init(top: 0, leading: 0, bottom: 0, trailing: 0))
+        container.axis = .vertical
+        container.spacing = 4
+
+        [dateView, unreadCountView].forEach(container.addArrangedSubview)
+    }
+
+    override public func setUpAppearance() {
+        super.setUpAppearance()
+        backgroundColor = nil
+    }
+
+    override public func updateContent() {
+        super.updateContent()
+        dateView.isVisible = content?.shouldShowDate ?? false
+        unreadCountView.isVisible = content?.shouldShowUnreadMessages ?? false
+        dateView.content = content.map { $0.dateFormatter.format($0.message.createdAt) }
+        unreadCountView.content = content?.channel
+    }
+}

Sources/StreamChatUI/ChatMessageList/ChatMessage/Decorators/ChatMessageHeaderDecoratorView.swift

@@ -7,11 +7,6 @@ import UIKit
 
 /// The view used to show a separator when there are unread messages.
 open class ChatMessagesCountDecorationView: ChatMessageDecorationView, AppearanceProvider {
-    /// The string to be shown in the view
-    open var content: String? {
-        didSet { updateContentIfNeeded() }
-    }
-
     /// The container that the contentTextLabel will be placed aligned to its centre.
     open private(set) lazy var container: UIView = UIView()
         .withoutAutoresizingMaskConstraints
@@ -27,7 +22,7 @@ open class ChatMessagesCountDecorationView: ChatMessageDecorationView, Appearanc
     override open func setUpLayout() {
         super.setUpLayout()
 
-        embed(container, insets: .init(top: 0, leading: 0, bottom: 8, trailing: 0))
+        embed(container)
         container.embed(textLabel, insets: .init(top: 3, leading: 9, bottom: 3, trailing: 9))
     }
 
@@ -41,10 +36,4 @@ open class ChatMessagesCountDecorationView: ChatMessageDecorationView, Appearanc
         textLabel.textColor = appearance.colorPalette.textLowEmphasis
         textLabel.textAlignment = .center
     }
-
-    override open func updateContent() {
-        super.updateContent()
-
-        textLabel.text = content
-    }
 }

Sources/StreamChatUI/ChatMessageList/ChatMessage/ChatMessagesCountDecorationView.swift renamed to Sources/StreamChatUI/ChatMessageList/ChatMessage/Decorators/ChatMessagesCountDecorationView.swift

@@ -0,0 +1,30 @@
+//
+// Copyright © 2023 Stream.io Inc. All rights reserved.
+//
+
+import StreamChat
+import UIKit
+
+/// The decorator view that is used to display the replies count in a thread
+open class ChatThreadRepliesCountDecorationView: ChatMessageDecorationView, ThemeProvider {
+    public var content: ChatMessage? {
+        didSet {
+            updateContentIfNeeded()
+        }
+    }
+
+    lazy var messagesCountDecorationView = components.messagesCountDecorationView.init()
+        .withoutAutoresizingMaskConstraints
+
+    override open func setUpLayout() {
+        super.setUpLayout()
+
+        embed(messagesCountDecorationView, insets: .init(top: 0, leading: 0, bottom: 8, trailing: 0))
+    }
+
+    override open func updateContent() {
+        super.updateContent()
+
+        messagesCountDecorationView.textLabel.text = L10n.Message.Thread.Replies.count(content?.replyCount ?? 0)
+    }
+}

Sources/StreamChatUI/ChatMessageList/ChatMessage/Decorators/ChatThreadRepliesCountDecorationView.swift

@@ -0,0 +1,31 @@
+//
+// Copyright © 2023 Stream.io Inc. All rights reserved.
+//
+
+import StreamChat
+import UIKit
+
+/// The decorator view that is used to display the unread messages count in a channel.
+open class ChatUnreadMessagesCountDecorationView: ChatMessageDecorationView, ThemeProvider {
+    public var content: ChatChannel? {
+        didSet {
+            updateContentIfNeeded()
+        }
+    }
+
+    lazy var messagesCountDecorationView = components.messagesCountDecorationView.init()
+        .withoutAutoresizingMaskConstraints
+
+    override open func setUpLayout() {
+        super.setUpLayout()
+
+        embed(messagesCountDecorationView, insets: .init(top: 8, leading: 0, bottom: 0, trailing: 0))
+    }
+
+    override open func updateContent() {
+        super.updateContent()
+
+        let unreadCount = content?.unreadCount.messages ?? 0
+        messagesCountDecorationView.textLabel.text = L10n.Message.Unread.count(unreadCount)
+    }
+}

Sources/StreamChatUI/ChatMessageList/ChatMessage/Decorators/ChatUnreadMessagesCountDecorationView.swift

@@ -282,7 +282,7 @@ open class ChatThreadVC: _ViewController,
             return nil
         }
         let repliesCounterDecorationView = components.threadRepliesCounterDecorationView.init()
-        repliesCounterDecorationView.content = L10n.Message.Thread.Replies.count(message.replyCount)
+        repliesCounterDecorationView.content = message
         return repliesCounterDecorationView
     }