DEV Community

LiHan
LiHan

Posted on • Edited on

[Android] UserListApp - UI -Part5

Create UserViewModel

Here just one Event -> getDataBySize()
Inject UserRepository We created at part4

@HiltViewModel
class UserViewModel @Inject constructor(
    private val userRepository: UserRepository
) : ViewModel(){

    var state by mutableStateOf(
        listOf<User>()
    )
    private val _uiEvent = Channel<UiEvent>()
    var uiEvent = _uiEvent.receiveAsFlow()
    init {
        getDataBySize(20)
    }
    fun getDataBySize(size : Int = 20){
        viewModelScope.launch {
            userRepository.getUserBySize(size = size.toString()).collectLatest {
                when(it){
                    is Resource.Loading->{}
                    is Resource.Error->{
                        Log.d("TAG", "getDataBySize: ${it.message}")
                        _uiEvent.send(UiEvent.APIError)
                    }
                    is Resource.Success->{
                        it.data?.let {
                            state = it
                            Log.d("TAG", "getDataBySize: ${it}")
                        }
                    }
                }
            }
        }
    }



}
Enter fullscreen mode Exit fullscreen mode

If API Failed , We can use UiEvent send Event to Screen

sealed class UiEvent{
    object APIError : UiEvent()
    object Success : UiEvent()
}

Enter fullscreen mode Exit fullscreen mode

UI - UserScreen LazyColumn

@Composable
fun UserScreen(
    users : List<User>
) {
    LazyColumn{
        items(users){user ->
            UserItem(user)
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

UI - UserItem

@Composable
fun UserItem(
    user: User,
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier
    ) {
        AsyncImage(
            modifier = Modifier
                .size(80.dp),
            model = user.avatar,
            contentDescription = null,
        )
        Column(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()

        ) {
            Row{
                Icon(
                    imageVector = ImageVector.vectorResource(
                        id = when(user.gender){
                                "Male" -> R.drawable.baseline_man_24
                                "Female" -> R.drawable.baseline_woman_24
                                else->{
                                    R.drawable.baseline_question_mark_24
                                }
                            }
                    ),
                    tint = Color.Unspecified,
                    contentDescription = "gender mark"
                )
                Text(text = user.username)
            }
            Text(text = user.dateOfBirth)
            Text(text = user.email)
            Text(text = user.phoneNumber)


        }
    }

}
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (1)

Collapse
 
bridgesgap profile image
Tithi

This is really good!

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

AWS GenAI Live!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️