[Jetchat] Addresses eng reviews and README

Change-Id: I17dab1614b7aa7972d5006e8761f2b1488116286

Author: JoseAlcerreca

Jetchat/README.md

@@ -1,9 +1,96 @@
-##Jetchat
+<img src="screenshots/jetchatlogo.png"/>
 
-TODO
+# Jetchat sample
 
-### Known issues
+Jetchat is a sample chat app built with [Jetpack Compose][compose]. This sample showcases:
+
+* UI state management
+* Integration with Architecture Components: Navigation, Fragments, LiveData, ViewModel
+* Back button handling
+* Text Input and focus management
+* Multiple types of animations and transitions
+* Saved state across configuration changes
+* Basic Material Design theming
+* UI tests
+
+<img src="screenshots/jetchat.gif"/>
+
+### Status: 🚧 In progress
+
+Jetchat is still in under development, and some features are not yet implemented.
+
+## Features
+
+### UI State management
+The [ConversationContent](app/src/main/java/com/example/compose/jetchat/conversation/Conversation.kt) composable is the entry point to this screen and takes a [ConversationUiState](app/src/main/java/com/example/compose/jetchat/conversation/ConversationUiState.kt) that defines the data to be displayed. This doesn't mean all the state is served from a single point: composables can have their own state too. For an example, see `scrollState` in [ConversationContent](app/src/main/java/com/example/compose/jetchat/conversation/Conversation.kt) or `currentInputSelector` in [UserInput](app/src/main/java/com/example/compose/jetchat/conversation/UserInput.kt)
+
+### Architecture Components
+The [ProfileFragment](app/src/main/java/com/example/compose/jetchat/profile/ProfileFragment.kt) shows how to pass data between fragments with the [Navigation component](https://developer.android.com/guide/navigation) and observe state from a
+[ViewModel](https://developer.android.com/topic/libraries/architecture/viewmodel), served via [LiveData](https://developer.android.com/topic/libraries/architecture/livedata).
+
+### Back button handling
+When the Emoji selector is shown, pressing back in the app closes it, intercepting any navigation events. This feature shows a way to integrate Compose and APIs from the Android Framework like [OnBackPressedDispatcherOwner](https://developer.android.com/reference/androidx/activity/OnBackPressedDispatcher) via [Ambients](https://developer.android.com/reference/kotlin/androidx/compose/Ambient). The implementation can be found in [ConversationUiState](app/src/main/java/com/example/compose/jetchat/conversation/BackHandler.kt).
+
+### Text Input and focus management
+When the Emoji panel is shown the keyboard must be hidden and vice versa. This is achieved with a combination of the [FocusRequester](https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester) and [FocusObserver](https://developer.android.com/reference/kotlin/androidx/compose/ui/FocusObserverModifier) APIs.
+
+### Multiple types of animations and transitions
+This sample uses animations ranging from simple `AnimatedVisibility` in [FunctionalityNotAvailablePanel](app/src/main/java/com/example/compose/jetchat/conversation/UserInput.kt) to choreographed transitions found in the [FloatingActionButton](https://material.io/develop/android/components/floating-action-button) of the Profile screen and implemented in [AnimatingFabContent](app/src/main/java/com/example/compose/jetchat/conversation/UserInput.kt)
+
+### Saved state across configuration changes
+Some composable state survives activity or process recreation, like `currentInputSelector` in [UserInput](app/src/main/java/com/example/compose/jetchat/conversation/UserInput.kt).
+
+### Basic Material Design theming
+Jetchat follows the Material Design principles and uses the `MaterialTheme` ambient, with custom light and dark themes. In some cases colors it might be necessary to create additional colors, that can be specified as an overlay or combination of two, or as a specific elevation in dark mode. Jetchat uses some convenient extensions on the Material palette and can be used as follows:
+
+[UserInput](app/src/main/java/com/example/compose/jetchat/conversation/UserInput.kt)
+```kotlin
+@Composable
+fun getSelectorExpandedColor(): Color {
+    return if (MaterialTheme.colors.isLight) {
+        MaterialTheme.colors.compositedOnSurface(0.04f)
+    } else {
+        MaterialTheme.colors.elevatedSurface(8.dp)
+    }
+}
+```
+
+### UI tests
+In [androidTest](app/src/androidTest/java/com/example/compose/jetchat) you'll find a suite of UI tests that showcase interesting patterns in Compose:
+
+#### [ConversationTest](app/src/androidTest/java/com/example/compose/jetchat/ConversationTest.kt)
+UI tests for the Conversation screen. Includes a test that checks the behavior of the app when dark mode changes.
+
+#### [NavigationTest](app/src/androidTest/java/com/example/compose/jetchat/NavigationTest.kt)
+Shows how to write tests that assert directly on the [Navigation Controller](https://developer.android.com/reference/androidx/navigation/NavController).
+
+#### [UserInputTest](app/src/androidTest/java/com/example/compose/jetchat/UserInputTest.kt)
+Checks that the user input composable, including extended controls, behave as expected showing and hiding the keyboard.
+
+
+## Known issues
 1. If the emoji selector is shown, clicking on the TextField can sometimes show both input methods.
 Tracked in https://issuetracker.google.com/164859446
 
-2. There are only two profiles, clicking on anybody except "me" will show the same data.
+2. There are only two profiles, clicking on anybody except "me" will show the same data.
+
+
+## License
+```
+Copyright 2020 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+```
+
+[compose]: https://developer.android.com/jetpack/compose
+[coil-accompanist]: https://github.com/chrisbanes/accompanist

Jetchat/app/src/main/java/com/example/compose/jetchat/conversation/ConversationFragment.kt

@@ -23,6 +23,7 @@ import android.view.ViewGroup
 import android.widget.FrameLayout
 import androidx.compose.runtime.Providers
 import androidx.compose.runtime.Recomposer
+import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.setContent
 import androidx.core.os.bundleOf
 import androidx.fragment.app.Fragment
@@ -39,16 +40,8 @@ class ConversationFragment : Fragment() {
         container: ViewGroup?,
         savedInstanceState: Bundle?
     ): View? {
-        return FrameLayout(requireContext()).apply {
-
-            // In order for savedState to work, the same ID needs to be used for all instances.
-            id = R.id.conversation_fragment
-
-            layoutParams = ViewGroup.LayoutParams(
-                ViewGroup.LayoutParams.MATCH_PARENT,
-                ViewGroup.LayoutParams.MATCH_PARENT
-            )
-            setContent(Recomposer.current()) {
+        return ComposeView(context = requireContext()).apply {
+            setContent {
                 Providers(BackPressedDispatcherAmbient provides requireActivity()) {
                     JetchatTheme {
                         ConversationContent(

Jetchat/app/src/main/java/com/example/compose/jetchat/conversation/UserInput.kt

@@ -249,28 +249,6 @@ fun getSelectorExpandedColor(): Color {
     }
 }
 
-@Composable
-fun MapSelector(modifier: Modifier = Modifier) {
-    Surface(modifier = modifier.fillMaxWidth().preferredHeight(128.dp), color = Color.LightGray) {
-        Stack {
-            // TODO
-            Text(modifier = Modifier.gravity(Alignment.Center), text = "I'm here!")
-        }
-    }
-}
-
-@Composable
-fun StickerSelector(modifier: Modifier = Modifier) {
-    // TODO
-    Text("Stickers…", modifier = modifier)
-}
-
-@Composable
-fun StartCall(modifier: Modifier = Modifier) {
-    // TODO
-    Text("Calling…", modifier = modifier)
-}
-
 @Composable
 private fun UserInputSelector(
     onSelectorChange: (InputSelector) -> Unit,

Jetchat/app/src/main/java/com/example/compose/jetchat/profile/ProfileFragment.kt

@@ -24,6 +24,7 @@ import android.view.ViewGroup
 import android.widget.FrameLayout
 import androidx.compose.runtime.Recomposer
 import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.setContent
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
@@ -48,16 +49,8 @@ class ProfileFragment : Fragment() {
         savedInstanceState: Bundle?
     ): View? {
 
-        return FrameLayout(requireContext()).apply {
-
-            // In order for savedState to work, the same ID needs to be used for all instances.
-            id = R.id.profile_fragment
-
-            layoutParams = ViewGroup.LayoutParams(
-                ViewGroup.LayoutParams.MATCH_PARENT,
-                ViewGroup.LayoutParams.MATCH_PARENT
-            )
-            setContent(Recomposer.current()) {
+        return ComposeView(context = requireContext()).apply {
+            setContent {
                 viewModel.userData.observeAsState().value.let { userData: ProfileScreenState? ->
                     JetchatTheme {
                         if (userData == null) {

Jetchat/app/src/main/java/com/example/compose/jetchat/profile/ProfileViewModel.kt

@@ -18,6 +18,7 @@ package com.example.compose.jetchat.profile
 
 import androidx.annotation.DrawableRes
 import androidx.compose.runtime.Immutable
+import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.ViewModel
 import com.example.compose.jetchat.data.colleagueProfile
@@ -31,10 +32,11 @@ class ProfileViewModel : ViewModel() {
         if (newUserId != userId) {
             userId = newUserId ?: meProfile.userId
         }
-        userData.value = if (userId == meProfile.userId) meProfile else colleagueProfile
+        _userData.value = if (userId == meProfile.userId) meProfile else colleagueProfile
     }
 
-    val userData = MutableLiveData<ProfileScreenState>()
+    private val _userData = MutableLiveData<ProfileScreenState>()
+    val userData: LiveData<ProfileScreenState> = _userData
 }
 
 @Immutable