Creating the conversations list

In this section, we are going to create all the pieces we need to show the conversations list. We will start with the UI data model, which will represent the information that the app is going to show in the list, the Conversation composable, which will draw every item of the list, and finally the list composable itself.

Modeling the conversation

First, we are going to model what is going to be the entity we will be using through our conversations list components: the Conversation model.

As part of the conversation model, we want to show the avatar of the other participant (we are just doing one-to-one conversations), their name, the first line of the last message, the time the message was received, and a number indicating how many unread messages there are.

Taking that information into account, we will start creating a data class to hold the data we’ll need:

data class Conversation(
    val id: String,
 ...