Knock Requests List Screen (#3533)

* created the basic navigation and files * updated the logic so that the buttons that do not have permissions won't show * added the empty state * progress in making the list UI * update tests * UI improvements * fixed an issue with media provider * update button style * fixed a navigation bug * pr suggestions * pr suggestions
2026-11-03 06:55:59 +00:00 · 2024-11-21 20:14:05 +01:00
parent 7e1476d973
commit e315451448
85 changed files with 701 additions and 145 deletions
@@ -0,0 +1,45 @@
+//
+// Copyright 2022-2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+// periphery:ignore:all - this is just a knockRequestsList remove this comment once generating the final file
+
+import Combine
+import SwiftUI
+
+struct KnockRequestsListScreenCoordinatorParameters {
+    let roomProxy: JoinedRoomProxyProtocol
+    let mediaProvider: MediaProviderProtocol
+}
+
+enum KnockRequestsListScreenCoordinatorAction { }
+
+final class KnockRequestsListScreenCoordinator: CoordinatorProtocol {
+    private let viewModel: KnockRequestsListScreenViewModelProtocol
+    
+    private var cancellables = Set<AnyCancellable>()
+ 
+    private let actionsSubject: PassthroughSubject<KnockRequestsListScreenCoordinatorAction, Never> = .init()
+    var actionsPublisher: AnyPublisher<KnockRequestsListScreenCoordinatorAction, Never> {
+        actionsSubject.eraseToAnyPublisher()
+    }
+    
+    init(parameters: KnockRequestsListScreenCoordinatorParameters) {
+        viewModel = KnockRequestsListScreenViewModel(roomProxy: parameters.roomProxy,
+                                                     mediaProvider: parameters.mediaProvider)
+    }
+    
+    func start() {
+        viewModel.actionsPublisher.sink { [weak self] action in
+            MXLog.info("Coordinator: received view model action: \(action)")
+        }
+        .store(in: &cancellables)
+    }
+        
+    func toPresentable() -> AnyView {
+        AnyView(KnockRequestsListScreen(context: viewModel.context))
+    }
+}
@@ -0,0 +1,24 @@
+//
+// Copyright 2022-2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+import Foundation
+
+enum KnockRequestsListScreenViewModelAction { }
+
+struct KnockRequestsListScreenViewState: BindableState {
+    var requests: [KnockRequestCellInfo] = []
+    var canAccept = false
+    var canDecline = false
+    var canBan = false
+}
+
+enum KnockRequestsListScreenViewAction {
+    case acceptAllRequests
+    case acceptRequest(userID: String)
+    case declineRequest(userID: String)
+    case ban(userID: String)
+}
@@ -0,0 +1,75 @@
+//
+// Copyright 2022-2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+import Combine
+import SwiftUI
+
+typealias KnockRequestsListScreenViewModelType = StateStoreViewModel<KnockRequestsListScreenViewState, KnockRequestsListScreenViewAction>
+
+class KnockRequestsListScreenViewModel: KnockRequestsListScreenViewModelType, KnockRequestsListScreenViewModelProtocol {
+    private let roomProxy: JoinedRoomProxyProtocol
+    
+    private let actionsSubject: PassthroughSubject<KnockRequestsListScreenViewModelAction, Never> = .init()
+    var actionsPublisher: AnyPublisher<KnockRequestsListScreenViewModelAction, Never> {
+        actionsSubject.eraseToAnyPublisher()
+    }
+
+    init(roomProxy: JoinedRoomProxyProtocol, mediaProvider: MediaProviderProtocol) {
+        self.roomProxy = roomProxy
+        super.init(initialViewState: KnockRequestsListScreenViewState(), mediaProvider: mediaProvider)
+        
+        Task {
+            await updatePermissions()
+        }
+        
+        setupSubscriptions()
+    }
+    
+    // MARK: - Public
+    
+    override func process(viewAction: KnockRequestsListScreenViewAction) {
+        switch viewAction {
+        case .acceptAllRequests:
+            break
+        case .acceptRequest(let userID):
+            break
+        case .declineRequest(let userID):
+            break
+        case .ban(let userID):
+            break
+        }
+    }
+    
+    // MARK: - Private
+    
+    private func setupSubscriptions() {
+        roomProxy.infoPublisher
+            .throttle(for: .milliseconds(200), scheduler: DispatchQueue.main, latest: true)
+            .sink { [weak self] _ in
+                Task { await self?.updatePermissions() }
+            }
+            .store(in: &cancellables)
+    }
+    
+    private func updatePermissions() async {
+        state.canAccept = await (try? roomProxy.canUserInvite(userID: roomProxy.ownUserID).get()) == true
+        state.canDecline = await (try? roomProxy.canUserKick(userID: roomProxy.ownUserID).get()) == true
+        state.canBan = await (try? roomProxy.canUserBan(userID: roomProxy.ownUserID).get()) == true
+    }
+    
+    // For testing purposes
+    private init(initialViewState: KnockRequestsListScreenViewState) {
+        roomProxy = JoinedRoomProxyMock(.init())
+        super.init(initialViewState: initialViewState)
+    }
+}
+
+extension KnockRequestsListScreenViewModel {
+    static func mockWithInitialState(_ initialViewState: KnockRequestsListScreenViewState) -> KnockRequestsListScreenViewModel {
+        .init(initialViewState: initialViewState)
+    }
+}
@@ -0,0 +1,14 @@
+//
+// Copyright 2022-2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+import Combine
+
+@MainActor
+protocol KnockRequestsListScreenViewModelProtocol {
+    var actionsPublisher: AnyPublisher<KnockRequestsListScreenViewModelAction, Never> { get }
+    var context: KnockRequestsListScreenViewModelType.Context { get }
+}
@@ -15,8 +15,9 @@
 import Compound
 import SwiftUI

-struct KnockRequestCellInfo {
-    let userID: String
+struct KnockRequestCellInfo: Identifiable {
+    /// user identifier of the usee that sent the request
+    let id: String
    let displayName: String?
    let avatarUrl: URL?
    let timestamp: String?
@@ -26,67 +27,92 @@ struct KnockRequestCellInfo {
 struct KnockRequestCell: View {
    let cellInfo: KnockRequestCellInfo
    var mediaProvider: MediaProviderProtocol?
-    let onAccept: (String) -> Void
-    let onDecline: (String) -> Void
-    let onDeclineAndBan: (String) -> Void
+    let onAccept: ((String) -> Void)?
+    let onDecline: ((String) -> Void)?
+    let onDeclineAndBan: ((String) -> Void)?
    
    var body: some View {
-        VStack(spacing: 0) {
-            HStack(alignment: .top, spacing: 16) {
-                LoadableAvatarImage(url: cellInfo.avatarUrl,
-                                    name: cellInfo.displayName,
-                                    contentID: cellInfo.userID,
-                                    avatarSize: .user(on: .knockingUserList),
-                                    mediaProvider: mediaProvider)
-                VStack(alignment: .leading, spacing: 12) {
-                    VStack(alignment: .leading, spacing: 0) {
-                        HStack(alignment: .top, spacing: 0) {
-                            Text(cellInfo.displayName ?? cellInfo.userID)
-                                .font(.compound.bodyLGSemibold)
-                                .foregroundStyle(.compound.textPrimary)
-                                .frame(maxWidth: .infinity, alignment: .leading)
-                            if let timestamp = cellInfo.timestamp {
-                                Text(timestamp)
-                                    .font(.compound.bodySM)
-                                    .foregroundStyle(.compound.textSecondary)
-                            }
-                        }
-                        if cellInfo.displayName != nil {
-                            Text(cellInfo.userID)
-                                .font(.compound.bodyMD)
-                                .foregroundStyle(.compound.textSecondary)
-                        }
-                    }
-                    if let reason = cellInfo.reason {
-                        DisclosableText(text: reason)
-                    }
-                    actions
+        HStack(alignment: .top, spacing: 16) {
+            LoadableAvatarImage(url: cellInfo.avatarUrl,
+                                name: cellInfo.displayName,
+                                contentID: cellInfo.id,
+                                avatarSize: .user(on: .knockingUserList),
+                                mediaProvider: mediaProvider)
+            VStack(alignment: .leading, spacing: 12) {
+                header
+                if let reason = cellInfo.reason {
+                    DisclosableText(text: reason)
+                }
+                actions
+            }
+            .padding(.trailing, 16)
+            .overlay(alignment: .bottom) {
+                // Custom separator that uses the same color from the compound one
+                Color.compound._borderInteractiveSecondaryAlpha
+                    .frame(height: 0.5)
+            }
+        }
+        .padding(.top, 16)
+        .padding(.leading, 16)
+        .background(.compound.bgCanvasDefault)
+    }
+    
+    private var header: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            HStack(alignment: .top, spacing: 0) {
+                Text(cellInfo.displayName ?? cellInfo.id)
+                    .font(.compound.bodyLGSemibold)
+                    .foregroundStyle(.compound.textPrimary)
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                if let timestamp = cellInfo.timestamp {
+                    Text(timestamp)
+                        .font(.compound.bodySM)
+                        .foregroundStyle(.compound.textSecondary)
                }
            }
-            .padding(16)
-            Divider()
+            if cellInfo.displayName != nil {
+                Text(cellInfo.id)
+                    .font(.compound.bodyMD)
+                    .foregroundStyle(.compound.textSecondary)
+            }
        }
    }
    
    @ViewBuilder
    private var actions: some View {
-        HStack(spacing: 16) {
-            Button(L10n.actionDecline) {
-                onDecline(cellInfo.userID)
+        VStack(spacing: 0) {
+            if onDecline != nil || onAccept != nil {
+                HStack(spacing: 16) {
+                    if let onDecline {
+                        Button(L10n.actionDecline) {
+                            onDecline(cellInfo.id)
+                        }
+                        .buttonStyle(.compound(.secondary, size: .medium))
+                    }
+                    
+                    if let onAccept {
+                        Button(L10n.actionAccept) {
+                            onAccept(cellInfo.id)
+                        }
+                        .buttonStyle(.compound(.primary, size: .medium))
+                    }
+                }
            }
-            .buttonStyle(.compound(.secondary))
-            Button(L10n.actionAccept) {
-                onAccept(cellInfo.userID)
+            
+            if let onDeclineAndBan {
+                Button(role: .destructive) {
+                    onDeclineAndBan(cellInfo.id)
+                } label: {
+                    Text(L10n.screenKnockRequestsListDeclineAndBanActionTitle)
+                        .padding(.top, 8)
+                        .padding(.bottom, 4)
+                }
+                .frame(maxWidth: .infinity)
+                .buttonStyle(.compound(.plain))
+                .padding(.top, 16)
            }
-            .buttonStyle(.compound(.primary))
        }
-        Button(L10n.screenKnockRequestsListDeclineAndBanActionTitle, role: .destructive) {
-            onDeclineAndBan(cellInfo.userID)
-        }
-        .buttonStyle(.compound(.plain))
-        .frame(maxWidth: .infinity)
-        .padding(.top, 12)
-        .padding(.bottom, 4)
+        .padding(.bottom, 16)
    }
 }

@@ -130,9 +156,10 @@ private struct DisclosableText: View {
                }
            } label: {
                CompoundIcon(\.chevronDown, size: .medium, relativeTo: .compound.bodyMD)
+                    .foregroundStyle(.compound.iconTertiary)
+                    .rotationEffect(.degrees(isExpanded ? 180 : 0))
            }
-            .rotationEffect(.degrees(isExpanded ? 180 : 0))
-            .foregroundStyle(.compound.iconTertiary)
+            .buttonStyle(.plain)
            .opacity(collapsedHeight < expandedHeight ? 1 : 0)
            .disabled(collapsedHeight >= expandedHeight)
        }
@@ -141,13 +168,13 @@ private struct DisclosableText: View {

 struct KnockRequestCell_Previews: PreviewProvider, TestablePreview {
    // swiftlint:disable:next line_length
-    static let aliceWithLongReason = KnockRequestCellInfo(userID: "@alice:matrix.org", displayName: "Alice", avatarUrl: nil, timestamp: "20 Nov 2024", reason: "Hello would like to join this room, also this is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long reason")
+    static let aliceWithLongReason = KnockRequestCellInfo(id: "@alice:matrix.org", displayName: "Alice", avatarUrl: nil, timestamp: "20 Nov 2024", reason: "Hello would like to join this room, also this is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long reason")
    
-    static let aliceWithShortReason = KnockRequestCellInfo(userID: "@alice:matrix.org", displayName: "Alice", avatarUrl: nil, timestamp: "20 Nov 2024", reason: "Hello, I am Alice and would like to join this room, please")
+    static let aliceWithShortReason = KnockRequestCellInfo(id: "@alice:matrix.org", displayName: "Alice", avatarUrl: nil, timestamp: "20 Nov 2024", reason: "Hello, I am Alice and would like to join this room, please")
    
-    static let aliceWithNoReason = KnockRequestCellInfo(userID: "@alice:matrix.org", displayName: "Alice", avatarUrl: nil, timestamp: "20 Nov 2024", reason: nil)
+    static let aliceWithNoReason = KnockRequestCellInfo(id: "@alice:matrix.org", displayName: "Alice", avatarUrl: nil, timestamp: "20 Nov 2024", reason: nil)
    
-    static let aliceWithNoName = KnockRequestCellInfo(userID: "@alice:matrix.org", displayName: nil, avatarUrl: nil, timestamp: "20 Nov 2024", reason: nil)
+    static let aliceWithNoName = KnockRequestCellInfo(id: "@alice:matrix.org", displayName: nil, avatarUrl: nil, timestamp: "20 Nov 2024", reason: nil)
    
    static var previews: some View {
        KnockRequestCell(cellInfo: aliceWithLongReason, onAccept: { _ in }, onDecline: { _ in }, onDeclineAndBan: { _ in })
@@ -158,5 +185,11 @@ struct KnockRequestCell_Previews: PreviewProvider, TestablePreview {
            .previewDisplayName("No reason")
        KnockRequestCell(cellInfo: aliceWithNoName, onAccept: { _ in }, onDecline: { _ in }, onDeclineAndBan: { _ in })
            .previewDisplayName("No name")
+        KnockRequestCell(cellInfo: aliceWithShortReason, onAccept: nil, onDecline: { _ in }, onDeclineAndBan: { _ in })
+            .previewDisplayName("No Accept")
+        KnockRequestCell(cellInfo: aliceWithShortReason, onAccept: nil, onDecline: nil, onDeclineAndBan: { _ in })
+            .previewDisplayName("No Accept and Decline")
+        KnockRequestCell(cellInfo: aliceWithShortReason, onAccept: { _ in }, onDecline: { _ in }, onDeclineAndBan: nil)
+            .previewDisplayName("No Ban")
    }
 }
@@ -0,0 +1,38 @@
+//
+// Copyright 2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+import Compound
+import SwiftUI
+
+struct KnockRequestsListEmptyStateView: View {
+    var body: some View {
+        VStack(spacing: 16) {
+            BigIcon(icon: \.askToJoin)
+            VStack(spacing: 8) {
+                Text(L10n.screenKnockRequestsListEmptyStateTitle)
+                    .multilineTextAlignment(.center)
+                    .font(.compound.headingMDBold)
+                    .foregroundStyle(.compound.textPrimary)
+                Text(L10n.screenKnockRequestsListEmptyStateDescription)
+                    .multilineTextAlignment(.center)
+                    .foregroundStyle(.compound.textSecondary)
+                    .font(.compound.bodyMD)
+            }
+            Spacer()
+        }
+        .padding(.top, 53)
+        .padding(.horizontal, 40)
+    }
+}
+
+// MARK: - Previews
+
+struct KnockRequestsListEmptyStateView_Previews: PreviewProvider, TestablePreview {
+    static var previews: some View {
+        KnockRequestsListEmptyStateView()
+    }
+}
@@ -0,0 +1,96 @@
+//
+// Copyright 2022-2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+import Compound
+import SwiftUI
+
+struct KnockRequestsListScreen: View {
+    @ObservedObject var context: KnockRequestsListScreenViewModel.Context
+    
+    var body: some View {
+        mainContent
+            .navigationBarTitleDisplayMode(.inline)
+            .navigationTitle(L10n.screenKnockRequestsListTitle)
+            .background(.compound.bgCanvasDefault)
+            .overlay {
+                if context.viewState.requests.isEmpty {
+                    KnockRequestsListEmptyStateView()
+                }
+            }
+            .safeAreaInset(edge: .bottom) {
+                if !context.viewState.requests.isEmpty {
+                    acceptAllButton
+                }
+            }
+    }
+    
+    @ViewBuilder
+    private var mainContent: some View {
+        ScrollView {
+            LazyVStack(spacing: 0) {
+                ForEach(context.viewState.requests) { requestInfo in
+                    ListRow(kind: .custom {
+                        KnockRequestCell(cellInfo: requestInfo,
+                                         mediaProvider: context.mediaProvider,
+                                         onAccept: context.viewState.canAccept ? onAccept : nil,
+                                         onDecline: context.viewState.canDecline ? onDecline : nil,
+                                         onDeclineAndBan: context.viewState.canBan ? onDeclineAndBan : nil)
+                    })
+                }
+            }
+            .padding(.top, 40)
+        }
+    }
+    
+    private var acceptAllButton: some View {
+        Button(L10n.screenKnockRequestsListAcceptAllButtonTitle) {
+            context.send(viewAction: .acceptAllRequests)
+        }
+        .buttonStyle(.compound(.secondary))
+        .padding(.horizontal, 16)
+        .padding(.top, 16)
+        .padding(.bottom, 4)
+        .background(.compound.bgCanvasDefault)
+    }
+    
+    private func onAccept(userID: String) {
+        context.send(viewAction: .acceptRequest(userID: userID))
+    }
+    
+    private func onDecline(userID: String) {
+        context.send(viewAction: .declineRequest(userID: userID))
+    }
+    
+    private func onDeclineAndBan(userID: String) {
+        context.send(viewAction: .ban(userID: userID))
+    }
+}
+
+// MARK: - Previews
+
+struct KnockRequestsListScreen_Previews: PreviewProvider, TestablePreview {
+    static let emptyViewModel = KnockRequestsListScreenViewModel.mockWithInitialState(.init())
+    
+    static let viewModel = KnockRequestsListScreenViewModel.mockWithInitialState(.init(requests: [.init(id: "@alice:matrix.org", displayName: "Alice", avatarUrl: nil, timestamp: "Now", reason: "Hello"),
+                                                                                                  // swiftlint:disable:next line_length
+                                                                                                  .init(id: "@bob:matrix.org", displayName: "Bob", avatarUrl: nil, timestamp: "Now", reason: "Hello this one is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long reason"),
+                                                                                                  .init(id: "@charlie:matrix.org", displayName: "Charlie", avatarUrl: nil, timestamp: "Now", reason: nil),
+                                                                                                  .init(id: "@dan:matrix.org", displayName: "Dan", avatarUrl: nil, timestamp: "Now", reason: "Hello! It's a me! Dan!")],
+                                                                                       canAccept: true,
+                                                                                       canDecline: true,
+                                                                                       canBan: true))
+                                                                                      
+    static var previews: some View {
+        NavigationStack {
+            KnockRequestsListScreen(context: viewModel.context)
+        }
+        NavigationStack {
+            KnockRequestsListScreen(context: emptyViewModel.context)
+        }
+        .previewDisplayName("Empty state")
+    }
+}