Room details screen (#348)

* Create screen module

* Display details on header tap

* Add strings

* Add room avatar size on details

* Update members method signature

* Use room proxy values

* Create room members screen

* Display room members on tap

* Update previews and mock room proxy

* Commit project file

* Various tweaks and cleanup following code review

* More small tweaks + UI and screenshot tests

Co-authored-by: Stefan Ceriu <stefanc@matrix.org>

ElementX/Sources/Screens/RoomMembers/RoomMembersCoordinator.swift

@@ -0,0 +1,55 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+struct RoomMembersCoordinatorParameters {
+    let roomProxy: RoomProxyProtocol
+    let mediaProvider: MediaProviderProtocol
+}
+
+enum RoomMembersCoordinatorAction {
+    case cancel
+}
+
+final class RoomMembersCoordinator: CoordinatorProtocol {
+    private let parameters: RoomMembersCoordinatorParameters
+    private var viewModel: RoomMembersViewModelProtocol
+    
+    var callback: ((RoomMembersCoordinatorAction) -> Void)?
+    
+    init(parameters: RoomMembersCoordinatorParameters) {
+        self.parameters = parameters
+        
+        viewModel = RoomMembersViewModel(roomProxy: parameters.roomProxy,
+                                         mediaProvider: parameters.mediaProvider)
+    }
+    
+    func start() {
+        viewModel.callback = { [weak self] action in
+            guard let self else { return }
+            MXLog.debug("RoomMembersViewModel did complete with result: \(action).")
+            switch action {
+            case .cancel:
+                self.callback?(.cancel)
+            }
+        }
+    }
+        
+    func toPresentable() -> AnyView {
+        AnyView(RoomMembersScreen(context: viewModel.context))
+    }
+}

ElementX/Sources/Screens/RoomMembers/RoomMembersModels.swift

@@ -0,0 +1,50 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import Foundation
+
+enum RoomMembersViewModelAction {
+    case cancel
+}
+
+struct RoomMembersViewState: BindableState {
+    var members: [RoomDetailsMember]
+
+    var bindings: RoomMembersViewStateBindings
+
+    var visibleMembers: [RoomDetailsMember] {
+        if bindings.searchQuery.isEmpty {
+            return members
+        }
+
+        return members.lazy.filter { member in
+            member.id.localizedCaseInsensitiveContains(bindings.searchQuery) ||
+                member.name?.localizedCaseInsensitiveContains(bindings.searchQuery) ?? false
+        }
+    }
+}
+
+struct RoomMembersViewStateBindings {
+    var searchQuery = ""
+
+    /// Information describing the currently displayed alert.
+    var alertInfo: AlertInfo<RoomDetailsErrorType>?
+}
+
+enum RoomMembersViewAction {
+    case selectMember(id: String)
+    case loadMemberData(id: String)
+}

ElementX/Sources/Screens/RoomMembers/RoomMembersViewModel.swift

@@ -0,0 +1,78 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+typealias RoomMembersViewModelType = StateStoreViewModel<RoomMembersViewState, RoomMembersViewAction>
+
+class RoomMembersViewModel: RoomMembersViewModelType, RoomMembersViewModelProtocol {
+    private let roomProxy: RoomProxyProtocol
+    private let mediaProvider: MediaProviderProtocol
+
+    var callback: ((RoomMembersViewModelAction) -> Void)?
+
+    init(roomProxy: RoomProxyProtocol,
+         mediaProvider: MediaProviderProtocol) {
+        self.roomProxy = roomProxy
+        self.mediaProvider = mediaProvider
+        super.init(initialViewState: .init(members: [],
+                                           bindings: .init()))
+
+        Task {
+            switch await roomProxy.members() {
+            case .success(let members):
+                state.members = members.map { RoomDetailsMember(withProxy: $0) }
+            case .failure(let error):
+                MXLog.debug("Failed to retrieve room members: \(error)")
+                state.bindings.alertInfo = AlertInfo(id: .alert(ElementL10n.unknownError))
+            }
+        }
+    }
+    
+    // MARK: - Public
+    
+    override func process(viewAction: RoomMembersViewAction) async {
+        switch viewAction {
+        case .selectMember(let id):
+            MXLog.debug("Member selected: \(id)")
+        case .loadMemberData(let id):
+            await loadAvatar(forMember: id)
+        }
+    }
+
+    private func loadAvatar(forMember memberId: String) async {
+        guard let member = state.members.first(where: { $0.id == memberId }) else {
+            return
+        }
+        if member.avatar != nil {
+            // already loaded
+            return
+        }
+        guard let avatarUrl = member.avatarUrl else {
+            // user has no avatar
+            return
+        }
+
+        switch await mediaProvider.loadImageFromURLString(avatarUrl, avatarSize: .user(on: .roomDetails)) {
+        case .success(let image):
+            if let index = state.members.firstIndex(where: { $0.id == memberId }) {
+                state.members[index].avatar = image
+            }
+        case .failure(let error):
+            MXLog.debug("Failed to retrieve room member avatar: \(error)")
+        }
+    }
+}

ElementX/Sources/Screens/RoomMembers/RoomMembersViewModelProtocol.swift

@@ -0,0 +1,23 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import Foundation
+
+@MainActor
+protocol RoomMembersViewModelProtocol {
+    var callback: ((RoomMembersViewModelAction) -> Void)? { get set }
+    var context: RoomMembersViewModelType.Context { get }
+}

ElementX/Sources/Screens/RoomMembers/View/RoomMembersMemberCell.swift

@@ -0,0 +1,84 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+struct RoomMembersMemberCell: View {
+    @ScaledMetric private var avatarSize = AvatarSize.user(on: .roomDetails).value
+
+    let member: RoomDetailsMember
+    let context: RoomMembersViewModel.Context
+
+    var body: some View {
+        Button {
+            context.send(viewAction: .selectMember(id: member.id))
+        } label: {
+            HStack {
+                if let avatar = member.avatar {
+                    Image(uiImage: avatar)
+                        .resizable()
+                        .scaledToFill()
+                        .frame(width: avatarSize, height: avatarSize)
+                        .clipShape(Circle())
+                        .accessibilityHidden(true)
+                } else {
+                    PlaceholderAvatarImage(text: member.name ?? "", contentId: member.id)
+                        .clipShape(Circle())
+                        .frame(width: avatarSize, height: avatarSize)
+                        .accessibilityHidden(true)
+                }
+
+                Text(member.name ?? "")
+                    .font(.element.callout.bold())
+                    .foregroundColor(.element.primaryContent)
+                    .lineLimit(1)
+
+                Spacer()
+            }
+            .accessibilityElement(children: .combine)
+            .task {
+                context.send(viewAction: .loadMemberData(id: member.id))
+            }
+        }
+    }
+}
+
+struct RoomMembersMemberCell_Previews: PreviewProvider {
+    static var previews: some View {
+        body.preferredColorScheme(.light)
+            .tint(.element.accent)
+        body.preferredColorScheme(.dark)
+            .tint(.element.accent)
+    }
+
+    static var body: some View {
+        let members: [RoomMemberProxy] = [
+            .mockAlice,
+            .mockBob,
+            .mockCharlie
+        ]
+        let roomProxy = MockRoomProxy(displayName: "Room A",
+                                      members: members)
+        let viewModel = RoomMembersViewModel(roomProxy: roomProxy,
+                                             mediaProvider: MockMediaProvider())
+
+        return VStack {
+            ForEach(members) { member in
+                RoomMembersMemberCell(member: .init(withProxy: member), context: viewModel.context)
+            }
+        }
+    }
+}

ElementX/Sources/Screens/RoomMembers/View/RoomMembersScreen.swift

@@ -0,0 +1,61 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+struct RoomMembersScreen: View {
+    @Environment(\.colorScheme) private var colorScheme
+
+    @ObservedObject var context: RoomMembersViewModel.Context
+    
+    var body: some View {
+        Form {
+            Section {
+                ForEach(context.viewState.visibleMembers) { member in
+                    RoomMembersMemberCell(member: member, context: context)
+                        .id(member.id)
+                }
+            } footer: {
+                Text(ElementL10n.roomTitleMembers(context.viewState.members.count))
+                    .foregroundColor(.element.secondaryContent)
+                    .font(.element.footnote)
+            }
+        }
+        .searchable(text: $context.searchQuery, placement: .navigationBarDrawer(displayMode: .always))
+        .alert(item: $context.alertInfo) { $0.alert }
+        .navigationTitle(ElementL10n.listMembers)
+    }
+}
+
+// MARK: - Previews
+
+struct RoomMembers_Previews: PreviewProvider {
+    static var previews: some View {
+        Group {
+            let members: [RoomMemberProxy] = [
+                .mockAlice,
+                .mockBob,
+                .mockCharlie
+            ]
+            let roomProxy = MockRoomProxy(displayName: "Room A",
+                                          members: members)
+            let viewModel = RoomMembersViewModel(roomProxy: roomProxy,
+                                                 mediaProvider: MockMediaProvider())
+            RoomMembersScreen(context: viewModel.context)
+        }
+        .tint(.element.accent)
+    }
+}