Skip to content

Commit 49a20a1

Browse files
thatfiredevthatfiredev
committed
refactor: make toggle button reusable
1 parent b15d0ab commit 49a20a1

File tree

3 files changed

+86
-85
lines changed

3 files changed

+86
-85
lines changed

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

Lines changed: 33 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
package com.google.firebase.example.dataconnect.feature.actordetail
22

3-
import androidx.compose.foundation.layout.Box
43
import androidx.compose.foundation.layout.Column
54
import androidx.compose.foundation.layout.Row
65
import androidx.compose.foundation.layout.Spacer
76
import androidx.compose.foundation.layout.aspectRatio
8-
import androidx.compose.foundation.layout.fillMaxSize
97
import androidx.compose.foundation.layout.fillMaxWidth
108
import androidx.compose.foundation.layout.height
119
import androidx.compose.foundation.layout.padding
@@ -15,17 +13,12 @@ import androidx.compose.foundation.verticalScroll
1513
import androidx.compose.material.icons.Icons
1614
import androidx.compose.material.icons.filled.Favorite
1715
import androidx.compose.material.icons.outlined.FavoriteBorder
18-
import androidx.compose.material3.CircularProgressIndicator
19-
import androidx.compose.material3.FilledTonalButton
20-
import androidx.compose.material3.Icon
2116
import androidx.compose.material3.MaterialTheme
22-
import androidx.compose.material3.OutlinedButton
2317
import androidx.compose.material3.Scaffold
2418
import androidx.compose.material3.Text
2519
import androidx.compose.runtime.Composable
2620
import androidx.compose.runtime.collectAsState
2721
import androidx.compose.runtime.getValue
28-
import androidx.compose.ui.Alignment
2922
import androidx.compose.ui.Modifier
3023
import androidx.compose.ui.layout.ContentScale
3124
import androidx.compose.ui.res.stringResource
@@ -38,6 +31,7 @@ import com.google.firebase.example.dataconnect.ui.components.ErrorCard
3831
import com.google.firebase.example.dataconnect.ui.components.LoadingScreen
3932
import com.google.firebase.example.dataconnect.ui.components.Movie
4033
import com.google.firebase.example.dataconnect.ui.components.MoviesList
34+
import com.google.firebase.example.dataconnect.ui.components.ToggleButton
4135

4236
@Composable
4337
fun ActorDetailScreen(
@@ -68,6 +62,25 @@ fun ActorDetailScreen(
6862
actorDetailViewModel.toggleFavorite(it)
6963
}
7064
)
65+
MoviesList(
66+
listTitle = stringResource(R.string.title_main_roles),
67+
movies = ui.actor?.mainActors?.mapNotNull {
68+
Movie(it.id.toString(), it.imageUrl, it.title)
69+
},
70+
onMovieClicked = { movieId ->
71+
// TODO(thatfiredev): Support navigating to movie
72+
}
73+
)
74+
Spacer(modifier = Modifier.height(8.dp))
75+
MoviesList(
76+
listTitle = stringResource(R.string.title_supporting_actors),
77+
movies = ui.actor?.supportingActors?.mapNotNull {
78+
Movie(it.id.toString(), it.imageUrl, it.title)
79+
},
80+
onMovieClicked = { movieId ->
81+
// TODO(thatfiredev): Support navigating to movie
82+
}
83+
)
7184
}
7285
}
7386
}
@@ -102,52 +115,21 @@ fun ActorInformation(
102115
.aspectRatio(9f / 16f)
103116
.padding(vertical = 8.dp)
104117
)
105-
Column(
106-
modifier = Modifier.padding(horizontal = 16.dp)
107-
) {
108-
Text(
109-
text = actor.biography ?: stringResource(R.string.biography_not_available),
110-
modifier = Modifier.fillMaxWidth()
111-
)
112-
}
113-
}
114-
Spacer(modifier = Modifier.height(8.dp))
115-
Row {
116-
Spacer(modifier = Modifier.width(8.dp))
117-
if (isActorFavorite) {
118-
FilledTonalButton(onClick = {
119-
onFavoriteToggled(false)
120-
}) {
121-
Icon(Icons.Filled.Favorite, "Favorite")
122-
Text("Favorite", modifier = Modifier.padding(start = 4.dp))
123-
}
124-
} else {
125-
OutlinedButton(onClick = {
126-
onFavoriteToggled(true)
127-
}) {
128-
Icon(Icons.Outlined.FavoriteBorder, "Favorite")
129-
Text("Add to Favorites", modifier = Modifier.padding(start = 4.dp))
130-
}
131-
}
118+
Text(
119+
text = actor.biography ?: stringResource(R.string.biography_not_available),
120+
modifier = Modifier
121+
.padding(horizontal = 16.dp)
122+
.fillMaxWidth()
123+
)
132124
}
133125
Spacer(modifier = Modifier.height(8.dp))
134-
MoviesList(
135-
listTitle = stringResource(R.string.title_main_roles),
136-
movies = actor.mainActors.mapNotNull {
137-
Movie(it.id.toString(), it.imageUrl, it.title)
138-
},
139-
onMovieClicked = { movieId ->
140-
// TODO(thatfiredev): Support navigating to movie
141-
}
142-
)
143-
MoviesList(
144-
listTitle = stringResource(R.string.title_supporting_actors),
145-
movies = actor.supportingActors.mapNotNull {
146-
Movie(it.id.toString(), it.imageUrl, it.title)
147-
},
148-
onMovieClicked = { movieId ->
149-
// TODO(thatfiredev): Support navigating to movie
150-
}
126+
ToggleButton(
127+
iconEnabled = Icons.Filled.Favorite,
128+
iconDisabled = Icons.Outlined.FavoriteBorder,
129+
textEnabled = stringResource(R.string.button_remove_favorite),
130+
textDisabled = stringResource(R.string.button_favorite),
131+
isEnabled = isActorFavorite,
132+
onToggle = onFavoriteToggled
151133
)
152134
}
153135
}

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

Lines changed: 17 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
package com.google.firebase.example.dataconnect.feature.moviedetail
22

3-
import androidx.compose.foundation.layout.Box
43
import androidx.compose.foundation.layout.Column
54
import androidx.compose.foundation.layout.Row
65
import androidx.compose.foundation.layout.Spacer
@@ -19,11 +18,8 @@ import androidx.compose.material.icons.outlined.Check
1918
import androidx.compose.material.icons.outlined.FavoriteBorder
2019
import androidx.compose.material.icons.outlined.Star
2120
import androidx.compose.material3.Button
22-
import androidx.compose.material3.CircularProgressIndicator
23-
import androidx.compose.material3.FilledTonalButton
2421
import androidx.compose.material3.Icon
2522
import androidx.compose.material3.MaterialTheme
26-
import androidx.compose.material3.OutlinedButton
2723
import androidx.compose.material3.Scaffold
2824
import androidx.compose.material3.Slider
2925
import androidx.compose.material3.SuggestionChip
@@ -50,6 +46,7 @@ import com.google.firebase.example.dataconnect.ui.components.ActorsList
5046
import com.google.firebase.example.dataconnect.ui.components.ErrorCard
5147
import com.google.firebase.example.dataconnect.ui.components.LoadingScreen
5248
import com.google.firebase.example.dataconnect.ui.components.ReviewCard
49+
import com.google.firebase.example.dataconnect.ui.components.ToggleButton
5350

5451
@Composable
5552
fun MovieDetailScreen(
@@ -184,37 +181,23 @@ fun MovieInformation(
184181
}
185182
Spacer(modifier = Modifier.height(8.dp))
186183
Row {
187-
if (isMovieWatched) {
188-
FilledTonalButton(onClick = {
189-
onWatchToggled(false)
190-
}) {
191-
Icon(Icons.Filled.CheckCircle, "Watched")
192-
Text("Watched", modifier = Modifier.padding(start = 4.dp))
193-
}
194-
} else {
195-
OutlinedButton(onClick = {
196-
onWatchToggled(true)
197-
}) {
198-
Icon(Icons.Outlined.Check, "Watched")
199-
Text("Mark as watched", modifier = Modifier.padding(start = 4.dp))
200-
}
201-
}
184+
ToggleButton(
185+
iconEnabled = Icons.Filled.CheckCircle,
186+
iconDisabled = Icons.Outlined.Check,
187+
textEnabled = stringResource(R.string.button_unmark_watched),
188+
textDisabled = stringResource(R.string.button_mark_watched),
189+
isEnabled = isMovieWatched,
190+
onToggle = onWatchToggled
191+
)
202192
Spacer(modifier = Modifier.width(8.dp))
203-
if (isMovieFavorite) {
204-
FilledTonalButton(onClick = {
205-
onFavoriteToggled(false)
206-
}) {
207-
Icon(Icons.Filled.Favorite, "Favorite")
208-
Text("Favorite", modifier = Modifier.padding(start = 4.dp))
209-
}
210-
} else {
211-
OutlinedButton(onClick = {
212-
onFavoriteToggled(true)
213-
}) {
214-
Icon(Icons.Outlined.FavoriteBorder, "Favorite")
215-
Text("Add to Favorites", modifier = Modifier.padding(start = 4.dp))
216-
}
217-
}
193+
ToggleButton(
194+
iconEnabled = Icons.Filled.Favorite,
195+
iconDisabled = Icons.Outlined.FavoriteBorder,
196+
textEnabled = stringResource(R.string.button_remove_favorite),
197+
textDisabled = stringResource(R.string.button_favorite),
198+
isEnabled = isMovieFavorite,
199+
onToggle = onFavoriteToggled
200+
)
218201
}
219202
}
220203
}

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
package com.google.firebase.example.dataconnect.ui.components
2+
3+
import androidx.compose.foundation.layout.padding
4+
import androidx.compose.material3.FilledTonalButton
5+
import androidx.compose.material3.Icon
6+
import androidx.compose.material3.OutlinedButton
7+
import androidx.compose.material3.Text
8+
import androidx.compose.runtime.Composable
9+
import androidx.compose.ui.Modifier
10+
import androidx.compose.ui.graphics.vector.ImageVector
11+
import androidx.compose.ui.unit.dp
12+
13+
@Composable
14+
fun ToggleButton(
15+
iconEnabled: ImageVector,
16+
iconDisabled: ImageVector,
17+
textEnabled: String,
18+
textDisabled: String,
19+
isEnabled: Boolean,
20+
onToggle: (newValue: Boolean) -> Unit
21+
) {
22+
val onClick = {
23+
onToggle(!isEnabled)
24+
}
25+
if (isEnabled) {
26+
FilledTonalButton(onClick) {
27+
Icon(iconEnabled, textEnabled)
28+
Text(textEnabled, modifier = Modifier.padding(horizontal = 4.dp))
29+
}
30+
} else {
31+
OutlinedButton(onClick) {
32+
Icon(iconDisabled, textDisabled)
33+
Text(textDisabled, modifier = Modifier.padding(horizontal = 4.dp))
34+
}
35+
}
36+
}

0 commit comments

Comments
 (0)