I'm trying to make a dictionary app. There is a dictionary room database where users create their own dictionaries. I show the dictionaries added by the users on the screen and I want the users to delete these dictionaries whenever they want. But I've been working on this for a while and there's a problem.I made the alert dialog myself, but when the user click yes, that is, when user wants to delete it, it does not delete the dictionary, but when the alert dialog is opened for the second time, it deletes it. I couldnt find what is issue.

Hear is my code

@Composable
fun CreateYourOwnDictionaryScreen(
    navController: NavController,
    viewModel: CreateYourOwnDictionaryViewModel = hiltViewModel()
) {

    val scaffoldState = rememberScaffoldState()
    val state = viewModel.state.value

    val scope = rememberCoroutineScope()

    val context = LocalContext.current
    val showAlertDialog = remember { mutableStateOf(false) }
    var deleteDicState = remember { mutableStateOf(false)}

    if (showAlertDialog.value) {

        AlertDialog(
            onDismissRequest = {

                showAlertDialog.value = false
            },
            title = {
                Text(text = "Dialog Title")
            },
            text = {
                Text("Here is a text ")
            },
            confirmButton = {
                Button(
                    onClick = {
                        showAlertDialog.value = false
                        deleteDicState.value = true
                    }) {
                    Text("This is the Confirm Button")
                }
            },
            dismissButton = {
                Button(

                    onClick = {
                        showAlertDialog.value = false
                    }) {
                    Text("This is the dismiss Button")
                }
            }
        )
    }

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                backgroundColor = bar,
                title = {

                    androidx.compose.material3.Text(
                        text = "your dictionaries",
                        modifier = Modifier.fillMaxWidth(),
                        color = Color.White,
                        fontSize = 22.sp
                    )

                },
                navigationIcon = {
                    IconButton(onClick = {
                        navController.navigate(Screen.MainScreen.route)
                    }) {
                        Icon(
                            imageVector = Icons.Filled.ArrowBack,
                            contentDescription = "Go Back"
                        )
                    }
                }

            )

        },

        floatingActionButtonPosition = FabPosition.Center,
        floatingActionButton = {
            FloatingActionButton(
                onClick = { navController.navigate(Screen.CreateDicScreen.route) },
                backgroundColor = bar,

            ) {
                Icon(Icons.Filled.Add, "fab")
            }
        }
    ) {

        Box(modifier = Modifier.background(MaterialTheme.colors.background)) {



            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp)
            ) {


                LazyColumn(
                    modifier = Modifier.fillMaxSize()
                ) {
                    items(state.dictionaries) { dictionary ->

                        CreateYourOwnDictionaryItem(
                            dictionary = dictionary,
                            modifier = Modifier
                                .fillMaxWidth()
                                .clickable {
                                    navController.navigate(Screen.MyWordsScreen.passDicId(dictionary.uid))
                                },

                            onAddClick = {
                                  navController.navigate(Screen.MakeYourDictionaryScreen.passDicId(dictionary.uid))
                            },

                            onDeleteClick = {


                                showAlertDialog.value = true
                                if(deleteDicState.value){
                 
                                    println("dictionary state:" deleteDicState.value)
                                    viewModel.onEvent(
                                        CreateYourOwnDictionaryEvents.DeleteDictionary(dictionary)
                                    )
                                    scope.launch {
                                        val result = scaffoldState.snackbarHostState.showSnackbar(
                                            message = "dictionary is deleted",
                                            /*actionLabel = "Undo",*/
                                            duration = SnackbarDuration.Short
                                        )
                                    }
                                }



                            },
                            onEditClick = {
                                println("on edit click")

                            }

                        )
                    }
                }

            }
        }

    }

}

I have two variables one is showAlertDialog this alert dialog will be true if the user wants to delete the dictionary and the alert dialog will work. my second variable is deleteDicState , this variable will be true if the user really wants to delete, that is, if user hasn't canceled the operation and the dictionary needs to be deleted.

Additional

Additionally, is there a best practice to write the alert dialog in kotlin compose or easy way to best performance or clean code ? because as the application grew, my codes started to increase and performance problems came with it.

CodePudding user response：

Please, move your alert dialog to the Scaffold's content block for more proper usage. And you don't need to hold delete state as mutable state. If user clicks confirm button on your alert dialog you can send deleteEvent to your viewModel.