refactor #1532: profile fragment migrated to compose

PratyushSingh07 · PratyushSingh07 · commit 787d7e5dc36a · 2024-02-22T11:57:40.000+05:30
diff --git a/mifospay/src/main/java/org/mifos/mobilewallet/mifospay/home/presenter/ProfileViewModel.kt b/mifospay/src/main/java/org/mifos/mobilewallet/mifospay/home/presenter/ProfileViewModel.kt
@@ -12,6 +12,7 @@ import okhttp3.ResponseBody
 import org.mifos.mobilewallet.core.base.UseCase
 import org.mifos.mobilewallet.core.base.UseCaseHandler
 import org.mifos.mobilewallet.core.domain.usecase.client.FetchClientImage
+import org.mifos.mobilewallet.datastore.PreferencesHelper
 import org.mifos.mobilewallet.mifospay.data.local.LocalRepository
 import org.mifos.mobilewallet.mifospay.utils.DebugUtil
 import javax.inject.Inject
@@ -20,14 +21,28 @@ import javax.inject.Inject
 class ProfileViewModel @Inject constructor(
     private val mUsecaseHandler: UseCaseHandler,
     private val fetchClientImageUseCase: FetchClientImage,
-    private val localRepository: LocalRepository
+    private val localRepository: LocalRepository,
+    private val mPreferencesHelper: PreferencesHelper
 ) : ViewModel() {
 
     private val _bitmapImage = MutableStateFlow<Bitmap?>(null)
     val bitmapImage: StateFlow<Bitmap?> = _bitmapImage
 
+    private val _name = MutableStateFlow<String?>(null)
+    val name: StateFlow<String?> = _name
+
+    private val _email = MutableStateFlow<String?>(null)
+    val email: StateFlow<String?> = _email
+
+    private val _vpa = MutableStateFlow<String?>(null)
+    val vpa: StateFlow<String?> = _vpa
+
+    private val _mobile = MutableStateFlow<String?>(null)
+    val mobile: StateFlow<String?> = _mobile
+
     init {
         fetchClientImage()
+        fetchProfileDetails()
     }
 
     private fun fetchClientImage() {
@@ -41,14 +56,19 @@ class ProfileViewModel @Inject constructor(
                     }
 
                     override fun onError(message: String) {
-                        DebugUtil.log("image", message)                    }
+                        DebugUtil.log("image", message)
+                    }
                 })
         }
     }
 
-    /**
-     * convert the binary data from the ResponseBody into a Bitmap
-     */
+    private fun fetchProfileDetails() {
+        _name.value = mPreferencesHelper.fullName ?: "-"
+        _email.value = mPreferencesHelper.email ?: "-"
+        _vpa.value = mPreferencesHelper.clientVpa ?: "-"
+        _mobile.value = mPreferencesHelper.mobile ?: "-"
+    }
+
     private fun convertResponseToBitmap(responseBody: ResponseBody?): Bitmap? {
         return try {
             responseBody?.byteStream()?.use { inputStream ->
diff --git a/mifospay/src/main/java/org/mifos/mobilewallet/mifospay/home/ui/ProfileFragment.kt b/mifospay/src/main/java/org/mifos/mobilewallet/mifospay/home/ui/ProfileFragment.kt
@@ -11,21 +11,16 @@ import com.google.android.material.bottomsheet.BottomSheetBehavior
 import dagger.hilt.android.AndroidEntryPoint
 import org.mifos.mobilewallet.mifospay.base.BaseFragment
 import org.mifos.mobilewallet.mifospay.editprofile.ui.EditProfileActivity
-import org.mifos.mobilewallet.mifospay.home.presenter.ProfilePresenter
 import org.mifos.mobilewallet.mifospay.settings.ui.SettingsActivity
 import org.mifos.mobilewallet.mifospay.theme.MifosTheme
 import org.mifos.mobilewallet.mifospay.utils.Constants
-import javax.inject.Inject
 
 /**
  * Created by naman on 7/9/17.
  */
 @AndroidEntryPoint
 class ProfileFragment : BaseFragment() {
 
-    @Inject
-    lateinit var mPresenter: ProfilePresenter
-
     override fun onCreateView(
         inflater: LayoutInflater, container: ViewGroup?,
         savedInstanceState: Bundle?
diff --git a/mifospay/src/main/java/org/mifos/mobilewallet/mifospay/home/ui/ProfileItemCard.kt b/mifospay/src/main/java/org/mifos/mobilewallet/mifospay/home/ui/ProfileItemCard.kt
@@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -25,7 +26,7 @@ import androidx.compose.ui.unit.sp
 import org.mifos.mobilewallet.mifospay.ui.utility.Orientation
 
 @Composable
-fun ItemCard(
+fun ProfileItemCard(
     modifier: Modifier = Modifier,
     icon: Int,
     text: Int,
@@ -70,3 +71,12 @@ private fun ItemContent(icon: Int, text: Int, orientation: Orientation = Orienta
         style = TextStyle(fontSize = 18.sp, fontWeight = FontWeight.Medium)
     )
 }
+
+@Composable
+fun DetailItem(label: String, value: String) {
+    Text(
+        text = "$label: $value",
+        style = MaterialTheme.typography.bodyLarge,
+        modifier = Modifier.padding(bottom = 12.dp)
+    )
+}
diff --git a/mifospay/src/main/java/org/mifos/mobilewallet/mifospay/home/ui/ProfileScreen.kt b/mifospay/src/main/java/org/mifos/mobilewallet/mifospay/home/ui/ProfileScreen.kt
@@ -2,18 +2,26 @@ package org.mifos.mobilewallet.mifospay.home.ui
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowDropDown
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
 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.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
@@ -25,68 +33,101 @@ import org.mifos.mobilewallet.mifospay.designsystem.component.ProfileImage
 import org.mifos.mobilewallet.mifospay.home.presenter.ProfileViewModel
 import org.mifos.mobilewallet.mifospay.ui.utility.Orientation
 
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
 fun ProfileScreen(
     viewModel: ProfileViewModel = hiltViewModel(),
     onEditProfile: () -> Unit,
     onSettings: () -> Unit,
 ) {
     val bitmap by viewModel.bitmapImage.collectAsState()
+    val name = viewModel.name.collectAsState().value
+    val email = viewModel.email.collectAsState().value
+    val vpa = viewModel.vpa.collectAsState().value
+    val mobile = viewModel.mobile.collectAsState().value
+
+    var showDetails by remember { mutableStateOf(false) }
 
     Column(modifier = Modifier.fillMaxSize()) {
         ProfileImage(bitmap = bitmap)
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(top = 12.dp, bottom = 20.dp),
-            horizontalArrangement = Arrangement.Center
+                .padding(top = 12.dp, bottom = 8.dp),
+            horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically
         ) {
             Text(
-                text = "John Doe",
-                style = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Medium)
+                text = name.toString(),
+                style = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Medium),
             )
+            IconButton(onClick = { showDetails = !showDetails }) {
+                Icon(
+                    imageVector = Icons.Default.ArrowDropDown,
+                    tint = Color.Black,
+                    contentDescription = null
+                )
+            }
+        }
+
+        if (showDetails) {
+            Column(
+                modifier = Modifier.fillMaxWidth(),
+                verticalArrangement = Arrangement.Center,
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                DetailItem(label = "Email", value = email.toString())
+                DetailItem(label = "VPA", value = vpa.toString())
+                DetailItem(label = "Mobile", value = mobile.toString())
+            }
         }
 
         Column(
             modifier = Modifier
                 .fillMaxSize()
                 .padding(start = 24.dp, end = 24.dp)
         ) {
-            Row(
+            FlowRow(
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(bottom = 24.dp)
+                    .fillMaxWidth(),
+                maxItemsInEachRow = 2
             ) {
-                ItemCard(
-                    modifier = Modifier.weight(1f),
+                ProfileItemCard(
+                    modifier = Modifier
+                        .padding(end = 8.dp, bottom = 8.dp)
+                        .weight(1f),
                     icon = R.drawable.qrcode_black,
                     text = R.string.personal_qr_code,
-                    onClick = {},
-                    orientation = Orientation.VERTICAL
+                    onClick = {}
                 )
-                Spacer(modifier = Modifier.width(16.dp))
-                ItemCard(
-                    modifier = Modifier.weight(1f),
+
+                ProfileItemCard(
+                    modifier = Modifier
+                        .padding(start = 8.dp, bottom = 8.dp)
+                        .weight(1f),
                     icon = R.drawable.ic_bank,
                     text = R.string.link_bank_account,
-                    onClick = {},
-                    orientation = Orientation.VERTICAL
+                    onClick = {}
                 )
-            }
-            ItemCard(
-                icon = R.drawable.ic_contact,
-                text = R.string.edit_profile,
-                onClick = { onEditProfile.invoke() },
-                orientation = Orientation.HORIZONTAL
-            )
-            Spacer(modifier = Modifier.height(24.dp))
-            ItemCard(
-                icon = R.drawable.ic_setting,
-                text = R.string.settings,
-                onClick = { onSettings.invoke() },
-                orientation = Orientation.HORIZONTAL
-            )
 
+                ProfileItemCard(
+                    modifier = Modifier
+                        .padding(top = 8.dp, bottom = 8.dp),
+                    icon = R.drawable.ic_contact,
+                    text = R.string.edit_profile,
+                    onClick = { onEditProfile.invoke() },
+                    orientation = Orientation.HORIZONTAL
+                )
+
+                ProfileItemCard(
+                    modifier = Modifier
+                        .padding(top = 8.dp),
+                    icon = R.drawable.ic_setting,
+                    text = R.string.settings,
+                    onClick = { onSettings.invoke() },
+                    orientation = Orientation.HORIZONTAL
+                )
+            }
         }
     }
 }
