SwiftUI timeline refactor + TimelineViewState decoupling

ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -228,8 +228,8 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/pointfreeco/xctest-dynamic-overlay",
       "state" : {
-        "revision" : "245d527002f29c5a616c5b7131f6a50ac7f41cbf",
-        "version" : "0.8.6"
+        "revision" : "50843cbb8551db836adec2290bb4bc6bac5c1865",
+        "version" : "0.9.0"
       }
     }
   ],

ElementX/Sources/Other/ScrollViewAdapter.swift

@@ -29,7 +29,9 @@ class ScrollViewAdapter: NSObject, UIScrollViewDelegate {
             scrollView?.delegate = self
         }
     }
-
+
+    var shouldScrollToTopClosure: ((UIScrollView) -> Bool)?
+
     private let didScrollSubject = PassthroughSubject<Void, Never>()
     var didScroll: AnyPublisher<Void, Never> {
         didScrollSubject.eraseToAnyPublisher()
@@ -73,6 +75,14 @@ class ScrollViewAdapter: NSObject, UIScrollViewDelegate {
     func scrollViewDidScrollToTop(_ scrollView: UIScrollView) {
         updateDidScroll(scrollView)
     }
+
+    func scrollViewShouldScrollToTop(_ scrollView: UIScrollView) -> Bool {
+        guard let shouldScrollToTopClosure else {
+            // Default behaviour
+            return true
+        }
+        return shouldScrollToTopClosure(scrollView)
+    }
 
     // MARK: - Private
 

ElementX/Sources/Screens/RoomScreen/RoomScreenModels.swift

@@ -51,7 +51,6 @@ enum RoomScreenComposerMode: Equatable {
 
 enum RoomScreenViewAction {
     case displayRoomDetails
-    case paginateBackwards
     case itemAppeared(itemID: TimelineItemIdentifier)
     case itemDisappeared(itemID: TimelineItemIdentifier)
     case itemTapped(itemID: TimelineItemIdentifier)
@@ -86,15 +85,13 @@ struct RoomScreenViewState: BindableState {
     var roomId: String
     var roomTitle = ""
     var roomAvatarURL: URL?
-    var itemsDictionary = OrderedDictionary<String, RoomTimelineItemViewModel>()
     var members: [String: RoomMemberState] = [:]
-    var canBackPaginate = true
-    var isBackPaginating = false
     var showLoading = false
     var timelineStyle: TimelineStyle
     var readReceiptsEnabled: Bool
     var isEncryptedOneToOneRoom = false
-
+    var timelineViewState = TimelineViewState()
+
     var composerMode: RoomScreenComposerMode = .default
     let scrollToBottomPublisher = PassthroughSubject<Void, Never>()
 
@@ -106,14 +103,6 @@ struct RoomScreenViewState: BindableState {
     var sendButtonDisabled: Bool {
         bindings.composerText.count == 0
     }
-
-    var timelineIDs: [String] {
-        itemsDictionary.keys.elements
-    }
-
-    var itemViewModels: [RoomTimelineItemViewModel] {
-        itemsDictionary.values.elements
-    }
 }
 
 struct RoomScreenViewStateBindings {
@@ -184,3 +173,19 @@ struct RoomMemberState {
     let displayName: String?
     let avatarURL: URL?
 }
+
+struct TimelineViewState {
+    var canBackPaginate = false
+    var isBackPaginating = false
+    var itemsDictionary = OrderedDictionary<String, RoomTimelineItemViewState>()
+
+    var timelineIDs: [String] {
+        itemsDictionary.keys.elements
+    }
+
+    var itemViewStates: [RoomTimelineItemViewState] {
+        itemsDictionary.values.elements
+    }
+
+    var paginateAction: (() -> Void)?
+}

ElementX/Sources/Screens/RoomScreen/RoomScreenViewModel.swift

@@ -60,6 +60,10 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
                                                          bindings: .init(composerText: "", composerFocused: false, reactionsCollapsed: [:])),
                    imageProvider: mediaProvider)
 
+        state.timelineViewState.paginateAction = { [weak self] in
+            self?.paginateBackwards()
+        }
+
         setupSubscriptions()
 
         state.timelineItemMenuActionProvider = { [weak self] itemId -> TimelineItemMenuActions? in
@@ -84,8 +88,6 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
         switch viewAction {
         case .displayRoomDetails:
             callback?(.displayRoomDetails)
-        case .paginateBackwards:
-            Task { await paginateBackwards() }
         case .itemAppeared(let id):
             Task { await timelineController.processItemAppearance(id) }
         case .itemDisappeared(let id):
@@ -151,12 +153,12 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
                 case .updatedTimelineItems:
                     self.buildTimelineViews()
                 case .canBackPaginate(let canBackPaginate):
-                    if self.state.canBackPaginate != canBackPaginate {
-                        self.state.canBackPaginate = canBackPaginate
+                    if self.state.timelineViewState.canBackPaginate != canBackPaginate {
+                        self.state.timelineViewState.canBackPaginate = canBackPaginate
                     }
                 case .isBackPaginating(let isBackPaginating):
-                    if self.state.isBackPaginating != isBackPaginating {
-                        self.state.isBackPaginating = isBackPaginating
+                    if self.state.timelineViewState.isBackPaginating != isBackPaginating {
+                        self.state.timelineViewState.isBackPaginating = isBackPaginating
                     }
                 }
             }
@@ -215,12 +217,21 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
             .store(in: &cancellables)
     }
 
-    private func paginateBackwards() async {
-        switch await timelineController.paginateBackwards(requestSize: Constants.backPaginationEventLimit, untilNumberOfItems: Constants.backPaginationPageSize) {
-        case .failure:
-            displayError(.toast(L10n.errorFailedLoadingMessages))
-        default:
-            break
+    private var paginateBackwardsTask: Task<Void, Never>?
+
+    func paginateBackwards() {
+        guard paginateBackwardsTask == nil else {
+            return
+        }
+
+        paginateBackwardsTask = Task {
+            switch await timelineController.paginateBackwards(requestSize: Constants.backPaginationEventLimit, untilNumberOfItems: Constants.backPaginationPageSize) {
+            case .failure:
+                displayError(.toast(L10n.errorFailedLoadingMessages))
+            default:
+                break
+            }
+            paginateBackwardsTask = nil
         }
     }
 
@@ -245,7 +256,7 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
     }
 
     private func buildTimelineViews() {
-        var timelineItemsDictionary = OrderedDictionary<String, RoomTimelineItemViewModel>()
+        var timelineItemsDictionary = OrderedDictionary<String, RoomTimelineItemViewState>()
 
         let itemsGroupedByTimelineDisplayStyle = timelineController.timelineItems.chunked { current, next in
             canGroupItem(timelineItem: current, with: next)
@@ -259,36 +270,26 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
 
             if itemGroup.count == 1 {
                 if let firstItem = itemGroup.first {
-                    timelineItemsDictionary.updateValue(updateViewModel(item: firstItem, groupStyle: .single),
+                    timelineItemsDictionary.updateValue(RoomTimelineItemViewState(item: firstItem, groupStyle: .single),
                                                         forKey: firstItem.id.timelineID)
                 }
             } else {
                 for (index, item) in itemGroup.enumerated() {
                     if index == 0 {
-                        timelineItemsDictionary.updateValue(updateViewModel(item: item, groupStyle: .first),
+                        timelineItemsDictionary.updateValue(RoomTimelineItemViewState(item: item, groupStyle: .first),
                                                             forKey: item.id.timelineID)
                     } else if index == itemGroup.count - 1 {
-                        timelineItemsDictionary.updateValue(updateViewModel(item: item, groupStyle: .last),
+                        timelineItemsDictionary.updateValue(RoomTimelineItemViewState(item: item, groupStyle: .last),
                                                             forKey: item.id.timelineID)
                     } else {
-                        timelineItemsDictionary.updateValue(updateViewModel(item: item, groupStyle: .middle),
+                        timelineItemsDictionary.updateValue(RoomTimelineItemViewState(item: item, groupStyle: .middle),
                                                             forKey: item.id.timelineID)
                     }
                 }
             }
         }
 
-        state.itemsDictionary = timelineItemsDictionary
-    }
-
-    private func updateViewModel(item: RoomTimelineItemProtocol, groupStyle: TimelineGroupStyle) -> RoomTimelineItemViewModel {
-        if let timelineItemViewModel = state.itemsDictionary[item.id.timelineID] {
-            timelineItemViewModel.groupStyle = groupStyle
-            timelineItemViewModel.type = .init(item: item)
-            return timelineItemViewModel
-        } else {
-            return RoomTimelineItemViewModel(item: item, groupStyle: groupStyle)
-        }
+        state.timelineViewState.itemsDictionary = timelineItemsDictionary
     }
 
     private func canGroupItem(timelineItem: RoomTimelineItemProtocol, with otherTimelineItem: RoomTimelineItemProtocol) -> Bool {
@@ -666,7 +667,7 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
     // MARK: - Reactions
 
     private func showEmojiPicker(for itemID: TimelineItemIdentifier) {
-        guard let item = state.itemsDictionary[itemID.timelineID], item.isReactable else { return }
+        guard let item = state.timelineViewState.itemsDictionary[itemID.timelineID], item.isReactable else { return }
         callback?(.displayEmojiPicker(itemID: itemID))
     }
 

ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift

@@ -24,7 +24,7 @@ struct RoomScreen: View {
 
     var body: some View {
         timeline
-            .background(Color.compound.bgCanvasDefault.ignoresSafeArea()) // Kills the toolbar translucency.
+            .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
             .safeAreaInset(edge: .bottom, spacing: 0) {
                 HStack(alignment: .bottom, spacing: attachmentButtonPadding) {
                     RoomAttachmentPicker(context: context)
@@ -36,6 +36,7 @@ struct RoomScreen: View {
                 .padding(.trailing, 12)
                 .padding(.top, 8)
                 .padding(.bottom)
+                .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
             }
             .navigationBarTitleDisplayMode(.inline)
             .toolbar { toolbar }
@@ -80,14 +81,14 @@ struct RoomScreen: View {
                 }
             }
     }
-
+
+    @ViewBuilder
     private var timeline: some View {
-        TimelineView()
+        TimelineView(viewState: context.viewState.timelineViewState)
             .id(context.viewState.roomId)
             .environmentObject(context)
             .environment(\.timelineStyle, context.viewState.timelineStyle)
             .environment(\.readReceiptsEnabled, context.viewState.readReceiptsEnabled)
-            .overlay(alignment: .bottomTrailing) { scrollToBottomButton }
     }
 
     private var messageComposer: some View {
@@ -108,27 +109,6 @@ struct RoomScreen: View {
         }
     }
 
-    private var scrollToBottomButton: some View {
-        Button { context.viewState.scrollToBottomPublisher.send(()) } label: {
-            Image(systemName: "chevron.down")
-                .font(.compound.bodyLG)
-                .fontWeight(.semibold)
-                .foregroundColor(.compound.iconSecondary)
-                .padding(13)
-                .offset(y: 1)
-                .background {
-                    Circle()
-                        .fill(Color.compound.iconOnSolidPrimary)
-                        // Intentionally using system primary colour to get white/black.
-                        .shadow(color: .primary.opacity(0.33), radius: 2.0)
-                }
-                .padding()
-        }
-        .opacity(context.scrollToBottomButtonVisible ? 1.0 : 0.0)
-        .accessibilityHidden(!context.scrollToBottomButtonVisible)
-        .animation(.elementDefault, value: context.scrollToBottomButtonVisible)
-    }
-
     @ViewBuilder
     private var loadingIndicator: some View {
         if context.viewState.showLoading {

ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift

@@ -328,8 +328,8 @@ struct TimelineItemBubbledStylerView_Previews: PreviewProvider {
     static var mockTimeline: some View {
         ScrollView {
             VStack(alignment: .leading, spacing: 0) {
-                ForEach(viewModel.state.itemViewModels) { itemViewModel in
-                    RoomTimelineItemView(viewModel: itemViewModel)
+                ForEach(viewModel.state.timelineViewState.itemViewStates) { viewState in
+                    RoomTimelineItemView(viewState: viewState)
                         .padding(TimelineStyle.bubbles.rowInsets)
                     // Insets added in the table view cells
                 }
@@ -341,7 +341,7 @@ struct TimelineItemBubbledStylerView_Previews: PreviewProvider {
 
     static var replies: some View {
         VStack {
-            RoomTimelineItemView(viewModel: .init(item: TextRoomTimelineItem(id: .init(timelineID: ""),
+            RoomTimelineItemView(viewState: .init(item: TextRoomTimelineItem(id: .init(timelineID: ""),
                                                                              timestamp: "10:42",
                                                                              isOutgoing: true,
                                                                              isEditable: false,
@@ -350,7 +350,7 @@ struct TimelineItemBubbledStylerView_Previews: PreviewProvider {
                                                                              replyDetails: .loaded(sender: .init(id: "", displayName: "Alice"),
                                                                                                    contentType: .text(.init(body: "Short")))), groupStyle: .single))
 
-            RoomTimelineItemView(viewModel: .init(item: TextRoomTimelineItem(id: .init(timelineID: ""),
+            RoomTimelineItemView(viewState: .init(item: TextRoomTimelineItem(id: .init(timelineID: ""),
                                                                              timestamp: "10:42",
                                                                              isOutgoing: true,
                                                                              isEditable: false,

ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemPlainStylerView.swift

@@ -144,7 +144,7 @@ struct TimelineItemPlainStylerView_Previews: PreviewProvider {
         VStack(alignment: .leading, spacing: 0) {
             ForEach(1..<MockRoomTimelineController().timelineItems.count, id: \.self) { index in
                 let item = MockRoomTimelineController().timelineItems[index]
-                RoomTimelineItemView(viewModel: .init(item: item, groupStyle: .single))
+                RoomTimelineItemView(viewState: .init(item: item, groupStyle: .single))
                     .padding(TimelineStyle.plain.rowInsets) // Insets added in the table view cells
             }
         }

ElementX/Sources/Screens/RoomScreen/View/Style/TimelineStyler.swift

@@ -53,7 +53,7 @@ struct TimelineItemStyler_Previews: PreviewProvider {
     }()
 
     static let sendingLast: TextRoomTimelineItem = {
-        let id = viewModel.state.timelineIDs.last ?? UUID().uuidString
+        let id = viewModel.state.timelineViewState.timelineIDs.last ?? UUID().uuidString
         var result = TextRoomTimelineItem(id: .init(timelineID: id), timestamp: "Now", isOutgoing: true, isEditable: false, sender: .init(id: UUID().uuidString), content: .init(body: "Test"))
         result.properties.deliveryStatus = .sending
         return result
@@ -66,7 +66,7 @@ struct TimelineItemStyler_Previews: PreviewProvider {
     }()
 
     static let sentLast: TextRoomTimelineItem = {
-        let id = viewModel.state.timelineIDs.last ?? UUID().uuidString
+        let id = viewModel.state.timelineViewState.timelineIDs.last ?? UUID().uuidString
         let result = TextRoomTimelineItem(id: .init(timelineID: id), timestamp: "Now", isOutgoing: true, isEditable: false, sender: .init(id: UUID().uuidString), content: .init(body: "Test"))
         return result
     }()

ElementX/Sources/Screens/RoomScreen/View/Supplementary/TimelineItemStatusView.swift

@@ -23,11 +23,15 @@ struct TimelineItemStatusView: View {
     @EnvironmentObject private var context: RoomScreenViewModel.Context
 
     private var isLastOutgoingMessage: Bool {
-        context.viewState.timelineIDs.last == timelineItem.id.timelineID &&
-            timelineItem.isOutgoing
+        timelineItem.isOutgoing && context.viewState.timelineViewState.timelineIDs.last == timelineItem.id.timelineID
     }
 
     var body: some View {
+        mainContent
+    }
+
+    @ViewBuilder
+    private var mainContent: some View {
         if !timelineItem.properties.orderedReadReceipts.isEmpty, readReceiptsEnabled {
             readReceipts
         } else {