Improve UX on Block/Unblock user action. Add loading and error case. And make the value (a bit more) live.

This commit is contained in:
Benoit Marty 2023-07-11 17:48:31 +02:00
parent e7a92e9a4b
commit df4c03cc8e
7 changed files with 122 additions and 34 deletions

View file

@ -25,30 +25,67 @@ import androidx.compose.ui.res.stringResource
import io.element.android.features.roomdetails.impl.R import io.element.android.features.roomdetails.impl.R
import io.element.android.features.roomdetails.impl.members.details.RoomMemberDetailsEvents import io.element.android.features.roomdetails.impl.members.details.RoomMemberDetailsEvents
import io.element.android.features.roomdetails.impl.members.details.RoomMemberDetailsState import io.element.android.features.roomdetails.impl.members.details.RoomMemberDetailsState
import io.element.android.libraries.architecture.Async
import io.element.android.libraries.core.bool.orFalse
import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
import io.element.android.libraries.designsystem.components.dialogs.RetryDialog
import io.element.android.libraries.designsystem.components.preferences.PreferenceCategory import io.element.android.libraries.designsystem.components.preferences.PreferenceCategory
import io.element.android.libraries.designsystem.components.preferences.PreferenceText import io.element.android.libraries.designsystem.components.preferences.PreferenceText
import io.element.android.libraries.ui.strings.CommonStrings
@Composable @Composable
internal fun BlockUserSection(state: RoomMemberDetailsState, modifier: Modifier = Modifier) { internal fun BlockUserSection(state: RoomMemberDetailsState, modifier: Modifier = Modifier) {
PreferenceCategory(showDivider = false, modifier = modifier) { PreferenceCategory(showDivider = false, modifier = modifier) {
if (state.isBlocked) { when (state.isBlocked) {
PreferenceText( is Async.Failure -> {
title = stringResource(R.string.screen_dm_details_unblock_user), PreferenceBlockUser(state.isBlocked.prevData, false, state.eventSink, modifier)
icon = Icons.Outlined.Block, RetryDialog(
onClick = { state.eventSink(RoomMemberDetailsEvents.UnblockUser(needsConfirmation = true)) }, content = stringResource(CommonStrings.error_unknown),
) onDismiss = { state.eventSink(RoomMemberDetailsEvents.ClearBlockUserError) },
} else { onRetry = {
PreferenceText( val event = when (state.isBlocked.prevData) {
title = stringResource(R.string.screen_dm_details_block_user), true -> RoomMemberDetailsEvents.UnblockUser(needsConfirmation = false)
icon = Icons.Outlined.Block, false -> RoomMemberDetailsEvents.BlockUser(needsConfirmation = false)
tintColor = MaterialTheme.colorScheme.error, null -> /*Should not happen */ RoomMemberDetailsEvents.ClearBlockUserError
onClick = { state.eventSink(RoomMemberDetailsEvents.BlockUser(needsConfirmation = true)) }, }
) state.eventSink(event)
},
)
}
is Async.Loading -> PreferenceBlockUser(state.isBlocked.prevData, true, state.eventSink, modifier)
is Async.Success -> PreferenceBlockUser(state.isBlocked.data, false, state.eventSink, modifier)
Async.Uninitialized -> PreferenceBlockUser(null, true, state.eventSink, modifier)
} }
} }
} }
@Composable
private fun PreferenceBlockUser(
isBlocked: Boolean?,
isLoading: Boolean,
eventSink: (RoomMemberDetailsEvents) -> Unit,
modifier: Modifier = Modifier,
) {
if (isBlocked.orFalse()) {
PreferenceText(
title = stringResource(R.string.screen_dm_details_unblock_user),
icon = Icons.Outlined.Block,
onClick = { if (!isLoading) eventSink(RoomMemberDetailsEvents.UnblockUser(needsConfirmation = true)) },
loadingCurrentValue = isLoading,
modifier = modifier,
)
} else {
PreferenceText(
title = stringResource(R.string.screen_dm_details_block_user),
icon = Icons.Outlined.Block,
tintColor = MaterialTheme.colorScheme.error,
onClick = { if (!isLoading) eventSink(RoomMemberDetailsEvents.BlockUser(needsConfirmation = true)) },
loadingCurrentValue = isLoading,
modifier = modifier,
)
}
}
@Composable @Composable
internal fun BlockUserDialogs(state: RoomMemberDetailsState) { internal fun BlockUserDialogs(state: RoomMemberDetailsState) {
when (state.displayConfirmationDialog) { when (state.displayConfirmationDialog) {

View file

@ -19,5 +19,6 @@ package io.element.android.features.roomdetails.impl.members.details
sealed interface RoomMemberDetailsEvents { sealed interface RoomMemberDetailsEvents {
data class BlockUser(val needsConfirmation: Boolean = false) : RoomMemberDetailsEvents data class BlockUser(val needsConfirmation: Boolean = false) : RoomMemberDetailsEvents
data class UnblockUser(val needsConfirmation: Boolean = false) : RoomMemberDetailsEvents data class UnblockUser(val needsConfirmation: Boolean = false) : RoomMemberDetailsEvents
object ClearBlockUserError : RoomMemberDetailsEvents
object ClearConfirmationDialog : RoomMemberDetailsEvents object ClearConfirmationDialog : RoomMemberDetailsEvents
} }

View file

@ -28,6 +28,7 @@ import androidx.compose.runtime.setValue
import dagger.assisted.Assisted import dagger.assisted.Assisted
import dagger.assisted.AssistedInject import dagger.assisted.AssistedInject
import io.element.android.features.roomdetails.impl.members.details.RoomMemberDetailsState.ConfirmationDialog import io.element.android.features.roomdetails.impl.members.details.RoomMemberDetailsState.ConfirmationDialog
import io.element.android.libraries.architecture.Async
import io.element.android.libraries.architecture.Presenter import io.element.android.libraries.architecture.Presenter
import io.element.android.libraries.core.bool.orFalse import io.element.android.libraries.core.bool.orFalse
import io.element.android.libraries.matrix.api.MatrixClient import io.element.android.libraries.matrix.api.MatrixClient
@ -53,8 +54,13 @@ class RoomMemberDetailsPresenter @AssistedInject constructor(
var confirmationDialog by remember { mutableStateOf<ConfirmationDialog?>(null) } var confirmationDialog by remember { mutableStateOf<ConfirmationDialog?>(null) }
val roomMember by room.getRoomMemberAsState(roomMemberId) val roomMember by room.getRoomMemberAsState(roomMemberId)
// the room member is not really live... // the room member is not really live...
val isBlocked = remember { val isBlocked: MutableState<Async<Boolean>> = remember(roomMember) {
mutableStateOf(roomMember?.isIgnored.orFalse()) val isIgnored = roomMember?.isIgnored
if (isIgnored == null) {
mutableStateOf(Async.Uninitialized)
} else {
mutableStateOf(Async.Success(isIgnored))
}
} }
LaunchedEffect(Unit) { LaunchedEffect(Unit) {
room.updateMembers() room.updateMembers()
@ -79,6 +85,9 @@ class RoomMemberDetailsPresenter @AssistedInject constructor(
} }
} }
RoomMemberDetailsEvents.ClearConfirmationDialog -> confirmationDialog = null RoomMemberDetailsEvents.ClearConfirmationDialog -> confirmationDialog = null
RoomMemberDetailsEvents.ClearBlockUserError -> {
isBlocked.value = Async.Success(isBlocked.value.dataOrNull().orFalse())
}
} }
} }
@ -105,20 +114,31 @@ class RoomMemberDetailsPresenter @AssistedInject constructor(
) )
} }
private fun CoroutineScope.blockUser(userId: UserId, isBlockedState: MutableState<Boolean>) = launch { private fun CoroutineScope.blockUser(userId: UserId, isBlockedState: MutableState<Async<Boolean>>) = launch {
isBlockedState.value = Async.Loading(false)
client.ignoreUser(userId) client.ignoreUser(userId)
.map { .fold(
isBlockedState.value = true onSuccess = {
room.updateMembers() isBlockedState.value = Async.Success(true)
} room.updateMembers()
},
onFailure = {
isBlockedState.value = Async.Failure(it, false)
}
)
} }
private fun CoroutineScope.unblockUser(userId: UserId, isBlockedState: MutableState<Boolean>) = launch { private fun CoroutineScope.unblockUser(userId: UserId, isBlockedState: MutableState<Async<Boolean>>) = launch {
isBlockedState.value = Async.Loading(true)
client.unignoreUser(userId) client.unignoreUser(userId)
.map { .fold(
isBlockedState.value = false onSuccess = {
room.updateMembers() isBlockedState.value = Async.Success(false)
} room.updateMembers()
},
onFailure = {
isBlockedState.value = Async.Failure(it, true)
}
)
} }
} }

View file

@ -16,11 +16,13 @@
package io.element.android.features.roomdetails.impl.members.details package io.element.android.features.roomdetails.impl.members.details
import io.element.android.libraries.architecture.Async
data class RoomMemberDetailsState( data class RoomMemberDetailsState(
val userId: String, val userId: String,
val userName: String?, val userName: String?,
val avatarUrl: String?, val avatarUrl: String?,
val isBlocked: Boolean, val isBlocked: Async<Boolean>,
val displayConfirmationDialog: ConfirmationDialog? = null, val displayConfirmationDialog: ConfirmationDialog? = null,
val isCurrentUser: Boolean, val isCurrentUser: Boolean,
val eventSink: (RoomMemberDetailsEvents) -> Unit val eventSink: (RoomMemberDetailsEvents) -> Unit

View file

@ -17,15 +17,17 @@
package io.element.android.features.roomdetails.impl.members.details package io.element.android.features.roomdetails.impl.members.details
import androidx.compose.ui.tooling.preview.PreviewParameterProvider import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import io.element.android.libraries.architecture.Async
open class RoomMemberDetailsStateProvider : PreviewParameterProvider<RoomMemberDetailsState> { open class RoomMemberDetailsStateProvider : PreviewParameterProvider<RoomMemberDetailsState> {
override val values: Sequence<RoomMemberDetailsState> override val values: Sequence<RoomMemberDetailsState>
get() = sequenceOf( get() = sequenceOf(
aRoomMemberDetailsState(), aRoomMemberDetailsState(),
aRoomMemberDetailsState().copy(userName = null), aRoomMemberDetailsState().copy(userName = null),
aRoomMemberDetailsState().copy(isBlocked = true), aRoomMemberDetailsState().copy(isBlocked = Async.Success(true)),
aRoomMemberDetailsState().copy(displayConfirmationDialog = RoomMemberDetailsState.ConfirmationDialog.Block), aRoomMemberDetailsState().copy(displayConfirmationDialog = RoomMemberDetailsState.ConfirmationDialog.Block),
aRoomMemberDetailsState().copy(displayConfirmationDialog = RoomMemberDetailsState.ConfirmationDialog.Unblock), aRoomMemberDetailsState().copy(displayConfirmationDialog = RoomMemberDetailsState.ConfirmationDialog.Unblock),
aRoomMemberDetailsState().copy(isBlocked = Async.Loading(true)),
// Add other states here // Add other states here
) )
} }
@ -34,7 +36,7 @@ fun aRoomMemberDetailsState() = RoomMemberDetailsState(
userId = "@daniel:domain.com", userId = "@daniel:domain.com",
userName = "Daniel", userName = "Daniel",
avatarUrl = null, avatarUrl = null,
isBlocked = false, isBlocked = Async.Success(false),
isCurrentUser = false, isCurrentUser = false,
eventSink = {}, eventSink = {},
) )

View file

@ -25,7 +25,9 @@ import io.element.android.features.roomdetails.impl.members.aRoomMember
import io.element.android.features.roomdetails.impl.members.details.RoomMemberDetailsEvents import io.element.android.features.roomdetails.impl.members.details.RoomMemberDetailsEvents
import io.element.android.features.roomdetails.impl.members.details.RoomMemberDetailsPresenter import io.element.android.features.roomdetails.impl.members.details.RoomMemberDetailsPresenter
import io.element.android.features.roomdetails.impl.members.details.RoomMemberDetailsState import io.element.android.features.roomdetails.impl.members.details.RoomMemberDetailsState
import io.element.android.libraries.architecture.Async
import io.element.android.libraries.matrix.api.room.MatrixRoomMembersState import io.element.android.libraries.matrix.api.room.MatrixRoomMembersState
import io.element.android.libraries.matrix.test.A_THROWABLE
import io.element.android.libraries.matrix.test.FakeMatrixClient import io.element.android.libraries.matrix.test.FakeMatrixClient
import kotlinx.coroutines.ExperimentalCoroutinesApi import kotlinx.coroutines.ExperimentalCoroutinesApi
import kotlinx.coroutines.test.runTest import kotlinx.coroutines.test.runTest
@ -50,7 +52,7 @@ class RoomMemberDetailsPresenterTests {
Truth.assertThat(initialState.userId).isEqualTo(roomMember.userId.value) Truth.assertThat(initialState.userId).isEqualTo(roomMember.userId.value)
Truth.assertThat(initialState.userName).isEqualTo(roomMember.displayName) Truth.assertThat(initialState.userName).isEqualTo(roomMember.displayName)
Truth.assertThat(initialState.avatarUrl).isEqualTo(roomMember.avatarUrl) Truth.assertThat(initialState.avatarUrl).isEqualTo(roomMember.avatarUrl)
Truth.assertThat(initialState.isBlocked).isEqualTo(roomMember.isIgnored) Truth.assertThat(initialState.isBlocked).isEqualTo(Async.Success(roomMember.isIgnored))
skipItems(1) skipItems(1)
val loadedState = awaitItem() val loadedState = awaitItem()
Truth.assertThat(loadedState.userName).isEqualTo("A custom name") Truth.assertThat(loadedState.userName).isEqualTo("A custom name")
@ -129,10 +131,33 @@ class RoomMemberDetailsPresenterTests {
}.test { }.test {
val initialState = awaitItem() val initialState = awaitItem()
initialState.eventSink(RoomMemberDetailsEvents.BlockUser(needsConfirmation = false)) initialState.eventSink(RoomMemberDetailsEvents.BlockUser(needsConfirmation = false))
Truth.assertThat(awaitItem().isBlocked).isTrue() Truth.assertThat(awaitItem().isBlocked.isLoading()).isTrue()
Truth.assertThat(awaitItem().isBlocked.dataOrNull()).isTrue()
initialState.eventSink(RoomMemberDetailsEvents.UnblockUser(needsConfirmation = false)) initialState.eventSink(RoomMemberDetailsEvents.UnblockUser(needsConfirmation = false))
Truth.assertThat(awaitItem().isBlocked).isFalse() Truth.assertThat(awaitItem().isBlocked.isLoading()).isTrue()
Truth.assertThat(awaitItem().isBlocked.dataOrNull()).isFalse()
}
}
@Test
fun `present - BlockUser with error`() = runTest {
val room = aMatrixRoom()
val roomMember = aRoomMember()
val matrixClient = FakeMatrixClient()
matrixClient.givenIgnoreUserResult(Result.failure(A_THROWABLE))
val presenter = RoomMemberDetailsPresenter(matrixClient, room, roomMember.userId)
moleculeFlow(RecompositionClock.Immediate) {
presenter.present()
}.test {
val initialState = awaitItem()
initialState.eventSink(RoomMemberDetailsEvents.BlockUser(needsConfirmation = false))
Truth.assertThat(awaitItem().isBlocked.isLoading()).isTrue()
val errorState = awaitItem()
Truth.assertThat(errorState.isBlocked.errorOrNull()).isEqualTo(A_THROWABLE)
// Clear error
initialState.eventSink(RoomMemberDetailsEvents.ClearBlockUserError)
Truth.assertThat(awaitItem().isBlocked).isEqualTo(Async.Success(false))
} }
} }

View file

@ -38,6 +38,7 @@ import io.element.android.libraries.matrix.test.room.FakeMatrixRoom
import io.element.android.libraries.matrix.test.room.FakeRoomSummaryDataSource import io.element.android.libraries.matrix.test.room.FakeRoomSummaryDataSource
import io.element.android.libraries.matrix.test.sync.FakeSyncService import io.element.android.libraries.matrix.test.sync.FakeSyncService
import io.element.android.libraries.matrix.test.verification.FakeSessionVerificationService import io.element.android.libraries.matrix.test.verification.FakeSessionVerificationService
import io.element.android.tests.testutils.simulateLongTask
import kotlinx.coroutines.delay import kotlinx.coroutines.delay
class FakeMatrixClient( class FakeMatrixClient(
@ -72,11 +73,11 @@ class FakeMatrixClient(
return findDmResult return findDmResult
} }
override suspend fun ignoreUser(userId: UserId): Result<Unit> { override suspend fun ignoreUser(userId: UserId): Result<Unit> = simulateLongTask {
return ignoreUserResult return ignoreUserResult
} }
override suspend fun unignoreUser(userId: UserId): Result<Unit> { override suspend fun unignoreUser(userId: UserId): Result<Unit> = simulateLongTask {
return unignoreUserResult return unignoreUserResult
} }