fix: avatar in GlideImage fixed

PeriodPals · Oct 15, 2024 · 9e746c8 · 9e746c8
1 parent 0f47b10
commit 9e746c8
Showing 1 changed file with 29 additions and 59 deletions.
diff --git a/app/src/main/java/com/android/periodpals/ui/profile/ProfileScreen.kt b/app/src/main/java/com/android/periodpals/ui/profile/ProfileScreen.kt
@@ -1,110 +1,80 @@
 package com.android.periodpals.ui.profile
 
-import androidx.compose.foundation.Image
+// import androidx.compose.ui.tooling.preview.Preview
+import android.net.Uri
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.content.MediaType.Companion.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-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.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 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.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.testTag
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 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.dp
 import androidx.compose.ui.unit.sp
 import com.android.periodpals.R
 import com.android.periodpals.ui.navigation.TopAppBar
 import com.bumptech.glide.integration.compose.ExperimentalGlideComposeApi
+import com.bumptech.glide.integration.compose.GlideImage
 
-@Preview
+@OptIn(ExperimentalGlideComposeApi::class)
+// @Preview
 @Composable
 fun ProfileScreen() {
   // Declare and remember the profile image URI
-  /*var profileImageUri by remember {
+  var profileImageUri by remember {
     mutableStateOf<Uri?>(
         Uri.parse("android.resource://com.android.periodpals/${R.drawable.generic_avatar}"))
-  }*/
+  }
 
   Scaffold(
-      modifier = Modifier.testTag("profileScreen"),
+      modifier = Modifier.fillMaxSize().testTag("profileScreen"),
       topBar = { TopAppBar("Your Profile") },
-      //        bottomBar = { BottomNavigationMenu(
-      //            onTabSelect = { route -> navigationActions.navigateTo(route) },
-      //            tabList = LIST_TOP_LEVEL_DESTINATION,
-      //            selectedItem = navigationActions.currentRoute()
-      //        ) },
       content = { padding ->
         Column(
-            modifier = Modifier.padding(padding).padding(16.dp),
+            modifier = Modifier.padding(padding).padding(40.dp),
             verticalArrangement = Arrangement.spacedBy(16.dp),
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
-          ProfileAvatar(/*profileImageUri*/ ) // Display the user's profile avatar.
-          Spacer(modifier = Modifier.height(16.dp))
+          // Display the user's profile image.
+          GlideImage(
+              model = profileImageUri,
+              contentDescription = "Avatar Imagee",
+              contentScale = ContentScale.Crop,
+              modifier =
+                  Modifier.size(190.dp)
+                      .testTag("profileAvatar")
+                      .background(
+                          color = MaterialTheme.colorScheme.background, shape = CircleShape),
+          )
+
           ProfileName() // Display the user's profile name.
-          Spacer(modifier = Modifier.height(8.dp))
           ProfileDetails() // Display additional details like description and reviews.
         }
       })
 }
 
-@OptIn(ExperimentalGlideComposeApi::class)
-@Composable
-private fun ProfileAvatar(/*profileImageUri: Any*/ ) {
-
-  Box(
-      modifier =
-          Modifier.size(180.dp) // Set the size of the avatar container.
-              .background(
-                  color = MaterialTheme.colorScheme.background, // Set background color.
-                  shape = RoundedCornerShape(90.dp) // Rounded shape with a radius of 90dp (circle).
-                  ),
-      contentAlignment = Alignment.Center // Center the avatar image inside the box.
-      ) {
-        /*GlideImage(
-            model = profileImageUri,
-            contentDescription = "Avatar Imagee",
-            contentScale = ContentScale.Crop,
-            modifier =
-                Modifier.size(124.dp) // Set size of the image
-                    .background(
-                        color = MaterialTheme.colorScheme.background, // Background color
-                        shape = CircleShape // Circular shape
-                        ),
-        )*/
-
-        Image(
-            painter =
-                painterResource(id = R.drawable.generic_avatar), // Use a placeholder avatar image.
-            contentDescription = "Avatar Image",
-            modifier =
-                Modifier.fillMaxSize() // Fill the size of the box.
-                    .testTag("profileAvatar"),
-            contentScale = ContentScale.Crop // Crop the image to fit the box.
-            )
-      }
-}
-
 @Composable
 private fun ProfileName() {
   Text(
@@ -118,17 +88,17 @@ private fun ProfileName() {
 @Composable
 private fun ProfileDetails() {
   Column(
-      modifier = Modifier.fillMaxWidth().padding(8.dp),
+      modifier = Modifier.fillMaxWidth(),
       verticalArrangement = Arrangement.spacedBy(8.dp) // Space items by 8dp vertically.
       ) {
         // Box for the description.
-        Text(text = "Description", fontSize = 20.sp)
+        Text(text = "Description", fontSize = 20.sp, modifier = Modifier.padding(vertical = 8.dp))
         ProfileInfoBox(text = "", minHeight = 100.dp, Modifier.testTag("Description"))
         Text(
             text = "New user / Number of interactions",
             fontSize = 16.sp,
             color = Color(101, 116, 193))
-        Text(text = "Reviews", fontSize = 20.sp)
+        Text(text = "Reviews", fontSize = 20.sp, modifier = Modifier.padding(vertical = 8.dp))
         // Boxes for reviews.
         ProfileInfoBox(text = "", minHeight = 20.dp, Modifier.testTag("reviewOne"))
         ProfileInfoBox(text = "", minHeight = 20.dp, Modifier.testTag("reviewTwo"))