Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Desafio de Dialog de Confirmação para Deslogar

Primeiramente, adicionei um novo campo booleano no state de ListaContatos (LIstaContatosUiState):

data class ListaContatosUiState(
    val contatos: List<Contato> = emptyList(),
    val logado: Boolean = true,
    val exibeSearchBar: Boolean = false,
    val textoBusca: String = "",
    val onTextoBuscaChange: (String) -> Unit = {},
    **val exibeDialog: Boolean = false**
)

Após, alterei a funcionalidade do botão de Deslogar da Home para alterar o "estado de exibição" do Dialog:

 ListaContatosTela(
                state = state,
                onClickAbreDetalhes = { idContato ->
                    navController.navegaParaDetalhes(idContato)
                },
                onClickAbreCadastro = {
                    navController.navegaParaFormularioContato()
                },
                **onClickDesloga = {
                    viewModel.setExibirAlertDialog()
                },**
                onClickSearchIcon = {
                    viewModel.exibeSearchBar()
                })

A função dentro do ViewModel atualiza o estado de exibição do DIalog e poderá ser utilizado em outras partes do codigo, inclusive dentro do Dialog:

fun setExibirAlertDialog() {
        _uiState.update {
            it.copy(
                exibeDialog = !it.exibeDialog
            )
        }
    }

Agora que o botão Desloga não desloga direto, o que resta fazer é apenas controlar a exibição do componente de Dialog dentro do HomeNavGraph, cujo qual terá um botão de confirmação e outro de dismiss:

            if (state.exibeDialog) {
                AlertDialog(
                    onDismissRequest = { viewModel.setExibirAlertDialog() },
                    title = { Text(text = stringResource(id = R.string.atencao_deslogar)) },
                    buttons = {
                        Row(
                            modifier = Modifier.padding(4.dp),
                            verticalAlignment = Alignment.CenterVertically
                        ) {
                            TextButton(onClick = {
                                scope.launch {
                                    context.dataStore.edit { preferences ->
                                        preferences[LOGADO] = false
                                    }
                                }
                            }) {
                                Text(text = stringResource(id = R.string.deslogar))
                            }

                            TextButton(onClick = {
                                viewModel.setExibirAlertDialog()
                            }) {
                                Text(text = stringResource(id = R.string.cancelar))
                            }
                        }
                    }
                )
            }

O Botão de Confirmação possui o mesmo comportamente de setar para "False" o preferencesKey "logado" assim, navegando para a tela de Login quando recompor a tela. O onDismissRequest e Botão de Cancelar possuem o mesmo comportamente que seria não exibir mais o Dialog, permitindo correção do "click acidental". FInalizando, inclui uma String Resource no arquivo strings.xml para o titulo do Dialog:

<string name="atencao_deslogar">Deseja realmente deslogar?</string>

Resultado:

Captura de Tela Home do Desafio

2 respostas
solução!

Oi Kurt, tudo bem?

Incrível o seu resultado! Você fez tudo corretamente até agora. Está sendo exibido corretamente quando o estado "exibeDialog" é verdadeiro e os botões estão realizando as ações esperadas. Parabéns!

Muito obrigada por compartilhar com a gente.

Um abraço e bons estudos.

Meus parabéns pela resolução Kurt!