refactor: make error and loading reusable components

thatfiredev · thatfiredev · commit b15d0ab70efd · 2024-09-20T03:19:05.000+01:00
diff --git a/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/feature/actordetail/ActorDetailScreen.kt b/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/feature/actordetail/ActorDetailScreen.kt
@@ -34,7 +34,8 @@ import androidx.lifecycle.viewmodel.compose.viewModel
 import coil.compose.AsyncImage
 import com.google.firebase.dataconnect.movies.GetActorByIdQuery
 import com.google.firebase.example.dataconnect.R
-import com.google.firebase.example.dataconnect.feature.moviedetail.ErrorMessage
+import com.google.firebase.example.dataconnect.ui.components.ErrorCard
+import com.google.firebase.example.dataconnect.ui.components.LoadingScreen
 import com.google.firebase.example.dataconnect.ui.components.Movie
 import com.google.firebase.example.dataconnect.ui.components.MoviesList
 
@@ -48,17 +49,10 @@ fun ActorDetailScreen(
     Scaffold { innerPadding ->
         when (uiState) {
             is ActorDetailUIState.Error -> {
-                ErrorMessage((uiState as ActorDetailUIState.Error).errorMessage)
+                ErrorCard((uiState as ActorDetailUIState.Error).errorMessage)
             }
 
-            ActorDetailUIState.Loading -> {
-                Box(
-                    contentAlignment = Alignment.Center,
-                    modifier = Modifier.fillMaxSize()
-                ) {
-                    CircularProgressIndicator()
-                }
-            }
+            ActorDetailUIState.Loading -> LoadingScreen()
 
             is ActorDetailUIState.Success -> {
                 val ui = uiState as ActorDetailUIState.Success
@@ -88,7 +82,7 @@ fun ActorInformation(
     onFavoriteToggled: (newValue: Boolean) -> Unit
 ) {
     if (actor == null) {
-        ErrorMessage(stringResource(R.string.error_movie_not_found))
+        ErrorCard(stringResource(R.string.error_movie_not_found))
     } else {
         Column(
             modifier = modifier
diff --git a/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/feature/genredetail/GenreDetailScreen.kt b/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/feature/genredetail/GenreDetailScreen.kt
@@ -1,23 +1,21 @@
 package com.google.firebase.example.dataconnect.feature.genredetail
 
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.MaterialTheme
 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.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.google.firebase.example.dataconnect.R
+import com.google.firebase.example.dataconnect.ui.components.ErrorCard
+import com.google.firebase.example.dataconnect.ui.components.LoadingScreen
 import com.google.firebase.example.dataconnect.ui.components.Movie
 import com.google.firebase.example.dataconnect.ui.components.MoviesList
 
@@ -36,29 +34,20 @@ fun GenreDetailScreen(
     uiState: GenreDetailUIState
 ) {
     when (uiState) {
-        GenreDetailUIState.Loading -> {
-            Box(
-                contentAlignment = Alignment.Center,
-                modifier = Modifier.fillMaxSize()
-            ) {
-                CircularProgressIndicator()
-            }
-        }
+        GenreDetailUIState.Loading -> LoadingScreen()
 
-        is GenreDetailUIState.Error -> {
-            Text(uiState.errorMessage)
-        }
+        is GenreDetailUIState.Error -> ErrorCard(uiState.errorMessage)
 
         is GenreDetailUIState.Success -> {
             val scrollState = rememberScrollState()
             Column(
                 modifier = Modifier
-                    .padding(16.dp)
                     .verticalScroll(scrollState)
             ) {
                 Text(
                     text = stringResource(R.string.title_genre_detail, uiState.genreName),
-                    style = MaterialTheme.typography.headlineLarge
+                    style = MaterialTheme.typography.headlineLarge,
+                    modifier = Modifier.padding(8.dp)
                 )
                 MoviesList(
                     listTitle = stringResource(R.string.title_most_popular),
diff --git a/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/feature/moviedetail/MovieDetailScreen.kt b/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/feature/moviedetail/MovieDetailScreen.kt
@@ -47,6 +47,8 @@ import com.google.firebase.dataconnect.movies.GetMovieByIdQuery
 import com.google.firebase.example.dataconnect.R
 import com.google.firebase.example.dataconnect.ui.components.Actor
 import com.google.firebase.example.dataconnect.ui.components.ActorsList
+import com.google.firebase.example.dataconnect.ui.components.ErrorCard
+import com.google.firebase.example.dataconnect.ui.components.LoadingScreen
 import com.google.firebase.example.dataconnect.ui.components.ReviewCard
 
 @Composable
@@ -60,17 +62,10 @@ fun MovieDetailScreen(
     Scaffold { padding ->
         when (uiState) {
             is MovieDetailUIState.Error -> {
-                ErrorMessage((uiState as MovieDetailUIState.Error).errorMessage)
+                ErrorCard((uiState as MovieDetailUIState.Error).errorMessage)
             }
 
-            MovieDetailUIState.Loading -> {
-                Box(
-                    contentAlignment = Alignment.Center,
-                    modifier = Modifier.fillMaxSize()
-                ) {
-                    CircularProgressIndicator()
-                }
-            }
+            MovieDetailUIState.Loading -> LoadingScreen()
 
             is MovieDetailUIState.Success -> {
                 val ui = uiState as MovieDetailUIState.Success
@@ -130,7 +125,7 @@ fun MovieInformation(
     onFavoriteToggled: (newValue: Boolean) -> Unit
 ) {
     if (movie == null) {
-        ErrorMessage(stringResource(R.string.error_movie_not_found))
+        ErrorCard(stringResource(R.string.error_movie_not_found))
     } else {
         Column(
             modifier = modifier
@@ -282,10 +277,3 @@ fun UserReviews(
         }
     }
 }
-
-@Composable
-fun ErrorMessage(
-    message: String
-) {
-    Text(message)
-}
diff --git a/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/feature/movies/MoviesScreen.kt b/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/feature/movies/MoviesScreen.kt
@@ -1,24 +1,20 @@
 package com.google.firebase.example.dataconnect.feature.movies
 
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.CircularProgressIndicator
-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.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.google.firebase.example.dataconnect.R
+import com.google.firebase.example.dataconnect.ui.components.ErrorCard
+import com.google.firebase.example.dataconnect.ui.components.LoadingScreen
 import com.google.firebase.example.dataconnect.ui.components.Movie
 import com.google.firebase.example.dataconnect.ui.components.MoviesList
 
@@ -37,17 +33,8 @@ fun MoviesScreen(
     onMovieClicked: (movie: String) -> Unit
 ) {
     when (uiState) {
-        MoviesUIState.Loading -> {
-            Box(
-                contentAlignment = Alignment.Center,
-                modifier = Modifier.fillMaxSize()
-            ) {
-                CircularProgressIndicator()
-            }
-        }
-        is MoviesUIState.Error -> {
-            Text(uiState.errorMessage)
-        }
+        MoviesUIState.Loading -> LoadingScreen()
+        is MoviesUIState.Error -> ErrorCard(uiState.errorMessage)
         is MoviesUIState.Success -> {
             val scrollState = rememberScrollState()
             Column(
diff --git a/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/feature/profile/ProfileScreen.kt b/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/feature/profile/ProfileScreen.kt
@@ -24,6 +24,8 @@ import com.google.firebase.dataconnect.movies.GetUserByIdQuery
 import com.google.firebase.example.dataconnect.R
 import com.google.firebase.example.dataconnect.ui.components.Actor
 import com.google.firebase.example.dataconnect.ui.components.ActorsList
+import com.google.firebase.example.dataconnect.ui.components.ErrorCard
+import com.google.firebase.example.dataconnect.ui.components.LoadingScreen
 import com.google.firebase.example.dataconnect.ui.components.Movie
 import com.google.firebase.example.dataconnect.ui.components.MoviesList
 import com.google.firebase.example.dataconnect.ui.components.ReviewCard
@@ -35,7 +37,7 @@ fun ProfileScreen(
     val uiState by profileViewModel.uiState.collectAsState()
     when (uiState) {
         is ProfileUIState.Error -> {
-            Text((uiState as ProfileUIState.Error).errorMessage)
+            ErrorCard((uiState as ProfileUIState.Error).errorMessage)
         }
 
         is ProfileUIState.AuthState -> {
@@ -63,14 +65,7 @@ fun ProfileScreen(
             )
         }
 
-        ProfileUIState.Loading -> {
-            Box(
-                contentAlignment = Alignment.Center,
-                modifier = Modifier.fillMaxSize()
-            ) {
-                CircularProgressIndicator()
-            }
-        }
+        ProfileUIState.Loading -> LoadingScreen()
     }
 }
 
diff --git a/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/ui/components/ActorsList.kt b/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/ui/components/ActorsList.kt
@@ -3,6 +3,7 @@ package com.google.firebase.example.dataconnect.ui.components
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -44,6 +45,7 @@ fun ActorsList(
 ) {
     Column(
         modifier = modifier.padding(horizontal = 16.dp)
+            .fillMaxWidth()
     ) {
         Text(
             text = listTitle,
diff --git a/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/ui/components/ErrorCard.kt b/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/ui/components/ErrorCard.kt
@@ -0,0 +1,35 @@
+package com.google.firebase.example.dataconnect.ui.components
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun ErrorCard(
+    errorMessage: String
+) {
+    Card(
+        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.errorContainer),
+        modifier = Modifier.padding(16.dp)
+            .fillMaxWidth()
+    ) {
+        Text(
+            text = errorMessage,
+            modifier = Modifier.padding(16.dp)
+                .fillMaxWidth()
+        )
+    }
+}
+
+@Composable
+@Preview
+fun ErrorCardPreview() {
+    ErrorCard("Something went terribly wrong :(")
+}
diff --git a/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/ui/components/LoadingScreen.kt b/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/ui/components/LoadingScreen.kt
@@ -0,0 +1,21 @@
+package com.google.firebase.example.dataconnect.ui.components
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+
+/**
+ * A screen that displays a loading spinner in the center.
+ */
+@Composable
+fun LoadingScreen() {
+    Box(
+        contentAlignment = Alignment.Center,
+        modifier = Modifier.fillMaxSize()
+    ) {
+        CircularProgressIndicator()
+    }
+}
diff --git a/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/ui/components/MoviesList.kt b/dataconnect/app/src/main/java/com/google/firebase/example/dataconnect/ui/components/MoviesList.kt
@@ -3,6 +3,7 @@ package com.google.firebase.example.dataconnect.ui.components
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.lazy.LazyRow
@@ -40,6 +41,7 @@ fun MoviesList(
 ) {
     Column(
         modifier = modifier.padding(horizontal = 16.dp)
+            .fillMaxWidth()
     ) {
         Text(
             text = listTitle,

Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,8 @@ import com.google.firebase.dataconnect.movies.GetUserByIdQuery`
`24`	`24`	`import com.google.firebase.example.dataconnect.R`
`25`	`25`	`import com.google.firebase.example.dataconnect.ui.components.Actor`
`26`	`26`	`import com.google.firebase.example.dataconnect.ui.components.ActorsList`
	`27`	`+import com.google.firebase.example.dataconnect.ui.components.ErrorCard`
	`28`	`+import com.google.firebase.example.dataconnect.ui.components.LoadingScreen`
`27`	`29`	`import com.google.firebase.example.dataconnect.ui.components.Movie`
`28`	`30`	`import com.google.firebase.example.dataconnect.ui.components.MoviesList`
`29`	`31`	`import com.google.firebase.example.dataconnect.ui.components.ReviewCard`
`@@ -35,7 +37,7 @@ fun ProfileScreen(`
`35`	`37`	`val uiState by profileViewModel.uiState.collectAsState()`
`36`	`38`	`when (uiState) {`
`37`	`39`	`is ProfileUIState.Error -> {`
`38`		`- Text((uiState as ProfileUIState.Error).errorMessage)`
	`40`	`+ ErrorCard((uiState as ProfileUIState.Error).errorMessage)`
`39`	`41`	`}`
`40`	`42`
`41`	`43`	`is ProfileUIState.AuthState -> {`
`@@ -63,14 +65,7 @@ fun ProfileScreen(`
`63`	`65`	`)`
`64`	`66`	`}`
`65`	`67`
`66`		`- ProfileUIState.Loading -> {`
`67`		`- Box(`
`68`		`- contentAlignment = Alignment.Center,`
`69`		`- modifier = Modifier.fillMaxSize()`
`70`		`- ) {`
`71`		`- CircularProgressIndicator()`
`72`		`- }`
`73`		`- }`
	`68`	`+ ProfileUIState.Loading -> LoadingScreen()`
`74`	`69`	`}`
`75`	`70`	`}`
`76`	`71`