[2/2] UI fixes to highlights feature

app/src/main/java/com/cornellappdev/score/components/highlights/ArticleHighlightsCard.kt

@@ -1,6 +1,7 @@
 package com.cornellappdev.score.components.highlights
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -18,6 +19,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
@@ -47,13 +49,15 @@ fun ArticleHighlightCard(
     linkTextStyle: TextStyle = TextStyle.Default,
     imageOverlayAlpha: Float = 0.4f
 ) {
+    val uriHandler = LocalUriHandler.current
+
     Box(
         modifier = Modifier
             .then(if (isWideFormat) Modifier.fillMaxWidth() else Modifier.width(241.dp))
             .height(192.dp)
             .clip(shape = RoundedCornerShape(12.dp))
+            .clickable { uriHandler.openUri(articleHighlight.articleUrl) }
     ) {
-        //todo: empty state if image doesn't load
         AsyncImage(
             model = articleHighlight.imageUrl,
             contentDescription = "highlight image",
@@ -100,7 +104,7 @@ fun ArticleHighlightCard(
                 Text(
                     color = Color.White,
                     style = labelsNormal,
-                    text = articleHighlight.date
+                    text = articleHighlight.dateString
                 )
             }
         }
@@ -115,6 +119,7 @@ private fun ArticleHighlightCardPreview() {
             "Late Goal Lifts No. 6 Men’s Hockey Over Brown",
             "maxresdefault.jpg",
             "https://cornellsun.com/article/london-mcdavid-is-making-a-name-for-herself-at-cornell",
+            null,
             "11/9",
             Sport.ICE_HOCKEY
         ),
@@ -130,6 +135,7 @@ private fun WideArticleHighlightCardPreview() {
             "Late Goal Lifts No. 6 Men’s Hockey Over Brown",
             "maxresdefault.jpg",
             "https://cornellsun.com/article/london-mcdavid-is-making-a-name-for-herself-at-cornell",
+            null,
             "11/9",
             Sport.ICE_HOCKEY
         ),

app/src/main/java/com/cornellappdev/score/components/highlights/HighlightsCardLazyColumn.kt

@@ -26,49 +26,30 @@ import com.cornellappdev.score.theme.Style.bodyNormal
 import com.cornellappdev.score.util.highlightsList
 import com.cornellappdev.score.util.recentSearchList
 
-sealed interface SearchResultsState {
-    data object Recent : SearchResultsState
-    data class Results(val items: List<HighlightData>) : SearchResultsState
-    data object Empty : SearchResultsState
-}
+enum class SearchUiState { RECENT, EMPTY, RESULTS }
 
 @Composable
 fun HighlightsCardLazyColumn(
     recentSearchList: List<String>,
     query: String,
-    highlightsList: List<HighlightData>,
-    onItemClick: () -> Unit,
-    onCloseClick: () -> Unit,
+    filteredResults: List<HighlightData>,
+    onItemClick: (String) -> Unit,
+    onCloseClick: (String) -> Unit,
     numResultsHeader: (@Composable () -> Unit)? = null
 ) {
 
     Column(
         modifier = Modifier.padding(horizontal = 24.dp)
     ) {
-        /*todo: move to VM*/
-        val resultsState: SearchResultsState =
-            when {
-                recentSearchList.isNotEmpty() && query.isEmpty() ->
-                    SearchResultsState.Recent
-
-                query.isNotEmpty() -> {
-                    val filtered = highlightsList.filter {
-                        it.title.contains(query, ignoreCase = true)
-                    }
-
-                    if (filtered.isEmpty()) {
-                        SearchResultsState.Empty
-                    } else {
-                        SearchResultsState.Results(filtered)
-                    }
-                }
-
-                else -> SearchResultsState.Recent
-            }
 
+        val uiStateKey = when {
+            query.isEmpty() -> SearchUiState.RECENT
+            filteredResults.isEmpty() -> SearchUiState.EMPTY
+            else -> SearchUiState.RESULTS
+        }
 
         AnimatedContent(
-            targetState = resultsState,
+            targetState = uiStateKey,
             transitionSpec = {
                 (fadeIn() + slideInVertically { it / 8 }) togetherWith
                         (fadeOut() + slideOutVertically { -it / 8 })
@@ -77,29 +58,29 @@ fun HighlightsCardLazyColumn(
         ) { state ->
 
             when (state) {
-                SearchResultsState.Recent -> {
+                SearchUiState.RECENT -> {
                     RecentSearches(
                         recentSearchList,
                         onItemClick,
                         onCloseClick
                     )
                 }
 
-                SearchResultsState.Empty -> {
+                SearchUiState.EMPTY -> {
                     EmptyStateBox(
                         icon = R.drawable.ic_kid_star,
                         title = "No results yet."
                     )
                 }
 
-                is SearchResultsState.Results -> {
+                SearchUiState.RESULTS -> {
                     Column {
                         numResultsHeader?.invoke()
 
                         LazyColumn(
                             verticalArrangement = Arrangement.spacedBy(16.dp)
                         ) {
-                            items(state.items) { item ->
+                            items(filteredResults) { item ->
                                 when (item) {
                                     is HighlightData.Video ->
                                         VideoHighlightCard(item.data, true)

app/src/main/java/com/cornellappdev/score/components/highlights/HighlightsCardRow.kt

@@ -23,14 +23,16 @@ import androidx.compose.ui.unit.dp
 import com.cornellappdev.score.R
 import com.cornellappdev.score.components.ScorePreview
 import com.cornellappdev.score.model.HighlightData
+import com.cornellappdev.score.screen.HighlightsSubScreenType
 import com.cornellappdev.score.theme.Style.bodyNormal
 import com.cornellappdev.score.theme.Style.heading2
 import com.cornellappdev.score.util.highlightsList
 
 @Composable
 fun HighlightsCardRow(
     highlightsList: List<HighlightData>,
-    rowHeader: String
+    rowHeader: String,
+    toSubScreen: (HighlightsSubScreenType) -> Unit
 ) {
     Column(
         modifier = Modifier.fillMaxWidth()
@@ -47,7 +49,7 @@ fun HighlightsCardRow(
                 style = heading2
             )
             Row(
-                modifier = Modifier.clickable {/*todo navigation to Today screen*/ },
+                modifier = Modifier.clickable { toSubScreen(if (rowHeader == "Today") HighlightsSubScreenType.TODAY else HighlightsSubScreenType.PAST3DAYS) },
                 verticalAlignment = Alignment.CenterVertically
             ) {
                 Text(
@@ -82,6 +84,6 @@ fun HighlightsCardRow(
 @Composable
 private fun HighlightsCardRowPreview() {
     ScorePreview {
-        HighlightsCardRow(highlightsList, "Today")
+        HighlightsCardRow(highlightsList, "Today", {})
     }
 }

app/src/main/java/com/cornellappdev/score/components/highlights/HighlightsFilter.kt

@@ -27,28 +27,30 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.cornellappdev.score.model.Sport
+import com.cornellappdev.score.model.SportSelection
 import com.cornellappdev.score.theme.GrayLight
 import com.cornellappdev.score.theme.GrayPrimary
 import com.cornellappdev.score.theme.Stroke
 import com.cornellappdev.score.theme.Style.bodyNormal
 import com.cornellappdev.score.theme.White
-import com.cornellappdev.score.util.sportList
+import com.cornellappdev.score.util.sportSelectionList
 
 @Composable
 private fun HighlightsFilterButton(
     sport: Sport,
-    onFilterSelected: (Sport) -> Unit,
+    onFilterSelected: (SportSelection) -> Unit,
     isSelected: Boolean = false,
 ) {
     OutlinedButton(
         modifier = Modifier
             .height(32.dp),
         border = BorderStroke(width = 1.dp, color = Stroke),
-        onClick = { onFilterSelected(sport) },
+        onClick = { onFilterSelected(SportSelection.SportSelect(sport)) },
         shape = RoundedCornerShape(100.dp),
         colors = outlinedButtonColors(
             containerColor = if (isSelected) GrayLight else White,
-            contentColor = GrayPrimary
+            contentColor = GrayPrimary,
+            disabledContainerColor = GrayLight
         ),
         contentPadding = PaddingValues(horizontal = 12.dp, vertical = 4.dp),
     ) {
@@ -67,32 +69,41 @@ private fun HighlightsFilterButton(
 
 @Composable
 fun HighlightsFilterRow(
-    sportList: List<Sport>,
-    onFilterSelected: (Sport) -> Unit,
+    sportList: List<SportSelection>,
+    selectedSport: SportSelection,
+    onFilterSelected: (SportSelection) -> Unit,
 ) {
     LazyRow(
-        modifier = Modifier
-            .fillMaxWidth(),
+        modifier = Modifier.fillMaxWidth(),
         horizontalArrangement = Arrangement.spacedBy(12.dp),
+        contentPadding = PaddingValues(start = 24.dp, end = 24.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
-        item { Spacer(Modifier.width(12.dp)) }
-        items(sportList) { item ->
-            HighlightsFilterButton(item, onFilterSelected)
+        items(
+            items = sportList.filterIsInstance<SportSelection.SportSelect>(),
+            key = { it.sport }
+        ) { selection ->
+
+            val isSelected = selectedSport == selection
+
+            HighlightsFilterButton(
+                sport = selection.sport,
+                onFilterSelected = onFilterSelected,
+                isSelected = isSelected
+            )
         }
-        item { Spacer(Modifier.width(12.dp)) }
     }
 }
 
 @Preview
 @Composable
 private fun HighlightsFilterButtonPreview() {
     var isSelected by remember { mutableStateOf(false) }
-    HighlightsFilterButton(Sport.BASEBALL, { isSelected = !isSelected }, isSelected = isSelected)
+    HighlightsFilterButton(Sport.BASEBALL, { !isSelected }, isSelected = isSelected)
 }
 
 @Preview
 @Composable
 private fun HighlightsFilterRowPreview() {
-    HighlightsFilterRow(sportList, {})
+    HighlightsFilterRow(sportSelectionList, SportSelection.All, {})
 }