Jetpack Compose load Firestore Data with Flow

November 2, 2021

Create a class to handle data state (loading, error, success), as I believe it is impossible to handle exception within composable.

enum class Status {
    SUCCESS,
    ERROR,
    LOADING
}

// https://github.com/android/architecture-components-samples/blob/master/GithubBrowserSample/app/src/main/java/com/android/example/github/vo/Resource.kt
data class Resource<out T>(val status: Status, val data: T?, val message: String?) {
    companion object {
        fun <T> success(data: T?): Resource<T> {
            return Resource(Status.SUCCESS, data, null)
        }

        fun <T> error(msg: String, data: T?): Resource<T> {
            return Resource(Status.ERROR, data, msg)
        }

        fun <T> loading(data: T?): Resource<T> {
            return Resource(Status.LOADING, data, null)
        }
    }
}

Data Class

data class Post(var id: String, var created: Timestamp? = null, var title: String? = null) {
  companion object {
    fun toObject(doc: DocumentSnapshot): Post? {
        val item = doc.toObject<Post>()
        item?.id = doc.id
        return item
    }
  }
}

ViewModel to load data from Firestore using Flow

class MainViewModel : ViewModel() {
    // consider using Dependency injection with Hilt
    private val auth: FirebaseAuth = Firebase.auth
    private val db = Firebase.firestore

    fun fetchPosts() = callbackFlow {
        val collection = db.collection("posts")

        val snapshotListener = collection.orderBy("created", Query.Direction.DESCENDING).addSnapshotListener { value, error ->

            val response = if (error == null && value != null) {
                val data = value.documents.map { doc ->
                    Post.toObject(doc)
                }
                Resource.success(data)
            } else {
                Timber.e(error)
                Resource.error(error.toString(), null)
           }

            offer(response)
        }

        awaitClose() {
            snapshotListener.remove()
        }
    }
}

Composable

@Composable
fun JourneyApp(viewModel: MainViewModel = viewModel()) {
    val postsResource by viewModel.fetchPosts().collectAsState(initial = Resource.loading(null))
    val posts = postsResource.data ?: emptyList()

    if (postsResource.status == Status.ERROR) {
        Text("Error: ${postsResource.message}")
    }
    else if (postsResource.status == Status.LOADING) {
        Text("Loading ....")
    }
    else {
        LazyColumn {
            items(posts) { post ->
                Text(post.title)
            }
        }
    }
}

❤️ Is this article helpful?

Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now

By Desmond Lua

A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.

Tags:

Related entries:

Jetpack Compose Paging Sample

Jetpack Compose Check Permission (Accompanist)

Jetpack Compose Navigation

Jetpack Compose Show Snackbar

Jetpack Compose Load Image With Coil

Android Jetpack Compose BottomNavigationBar With Compose Navigation

Android Jetpack Compose BottomNavigationBar

Guide to Start Learning Jetpack Compose