fix: timer list screen

timemates · Jan 5, 2024 · a5e7335 · a5e7335
1 parent 5989726
commit a5e7335
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 40 deletions.
diff --git a/feature/timers/presentation/src/commonMain/kotlin/io/timemates/app/timers/ui/TimerItem.kt b/feature/timers/presentation/src/commonMain/kotlin/io/timemates/app/timers/ui/TimerItem.kt
@@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowForward
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedCard
@@ -45,24 +46,24 @@ fun TimerItem(
 ) {
     OutlinedCard(
         modifier = Modifier
-            .fillMaxWidth()
-            .clickable(
-                onClick = onClick
-            ),
+            .fillMaxWidth(),
         border = BorderStroke(1.dp, AppTheme.colors.secondary),
+        colors = CardDefaults.outlinedCardColors(containerColor = AppTheme.colors.background),
     ) {
         Row(
-            modifier = Modifier.fillMaxWidth(),
+            modifier = Modifier.fillMaxWidth().clickable(
+                onClick = onClick
+            ),
             verticalAlignment = Alignment.CenterVertically,
         ) {
             Column(
-                modifier = Modifier.padding(12.dp),
+                modifier = Modifier.padding(12.dp).weight(1f),
             ) {
                 Row(
                     modifier = Modifier,
                 ) {
                     Text(
-                        text = timer.description.string,
+                        text = timer.name.string,
                         modifier = Modifier,
                         style = MaterialTheme.typography.titleMedium,
                     )
@@ -78,13 +79,12 @@ fun TimerItem(
                 )
             }
             Box(
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier.padding(12.dp),
             ) {
                 Icon(
                     imageVector = Icons.Filled.ArrowForward,
                     contentDescription = "Navigate To Timer",
                     modifier = Modifier
-                        .padding(12.dp)
                         .align(Alignment.CenterEnd),
                     tint = Color.Gray,
                 )

diff --git a/...entation/src/commonMain/kotlin/io/timemates/app/timers/ui/timers_list/TimersListScreen.kt b/...entation/src/commonMain/kotlin/io/timemates/app/timers/ui/timers_list/TimersListScreen.kt
@@ -32,6 +32,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import dev.icerock.moko.resources.compose.painterResource
 import io.github.skeptick.libres.compose.painterResource
+import io.timemates.app.feature.common.failures.getDefaultDisplayMessage
 import io.timemates.app.foundation.mvi.StateMachine
 import io.timemates.app.localization.compose.LocalStrings
 import io.timemates.app.style.system.Resources
@@ -61,19 +62,27 @@ fun TimersListScreen(
 
     val strings = LocalStrings.current
 
-    LaunchedEffect(Unit) {
+    LaunchedEffect(true) {
         stateMachine.dispatchEvent(Event.Load)
 
         stateMachine.effects.consumeEach { effect ->
-            when(effect) {
+            when (effect) {
                 is Effect.Failure ->
-                    snackbarData.showSnackbar(message = strings.unknownFailure)
+                    snackbarData.showSnackbar(message = effect.throwable.getDefaultDisplayMessage(strings))
 
                 else -> {}
             }
         }
     }
 
+    if(state.hasMoreItems) {
+        LaunchedEffect(timersListState.layoutInfo.visibleItemsInfo.lastOrNull()) {
+            if (timersListState.isScrolledToTheEnd()) {
+                stateMachine.dispatchEvent(Event.Load)
+            }
+        }
+    }
+
     Scaffold(
         topBar = {
             AppBar(
@@ -85,7 +94,8 @@ fun TimersListScreen(
                     ) {
                         Icon(
                             imageVector = Icons.Outlined.Settings,
-                            contentDescription = null,)
+                            contentDescription = null,
+                        )
                     }
                 },
                 modifier = Modifier,
@@ -115,14 +125,14 @@ fun TimersListScreen(
                     verticalArrangement = Arrangement.Center,
                     horizontalAlignment = Alignment.CenterHorizontally,
                 ) {
-                    Icon(
-                        modifier = Modifier,
-                        painter = painter,
-                        contentDescription = null,
-                        tint = AppTheme.colors.secondaryVariant,
-                    )
-
-                    Spacer(Modifier.height(8.dp))
+//                    Icon(
+//                        modifier = Modifier,
+//                        painter = painter,
+//                        contentDescription = null,
+//                        tint = AppTheme.colors.secondaryVariant,
+//                    )
+//
+//                    Spacer(Modifier.height(8.dp))
 
                     Text(
                         text = LocalStrings.current.noTimers,
@@ -133,27 +143,31 @@ fun TimersListScreen(
                 }
             }
         } else {
-            LazyColumn(
-                modifier = Modifier.fillMaxSize(),
-                state = timersListState,
-                contentPadding = rootPaddings,
-                verticalArrangement = Arrangement.spacedBy(8.dp),
-            ) {
-                items(state.timersList) {timer ->
-                    TimerItem(
-                        timer = timer,
-                        onClick = { navigateToTimer(timer.timerId) }
-                    )
-                }
+            Column(modifier = Modifier.fillMaxSize()) {
+                Spacer(Modifier.height(16.dp))
 
-                if (state.isLoading) {
-                    item {
-                        PlaceholderTimerItem()
+                LazyColumn(
+                    modifier = Modifier.fillMaxSize().padding(horizontal = 12.dp),
+                    state = timersListState,
+                    contentPadding = rootPaddings,
+                    verticalArrangement = Arrangement.spacedBy(16.dp),
+                ) {
+                    items(state.timersList) { timer ->
+                        TimerItem(
+                            timer = timer,
+                            onClick = { navigateToTimer(timer.timerId) }
+                        )
                     }
-                }
 
-                if (timersListState.isScrolledToTheEnd()) {
-                    stateMachine.dispatchEvent(Event.Load)
+                    if (state.isLoading) {
+                        items(5) {
+                            PlaceholderTimerItem()
+                        }
+                    }
+
+                    item {
+                        Spacer(Modifier.height(16.dp))
+                    }
                 }
             }
         }

diff --git a/.../src/commonMain/kotlin/io/timemates/app/timers/ui/timers_list/mvi/TimersListMiddleware.kt b/.../src/commonMain/kotlin/io/timemates/app/timers/ui/timers_list/mvi/TimersListMiddleware.kt
@@ -17,7 +17,7 @@ class TimersListMiddleware : Middleware<State, Effect> {
             }
 
             is Effect.LoadTimers -> {
-                store.state.value.copy(timersList = store.state.value.timersList + effect.timersList, isLoading = false)
+                store.state.value.copy(timersList = (store.state.value.timersList + effect.timersList).distinct(), isLoading = false)
             }
         }
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,7 +17,7 @@ class TimersListMiddleware : Middleware<State, Effect> { @@
                 }
                 is Effect.LoadTimers -> {
-                    store.state.value.copy(timersList = store.state.value.timersList + effect.timersList, isLoading = false)
+                    store.state.value.copy(timersList = (store.state.value.timersList + effect.timersList).distinct(), isLoading = false)
                 }
             }
         }
@@ Expand Down @@