States in Buttons from LazyVerticalGrid - android-jetpack-compose

Question

I have a data class which provide information of a CarParking Place. This one:
data class ParkingSpace(
val id: Int,
val parkNumber: Int,
val parkState: String
)
fun getParkingSpace() = (1..4).map {
when (it) {
1 -> {
ParkingSpace(
id = it,
parkNumber = 150,
parkState = "Free $it"
)
}
2 -> {
ParkingSpace(
id = it,
parkNumber = 152,
parkState = "Free $it"
)
}
3 -> {
ParkingSpace(
id = it,
parkNumber = 153,
parkState = "Free $it"
)
}
4 -> {
ParkingSpace(
id = it,
parkNumber = 154,
parkState = "Free $it"
)
}
else -> {
ParkingSpace(
id = it,
parkNumber = 150,
parkState = "Free $it"
)
}
}
}
This information is populated in a LazyVerticalGrid through buttons
My goal is:
When you press the button, the Text content of the Button will change into an user name (now is just fixed data) - like saying this park place is reserved to one User
There are two separated buttons, to cancel Reservation. I'm trying to show a different content in the Text's button like "Free". I created this CancelButton for practicing interacting with the content of the buttons.
This is my main Activity with all composables.
class MainActivity : ComponentActivity() {
#ExperimentalCoilApi
#ExperimentalFoundationApi
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ZebraCarPark_ComposeTheme {
ParkingListLayout()
}
}
}
}
#ExperimentalFoundationApi
#ExperimentalCoilApi
#Composable
fun ParkingListLayout() {
Column() {
Box(
modifier = Modifier
.background(Color.LightGray)
.fillMaxWidth()
.padding(horizontal = 0.dp, vertical = 15.dp)
) {
LazyVerticalGrid(
contentPadding = PaddingValues(2.dp),
cells = GridCells.Fixed(4)
) {
items(getParkingSpace()) { parkSpc ->
ParkingPlace(parkSpc)
}
}
}
Divider(
color = Color.Black,
thickness = 2.dp
)
Box(
modifier = Modifier
.background(Color.Green)
) {
Column(
modifier = Modifier
.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.SpaceEvenly
) {
Button(onClick = {}) {
Text(text = "Cancel Park Place 1")
}
Button(onClick = {}) {
Text(text = "Cancel Park Place 2")
}
}
}
}
}
#Composable
fun ParkingPlace(parkingSpace: ParkingSpace) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
Text(
modifier = Modifier.padding(5.dp),
text = "${parkingSpace.parkNumber}",
)
Button(
onClick = { },
colors = ButtonDefaults.buttonColors(Color.Green)
) {
Text(
text = parkingSpace.parkState,
maxLines = 1,
softWrap = false,
overflow = TextOverflow.Ellipsis,
modifier = Modifier
.padding(5.dp)
)
}
}
}
I was able to make some progress using State Hoisting, so pressing a button will change the content of the button with a new value and all of this stuff. The problem is when the cancel button enter in action. I'm not able to handle correctly the states of the content of the Text's button. I prefer to remove all that code to show you this cleaner.
Project result: