Skip to content

Commit 5587c5c

Browse files
Improved component implementation for reusability, code clean up
1 parent ca436e6 commit 5587c5c

File tree

7 files changed

+131
-134
lines changed

7 files changed

+131
-134
lines changed

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/components/ShowAlertDialog.kt

Lines changed: 0 additions & 47 deletions
This file was deleted.

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/components/UiStateHandler.kt

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,18 @@ package com.developersbreach.kotlindictionarymultiplatform.ui.components
22

33
import androidx.compose.foundation.layout.Box
44
import androidx.compose.foundation.layout.fillMaxSize
5-
import androidx.compose.material3.MaterialTheme
65
import androidx.compose.runtime.Composable
76
import androidx.compose.runtime.LaunchedEffect
87
import androidx.compose.runtime.mutableStateOf
98
import androidx.compose.runtime.saveable.rememberSaveable
109
import androidx.compose.ui.Alignment
1110
import androidx.compose.ui.Modifier
11+
import com.developersbreach.designsystem.components.KdAlertDialog
1212
import com.developersbreach.designsystem.components.KdCircularProgressIndicator
1313
import kotlindictionarymultiplatform.composeapp.generated.resources.Res
1414
import kotlindictionarymultiplatform.composeapp.generated.resources.error_info_unavailable
1515
import kotlindictionarymultiplatform.composeapp.generated.resources.error_occurred
16+
import kotlindictionarymultiplatform.composeapp.generated.resources.ok
1617
import org.jetbrains.compose.resources.stringResource
1718

1819
@Composable
@@ -32,18 +33,21 @@ fun <T> UiStateHandler(
3233
is UiState.Loading -> {
3334
KdCircularProgressIndicator(
3435
modifier = Modifier.align(Alignment.Center),
35-
color = MaterialTheme.colorScheme.onBackground,
3636
)
3737
}
3838

3939
is UiState.Error -> {
4040
if (!shouldDismissErrorDialog.value) {
4141
val errorDetails = uiState.throwable
42-
ShowAlertDialog(
43-
onButtonClick = { shouldDismissErrorDialog.value = true },
42+
KdAlertDialog(
43+
onDismissRequest = { shouldDismissErrorDialog.value = true },
4444
modifier = Modifier,
4545
title = stringResource(Res.string.error_occurred),
4646
description = errorDetails.message ?: stringResource(Res.string.error_info_unavailable),
47+
buttonTitle = stringResource(Res.string.ok),
48+
onButtonClick = {
49+
shouldDismissErrorDialog.value = true
50+
},
4751
)
4852
}
4953
}
@@ -54,7 +58,6 @@ fun <T> UiStateHandler(
5458
if (isLoading) {
5559
KdCircularProgressIndicator(
5660
modifier = Modifier.align(Alignment.Center),
57-
color = MaterialTheme.colorScheme.onBackground,
5861
)
5962
}
6063
}

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/topic/TopicCard.kt

Lines changed: 59 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -52,71 +52,70 @@ fun TopicCard(
5252
.clickable { onCardClick() },
5353
color = MaterialTheme.colorScheme.surface,
5454
shape = RoundedCornerShape(16.dp),
55-
content = {
56-
Row(
55+
) {
56+
Row(
57+
modifier = Modifier
58+
.fillMaxWidth()
59+
.padding(12.dp),
60+
verticalAlignment = Alignment.CenterVertically,
61+
) {
62+
Box(
5763
modifier = Modifier
58-
.fillMaxWidth()
59-
.padding(12.dp),
60-
verticalAlignment = Alignment.CenterVertically,
64+
.size(36.dp)
65+
.background(
66+
color = MaterialTheme.colorScheme.primary,
67+
shape = CircleShape,
68+
),
69+
contentAlignment = Alignment.Center,
6170
) {
62-
Box(
63-
modifier = Modifier
64-
.size(36.dp)
65-
.background(
66-
color = MaterialTheme.colorScheme.primary,
67-
shape = CircleShape,
68-
),
69-
contentAlignment = Alignment.Center,
70-
) {
71-
KdText(
72-
modifier = Modifier,
73-
text = itemTopic.initial,
74-
)
75-
}
76-
77-
Spacer(modifier = Modifier.width(12.dp))
71+
KdText(
72+
modifier = Modifier,
73+
text = itemTopic.initial,
74+
)
75+
}
7876

79-
Column(
80-
modifier = Modifier.weight(1f),
81-
) {
82-
KdText(
83-
modifier = Modifier,
84-
text = topic,
85-
style = MaterialTheme.typography.headlineMedium.copy(
86-
color = MaterialTheme.colorScheme.onPrimary,
87-
),
88-
maxLines = 1,
89-
overflow = TextOverflow.Ellipsis,
90-
)
91-
Spacer(modifier = Modifier.height(6.dp))
92-
KdText(
93-
modifier = Modifier,
94-
text = subtitle,
95-
style = MaterialTheme.typography.labelMedium.copy(
96-
color = MaterialTheme.colorScheme.onBackground,
97-
),
98-
maxLines = 1,
99-
overflow = TextOverflow.Ellipsis,
100-
)
101-
}
77+
Spacer(modifier = Modifier.width(12.dp))
10278

103-
KdIconButton(
79+
Column(
80+
modifier = Modifier.weight(1f),
81+
) {
82+
KdText(
10483
modifier = Modifier,
105-
iconModifier = Modifier,
106-
onClick = onBookmarkClick,
107-
imageVector = if (isBookmarked) {
108-
Icons.Outlined.BookmarkBorder
109-
} else {
110-
Icons.Filled.Bookmark
111-
},
112-
contentDescription = if (isBookmarked) {
113-
stringResource(Res.string.remove_bookmark)
114-
} else {
115-
stringResource(Res.string.add_bookmark)
116-
},
117-
tint = MaterialTheme.colorScheme.primary,
84+
text = topic,
85+
style = MaterialTheme.typography.headlineMedium.copy(
86+
color = MaterialTheme.colorScheme.onPrimary,
87+
),
88+
maxLines = 1,
89+
overflow = TextOverflow.Ellipsis,
90+
)
91+
Spacer(modifier = Modifier.height(6.dp))
92+
KdText(
93+
modifier = Modifier,
94+
text = subtitle,
95+
style = MaterialTheme.typography.labelMedium.copy(
96+
color = MaterialTheme.colorScheme.onBackground,
97+
),
98+
maxLines = 1,
99+
overflow = TextOverflow.Ellipsis,
118100
)
119101
}
120-
},
121-
)
102+
103+
KdIconButton(
104+
modifier = Modifier,
105+
iconModifier = Modifier,
106+
onClick = onBookmarkClick,
107+
imageVector = if (isBookmarked) {
108+
Icons.Outlined.BookmarkBorder
109+
} else {
110+
Icons.Filled.Bookmark
111+
},
112+
contentDescription = if (isBookmarked) {
113+
stringResource(Res.string.remove_bookmark)
114+
} else {
115+
stringResource(Res.string.add_bookmark)
116+
},
117+
tint = MaterialTheme.colorScheme.primary,
118+
)
119+
}
120+
}
122121
}

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/topic/TopicScreenUI.kt

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,23 @@ fun TopicScreenUI(
2121
KdScaffold(
2222
modifier = Modifier,
2323
topBar = { TopicTopBar() },
24-
content = { paddingValues ->
25-
Column(
26-
modifier = Modifier
27-
.padding(horizontal = 16.dp)
28-
.padding(top = paddingValues.calculateTopPadding()),
29-
) {
30-
SearchField(
31-
searchQuery = searchQuery,
32-
onQueryChange = onQueryChange,
33-
)
34-
Spacer(modifier = Modifier.height(8.dp))
35-
TopicList(
36-
topics = topics,
37-
bookmarkedStates = bookmarkedStates,
38-
onBookmarkClick = onBookmarkClick,
39-
onTopicClick = onTopicClick,
40-
)
41-
}
42-
},
43-
)
24+
) { paddingValues ->
25+
Column(
26+
modifier = Modifier
27+
.padding(horizontal = 16.dp)
28+
.padding(top = paddingValues.calculateTopPadding()),
29+
) {
30+
SearchField(
31+
searchQuery = searchQuery,
32+
onQueryChange = onQueryChange,
33+
)
34+
Spacer(modifier = Modifier.height(8.dp))
35+
TopicList(
36+
topics = topics,
37+
bookmarkedStates = bookmarkedStates,
38+
onBookmarkClick = onBookmarkClick,
39+
onTopicClick = onTopicClick,
40+
)
41+
}
42+
}
4443
}

design-system/src/commonMain/kotlin/com/developersbreach/designsystem/components/AlertDialog.kt

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,46 @@ fun KdAlertDialog(
1919
text = text,
2020
confirmButton = confirmButton,
2121
)
22+
}
23+
24+
@Composable
25+
fun KdAlertDialog(
26+
onDismissRequest: () -> Unit,
27+
modifier: Modifier,
28+
title: String,
29+
description: String,
30+
buttonTitle: String,
31+
onButtonClick: () -> Unit,
32+
) {
33+
KdAlertDialog(
34+
onDismissRequest = onDismissRequest,
35+
title = {
36+
KdText(
37+
modifier = Modifier,
38+
text = title,
39+
)
40+
},
41+
text = {
42+
KdText(
43+
modifier = Modifier,
44+
text = description,
45+
)
46+
},
47+
confirmButton = {
48+
KdTextButton(
49+
modifier = Modifier,
50+
onClick = {
51+
onDismissRequest()
52+
onButtonClick()
53+
},
54+
content = {
55+
KdText(
56+
modifier = Modifier,
57+
text = buttonTitle,
58+
)
59+
},
60+
)
61+
},
62+
modifier = modifier,
63+
)
2264
}

design-system/src/commonMain/kotlin/com/developersbreach/designsystem/components/CircularProgressIndicator.kt

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
package com.developersbreach.designsystem.components
22

33
import androidx.compose.material3.CircularProgressIndicator
4+
import androidx.compose.material3.MaterialTheme
45
import androidx.compose.runtime.Composable
56
import androidx.compose.ui.Modifier
67
import androidx.compose.ui.graphics.Color
78

89
@Composable
910
fun KdCircularProgressIndicator(
1011
modifier: Modifier,
11-
color: Color,
12+
color: Color = MaterialTheme.colorScheme.onBackground,
1213
) {
1314
CircularProgressIndicator(
1415
modifier = modifier,

design-system/src/commonMain/kotlin/com/developersbreach/designsystem/components/Surface.kt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import androidx.compose.ui.graphics.Shape
99
@Composable
1010
fun KdSurface(
1111
modifier: Modifier,
12-
content: @Composable () -> Unit,
1312
color: Color,
1413
shape: Shape,
14+
content: @Composable () -> Unit,
1515
) {
1616
Surface(
1717
modifier = modifier,

0 commit comments

Comments
 (0)