Skip to content

Add empty state #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
amjiao merged 13 commits into from
Apr 22, 2025
Merged

Add empty state #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
1af4f2f
Empty state + UI fixes
amjiao Apr 14, 2025
ab841ef
Address UI issues (#51)
zachseidner1 Apr 14, 2025
122f021
Address sport filter (issue #40) (#47)
amjiao Apr 14, 2025
115db4d
Empty state + UI fixes
amjiao Apr 14, 2025
a7a6b9f
Fix merging
amjiao Apr 15, 2025
f34a557
Merge branch 'main' of https://github.com/cuappdev/score-android into…
amjiao Apr 15, 2025
ef67bf6
small fix
amjiao Apr 15, 2025
a2de9fc
PR Fixes
amjiao Apr 19, 2025
0df55c7
Merge branch 'main' of https://github.com/cuappdev/score-android into…
amjiao Apr 19, 2025
27e37b0
Small fixes
amjiao Apr 19, 2025
ee7c182
Merge branch 'main' of https://github.com/cuappdev/score-android into…
amjiao Apr 21, 2025
ea55476
PR fixes
amjiao Apr 21, 2025
e685120
Merge branch 'main' into Amy/empty-state
amjiao Apr 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions app/src/main/java/com/cornellappdev/score/components/EmptyState.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
package com.cornellappdev.score.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
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.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.cornellappdev.score.R
import com.cornellappdev.score.theme.GrayMedium
import com.cornellappdev.score.theme.GrayPrimary
import com.cornellappdev.score.theme.Style.bodyNormal
import com.cornellappdev.score.theme.Style.heading2

@Composable
fun EmptyState(
modifier: Modifier = Modifier
) {
Column(
modifier = modifier,
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Image(
painter = painterResource(R.drawable.ic_speaker_gray),
contentDescription = "score speaker icon"
)
Spacer(modifier = Modifier.height(16.dp))
Text(
text = "No games yet.",
style = heading2.copy(color = GrayPrimary)
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = "Check back here later!",
style = bodyNormal.copy(color = GrayMedium)
)
}
}

@Preview
@Composable
private fun EmptyStatePreview() = ScorePreview {
EmptyState()
}
97 changes: 65 additions & 32 deletions app/src/main/java/com/cornellappdev/score/screen/HomeScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.cornellappdev.score.components.EmptyState
import com.cornellappdev.score.components.ErrorState
import com.cornellappdev.score.components.GameCard
import com.cornellappdev.score.components.GamesCarousel
Expand Down Expand Up @@ -101,21 +102,25 @@ private fun HomeLazyColumn(
navigateToGameDetails: (String) -> Unit
) {
LazyColumn(contentPadding = PaddingValues(top = 24.dp)) {
item {
Text(
text = "Latest",
style = heading1,
color = GrayPrimary,
modifier = Modifier
.fillMaxWidth()
.padding(start = 24.dp)
)
}
item {
Spacer(Modifier.height(16.dp))
if (uiState.filteredGames.isNotEmpty()) {
item {
Text(
text = "Upcoming",
style = heading1,
color = GrayPrimary,
modifier = Modifier
.fillMaxWidth()
.padding(start = 24.dp)
)
}
item {
Spacer(Modifier.height(16.dp))
}
}
item {
GamesCarousel(uiState.upcomingGames, navigateToGameDetails)
if (uiState.filteredGames.isNotEmpty()) {
item {
GamesCarousel(uiState.upcomingGames, navigateToGameDetails)
}
}
stickyHeader {
Column(
Expand Down Expand Up @@ -146,24 +151,36 @@ private fun HomeLazyColumn(
)
}
}
item {
Spacer(modifier = Modifier.height(24.dp))
}
items(uiState.filteredGames) {
val game = it
Column(modifier = Modifier.padding(horizontal = 24.dp)) {
GameCard(
teamLogo = game.teamLogo,
team = game.team,
date = game.dateString,
isLive = game.isLive,
genderIcon = painterResource(game.genderIcon),
sportIcon = painterResource(game.sportIcon),
location = game.location,
topCornerRound = true,
onClick = { navigateToGameDetails(game.id) }
)
Spacer(modifier = Modifier.height(16.dp))

if (uiState.filteredGames.isNotEmpty()) {
item {
Spacer(modifier = Modifier.height(24.dp))
}
items(uiState.filteredGames) {
val game = it
Column(modifier = Modifier.padding(horizontal = 24.dp)) {
GameCard(
teamLogo = game.teamLogo,
team = game.team,
date = game.dateString,
isLive = game.isLive,
genderIcon = painterResource(game.genderIcon),
sportIcon = painterResource(game.sportIcon),
location = game.location,
topCornerRound = true,
onClick = { navigateToGameDetails(game.id) }
)
Spacer(modifier = Modifier.height(16.dp))
}
}
} else {
item {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
EmptyState()
}
}
}
}
Expand Down Expand Up @@ -191,3 +208,19 @@ private fun HomeScreenPreview() = ScorePreview {
}
}

@Preview
@Composable
private fun HomeScreenEmptyStatePreview() = ScorePreview {
HomeContent(
HomeUiState(
selectedGender = GenderDivision.ALL,
sportSelect = SportSelection.All,
selectionList = sportSelectionList,
loadedState = ApiResponse.Success(emptyList())
),
onGenderSelected = {},
onSportSelected = {},
onRefresh = {}
)
}

78 changes: 56 additions & 22 deletions app/src/main/java/com/cornellappdev/score/screen/PastGamesScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
Expand All @@ -21,6 +22,7 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.cornellappdev.score.components.EmptyState
import com.cornellappdev.score.components.ErrorState
import com.cornellappdev.score.components.GamesCarousel
import com.cornellappdev.score.components.LoadingScreen
Expand Down Expand Up @@ -98,21 +100,26 @@ private fun PastGamesLazyColumn(
navigateToGameDetails: (String) -> Unit
) {
LazyColumn(contentPadding = PaddingValues(top = 24.dp)) {
item {
Text(
text = "Latest",
style = heading1,
color = GrayPrimary,
modifier = Modifier
.fillMaxWidth()
.padding(start = 24.dp)
)
}
item {
Spacer(Modifier.height(16.dp))
if (uiState.filteredGames.isNotEmpty()) {
item {
Text(
text = "Latest",
style = heading1,
color = GrayPrimary,
modifier = Modifier
.fillMaxWidth()
.padding(start = 24.dp)
)
}
item {
Spacer(Modifier.height(16.dp))
}
}
item {
GamesCarousel(uiState.pastGames, navigateToGameDetails)

if (uiState.filteredGames.isNotEmpty()) {
item {
GamesCarousel(uiState.pastGames, navigateToGameDetails)
}
}
stickyHeader {
Column(
Expand Down Expand Up @@ -146,14 +153,25 @@ private fun PastGamesLazyColumn(
item {
Spacer(modifier = Modifier.height(24.dp))
}
items(uiState.filteredGames) {
val game = it
Column(modifier = Modifier.padding(horizontal = 24.dp)) {
PastGameCard(
data = game,
onClick = { navigateToGameDetails(game.id) }
)
Spacer(modifier = Modifier.height(16.dp))
if (uiState.filteredGames.isNotEmpty()) {
items(uiState.filteredGames) {
val game = it
Column(modifier = Modifier.padding(horizontal = 24.dp)) {
PastGameCard(
data = game,
onClick = { navigateToGameDetails(game.id) }
)
Spacer(modifier = Modifier.height(16.dp))
}
}
} else{
item{
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
EmptyState()
}
}
}
}
Expand All @@ -173,4 +191,20 @@ private fun PastGamesPreview() = ScorePreview {
onSportSelected = {},
onRefresh = {},
)
}

@Composable
@Preview
private fun PastGamesEmptyStatePreview() = ScorePreview {
PastGamesContent(
uiState = PastGamesUiState(
selectedGender = GenderDivision.ALL,
sportSelect = SportSelection.All,
selectionList = sportSelectionList,
loadedState = ApiResponse.Success(emptyList())
),
onGenderSelected = {},
onSportSelected = {},
onRefresh = {},
)
}
38 changes: 38 additions & 0 deletions app/src/main/res/drawable/ic_speaker_gray.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="96dp"
android:height="96dp"
android:viewportWidth="96"
android:viewportHeight="96">
<group>
<clip-path
android:pathData="M0,0h96v96h-96z"/>
<path
android:pathData="M15.859,71.188C12.781,70.28 9.709,68.16 7.901,64.318C6.093,60.476 6.418,56.757 7.681,53.806C8.911,50.933 11.086,48.658 13.225,47.652L30.348,39.595C37.133,36.402 42.307,29.228 44.957,21.218C45.712,18.936 47.904,17.77 49.785,17.517C51.66,17.264 54.183,17.823 55.291,20.179L71.744,55.146C72.892,57.586 71.542,59.969 70.135,61.269C68.709,62.586 66.335,63.664 64.03,62.826C56.41,60.056 47.799,59.706 41.258,62.784L24.135,70.84C21.997,71.847 18.858,72.073 15.859,71.188ZM16.991,67.352C19.197,68.003 21.31,67.749 22.432,67.221L39.555,59.164C47.343,55.5 57.113,56.055 65.397,59.067C65.76,59.199 66.602,59.087 67.421,58.33C68.26,57.556 68.186,56.979 68.125,56.849L51.672,21.882C51.593,21.715 51.241,21.357 50.319,21.481C49.403,21.604 48.876,22.107 48.755,22.474C45.891,31.13 40.152,39.403 32.051,43.215L14.928,51.271C13.805,51.799 12.263,53.266 11.358,55.38C10.486,57.417 10.259,59.934 11.52,62.615C12.782,65.296 14.866,66.725 16.991,67.352Z"
android:fillColor="#C2C2C2"
android:fillType="evenOdd"/>
<path
android:pathData="M64.629,42.871C67.058,41.728 68.101,38.832 66.957,36.403C65.814,33.974 62.919,32.931 60.489,34.074L59.354,31.661C63.116,29.891 67.6,31.506 69.37,35.268C71.141,39.03 69.526,43.514 65.764,45.284L64.629,42.871Z"
android:fillColor="#C2C2C2"
android:fillType="evenOdd"/>
<path
android:pathData="M38.104,81.957L30.883,65.615L34.542,63.999L41.762,80.34C42.941,83.007 41.869,86.132 39.302,87.514C36.723,88.903 33.508,88.062 31.939,85.588L22.012,69.933L25.39,67.791L35.317,83.446C35.762,84.147 36.674,84.386 37.406,83.992C38.134,83.6 38.438,82.714 38.104,81.957Z"
android:fillColor="#C2C2C2"
android:fillType="evenOdd"/>
<path
android:pathData="M24.602,44.531L34.039,64.587L31.626,65.722L22.189,45.667L24.602,44.531Z"
android:fillColor="#C2C2C2"
android:fillType="evenOdd"/>
<path
android:pathData="M72.823,34.255C72.353,33.256 72.782,32.064 73.781,31.594L81.935,27.757C82.935,27.287 84.126,27.716 84.596,28.715C85.067,29.715 84.638,30.906 83.638,31.376L75.484,35.213C74.485,35.683 73.294,35.254 72.823,34.255Z"
android:fillColor="#C2C2C2"
android:fillType="evenOdd"/>
<path
android:pathData="M67.888,24.635C66.848,24.261 66.309,23.115 66.683,22.076L69.736,13.597C70.11,12.558 71.256,12.019 72.295,12.393C73.334,12.767 73.873,13.913 73.499,14.952L70.447,23.431C70.073,24.47 68.927,25.009 67.888,24.635Z"
android:fillColor="#C2C2C2"
android:fillType="evenOdd"/>
<path
android:pathData="M89.729,48.915C89.355,49.954 88.21,50.493 87.17,50.119L78.692,47.067C77.652,46.692 77.113,45.547 77.487,44.507C77.862,43.468 79.007,42.929 80.047,43.303L88.525,46.355C89.564,46.73 90.104,47.875 89.729,48.915Z"
android:fillColor="#C2C2C2"
android:fillType="evenOdd"/>
</group>
</vector>