migrated NotificationSettings fragment to NotificationSettingsScreen Composable

app/src/main/java/com/hieuwu/groceriesstore/presentation/notificationsettings/NotificationSettingsFragment.kt

@@ -8,73 +8,29 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import androidx.databinding.DataBindingUtil
+import androidx.compose.ui.platform.ComposeView
 import androidx.fragment.app.Fragment
-import androidx.fragment.app.viewModels
-import androidx.lifecycle.Lifecycle
-import androidx.lifecycle.lifecycleScope
-import androidx.lifecycle.repeatOnLifecycle
 import androidx.navigation.fragment.findNavController
 import com.hieuwu.groceriesstore.R
-import com.hieuwu.groceriesstore.databinding.FragmentNotificationSettingsBinding
 import dagger.hilt.android.AndroidEntryPoint
-import kotlinx.coroutines.launch
 
 
 @AndroidEntryPoint
 class NotificationSettingsFragment : Fragment() {
 
-    private lateinit var binding: FragmentNotificationSettingsBinding
-    private val viewModel: NotificationSettingsViewModel by viewModels()
-
     override fun onCreateView(
         inflater: LayoutInflater, container: ViewGroup?,
         savedInstanceState: Bundle?
     ): View? {
-        binding = DataBindingUtil.inflate<FragmentNotificationSettingsBinding>(
-            inflater, R.layout.fragment_notification_settings, container, false
-        )
-
-        binding.viewModel = viewModel
-        binding.lifecycleOwner = viewLifecycleOwner
-        setEventListeners()
-        setObservers()
-
-        return binding.root
-    }
-
-    private fun setObservers() {
-        viewLifecycleOwner.lifecycleScope.launch {
-            repeatOnLifecycle(Lifecycle.State.STARTED) {
-                launch {
-                    viewModel.user.collect { viewModel.initializeSwitchValue(it) }
-                }
-            }
-        }
-
-        viewModel.isOrderCreatedNotiEnabled.observe(viewLifecycleOwner) {}
-        viewModel.isDatabaseRefreshedNotiEnabled.observe(viewLifecycleOwner) {}
-        viewModel.isPromotionNotiEnabled.observe(viewLifecycleOwner) {}
-    }
-
-    private fun setEventListeners() {
-        binding.toolbar.setNavigationOnClickListener {
-            findNavController().navigateUp()
-        }
-
         createChannel(
             getString(R.string.order_created_notification_channel_id),
             getString(R.string.order_created_notification_channel_name)
         )
-
-        binding.toolbar.setOnMenuItemClickListener { item ->
-            when (item.itemId) {
-                R.id.action_save -> {
-                    // Update user data to backend
-                    viewModel.updateNotificationSettings()
-                    true
-                }
-                else -> false
+        return ComposeView(requireContext()).apply {
+            setContent {
+                NotificationSettingsScreen(
+                   onNavigateUp = { findNavController().navigateUp() }
+                )
             }
         }
     }

app/src/main/java/com/hieuwu/groceriesstore/presentation/notificationsettings/NotificationSettingsScreen.kt

@@ -0,0 +1,130 @@
+package com.hieuwu.groceriesstore.presentation.notificationsettings
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.text.ClickableText
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.hieuwu.groceriesstore.R
+import com.hieuwu.groceriesstore.presentation.notificationsettings.composables.NotificationSettingsItem
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun NotificationSettingsScreen(
+    onNavigateUp: () -> Unit,
+    viewModel: NotificationSettingsViewModel = hiltViewModel()
+) {
+    Scaffold(
+        topBar = {
+            CenterAlignedTopAppBar(
+                title = { Text(text = "Notifications", color = Color.White, fontWeight = FontWeight.Medium) },
+                actions = {
+                    ClickableText(
+                        text = AnnotatedString("SAVE"),
+                        style = TextStyle(color = Color.White, fontWeight = FontWeight.Medium),
+                        onClick = {
+                            viewModel.updateNotificationSettings()
+                        },
+                        modifier = Modifier.padding(horizontal = 8.dp)
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = { onNavigateUp() }) {
+                        Icon(
+                            imageVector = Icons.Filled.ArrowBack,
+                            contentDescription = null,
+                            tint = Color.White
+                        )
+                    }
+                },
+                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
+                    containerColor = colorResource(id = R.color.colorPrimary)
+                )
+            )
+        }
+    ) {
+        val user = viewModel.user.collectAsState().value
+
+        if (user != null)
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(it)
+            ) {
+                var isOrderCreatedNotiEnabled by remember { mutableStateOf(user.isOrderCreatedNotiEnabled) }
+                var isDataRefreshedNotiEnabled by remember { mutableStateOf(user.isDataRefreshedNotiEnabled) }
+                var isPromotionNotiEnabled by remember { mutableStateOf(user.isPromotionNotiEnabled) }
+                viewModel.initializeSwitchValue(
+                    user.copy(
+                        isOrderCreatedNotiEnabled = isOrderCreatedNotiEnabled,
+                        isDataRefreshedNotiEnabled = isDataRefreshedNotiEnabled,
+                        isPromotionNotiEnabled = isPromotionNotiEnabled
+                    )
+                )
+
+                LazyColumn(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                ) {
+                    item {
+                        NotificationSettingsItem(
+                            text = R.string.show_when_order_created,
+                            isChecked = isOrderCreatedNotiEnabled,
+                            onClick = {
+                                isOrderCreatedNotiEnabled = !isOrderCreatedNotiEnabled
+                            }
+                        )
+                    }
+                    item {
+                        NotificationSettingsItem(
+                            text = R.string.show_when_promotion_sent,
+                            isChecked = isPromotionNotiEnabled,
+                            onClick = {
+                                isPromotionNotiEnabled = !isPromotionNotiEnabled
+                            }
+                        )
+                    }
+                    item {
+                        NotificationSettingsItem(
+                            text = R.string.show_when_app_data_is_refreshed,
+                            isChecked = isDataRefreshedNotiEnabled,
+                            onClick = {
+                                isDataRefreshedNotiEnabled = !isDataRefreshedNotiEnabled
+                            }
+                        )
+                    }
+                }
+
+            }
+    }
+}
+
+@Preview
+@Composable
+fun NotificationSettingsScreenPreview() {
+    NotificationSettingsScreen(onNavigateUp = { })
+}

app/src/main/java/com/hieuwu/groceriesstore/presentation/notificationsettings/composables/NotificationSettingsItems.kt

@@ -0,0 +1,50 @@
+package com.hieuwu.groceriesstore.presentation.notificationsettings.composables
+
+import androidx.annotation.StringRes
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Switch
+import androidx.compose.material3.SwitchDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.hieuwu.groceriesstore.R
+
+@Composable
+fun NotificationSettingsItem(@StringRes text: Int, isChecked: Boolean, onClick: () -> Unit) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 8.dp, horizontal = 16.dp),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Text(text = stringResource(text))
+        Switch(
+            checked = isChecked, onCheckedChange = { onClick() }, colors = SwitchDefaults.colors(
+                checkedTrackColor = colorResource(id = R.color.colorPrimary)
+            )
+        )
+    }
+}
+
+@Preview
+@Composable
+fun NotificationSettingsItemPreview() {
+    NotificationSettingsItem(
+        text = R.string.show_when_order_created,
+        isChecked = true,
+        onClick = { }
+    )
+}