Use compose state instead of live data

Author: jeffdgr8

src/app/src/main/java/com/couchbase/learningpath/ui/MainActivity.kt

@@ -6,7 +6,6 @@ import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.material.*
 import androidx.compose.runtime.*
-import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.res.stringResource
@@ -80,19 +79,13 @@ class MainActivity : ComponentActivity() {
                             drawerState = drawerState,
                             gesturesEnabled = drawerState.isOpen,
                             drawerContent = {
-                                val givenName by profileViewModel.givenName.observeAsState()
-                                val surname by profileViewModel.surname.observeAsState()
-                                val emailAddress by profileViewModel.emailAddress.observeAsState()
-                                val team by profileViewModel.team.observeAsState()
-                                val profilePic by profileViewModel.profilePic.observeAsState()
-
                                 Drawer(
                                     modifier = Modifier.semantics { contentDescription = "{$menuResource}1" },
-                                    firstName = givenName,
-                                    lastName =  surname,
-                                    email = emailAddress,
-                                    team = team,
-                                    profilePicture = profilePic,
+                                    firstName = profileViewModel.givenName,
+                                    lastName =  profileViewModel.surname,
+                                    email = profileViewModel.emailAddress,
+                                    team = profileViewModel.team,
+                                    profilePicture = profileViewModel.profilePic,
                                     onClicked = { route ->
                                         scope.launch {
                                             drawerState.close()

src/app/src/main/java/com/couchbase/learningpath/ui/profile/UserProfileView.kt

@@ -18,7 +18,6 @@ import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Menu
 import androidx.compose.runtime.*
-import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -45,14 +44,6 @@ fun UserProfileView(
     scaffoldState: ScaffoldState = rememberScaffoldState(),
     viewModel: UserProfileViewModel
 ) {
-    val givenName by viewModel.givenName.observeAsState("")
-    val surname by viewModel.surname.observeAsState("")
-    val jobTitle by viewModel.jobTitle.observeAsState("")
-    val profilePic by viewModel.profilePic.observeAsState()
-    val emailAddress by viewModel.emailAddress.observeAsState("")
-    val team by viewModel.team.observeAsState("")
-    val toastMessage by viewModel.toastMessage.observeAsState()
-
     LearningPathTheme {
         // A surface container using the 'background' color from the theme
         Scaffold(scaffoldState = scaffoldState,
@@ -65,20 +56,19 @@ fun UserProfileView(
             Surface(
                 color = MaterialTheme.colors.background,
                 modifier = Modifier.fillMaxSize()
-            )
-            {
+            ) {
                 UserProfileFormWidget(
-                    givenName,
+                    viewModel.givenName,
                     viewModel.onGivenNameChanged,
-                    surname,
+                    viewModel.surname,
                     viewModel.onSurnameChanged,
-                    jobTitle,
+                    viewModel.jobTitle,
                     viewModel.onJobTitleChanged,
-                    profilePic,
+                    viewModel.profilePic,
                     viewModel.onProfilePicChanged,
-                    emailAddress,
-                    team,
-                    toastMessage,
+                    viewModel.emailAddress,
+                    viewModel.team,
+                    viewModel.toastMessage,
                     viewModel.onSave,
                     viewModel.clearToastMessage
                 )

src/app/src/main/java/com/couchbase/learningpath/ui/profile/UserProfileViewModel.kt

@@ -4,10 +4,10 @@ import android.app.Application
 import android.graphics.Bitmap
 import android.graphics.BitmapFactory
 import android.graphics.drawable.Drawable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
 import androidx.core.graphics.drawable.toBitmap
-import androidx.lifecycle.LiveData
-import androidx.lifecycle.MutableLiveData
-import androidx.lifecycle.Observer
 import androidx.lifecycle.AndroidViewModel
 import androidx.lifecycle.viewModelScope
 import com.couchbase.lite.Blob
@@ -28,112 +28,105 @@ class UserProfileViewModel(
 ) : AndroidViewModel(application) {
 
     //track our fields in our composable
-    private val _givenName = MutableLiveData("")
-    val givenName: LiveData<String> = _givenName
+    var givenName by mutableStateOf("")
+        private set
 
-    private val _surname = MutableLiveData("")
-    val surname: LiveData<String> = _surname
+    var surname by mutableStateOf("")
+        private set
 
-    private val _jobTitle = MutableLiveData("")
-    val jobTitle: LiveData<String> = _jobTitle
+    var jobTitle by mutableStateOf("")
+        private set
 
-    private val _emailAddress = MutableLiveData("")
-    val emailAddress: LiveData<String> = _emailAddress
+    var emailAddress by mutableStateOf("")
+        private set
 
-    private val _team = MutableLiveData("")
-    val team: LiveData<String> = _team
+    var team by mutableStateOf("")
+        private set
 
-    private val _toastMessage = MutableLiveData("")
-    val toastMessage: LiveData<String> = _toastMessage
+    var toastMessage by mutableStateOf("")
+        private set
 
-    private val _profilePic = MutableLiveData<Bitmap?>(null)
-    val profilePic: LiveData<Bitmap?> = _profilePic
+    var profilePic by mutableStateOf(defaultProfilePic())
+        private set
+
+    private fun defaultProfilePic(): Bitmap {
+        return BitmapFactory.decodeResource(getApplication<Application>().resources, R.drawable.profile_placeholder)
+    }
 
     private val userObserver: (User?) -> Unit = { currentUser ->
         currentUser?.let { authenticatedUser ->
-            _emailAddress.value = authenticatedUser.username
-            _team.value = authenticatedUser.team
+            emailAddress = authenticatedUser.username
+            team = authenticatedUser.team
             //when getting information from the database need to make sure
             //to use Dispatchers.IO so that Disk I/O work isn't done on the main thread
             viewModelScope.launch(Dispatchers.IO) {
                 val userProfile = repository.get(authenticatedUser.username)
                 //make sure when we update the UI we update on the Main Thread
                 withContext(Dispatchers.Main) {
-                    userProfile["givenName"]?.let {
-                        _givenName.value = userProfile["givenName"] as String
-                    }
-                    userProfile["surname"]?.let {
-                        _surname.value = userProfile["surname"] as String
-                    }
-                    userProfile["jobTitle"]?.let {
-                        _jobTitle.value = userProfile["jobTitle"] as String
-                    }
-                    userProfile["imageData"]?.let {
-                        val blob = userProfile["imageData"] as Blob
+                    givenName = userProfile["givenName"] as? String ?: ""
+                    surname = userProfile["surname"] as? String ?: ""
+                    jobTitle = userProfile["jobTitle"] as? String ?: ""
+                    profilePic = (userProfile["imageData"] as? Blob)?.let { blob ->
                         val d = Drawable.createFromStream(blob.contentStream, "res")
-                        _profilePic.value = d?.toBitmap()
-                    }
+                        d?.toBitmap()
+                    } ?: defaultProfilePic()
                 }
             }
         }
     }
 
     init {
         authService.currentUser.observeForever(userObserver)
-        _profilePic.value = BitmapFactory.decodeResource(getApplication<Application>().resources, R.drawable.profile_placeholder)
     }
 
     override fun onCleared() {
         authService.currentUser.removeObserver(userObserver)
     }
 
     val onGivenNameChanged: (String) -> Unit = { newValue ->
-        _givenName.value = newValue
+        givenName = newValue
     }
 
     val onSurnameChanged: (String) -> Unit = { newValue ->
-        _surname.value = newValue
+        surname = newValue
     }
 
     val onJobTitleChanged: (String) -> Unit = { newValue ->
-        _jobTitle.value = newValue
+        jobTitle = newValue
     }
 
     val onProfilePicChanged: (Bitmap) -> Unit = { newValue ->
         viewModelScope.launch(Dispatchers.Main) {
-            _profilePic.value = newValue
+            profilePic = newValue
         }
     }
 
     val clearToastMessage: () -> Unit = {
-        _toastMessage.value = ""
+        toastMessage = ""
     }
 
     val onSave: () -> Unit = {
         //when saving information to the database need to make sure
         //to use Dispatchers.IO so that Disk I/O work isn't done on the main thread
         viewModelScope.launch(Dispatchers.IO) {
             val profile = HashMap<String, Any>()
-            profile["givenName"] = givenName.value as Any
-            profile["surname"] = surname.value as Any
-            profile["jobTitle"] = jobTitle.value as Any
-            profile["email"] = emailAddress.value as Any
-            profile["team"] = team.value as Any
-            profile["documentType"] = "user" as Any
-            profilePic.value?.let {
-                val outputStream = ByteArrayOutputStream()
-                it.compress(Bitmap.CompressFormat.JPEG, 100, outputStream)
-                profile["imageData"] =
-                    Blob("image/jpeg", outputStream.toByteArray()) as Any
-            }
+            profile["givenName"] = givenName
+            profile["surname"] = surname
+            profile["jobTitle"] = jobTitle
+            profile["email"] = emailAddress
+            profile["team"] = team
+            profile["documentType"] = "user"
+            val outputStream = ByteArrayOutputStream()
+            profilePic.compress(Bitmap.CompressFormat.JPEG, 100, outputStream)
+            profile["imageData"] = Blob("image/jpeg", outputStream.toByteArray())
             val didSave = repository.save(profile)
 
             //make sure when we update the UI we update on the Main Thread
             withContext(Dispatchers.Main) {
-                if (didSave) {
-                    _toastMessage.value = "Successfully updated profile"
+                toastMessage = if (didSave) {
+                    "Successfully updated profile"
                 } else {
-                    _toastMessage.value = "Error saving, try again later."
+                    "Error saving, try again later."
                 }
             }
         }