refactor profile and add setings feature

stslex · Apr 9, 2024 · 8273e5f · 8273e5f
1 parent 9264e16
commit 8273e5f
Show file tree

Hide file tree

Showing 29 changed files with 620 additions and 67 deletions.
diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts
@@ -53,6 +53,7 @@ kotlin {
             implementation(project(":feature:auth"))
             implementation(project(":feature:follower"))
             implementation(project(":feature:favourite"))
+            implementation(project(":feature:settings"))
         }
     }
 }
@@ -100,6 +101,9 @@ android {
         debugImplementation(libs.compose.ui.tooling)
     }
 }
+dependencies {
+    implementation(project(":feature:settings"))
+}
 
 compose.desktop {
     application {

diff --git a/composeApp/src/commonMain/kotlin/App.kt b/composeApp/src/commonMain/kotlin/App.kt
@@ -11,6 +11,7 @@ import com.stslex.feature.film_feed.di.featureFeedModule
 import com.stslex.feature.follower.di.featureFollowerModule
 import com.stslex.feature.match_feed.di.featureMatchFeedModule
 import com.stslex.feature.profile.di.featureProfileModule
+import com.stslex.feature.settings.di.featureSettingsModule
 import di.appModule
 import org.koin.compose.KoinApplication
 import org.koin.core.KoinApplication
@@ -45,7 +46,8 @@ private fun KoinApplication.setupCommonModules() {
             featureMatchFeedModule,
             featureAuthModule,
             featureFollowerModule,
-            featureFavouriteModule
+            featureFavouriteModule,
+            featureSettingsModule
         )
     )
 }
diff --git a/composeApp/src/commonMain/kotlin/navigator/AppNavigatorImpl.kt b/composeApp/src/commonMain/kotlin/navigator/AppNavigatorImpl.kt
@@ -9,6 +9,7 @@ import com.stslex.feature.film.ui.FilmScreen
 import com.stslex.feature.follower.navigation.FollowerScreenArgs
 import com.stslex.feature.follower.ui.FollowerScreen
 import com.stslex.feature.match_feed.ui.MatchFeedScreen
+import com.stslex.feature.settings.ui.SettingsScreen
 import main_screen.MainScreen
 
 class AppNavigatorImpl : AppNavigator {
@@ -40,21 +41,17 @@ class AppNavigatorImpl : AppNavigator {
             is AppScreen.Film -> navigator.push(FilmScreen(screen.id))
             AppScreen.MatchFeed -> navigator.push(MatchFeedScreen)
             is AppScreen.Favourite -> navigator.push(FavouriteScreen(uuid = screen.uuid))
-            is AppScreen.Followers -> navigator.push(
-                FollowerScreen(
-                    args = FollowerScreenArgs.Follower(
-                        uuid = screen.uuid
-                    )
-                )
-            )
-
-            is AppScreen.Following -> navigator.push(
-                FollowerScreen(
-                    args = FollowerScreenArgs.Following(
-                        uuid = screen.uuid
-                    )
-                )
-            )
+            is AppScreen.Followers -> navToFollowers(screen.uuid)
+            is AppScreen.Following -> navToFollowing(screen.uuid)
+            AppScreen.Settings -> navigator.push(SettingsScreen)
         }
     }
+
+    private fun navToFollowing(uuid: String) {
+        navigator.push(FollowerScreen(args = FollowerScreenArgs.Following(uuid = uuid)))
+    }
+
+    private fun navToFollowers(uuid: String) {
+        navigator.push(FollowerScreen(args = FollowerScreenArgs.Follower(uuid = uuid)))
+    }
 }
diff --git a/core/ui/src/commonMain/kotlin/com/stslex/core/ui/components/AppToolbar.kt b/core/ui/src/commonMain/kotlin/com/stslex/core/ui/components/AppToolbar.kt
@@ -0,0 +1,61 @@
+package com.stslex.core.ui.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.KeyboardArrowLeft
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import com.stslex.core.ui.theme.AppDimension
+
+@Composable
+fun AppToolbar(
+    title: String,
+    modifier: Modifier = Modifier,
+    onBackClick: (() -> Unit)? = null,
+    actionIcon: @Composable (() -> Unit)? = null,
+    isActionVisible: Boolean = actionIcon != null,
+) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(color = MaterialTheme.colorScheme.background)
+            .padding(horizontal = AppDimension.Padding.medium),
+    ) {
+        if (onBackClick != null) {
+            IconButton(
+                modifier = Modifier.align(Alignment.CenterStart),
+                onClick = onBackClick,
+            ) {
+                Icon(
+                    imageVector = Icons.AutoMirrored.Filled.KeyboardArrowLeft,
+                    contentDescription = "Back",
+                    tint = MaterialTheme.colorScheme.onBackground,
+                )
+            }
+        }
+        Text(
+            modifier = Modifier.align(Alignment.Center),
+            text = title,
+            style = MaterialTheme.typography.headlineSmall,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+            textAlign = TextAlign.Center
+        )
+        if (isActionVisible && actionIcon != null)
+            Box(
+                modifier = Modifier.align(Alignment.CenterEnd)
+            ) {
+                actionIcon()
+            }
+    }
+}
diff --git a/core/ui/src/commonMain/kotlin/com/stslex/core/ui/navigation/AppScreen.kt b/core/ui/src/commonMain/kotlin/com/stslex/core/ui/navigation/AppScreen.kt
@@ -12,6 +12,8 @@ sealed interface AppScreen {
 
     data object Auth : AppScreen
 
+    data object Settings : AppScreen
+
     data class Favourite(
         val uuid: String
     ) : AppScreen

diff --git a/.../profile/src/commonMain/kotlin/com/stslex/feature/profile/navigation/ProfileRouterImpl.kt b/.../profile/src/commonMain/kotlin/com/stslex/feature/profile/navigation/ProfileRouterImpl.kt
@@ -13,6 +13,8 @@ class ProfileRouterImpl(
     ) {
         when (event) {
             Navigation.LogIn -> navigator.navigate(AppScreen.Auth)
+            Navigation.Back -> navigator.navigate(AppScreen.Back)
+            Navigation.Settings -> navigator.navigate(AppScreen.Settings)
             is Navigation.Favourite -> navigator.navigate(AppScreen.Favourite(uuid = event.uuid))
             is Navigation.Following -> navigator.navigate(AppScreen.Following(uuid = event.uuid))
             is Navigation.Followers -> navigator.navigate(AppScreen.Followers(uuid = event.uuid))

diff --git a/feature/profile/src/commonMain/kotlin/com/stslex/feature/profile/ui/ProfileScreen.kt b/feature/profile/src/commonMain/kotlin/com/stslex/feature/profile/ui/ProfileScreen.kt
@@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.material3.Button
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.SnackbarHostState
@@ -73,9 +72,7 @@ private fun ProfileScreen(
     modifier: Modifier = Modifier,
 ) {
     BoxWithConstraints(
-        modifier = modifier
-            .fillMaxSize()
-            .systemBarsPadding(),
+        modifier = modifier.fillMaxSize(),
     ) {
         when (val screen = state.screen) {
             is ProfileScreenState.Content -> ProfileScreenContent(
@@ -89,14 +86,14 @@ private fun ProfileScreen(
                 repeatLastAction = { onAction(Action.RepeatLastAction) }
             )
 
-            ProfileScreenState.Shimmer -> ProfileScreenShinner()
+            ProfileScreenState.Shimmer -> ProfileScreenShimmer()
         }
         AppSnackbarHost(snackbarHostState)
     }
 }
 
 @Composable
-internal fun ProfileScreenShinner(modifier: Modifier = Modifier) {
+internal fun ProfileScreenShimmer(modifier: Modifier = Modifier) {
     Box(
         modifier = modifier.fillMaxSize(),
         contentAlignment = Alignment.Center

diff --git a/...ile/src/commonMain/kotlin/com/stslex/feature/profile/ui/components/ProfileLogoutButton.kt b/...ile/src/commonMain/kotlin/com/stslex/feature/profile/ui/components/ProfileLogoutButton.kt
diff --git a/...le/src/commonMain/kotlin/com/stslex/feature/profile/ui/components/ProfileScreenContent.kt b/...le/src/commonMain/kotlin/com/stslex/feature/profile/ui/components/ProfileScreenContent.kt
@@ -1,42 +1,38 @@
 package com.stslex.feature.profile.ui.components
 
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import com.stslex.feature.profile.ui.store.ProfileScreenState
-import com.stslex.feature.profile.ui.store.ProfileStoreComponent
+import com.stslex.feature.profile.ui.store.ProfileStoreComponent.Action
 
 @Composable
 internal fun ProfileScreenContent(
     state: ProfileScreenState.Content,
-    onAction: (ProfileStoreComponent.Action) -> Unit,
+    onAction: (Action) -> Unit,
     modifier: Modifier = Modifier,
 ) {
     Box(modifier = modifier.fillMaxSize()) {
-        Column(
-            modifier = Modifier.align(Alignment.Center),
-            verticalArrangement = Arrangement.Center,
-        ) {
-            ProfileAvatar(avatar = state.data.avatar)
+        Column(modifier = Modifier.fillMaxSize()) {
+            ProfileScreenToolbar(
+                nickname = state.data.username,
+                isCurrentUser = state.data.isCurrentUser,
+                onSettingsClick = { onAction(Action.SettingsClick) },
+                onBackClick = { onAction(Action.BackButtonClick) }
+            )
 
-            if (state.data.isCurrentUser) {
-                ProfileLogoutButton(
-                    onClick = { onAction(ProfileStoreComponent.Action.Logout) },
-                )
-            }
+            ProfileAvatar(avatar = state.data.avatar)
 
             ProfileInfo(
                 username = state.data.username,
                 favouriteCount = state.data.favouriteCount,
                 followingCount = state.data.following,
                 followersCount = state.data.followers,
-                onFavouriteClick = { onAction(ProfileStoreComponent.Action.FavouriteClick) },
-                onFollowingClick = { onAction(ProfileStoreComponent.Action.FollowingClick) },
-                onFollowersClick = { onAction(ProfileStoreComponent.Action.FollowersClick) },
+                onFavouriteClick = { onAction(Action.FavouriteClick) },
+                onFollowingClick = { onAction(Action.FollowingClick) },
+                onFollowersClick = { onAction(Action.FollowersClick) },
             )
         }
 

diff --git a/...le/src/commonMain/kotlin/com/stslex/feature/profile/ui/components/ProfileScreenToolbar.kt b/...le/src/commonMain/kotlin/com/stslex/feature/profile/ui/components/ProfileScreenToolbar.kt
@@ -0,0 +1,37 @@
+package com.stslex.feature.profile.ui.components
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Settings
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import com.stslex.core.ui.components.AppToolbar
+
+@Composable
+fun ProfileScreenToolbar(
+    nickname: String,
+    isCurrentUser: Boolean,
+    onSettingsClick: () -> Unit,
+    onBackClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    AppToolbar(
+        modifier = modifier,
+        title = nickname,
+        onBackClick = onBackClick,
+        isActionVisible = isCurrentUser,
+        actionIcon = {
+            IconButton(
+                onClick = onSettingsClick
+            ) {
+                Icon(
+                    imageVector = Icons.Default.Settings,
+                    contentDescription = "Settings",
+                    tint = MaterialTheme.colorScheme.onBackground,
+                )
+            }
+        }
+    )
+}
diff --git a/feature/profile/src/commonMain/kotlin/com/stslex/feature/profile/ui/store/ProfileStore.kt b/feature/profile/src/commonMain/kotlin/com/stslex/feature/profile/ui/store/ProfileStore.kt
@@ -33,6 +33,8 @@ class ProfileStore(
             is Action.FavouriteClick -> actionFavouriteClick()
             is Action.FollowingClick -> actionFollowingClick()
             is Action.FollowersClick -> actionFollowersClick()
+            is Action.SettingsClick -> actionSettingsClick()
+            is Action.BackButtonClick -> actionBackClick()
         }
     }
 
@@ -127,4 +129,12 @@ class ProfileStore(
             }
         )
     }
+
+    private fun actionSettingsClick() {
+        navigate(Navigation.Settings)
+    }
+
+    private fun actionBackClick() {
+        navigate(Navigation.Back)
+    }
 }
diff --git a/...rofile/src/commonMain/kotlin/com/stslex/feature/profile/ui/store/ProfileStoreComponent.kt b/...rofile/src/commonMain/kotlin/com/stslex/feature/profile/ui/store/ProfileStoreComponent.kt
@@ -41,6 +41,10 @@ interface ProfileStoreComponent : Store {
         data object FollowingClick : Action
 
         data object FollowersClick : Action
+
+        data object SettingsClick : Action
+
+        data object BackButtonClick : Action
     }
 
     @Stable
@@ -65,5 +69,9 @@ interface ProfileStoreComponent : Store {
         data class Followers(
             val uuid: String
         ) : Navigation
+
+        data object Back : Navigation
+
+        data object Settings : Navigation
     }
 }
diff --git a/feature/settings/.gitignore b/feature/settings/.gitignore
@@ -0,0 +1 @@
+/build