WhatsApp Clone — Jetpack Compose — Status
Let’s add a feature for creating a status. A place where users can share there thoughts and other’s can see it.
Let’s divide this into few parts to understand it better,
Tap to create a status
If you go to CreateStatus, there you can see that a basic layout is shown with the current user profile image, a text and a icon. So whenever user clicks on it an option to create a status is given.
Create status
Now whenever user clicks on it a bottom sheet appears on the screen which allows the user to add a status and save it in our DB.
Whenever user clicks on save, a StatusFirestore object is made with all the details required.
And in the FirestoreUtility a set operation happens in the Firestore,
Below you can see how the Firestore collection looks like,
For each status a new document is created, which is auto-generated by the Firestore. And to get the user details we use the createdBy reference store in each status document.
Get status
This is a bit tricky part. Since the user details are not stored in the status collection only the reference it’s a bit hard to get the details for each reference.
So, a workaround is to put a user list listener on top of the status list listener.
So, whenever there is a new status the listener get it from the Firestore and for the user details, the reference is used to get it from the user list which we get it from the user listener. This is helpful when let’s suppose any user changed the details like profile picture then that will also be reflected in the status page also. This reduces the data duplication and make the details more dynamic.
Show Status
For now, the current user status is not shown on the list. Only other user can see the status created by the current user.
After the fetching all the status, in StatusViewModel the getStatus mehod update the UI. We are saving all the current user status into another object and all the other status into a list.
Since we have to show a single user all status into one, we are checking if the status are from the same user then we are storing it in the status list of the same user.
For creating the status object which will be used for UI a new data class is made which is StatusDivision. This way we have a list of users and then in that a list of status created by those users. That we can use to show the UI.
An Indicator composable is made to show a bar below the user image. That bar indicates the number of status created by the user. That is useful if suppose there are 5 status by the same user that 5 bar will be shown to tell the user that more status are also there.
We are using GridView to show 2 status in a row. As of now this is the only functionality implemented for the status page. As more functionality is gets implemented this article will be updated. For now let’s move to the next article which will be WhatsApp Clone — Jetpack Compose — Search.
