Adding UI for Pinned Projects in profile screen

Debanshu777 · Jun 17, 2022 · c182012 · c182012
1 parent dae2cb3
commit c182012
Show file tree

Hide file tree

Showing 5 changed files with 343 additions and 198 deletions.
diff --git a/.idea/deploymentTargetDropDown.xml b/.idea/deploymentTargetDropDown.xml
diff --git a/app/src/main/java/com/debanshu777/compose_github/network/model/PinnedUserProject.kt b/app/src/main/java/com/debanshu777/compose_github/network/model/PinnedUserProject.kt
diff --git a/app/src/main/java/com/debanshu777/compose_github/ui/feature_profile/ProfileScreen.kt b/app/src/main/java/com/debanshu777/compose_github/ui/feature_profile/ProfileScreen.kt
@@ -1,39 +1,17 @@
 package com.debanshu777.compose_github.ui.feature_profile
 
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-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.foundation.shape.CircleShape
-import androidx.compose.material.Icon
-import androidx.compose.material.Text
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.AccountBox
-import androidx.compose.material.icons.outlined.Create
-import androidx.compose.material.icons.outlined.Email
-import androidx.compose.material.icons.outlined.Info
-import androidx.compose.material.icons.outlined.LocationOn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.ExperimentalUnitApi
-import androidx.compose.ui.unit.TextUnit
-import androidx.compose.ui.unit.TextUnitType
-import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
-import coil.compose.AsyncImage
 import com.debanshu777.compose_github.network.dataSource.GitHubViewModel
+import com.debanshu777.compose_github.ui.feature_profile.components.ProfileDetailsScreen
+import com.debanshu777.compose_github.ui.feature_profile.components.UserPinnedProjectSection
 
 @OptIn(ExperimentalUnitApi::class)
 @Composable
@@ -42,157 +20,9 @@ fun ProfileScreen(viewModel: GitHubViewModel = hiltViewModel()) {
     val userPinnedProject by viewModel.userPinnedState.observeAsState()
     Column(
         modifier = Modifier
-            .fillMaxSize()
-            .padding(15.dp),
-        horizontalAlignment = Alignment.Start
+            .verticalScroll(rememberScrollState())
     ) {
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(top = 15.dp),
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.SpaceBetween
-        ) {
-            AsyncImage(
-                modifier = Modifier
-                    .height(120.dp)
-                    .width(120.dp)
-                    .clip(CircleShape),
-                model = profileData?.data?.avatarUrl,
-                contentScale = ContentScale.Fit,
-                contentDescription = "User Avatar"
-            )
-            Row(
-                modifier = Modifier.fillMaxWidth(),
-                verticalAlignment = Alignment.CenterVertically,
-                horizontalArrangement = Arrangement.Center
-            ) {
-                Column {
-                    Text(
-                        text = "Followers",
-                        fontSize = TextUnit(value = 16F, type = TextUnitType.Sp),
-                    )
-                    Text(
-                        text = "${profileData?.data?.followers ?: "0"}",
-                        fontWeight = FontWeight.Bold,
-                        fontSize = TextUnit(value = 20F, type = TextUnitType.Sp),
-                    )
-                }
-                Spacer(modifier = Modifier.width(14.dp))
-                Column {
-                    Text(
-                        text = "Following",
-                        fontSize = TextUnit(value = 16F, type = TextUnitType.Sp),
-                    )
-                    Text(
-                        text = "${profileData?.data?.following ?: "0"}",
-                        fontWeight = FontWeight.Bold,
-                        fontSize = TextUnit(value = 20F, type = TextUnitType.Sp),
-                    )
-                }
-            }
-        }
-        Text(
-            text = profileData?.data?.name ?: "NA",
-            maxLines = 1,
-            overflow = TextOverflow.Ellipsis,
-            fontWeight = FontWeight.W300,
-            fontSize = TextUnit(value = 24F, type = TextUnitType.Sp),
-        )
-        Text(
-            text = "@${profileData?.data?.login ?: "NA"}",
-            maxLines = 1,
-            overflow = TextOverflow.Ellipsis,
-            fontWeight = FontWeight.Bold,
-            fontSize = TextUnit(value = 16F, type = TextUnitType.Sp),
-        )
-        Spacer(modifier = Modifier.height(5.dp))
-        profileData?.data?.bio.let {
-            Text(
-                text = profileData?.data?.bio ?: "",
-                maxLines = 3,
-                overflow = TextOverflow.Ellipsis,
-                fontSize = TextUnit(value = 14F, type = TextUnitType.Sp),
-            )
-        }
-        Spacer(modifier = Modifier.height(5.dp))
-        profileData?.data?.company.let {
-            Row(
-                verticalAlignment = Alignment.CenterVertically
-            ) {
-                Icon(Icons.Outlined.AccountBox, contentDescription = "Icon Company")
-                Spacer(modifier = Modifier.width(7.dp))
-                Text(
-                    text = profileData?.data?.company ?: "NA",
-                    maxLines = 1,
-                    fontWeight = FontWeight.W500,
-                    overflow = TextOverflow.Ellipsis,
-                    fontSize = TextUnit(value = 14F, type = TextUnitType.Sp),
-                )
-            }
-        }
-        profileData?.data?.location.let {
-            Row(
-                verticalAlignment = Alignment.CenterVertically
-            ) {
-                Icon(Icons.Outlined.LocationOn, contentDescription = "Icon Location")
-                Spacer(modifier = Modifier.width(7.dp))
-                Text(
-                    text = profileData?.data?.location ?: "NA",
-                    maxLines = 1,
-                    fontWeight = FontWeight.W500,
-                    overflow = TextOverflow.Ellipsis,
-                    fontSize = TextUnit(value = 14F, type = TextUnitType.Sp),
-                )
-            }
-        }
-        profileData?.data?.email.let {
-            Row(
-                verticalAlignment = Alignment.CenterVertically
-            ) {
-                Icon(Icons.Outlined.Email, contentDescription = "Icon Company")
-                Spacer(modifier = Modifier.width(7.dp))
-                Text(
-                    text = profileData?.data?.email ?: "NA",
-                    maxLines = 1,
-                    fontWeight = FontWeight.W500,
-                    overflow = TextOverflow.Ellipsis,
-                    fontSize = TextUnit(value = 14F, type = TextUnitType.Sp),
-                )
-            }
-        }
-        profileData?.data?.blog.let {
-            Row(
-                verticalAlignment = Alignment.CenterVertically
-            ) {
-                Icon(Icons.Outlined.Create, contentDescription = "Icon Company")
-                Spacer(modifier = Modifier.width(7.dp))
-                Text(
-                    text = profileData?.data?.blog ?: "NA",
-                    maxLines = 1,
-                    fontWeight = FontWeight.W500,
-                    overflow = TextOverflow.Ellipsis,
-                    fontSize = TextUnit(value = 14F, type = TextUnitType.Sp),
-                )
-            }
-        }
-        profileData?.data?.twitterUsername.let {
-            Row(
-                verticalAlignment = Alignment.CenterVertically
-            ) {
-                Icon(Icons.Outlined.Info, contentDescription = "Icon Company")
-                Spacer(modifier = Modifier.width(7.dp))
-                Text(
-                    text = "@${profileData?.data?.twitterUsername ?: "NA"}",
-                    maxLines = 1,
-                    fontWeight = FontWeight.W500,
-                    overflow = TextOverflow.Ellipsis,
-                    fontSize = TextUnit(value = 14F, type = TextUnitType.Sp),
-                )
-            }
-        }
-        userPinnedProject?.data.let {
-            Text(text = userPinnedProject?.data.toString())
-        }
+        ProfileDetailsScreen(profileData)
+        UserPinnedProjectSection(userPinnedProject)
     }
 }