refactor: improvements for the FDC quickstart (#1679)

* refactor: remove actor biography

* refactor: update rating to be out of 10, and limit chars

* refactor: show movie name in the review card

* refactor: handle movie clicks from profile screen

* add movie clicks to author details and profile

Author: thatfiredev

dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/MainActivity.kt

@@ -109,9 +109,25 @@ class MainActivity : ComponentActivity() {
                                 }
                             )
                         }
-                        composable<ActorDetailRoute>() { ActorDetailScreen() }
+                        composable<ActorDetailRoute>() {
+                            ActorDetailScreen(
+                                onMovieClicked = { movieId ->
+                                    navController.navigate(
+                                        MovieDetailRoute(movieId),
+                                        { launchSingleTop = true }
+                                    )
+                                }
+                            )
+                        }
                         searchScreen()
-                        composable<ProfileRoute> { ProfileScreen() }
+                        composable<ProfileRoute> { ProfileScreen(
+                            onMovieClicked = { movieId ->
+                                navController.navigate(
+                                    MovieDetailRoute(movieId),
+                                    { launchSingleTop = true }
+                                )
+                            }
+                        ) }
                     }
                 }
             }

dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/feature/actordetail/ActorDetailScreen.kt

@@ -1,5 +1,6 @@
 package com.google.firebase.example.dataconnect.feature.actordetail
 
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -9,14 +10,17 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -36,14 +40,13 @@ data class ActorDetailRoute(val actorId: String)
 
 @Composable
 fun ActorDetailScreen(
-    actorDetailViewModel: ActorDetailViewModel = viewModel()
+    actorDetailViewModel: ActorDetailViewModel = viewModel(),
+    onMovieClicked: (actorId: String) -> Unit
 ) {
     val uiState by actorDetailViewModel.uiState.collectAsState()
     ActorDetailScreen(
         uiState = uiState,
-        onMovieClicked = {
-            // TODO
-        }
+        onMovieClicked = onMovieClicked
     )
 }
 
@@ -92,38 +95,29 @@ fun ActorDetailScreen(
 
 @Composable
 fun ActorInformation(
-    modifier: Modifier = Modifier,
     actor: GetActorByIdQuery.Data.Actor?
 ) {
     if (actor == null) {
         ErrorCard(stringResource(R.string.error_actor_not_found))
     } else {
-        Column(
-            modifier = modifier
-                .padding(16.dp)
+        Row(
+            modifier = Modifier.padding(horizontal = 16.dp),
+            verticalAlignment = Alignment.CenterVertically
         ) {
+            AsyncImage(
+                model = actor.imageUrl,
+                contentDescription = null,
+                contentScale = ContentScale.Crop,
+                modifier = Modifier
+                    .width(120.dp)
+                    .padding(vertical = 8.dp)
+                    .clip(CircleShape)
+            )
+            Spacer(modifier = Modifier.width(16.dp))
             Text(
                 text = actor.name,
                 style = MaterialTheme.typography.headlineLarge
             )
-            Row {
-                AsyncImage(
-                    model = actor.imageUrl,
-                    contentDescription = null,
-                    contentScale = ContentScale.Crop,
-                    modifier = Modifier
-                        .width(150.dp)
-                        .aspectRatio(9f / 16f)
-                        .padding(vertical = 8.dp)
-                )
-                // TODO(thatfiredev): Remove biography
-                Text(
-                    text = stringResource(R.string.biography_not_available),
-                    modifier = Modifier
-                        .padding(horizontal = 16.dp)
-                        .fillMaxWidth()
-                )
-            }
         }
     }
 }

dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/feature/moviedetail/MovieDetailViewModel.kt

@@ -45,7 +45,6 @@ class MovieDetailViewModel(
                 _uiState.value = if (user == null) {
                     MovieDetailUIState.Success(movie, isUserSignedIn = false)
                 } else {
-
                     val isFavorite = moviesConnector.getIfFavoritedMovie.execute(
                         movieId = UUID.fromString(movieId)
                     ).data.favorite_movie != null
@@ -92,7 +91,6 @@ class MovieDetailViewModel(
                     rating = rating.roundToInt(),
                     reviewText = text
                 )
-                // TODO(thatfiredev): should we have a way of only refetching the reviews?
                 // Re-run the query to fetch movie
                 fetchMovie()
             } catch (e: Exception) {

dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/feature/moviedetail/UserReviews.kt

@@ -20,6 +20,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import com.google.firebase.dataconnect.movies.GetMovieByIdQuery
 import com.google.firebase.example.dataconnect.R
@@ -43,18 +44,25 @@ fun UserReviews(
             .padding(16.dp),
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        var rating by remember { mutableFloatStateOf(3f) }
+        var rating by remember { mutableFloatStateOf(5f) }
         Text("Rating: ${rating}")
         Slider(
             value = rating,
             onValueChange = { rating = Math.round(it).toFloat() },
-            steps = 5,
-            valueRange = 1f..5f
+            steps = 10,
+            valueRange = 1f..10f
         )
         TextField(
             value = reviewText,
-            onValueChange = { reviewText = it },
+            onValueChange = { if (it.length <= 280) reviewText = it },
             label = { Text(stringResource(R.string.hint_write_review)) },
+            supportingText = {
+                Text(
+                    "${reviewText.length} / 280",
+                    modifier = Modifier.fillMaxWidth(),
+                    textAlign = TextAlign.End
+                )
+            },
             modifier = Modifier.fillMaxWidth()
         )
 
@@ -78,7 +86,7 @@ fun UserReviews(
                 userName = it.user.username,
                 date = it.reviewDate,
                 rating = it.rating?.toDouble() ?: 0.0,
-                text = it.reviewText ?: ""
+                text = it.reviewText ?: "",
             )
         }
     }

dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/feature/profile/ProfileScreen.kt

@@ -36,7 +36,8 @@ object ProfileRoute
 
 @Composable
 fun ProfileScreen(
-    profileViewModel: ProfileViewModel = viewModel()
+    profileViewModel: ProfileViewModel = viewModel(),
+    onMovieClicked: (String) -> Unit,
 ) {
     val uiState by profileViewModel.uiState.collectAsState()
     when (uiState) {
@@ -61,6 +62,7 @@ fun ProfileScreen(
                 ui.username ?: "User",
                 ui.reviews.orEmpty(),
                 ui.favoriteMovies.orEmpty(),
+                onMovieClicked = onMovieClicked,
                 onSignOut = {
                     profileViewModel.signOut()
                 }
@@ -76,6 +78,7 @@ fun ProfileScreen(
     name: String,
     reviews: List<GetCurrentUserQuery.Data.User.ReviewsItem>,
     favoriteMovies: List<GetCurrentUserQuery.Data.User.FavoriteMoviesItem>,
+    onMovieClicked: (String) -> Unit,
     onSignOut: () -> Unit
 ) {
     val scrollState = rememberScrollState()
@@ -104,9 +107,7 @@ fun ProfileScreen(
             movies = favoriteMovies.mapNotNull {
                 Movie(it.movie.id.toString(), it.movie.imageUrl, it.movie.title, it.movie.rating?.toFloat())
             },
-            onMovieClicked = {
-                // TODO
-            }
+            onMovieClicked = onMovieClicked
         )
         Spacer(modifier = Modifier.height(16.dp))
 
@@ -140,7 +141,8 @@ fun ReviewsList(
                 userName = userName,
                 date = review.reviewDate,
                 rating = review.rating?.toDouble() ?: 0.0,
-                text = review.reviewText ?: ""
+                text = review.reviewText ?: "",
+                movieName = review.movie.title
             )
         }
     }

dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/ui/components/ReviewCard.kt

@@ -29,7 +29,8 @@ fun ReviewCard(
     userName: String,
     date: Date,
     rating: Double,
-    text: String
+    text: String,
+    movieName: String? = null
 ) {
     Card(
         modifier = Modifier
@@ -42,9 +43,13 @@ fun ReviewCard(
                 .padding(16.dp)
         ) {
             Text(
-                text = userName,
+                text = if (movieName != null) {
+                    userName + " on " + movieName
+                } else {
+                    userName
+                },
                 fontWeight = FontWeight.Bold,
-                style = MaterialTheme.typography.titleMedium
+                style = MaterialTheme.typography.titleLarge
             )
             Row(
                 modifier = Modifier.padding(bottom = 8.dp)
@@ -53,11 +58,18 @@ fun ReviewCard(
                     text = SimpleDateFormat(
                         "dd MMM, yyyy",
                         Locale.getDefault()
-                    ).format(date)
+                    ).format(date),
+                    style = MaterialTheme.typography.titleMedium
                 )
                 Spacer(modifier = Modifier.width(8.dp))
-                Text(text = "Rating: ")
-                Text(text = "$rating")
+                Text(
+                    text = "Rating: ",
+                    style = MaterialTheme.typography.titleMedium
+                )
+                Text(
+                    text = "$rating",
+                    style = MaterialTheme.typography.titleMedium
+                )
             }
             Text(
                 text = text,

dataconnect/app/src/main/res/values/strings.xml

@@ -32,7 +32,6 @@
 
     <!-- Actor Detail Screen -->
     <string name="error_actor_not_found">Couldn\'t find actor in the database</string>
-    <string name="biography_not_available">Biography not available</string>
     <string name="title_main_roles">Main Roles</string>
     <string name="title_supporting_roles">Supporting Roles</string>