feat: new ui and load avatar

MahmoudMabrok · Jan 4, 2024 · b368c1d · b368c1d
1 parent 788e757
commit b368c1d
Show file tree

Hide file tree

Showing 8 changed files with 186 additions and 90 deletions.
diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts
@@ -28,7 +28,7 @@ kotlin {
         iosX64(),
         iosArm64(),
         iosSimulatorArm64()
-    ).forEach {
+          ).forEach {
         it.binaries.framework {
             baseName = "ComposeApp"
             isStatic = true
@@ -42,7 +42,7 @@ kotlin {
             implementation(compose.materialIconsExtended)
             implementation(libs.libres)
             implementation(libs.voyager.navigator)
-            implementation(libs.composeImageLoader)
+            implementation(libs.kamel.image)
             implementation(libs.kotlinx.coroutines.core)
             implementation(libs.moko.mvvm)
             implementation(libs.ktor.core)
@@ -70,6 +70,7 @@ kotlin {
             implementation(compose.desktop.common)
             implementation(compose.desktop.currentOs)
             implementation(libs.ktor.client.okhttp)
+            implementation(libs.kotlinx.coroutines.swing)
         }
 
         jsMain.dependencies {
@@ -133,3 +134,4 @@ libres {
 tasks.getByPath("jvmProcessResources").dependsOn("libresGenerateResources")
 tasks.getByPath("jvmSourcesJar").dependsOn("libresGenerateResources")
 tasks.getByPath("jsProcessResources").dependsOn("libresGenerateResources")
+
diff --git a/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/components/BasicUserData.kt b/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/components/BasicUserData.kt
@@ -1,46 +1,98 @@
 package tools.mo3ta.githubactivity.components
 
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+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.unit.dp
+import io.kamel.image.KamelImage
+import io.kamel.image.asyncPainterResource
 import tools.mo3ta.githubactivity.model.UserDetails
 
+
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
-fun BasicUserData(userDetails: UserDetails?, stars: Int?) {
+fun BasicUserData(userDetails: UserDetails?, stars: Int? = 0) {
     Column {
-        userDetails?.name?.let { LabeledData("Name", it) }
-        userDetails?.bio?.let { LabeledData("Bio", it) }
-        userDetails?.email?.let { LabeledData("Email", it) }
-        userDetails?.company?.let {
-            LabeledData(
-                "Company",
-                it
-                       )
+        userDetails?.avatar_url?.let {
+            KamelImage(
+                asyncPainterResource(it),
+                "user avatar",
+                modifier = Modifier
+                    .width(200.dp)
+                    .aspectRatio(1f)
+                    .clip(CircleShape)
+                    .border(8.dp, Color.Gray, CircleShape)
+                    .align(Alignment.CenterHorizontally)
+                      )
+        }
+        Spacer(modifier = Modifier.size(32.dp))
+        userDetails?.name?.let {
+            Text(
+                it,
+                modifier = Modifier.align(Alignment.CenterHorizontally),
+                style = MaterialTheme.typography.headlineLarge
+                )
         }
-        userDetails?.blog?.let { LabeledData("Blog", it) }
-        userDetails?.location?.let {
-            LabeledData(
-                "Location",
-                it
-                       )
+        userDetails?.bio?.let {
+            Text(
+                it,
+                modifier = Modifier.align(Alignment.CenterHorizontally),
+                style = MaterialTheme.typography.labelSmall
+                )
         }
-        userDetails?.public_repos?.let {
-            LabeledData(
-                "Public Repo",
-                it.toString()
-                       )
+        userDetails?.email?.let {
+            Text(
+                it,
+                modifier = Modifier.align(Alignment.CenterHorizontally),
+                style = MaterialTheme.typography.labelSmall
+                )
         }
-        userDetails?.public_gists?.let {
-            LabeledData(
-                "Public Gists",
-                it.toString()
-                       )
+        userDetails?.blog?.let {
+            Text(
+                it,
+                modifier = Modifier.align(Alignment.CenterHorizontally),
+                style = MaterialTheme.typography.labelSmall
+                )
         }
-        userDetails?.followers?.let {
-            LabeledData(
-                "Followers",
-                it.toString()
-                       )
+        Spacer(modifier = Modifier.size(16.dp))
+        FlowRow {
+            userDetails?.public_repos?.let {
+                LabeledData("Public Repo", it.toString(), modifier = Modifier.wrapContentSize())
+            }
+            userDetails?.followers?.let {
+                LabeledData("Follower", it.toString(), modifier = Modifier.weight(1f))
+            }
+            userDetails?.following?.let {
+                LabeledData("Following", it.toString(), modifier = Modifier.weight(1f))
+            }
+
+            stars?.let { LabeledData("Stars", it.toString(), modifier = Modifier.weight(1f)) }
+
+            userDetails?.public_gists?.let {
+                LabeledData("Public Gists", it.toString(), modifier = Modifier.weight(1f))
+            }
+
+            userDetails?.company?.let {
+                LabeledData("Company", it, modifier = Modifier.weight(1f))
+            }
+
+            userDetails?.location?.let {
+                LabeledData("Location", it, modifier = Modifier.weight(1f))
+            }
         }
-        stars?.let { LabeledData("Stars", it.toString()) }
     }
 }
diff --git a/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/components/LabeledData.kt b/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/components/LabeledData.kt
@@ -1,17 +1,30 @@
 package tools.mo3ta.githubactivity.components
 
-import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 
 @Composable
-fun LabeledData(title:String , value: String) {
+fun LabeledData(title: String, value: String, modifier: Modifier = Modifier) {
 
-    Row (modifier = Modifier.padding(horizontal = 16.dp , vertical = 4.dp)){
-        Text("$title : ", modifier = Modifier.weight(1.5f))
-        Text(value, modifier = Modifier.weight(4f))
+    Column(
+        modifier = modifier.padding(horizontal = 16.dp, vertical = 4.dp)
+          ) {
+        Text(
+            value,
+            style = MaterialTheme.typography.titleLarge,
+            modifier = Modifier.align(Alignment.CenterHorizontally)
+            )
+        Text(
+            title,
+            style = MaterialTheme.typography.titleSmall,
+            modifier = Modifier.align(Alignment.CenterHorizontally),
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
     }
 }
diff --git a/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/components/RepoItem.kt b/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/components/RepoItem.kt
@@ -37,13 +37,7 @@ fun RepoItem(repoDetails: RepoDetails) {
                     )
             }
             Row {
-                Text(
-                    text = repoDetails.language ?: "",
-                    style = MaterialTheme.typography.bodySmall,
-                    modifier = Modifier
-                        .width(80.dp)
-                        .align(Alignment.CenterVertically)
-                    )
+
                 repoDetails.stargazers_count?.let {
                     LabelWithIcon(
                         label = it.toString(),
@@ -56,6 +50,13 @@ fun RepoItem(repoDetails: RepoDetails) {
                         iconSource = Icons.Default.ForkRight
                                  )
                 }
+                Text(
+                    text = repoDetails.language ?: "",
+                    style = MaterialTheme.typography.bodySmall,
+                    modifier = Modifier
+                        .width(80.dp)
+                        .align(Alignment.CenterVertically)
+                    )
 
             }
 

diff --git a/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/model/UserData.kt b/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/model/UserData.kt
@@ -4,23 +4,23 @@ import kotlinx.serialization.Serializable
 
 @Serializable
 data class UserDetails(
-    val avatar_url: String?,
-    val bio: String?,
-    val blog: String?,
-    val company: String?,
-    val created_at: String?,
-    val email: String?,
-    val followers: Int?,
-    val followers_url: String?,
-    val following: Int?,
-    val gravatar_id: String?,
-    val id: Int?,
-    val location: String?,
-    val login: String?,
-    val name: String?,
-    val node_id: String?,
-    val organizations_url: String?,
-    val public_gists: Int?,
-    val public_repos: Int?,
-    val twitter_username: String?,
-)
+    val avatar_url: String? = null,
+    val bio: String? = null,
+    val blog: String? = null,
+    val company: String? = null,
+    val created_at: String? = null,
+    val email: String? = null,
+    val followers: Int? = 0,
+    val followers_url: String? = null,
+    val following: Int? = 0,
+    val gravatar_id: String? = null,
+    val id: Int? = null,
+    val location: String? = null,
+    val login: String? = null,
+    val name: String? = null,
+    val node_id: String? = null,
+    val organizations_url: String? = null,
+    val public_gists: Int? = null,
+    val public_repos: Int? = 0,
+    val twitter_username: String? = null,
+                      )