Jetpack compose paginated list UI updation on item Click

Question

How to make UI changes in a paginated list with jetpack compose.

Use case

I have a paginated list which has data name(string) and like(boolean). If i click on the particular item in the list, i need to place a like button in the UI. But the image is not updated in UI based on condition.

Snippet

userList -> LazyPagingItems<AllDoctorsResponse.Data.Doctor>

//viewModel

userList.itemSnapshotList.find { it?.id == user.id }?.liked = true

// Composable

items(userList.itemCount){ index ->
 userList[index]?.let {
       if (it.liked == true) {
           UserCardWithLike(it, onClick = { userId ->
             onUserCardClicked(userId)
             }, onLikeChange = { isLiked, user ->
             onLikeChange(isLiked, user)
          })
       } else {
           UserCard(it, onClick = { userId ->
             onUserCardClicked(userId)
             }, onLikeChange = { isLiked, user ->
             onLikeChange(isLiked, user)
          })
          }
      }
    }

score 0 · Answer 1 · answered Jul 19 '22 at 04:29

I don't use paging3 anymore, so I didn't test this code, but I think it will work:

items(userList.itemCount){ index ->
    userList[index]?.let {
        var liked by rememberSaveable { mutableStateOf(it.liked) }
        if (liked == true) {
            UserCardWithLike(
                it,
                onClick = { userId -> onUserCardClicked(userId) },
                onLikeChange = { isLiked, user -> liked = false }
            )
        } else {
            UserCard(
                it,
                onClick = { userId -> onUserCardClicked(userId) },
                onLikeChange = { isLiked, user -> liked = true }
            )
        }
    }
}

If you want something like notifyItemChange, it's not possible in Paging3. In that case, I suggest trying to rewrite the paging library, which is surprisingly easy. https://gist.github.com/FishHawk/6e4706646401bea20242bdfad5d86a9e

Jetpack compose paginated list UI updation on item Click

1 Answers1