Initial implementation of the JoinRoomScreen. (#2684)

* Update Compound and use super button for room directory.
2026-11-02 20:39:24 +00:00 · 2024-04-12 13:13:22 +01:00
parent cc95c6a0f2
commit f8920d4d11
37 changed files with 605 additions and 68 deletions
@@ -24,7 +24,7 @@ struct RoomDirectorySearchView: View {
        Button(action: onTap) {
            Label(L10n.screenRoomlistRoomDirectoryButtonTitle, icon: \.listBulleted)
        }
-        .buttonStyle(.compound(.secondary))
+        .buttonStyle(.compound(.super))
        .padding(.horizontal, 16)
        .padding(.vertical, 8)
    }
@@ -0,0 +1,72 @@
+//
+// 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 Combine
+import SwiftUI
+
+struct JoinRoomScreenCoordinatorParameters {
+    let roomID: String
+    let roomName: String
+    let avatarURL: URL?
+    let interaction: JoinRoomScreenInteraction
+    let clientProxy: ClientProxyProtocol
+}
+
+enum JoinRoomScreenCoordinatorAction {
+    case joined
+    case cancelled
+}
+
+final class JoinRoomScreenCoordinator: CoordinatorProtocol {
+    private let parameters: JoinRoomScreenCoordinatorParameters
+    private let viewModel: JoinRoomScreenViewModelProtocol
+    
+    private var cancellables = Set<AnyCancellable>()
+ 
+    private let actionsSubject: PassthroughSubject<JoinRoomScreenCoordinatorAction, Never> = .init()
+    var actionsPublisher: AnyPublisher<JoinRoomScreenCoordinatorAction, Never> {
+        actionsSubject.eraseToAnyPublisher()
+    }
+    
+    init(parameters: JoinRoomScreenCoordinatorParameters) {
+        self.parameters = parameters
+        
+        viewModel = JoinRoomScreenViewModel(roomID: parameters.roomID,
+                                            roomName: parameters.roomName,
+                                            avatarURL: parameters.avatarURL,
+                                            interaction: parameters.interaction,
+                                            clientProxy: parameters.clientProxy)
+    }
+    
+    func start() {
+        viewModel.actionsPublisher.sink { [weak self] action in
+            MXLog.info("Coordinator: received view model action: \(action)")
+            
+            guard let self else { return }
+            switch action {
+            case .joined:
+                actionsSubject.send(.joined)
+            case .cancelled:
+                actionsSubject.send(.cancelled)
+            }
+        }
+        .store(in: &cancellables)
+    }
+        
+    func toPresentable() -> AnyView {
+        AnyView(JoinRoomScreen(context: viewModel.context))
+    }
+}
@@ -0,0 +1,74 @@
+//
+// 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 JoinRoomScreenViewModelAction {
+    case joined
+    case cancelled
+}
+
+struct JoinRoomScreenViewState: BindableState {
+    // Maybe use room summary details or similar here??
+    let roomID: String
+    let roomName: String
+    let avatarURL: URL?
+    
+    let interaction: JoinRoomScreenInteraction
+    
+    var isJoining = false
+    
+    var bindings = JoinRoomScreenViewStateBindings()
+    
+    var title: String {
+        switch interaction {
+        case .knock:
+            L10n.screenJoinRoomTitleKnock
+        case .join, .invited:
+            L10n.screenJoinRoomTitleNoPreview
+        }
+    }
+    
+    var subtitle: String {
+        switch interaction {
+        case .knock:
+            L10n.screenJoinRoomSubtitleKnock
+        case .join, .invited:
+            L10n.screenJoinRoomSubtitleNoPreview
+        }
+    }
+}
+
+struct JoinRoomScreenViewStateBindings {
+    var alertInfo: AlertInfo<JoinRoomScreenAlertType>?
+}
+
+enum JoinRoomScreenAlertType {
+    case joinFailed
+}
+
+enum JoinRoomScreenInteraction {
+    case knock
+    case join
+    case invited
+}
+
+enum JoinRoomScreenViewAction {
+    case knock
+    case join
+    case acceptInvite
+    case declineInvite
+}
@@ -0,0 +1,67 @@
+//
+// 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 Combine
+import SwiftUI
+
+typealias JoinRoomScreenViewModelType = StateStoreViewModel<JoinRoomScreenViewState, JoinRoomScreenViewAction>
+
+class JoinRoomScreenViewModel: JoinRoomScreenViewModelType, JoinRoomScreenViewModelProtocol {
+    private let clientProxy: ClientProxyProtocol
+    
+    private let actionsSubject: PassthroughSubject<JoinRoomScreenViewModelAction, Never> = .init()
+    var actionsPublisher: AnyPublisher<JoinRoomScreenViewModelAction, Never> {
+        actionsSubject.eraseToAnyPublisher()
+    }
+
+    init(roomID: String, roomName: String, avatarURL: URL?, interaction: JoinRoomScreenInteraction, clientProxy: ClientProxyProtocol) {
+        self.clientProxy = clientProxy
+        
+        super.init(initialViewState: JoinRoomScreenViewState(roomID: roomID,
+                                                             roomName: roomName,
+                                                             avatarURL: avatarURL,
+                                                             interaction: interaction))
+    }
+    
+    // MARK: - Public
+    
+    override func process(viewAction: JoinRoomScreenViewAction) {
+        MXLog.info("View model: received view action: \(viewAction)")
+        
+        switch viewAction {
+        case .knock:
+            break
+        case .join:
+            Task { await joinRoom() }
+        case .acceptInvite:
+            break
+        case .declineInvite:
+            break
+        }
+    }
+    
+    // MARK: - Private
+    
+    private func joinRoom() async {
+        state.isJoining = true
+        switch await clientProxy.joinRoom(state.roomID) {
+        case .success:
+            actionsSubject.send(.joined)
+        case .failure(let error):
+            state.bindings.alertInfo = .init(id: .joinFailed)
+        }
+    }
+}
@@ -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 Combine
+
+@MainActor
+protocol JoinRoomScreenViewModelProtocol {
+    var actionsPublisher: AnyPublisher<JoinRoomScreenViewModelAction, Never> { get }
+    var context: JoinRoomScreenViewModelType.Context { get }
+}
@@ -0,0 +1,130 @@
+//
+// 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 Compound
+import SwiftUI
+
+struct JoinRoomScreen: View {
+    @Environment(\.dynamicTypeSize) private var dynamicTypeSize
+    
+    @ObservedObject var context: JoinRoomScreenViewModel.Context
+    
+    var body: some View {
+        FullscreenDialog(topPadding: 80, background: .bloom) {
+            mainContent
+        } bottomContent: {
+            buttons
+        }
+        .background()
+        .backgroundStyle(.compound.bgCanvasDefault)
+        .navigationBarTitleDisplayMode(.inline)
+        .toolbar { toolbar }
+    }
+    
+    var mainContent: some View {
+        VStack(spacing: 16) {
+            LoadableAvatarImage(url: context.viewState.avatarURL,
+                                name: context.viewState.roomName,
+                                contentID: context.viewState.roomID,
+                                avatarSize: .room(on: .joinRoom),
+                                imageProvider: context.imageProvider)
+                .dynamicTypeSize(dynamicTypeSize < .accessibility1 ? dynamicTypeSize : .accessibility1)
+            
+            VStack(spacing: 8) {
+                Text(context.viewState.title)
+                    .font(.compound.headingMDBold)
+                    .foregroundStyle(.compound.textPrimary)
+                    .multilineTextAlignment(.center)
+                
+                Text(context.viewState.subtitle)
+                    .font(.compound.bodyMD)
+                    .foregroundStyle(.compound.textSecondary)
+                    .multilineTextAlignment(.center)
+            }
+            
+            Image(asset: Asset.Images.joinRoomGraphic)
+                .padding(.top, 40)
+        }
+    }
+    
+    @ViewBuilder
+    var buttons: some View {
+        switch context.viewState.interaction {
+        case .knock:
+            Button(L10n.screenJoinRoomKnockAction) { context.send(viewAction: .knock) }
+                .buttonStyle(.compound(.primary))
+        case .join:
+            Button(L10n.screenJoinRoomJoinAction) { context.send(viewAction: .join) }
+                .buttonStyle(.compound(.super))
+        case .invited:
+            ViewThatFits {
+                HStack(spacing: 8) { inviteButtons }
+                VStack(spacing: 16) { inviteButtons }
+            }
+        }
+    }
+    
+    @ViewBuilder
+    var inviteButtons: some View {
+        Button(L10n.actionDecline) { context.send(viewAction: .acceptInvite) }
+            .buttonStyle(.compound(.secondary))
+        Button(L10n.actionAccept) { context.send(viewAction: .declineInvite) }
+            .buttonStyle(.compound(.primary))
+    }
+    
+    @ToolbarContentBuilder
+    var toolbar: some ToolbarContent {
+        ToolbarItem(placement: .principal) {
+            RoomHeaderView(roomID: context.viewState.roomID,
+                           roomName: context.viewState.roomName,
+                           avatarURL: context.viewState.avatarURL,
+                           imageProvider: context.imageProvider)
+        }
+    }
+}
+
+// MARK: - Previews
+
+struct JoinRoomScreen_Previews: PreviewProvider, TestablePreview {
+    static let knockViewModel = makeViewModel(interaction: .knock)
+    static let joinViewModel = makeViewModel(interaction: .join)
+    static let inviteViewModel = makeViewModel(interaction: .invited)
+    
+    static var previews: some View {
+        NavigationStack {
+            JoinRoomScreen(context: knockViewModel.context)
+        }
+        .previewDisplayName("Knock")
+        
+        NavigationStack {
+            JoinRoomScreen(context: joinViewModel.context)
+        }
+        .previewDisplayName("Join")
+        
+        NavigationStack {
+            JoinRoomScreen(context: inviteViewModel.context)
+        }
+        .previewDisplayName("Invite")
+    }
+    
+    static func makeViewModel(interaction: JoinRoomScreenInteraction) -> JoinRoomScreenViewModel {
+        JoinRoomScreenViewModel(roomID: "6",
+                                roomName: "Room Name",
+                                avatarURL: nil,
+                                interaction: interaction,
+                                clientProxy: ClientProxyMock(.init()))
+    }
+}
@@ -19,72 +19,47 @@ import Foundation
 import SwiftUI

 struct RoomHeaderView: View {
-    @ObservedObject var context: RoomScreenViewModel.Context
-
+    let roomID: String
+    let roomName: String
+    let avatarURL: URL?
+    
+    let imageProvider: ImageProviderProtocol?
+    
    var body: some View {
        HStack(spacing: 12) {
            roomAvatar
                .accessibilityHidden(true)
-            Text(context.viewState.roomTitle)
+            Text(roomName)
                .font(.compound.bodyLGSemibold)
                .accessibilityIdentifier(A11yIdentifiers.roomScreen.name)
        }
        // Leading align whilst using the principal toolbar position.
        .frame(maxWidth: .infinity, alignment: .leading)
-        // Using a button stops it from getting truncated in the navigation bar
-        .onTapGesture {
-            context.send(viewAction: .displayRoomDetails)
-        }
    }
-
-    @ViewBuilder private var roomAvatar: some View {
-        LoadableAvatarImage(url: context.viewState.roomAvatarURL,
-                            name: context.viewState.roomTitle,
-                            contentID: context.viewState.roomID,
+    
+    private var roomAvatar: some View {
+        LoadableAvatarImage(url: avatarURL,
+                            name: roomName,
+                            contentID: roomID,
                            avatarSize: .room(on: .timeline),
-                            imageProvider: context.imageProvider)
+                            imageProvider: imageProvider)
            .accessibilityIdentifier(A11yIdentifiers.roomScreen.avatar)
    }
 }

 struct RoomHeaderView_Previews: PreviewProvider, TestablePreview {
    static var previews: some View {
-        bodyPlain
-        bodyEncrypted
-    }
-
-    @ViewBuilder
-    static var bodyPlain: some View {
-        let viewModel = RoomScreenViewModel(roomProxy: RoomProxyMock(with: .init(name: "Some Room name", avatarURL: URL.picturesDirectory)),
-                                            timelineController: MockRoomTimelineController(),
-                                            mediaProvider: MockMediaProvider(),
-                                            mediaPlayerProvider: MediaPlayerProviderMock(),
-                                            voiceMessageMediaManager: VoiceMessageMediaManagerMock(),
-                                            userIndicatorController: ServiceLocator.shared.userIndicatorController,
-                                            application: ApplicationMock.default,
-                                            appSettings: ServiceLocator.shared.settings,
-                                            analyticsService: ServiceLocator.shared.analytics,
-                                            notificationCenter: NotificationCenterMock())
-
-        RoomHeaderView(context: viewModel.context)
+        RoomHeaderView(roomID: "1",
+                       roomName: "Some Room name",
+                       avatarURL: URL.picturesDirectory,
+                       imageProvider: MockMediaProvider())
            .previewLayout(.sizeThatFits)
            .padding()
-    }
-    
-    @ViewBuilder
-    static var bodyEncrypted: some View {
-        let viewModel = RoomScreenViewModel(roomProxy: RoomProxyMock(with: .init(name: "Some Room name")),
-                                            timelineController: MockRoomTimelineController(),
-                                            mediaProvider: MockMediaProvider(),
-                                            mediaPlayerProvider: MediaPlayerProviderMock(),
-                                            voiceMessageMediaManager: VoiceMessageMediaManagerMock(),
-                                            userIndicatorController: ServiceLocator.shared.userIndicatorController,
-                                            application: ApplicationMock.default,
-                                            appSettings: ServiceLocator.shared.settings,
-                                            analyticsService: ServiceLocator.shared.analytics,
-                                            notificationCenter: NotificationCenterMock())
-
-        RoomHeaderView(context: viewModel.context)
+        
+        RoomHeaderView(roomID: "1",
+                       roomName: "Some Room name",
+                       avatarURL: nil,
+                       imageProvider: MockMediaProvider())
            .previewLayout(.sizeThatFits)
            .padding()
    }
@@ -139,7 +139,14 @@ struct RoomScreen: View {
        // .principal + .primaryAction works better than .navigation leading + trailing
        // as the latter disables interaction in the action button for rooms with long names
        ToolbarItem(placement: .principal) {
-            RoomHeaderView(context: context)
+            RoomHeaderView(roomID: context.viewState.roomID,
+                           roomName: context.viewState.roomTitle,
+                           avatarURL: context.viewState.roomAvatarURL,
+                           imageProvider: context.imageProvider)
+                // Using a button stops it from getting truncated in the navigation bar
+                .onTapGesture {
+                    context.send(viewAction: .displayRoomDetails)
+                }
        }
        
        if !ProcessInfo.processInfo.isiOSAppOnMac {