Move screens on compose

app/build.gradle

@@ -3,6 +3,7 @@ plugins {
     alias(libs.plugins.kotlinAndroid)
     alias(libs.plugins.kotlinxSerialization)
     alias(libs.plugins.kapt)
+    alias(libs.plugins.compose.compiler)
 }
 
 android {
@@ -34,7 +35,16 @@ android {
     }
     buildFeatures {
         viewBinding true
+        compose true
     }
+    composeOptions {
+        kotlinCompilerExtensionVersion = "1.5.15"
+    }
+}
+
+composeCompiler {
+    reportsDestination = layout.buildDirectory.dir("compose_compiler")
+    metricsDestination = layout.buildDirectory.dir("compose_compiler")
 }
 
 dependencies {
@@ -64,8 +74,20 @@ dependencies {
     implementation libs.androidx.datastore.preferences
 
     implementation libs.dagger
+    implementation libs.androidx.compose.material3
     kapt libs.daggerCompiler
 
+    // Compose
+    def composeBom = libs.androidx.compose.bom
+    implementation composeBom
+    androidTestImplementation composeBom
+    implementation libs.androidx.runtime
+    implementation 'androidx.compose.material3:material3'
+    implementation 'androidx.compose.ui:ui-tooling-preview'
+    debugImplementation 'androidx.compose.ui:ui-tooling'
+    implementation("io.coil-kt.coil3:coil-compose:3.3.0")
+    implementation("io.coil-kt.coil3:coil-network-okhttp:3.0.0")
+
     testImplementation libs.junit
     androidTestImplementation libs.androidx.test.ext.junit
     androidTestImplementation libs.espresso.core

app/src/main/java/ru/otus/marketsample/Theme.kt

@@ -0,0 +1 @@
+package ru.otus.marketsample

app/src/main/java/ru/otus/marketsample/details/feature/DetailsFragment.kt

@@ -3,27 +3,17 @@ package ru.otus.marketsample.details.feature
 import android.content.Context
 import android.os.Bundle
 import android.view.LayoutInflater
-import android.view.View
 import android.view.ViewGroup
-import android.widget.Toast
+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 coil.load
-import kotlinx.coroutines.launch
 import ru.otus.common.di.findDependencies
+import ru.otus.marketsample.details.feature.compose.DetailsScreenRoute
 import ru.otus.marketsample.details.feature.di.DaggerDetailsComponent
-import ru.otus.marketsample.R
-import ru.otus.marketsample.databinding.FragmentDetailsBinding
 import javax.inject.Inject
 
 class DetailsFragment : Fragment() {
 
-    private var _binding: FragmentDetailsBinding? = null
-    private val binding get() = _binding!!
-
     @Inject
     lateinit var factory: DetailsViewModelFactory
 
@@ -48,78 +38,11 @@ class DetailsFragment : Fragment() {
         inflater: LayoutInflater,
         container: ViewGroup?,
         savedInstanceState: Bundle?
-    ): View {
-        _binding = FragmentDetailsBinding.inflate(inflater, container, false)
-        return binding.root
-    }
-
-    override fun onDestroyView() {
-        super.onDestroyView()
-        _binding = null
-    }
-
-    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        super.onViewCreated(view, savedInstanceState)
-        subscribeUI()
-    }
-
-    private fun subscribeUI() {
-        viewLifecycleOwner.lifecycleScope.launch {
-            repeatOnLifecycle(Lifecycle.State.STARTED) {
-                launch {
-                    viewModel.state.collect { state ->
-                        when {
-                            state.isLoading -> showLoading()
-                            state.hasError -> {
-                                Toast.makeText(
-                                    requireContext(),
-                                    "Error wile loading data",
-                                    Toast.LENGTH_SHORT
-                                ).show()
-
-                                viewModel.errorHasShown()
-                            }
-
-                            else -> showProduct(detailsState = state.detailsState)
-                        }
-                    }
-                }
+    ): ComposeView {
+        return ComposeView(context = requireContext()).apply {
+            setContent {
+                DetailsScreenRoute(viewModel = viewModel)
             }
         }
     }
-
-    private fun showLoading() {
-        hideAll()
-        binding.progress.visibility = View.VISIBLE
-    }
-
-    private fun showProduct(detailsState: DetailsState) {
-        hideAll()
-        binding.image.load(detailsState.image)
-        binding.image.visibility = View.VISIBLE
-
-        binding.name.text = detailsState.name
-        binding.name.visibility = View.VISIBLE
-
-        binding.price.text = getString(R.string.price_with_arg, detailsState.price)
-        binding.price.visibility = View.VISIBLE
-
-        if (detailsState.hasDiscount) {
-            binding.promo.visibility = View.VISIBLE
-            binding.promo.text = detailsState.discount
-        } else {
-            binding.promo.visibility = View.GONE
-        }
-
-        binding.addToCart.visibility = View.VISIBLE
-    }
-
-    private fun hideAll() {
-        binding.progress.visibility = View.GONE
-        binding.image.visibility = View.GONE
-        binding.name.visibility = View.GONE
-        binding.price.visibility = View.GONE
-        binding.progress.visibility = View.GONE
-        binding.addToCart.visibility = View.GONE
-    }
 }

app/src/main/java/ru/otus/marketsample/details/feature/compose/DetailsScreen.kt

@@ -0,0 +1,126 @@
+package ru.otus.marketsample.details.feature.compose
+
+import android.widget.Toast
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Button
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import coil3.compose.AsyncImage
+import ru.otus.marketsample.details.feature.DetailsScreenState
+import ru.otus.marketsample.details.feature.DetailsState
+import ru.otus.marketsample.details.feature.DetailsViewModel
+import ru.otus.marketsample.products.feature.ui.ProductState
+import ru.otus.marketsample.products.feature.ui.compose.components.DiscountWidget
+
+@Composable
+fun DetailsScreenRoute(
+    viewModel: DetailsViewModel
+) {
+    val state by viewModel.state.collectAsStateWithLifecycle()
+    DetailsScreen(
+        state = state,
+        onError = viewModel::errorHasShown
+    )
+}
+
+@Composable
+private fun DetailsScreen(
+    state: DetailsScreenState,
+    onError: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    val context = LocalContext.current
+    if (state.hasError) {
+        Toast.makeText(
+            context,
+            "Error wile loading data",
+            Toast.LENGTH_SHORT
+        ).show()
+        onError()
+    }
+    Column(
+        modifier = modifier
+    ) {
+        AsyncImage(
+            model = state.detailsState.image,
+            contentDescription = state.detailsState.name,
+            modifier = Modifier
+                .height(300.dp)
+                .fillMaxWidth()
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            horizontalAlignment = Alignment.End
+        ) {
+            Text(
+                text = state.detailsState.name,
+                fontSize = 24.sp,
+                color = Color.Black,
+                modifier = Modifier.fillMaxWidth(),
+                textAlign = TextAlign.Start
+            )
+            if (state.detailsState.hasDiscount) {
+                DiscountWidget(discount = state.detailsState.discount)
+            }
+            Text(
+                text = state.detailsState.price,
+                fontSize = 18.sp,
+                color = Color(0xFF6200EE),
+                modifier = Modifier.padding(vertical = 14.dp)
+            )
+
+            Button(
+                onClick = { /* TODO */ },
+                modifier = Modifier.padding(top = 10.dp)
+            ) {
+                Text(text = "Add to cart", fontSize = 18.sp)
+            }
+        }
+    }
+
+}
+
+
+@Preview
+@Composable
+private fun DetailsScreenPreview() {
+    val product = ProductState(
+        id = "1",
+        name = "Вафли с жидким шоколадом",
+        image = "",
+        price = "250.00 руб",
+        hasDiscount = true,
+        discount = "7%"
+    )
+    val state = DetailsScreenState(
+        isLoading = false,
+        detailsState = DetailsState(
+            name = product.name,
+            image = product.image,
+            price = product.price,
+            discount = product.discount,
+            hasDiscount = product.hasDiscount
+        ),
+        hasError = false,
+        errorProvider = { "" }
+    )
+    DetailsScreen(
+        state = state,
+        onError = {}
+    )
+}