💄 Fix UI bug for sessions (#308)

When sessions would combine both service and non-service ones, the Card shape would not be applied correctly
paug · Apr 29, 2024 · 8964491 · 8964491
1 parent 1fab371
commit 8964491
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 4 deletions.
diff --git a/shared/ui/src/commonMain/kotlin/com/androidmakers/ui/agenda/AgendaColumn.kt b/shared/ui/src/commonMain/kotlin/com/androidmakers/ui/agenda/AgendaColumn.kt
@@ -20,6 +20,8 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
@@ -61,7 +63,27 @@ fun AgendaColumn(
           ),
           shape = RoundedCornerShape(16.dp),
         ) {
-          sessions.forEach { uiSession ->
+          sessions.forEachIndexed { index, uiSession ->
+            val sessionBeforeIsServiceSession = remember {
+              derivedStateOf {
+                if (index > 0) {
+                  sessions[index - 1].isServiceSession
+                } else {
+                  false
+                }
+              }
+            }
+
+            val sessionAfterIsServiceSession = remember {
+              derivedStateOf {
+                if (index < sessions.lastIndex) {
+                  sessions[sessions.lastIndex].isServiceSession
+                } else {
+                  false
+                }
+              }
+            }
+
             if (uiSession.isServiceSession) {
               ServiceSessionRow(
                 uiSession,
@@ -73,7 +95,9 @@ fun AgendaColumn(
                 uiSession = uiSession,
                 onSessionClicked = onSessionClicked,
                 onSessionBookmarked = onSessionBookmarked,
-                onApplyForAppClinic = onApplyForAppClinicClicked
+                onApplyForAppClinic = onApplyForAppClinicClicked,
+                sessionBeforeIsServiceSession = sessionBeforeIsServiceSession.value,
+                sessionAfterIsServiceSession = sessionAfterIsServiceSession.value
               )
             }
           }

diff --git a/shared/ui/src/commonMain/kotlin/com/androidmakers/ui/agenda/AgendaRow.kt b/shared/ui/src/commonMain/kotlin/com/androidmakers/ui/agenda/AgendaRow.kt
@@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.BookmarkAdd
 import androidx.compose.material.icons.rounded.BookmarkRemove
@@ -23,6 +24,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import com.androidmakers.ui.common.EmojiUtils
@@ -98,13 +100,32 @@ internal fun SessionRow(
   onSessionClicked: (UISession) -> Unit,
   onSessionBookmarked: (UISession, Boolean) -> Unit,
   onApplyForAppClinic: () -> Unit,
+  sessionBeforeIsServiceSession: Boolean = false,
+  sessionAfterIsServiceSession: Boolean = false,
 ) {
+  val clipModifier = when {
+    sessionBeforeIsServiceSession -> Modifier.clip(
+      shape = RoundedCornerShape(
+        topStart = 16.dp,
+        topEnd = 16.dp
+      )
+    )
+    sessionAfterIsServiceSession -> Modifier.clip(
+      shape = RoundedCornerShape(
+        bottomStart = 16.dp,
+        bottomEnd = 16.dp
+      )
+    )
+    else -> Modifier
+  }
+
   ListItem(
       modifier = modifier.clickable(
         onClick = {
           onSessionClicked.invoke(uiSession)
         }
-      ),
+      )
+        .then(clipModifier),
       colors = ListItemDefaults.colors(
           containerColor = backgroundColor(uiSession),
       ),
@@ -209,7 +230,12 @@ fun UISession.formattedDuration(): String {
 @Preview
 @Composable
 private fun AgendaRowPreview() {
-  SessionRow(fakeUiSession, onSessionClicked = {}, onSessionBookmarked = { _,_ -> }, onApplyForAppClinic = {})
+  SessionRow(
+    fakeUiSession,
+    onSessionClicked = {},
+    onSessionBookmarked = { _, _ -> },
+    onApplyForAppClinic = {}
+  )
 }
 
 private val fakeUiSession = UISession(