Merge pull request #5 from MahmoudMabrok/feat/repoUI

feat: ui for repo
MahmoudMabrok · Jan 3, 2024 · 3226892 · 3226892
2 parents bd9bcbf + 788e757
commit 3226892
Show file tree

Hide file tree

Showing 20 changed files with 10,772 additions and 108 deletions.
diff --git a/composeApp/src/androidMain/kotlin/tools/mo3ta/githubactivity/App.android.kt b/composeApp/src/androidMain/kotlin/tools/mo3ta/githubactivity/App.android.kt
@@ -1,17 +1,12 @@
 package tools.mo3ta.githubactivity
 
-import android.annotation.SuppressLint
 import android.app.Application
 import android.content.Intent
 import android.net.Uri
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Scaffold
-import androidx.compose.ui.Modifier
 import tools.mo3ta.githubactivity.theme.MobileTheme
 
 class AndroidApp : Application() {
@@ -25,12 +20,13 @@ class AndroidApp : Application() {
     }
 }
 
+@ExperimentalMaterial3Api
 class AppActivity : ComponentActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            MobileTheme{
+            MobileTheme {
                 AppContent()
             }
         }

diff --git a/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/App.kt b/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/App.kt
@@ -1,17 +1,4 @@
 package tools.mo3ta.githubactivity
 
-import androidx.compose.runtime.Composable
-import cafe.adriel.voyager.navigator.Navigator
-import tools.mo3ta.githubactivity.screens.config.ConfigScreen
-import tools.mo3ta.githubactivity.theme.CommonTheme
-
-@Composable
-internal fun AppWithCommonTheme() = CommonTheme {
-    AppContent()
-}
-
-@Composable
-internal fun AppContent() = Navigator(ConfigScreen)
-
 
 internal expect fun openUrl(url: String?)
diff --git a/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/AppFiles.kt b/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/AppFiles.kt
@@ -0,0 +1,14 @@
+package tools.mo3ta.githubactivity
+
+import androidx.compose.runtime.Composable
+import cafe.adriel.voyager.navigator.Navigator
+import tools.mo3ta.githubactivity.screens.config.ConfigScreen
+import tools.mo3ta.githubactivity.theme.CommonTheme
+
+@Composable
+internal fun AppWithCommonTheme() = CommonTheme {
+    AppContent()
+}
+
+@Composable
+internal fun AppContent() = Navigator(ConfigScreen)
diff --git a/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/components/BasicUserData.kt b/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/components/BasicUserData.kt
@@ -5,17 +5,42 @@ import androidx.compose.runtime.Composable
 import tools.mo3ta.githubactivity.model.UserDetails
 
 @Composable
-fun BasicUserData(userDetails: UserDetails?) {
+fun BasicUserData(userDetails: UserDetails?, stars: Int?) {
     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?.company?.let {
+            LabeledData(
+                "Company",
+                it
+                       )
+        }
         userDetails?.blog?.let { LabeledData("Blog", it) }
-        userDetails?.location?.let { LabeledData("Location", it) }
-        userDetails?.public_repos?.let { LabeledData("Public Repo", it.toString()) }
-        userDetails?.public_gists?.let { LabeledData("Public Gists", it.toString()) }
-        userDetails?.followers?.let { LabeledData("Followers", it.toString()) }
-        userDetails?.following?.let { LabeledData("Following", it.toString()) }
+        userDetails?.location?.let {
+            LabeledData(
+                "Location",
+                it
+                       )
+        }
+        userDetails?.public_repos?.let {
+            LabeledData(
+                "Public Repo",
+                it.toString()
+                       )
+        }
+        userDetails?.public_gists?.let {
+            LabeledData(
+                "Public Gists",
+                it.toString()
+                       )
+        }
+        userDetails?.followers?.let {
+            LabeledData(
+                "Followers",
+                it.toString()
+                       )
+        }
+        stars?.let { LabeledData("Stars", it.toString()) }
     }
 }
diff --git a/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/components/LabelWithIcon.kt b/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/components/LabelWithIcon.kt
@@ -0,0 +1,27 @@
+package tools.mo3ta.githubactivity.components
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun LabelWithIcon(
+    modifier: Modifier = Modifier,
+    label: String,
+    iconSource: ImageVector
+                 ) {
+    Row(
+        modifier = modifier.padding(horizontal = 4.dp)
+       ) {
+        Icon(
+            iconSource,
+            contentDescription = ""
+            )
+        Text(label)
+    }
+}
diff --git a/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/components/RepoItem.kt b/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/components/RepoItem.kt
@@ -0,0 +1,66 @@
+package tools.mo3ta.githubactivity.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ForkRight
+import androidx.compose.material.icons.filled.Star
+import androidx.compose.material3.Card
+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
+import tools.mo3ta.githubactivity.model.RepoDetails
+
+@Composable
+fun RepoItem(repoDetails: RepoDetails) {
+    Card(
+        modifier = Modifier.fillMaxWidth().padding
+            (bottom = 16.dp, start = 16.dp, end = 16.dp)
+        ) {
+        Column(modifier = Modifier.padding(8.dp)) {
+            repoDetails.name?.let {
+                Text(
+                    text = it,
+                    style = MaterialTheme.typography.titleLarge
+                    )
+            }
+            repoDetails.description?.let {
+                Text(
+                    text = it,
+                    style = MaterialTheme.typography.bodySmall
+                    )
+            }
+            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(),
+                        iconSource = Icons.Default.Star
+                                 )
+                }
+                repoDetails.forks_count?.let {
+                    LabelWithIcon(
+                        label = it.toString(),
+                        iconSource = Icons.Default.ForkRight
+                                 )
+                }
+
+            }
+
+        }
+    }
+
+
+}
diff --git a/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/components/RepoList.kt b/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/components/RepoList.kt
@@ -0,0 +1,14 @@
+package tools.mo3ta.githubactivity.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.runtime.Composable
+import tools.mo3ta.githubactivity.model.RepoDetails
+
+@Composable
+fun RepoList(repos: List<RepoDetails>) {
+    Column {
+        repos.map {
+            RepoItem(it)
+        }
+    }
+}
diff --git a/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/model/RepoDetails.kt b/composeApp/src/commonMain/kotlin/tools/mo3ta/githubactivity/model/RepoDetails.kt
@@ -5,18 +5,18 @@ import kotlinx.serialization.Serializable
 
 @Serializable
 data class RepoDetails(
-    val created_at: String?,
-    val description: String?,
-    val fork: Boolean?,
-    val forks_count: Int?,
-    val id: Int?,
-    val language: String?,
-    val name: String?,
-    val open_issues_count: Int?,
-    val pushed_at: String?,
-    val size: Int?,
-    val stargazers_count: Int?,
-    val updated_at: String?,
-    val url: String?,
-    val watchers_count: Int?,
-)
+    val created_at: String? = null,
+    val description: String? = null,
+    val fork: Boolean? = null,
+    val forks_count: Int? = null,
+    val id: Int? = null,
+    val language: String? = null,
+    val name: String? = null,
+    val open_issues_count: Int? = null,
+    val pushed_at: String? = null,
+    val size: Int? = null,
+    val stargazers_count: Int? = null,
+    val updated_at: String? = null,
+    val url: String? = null,
+    val watchers_count: Int? = null,
+                      )
diff --git a/...src/commonMain/kotlin/tools/mo3ta/githubactivity/screens/userDetails/UserDetailsScreen.kt b/...src/commonMain/kotlin/tools/mo3ta/githubactivity/screens/userDetails/UserDetailsScreen.kt
@@ -2,6 +2,8 @@ package tools.mo3ta.githubactivity.screens.userDetails
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -10,40 +12,48 @@ import cafe.adriel.voyager.core.screen.Screen
 import dev.icerock.moko.mvvm.compose.getViewModel
 import dev.icerock.moko.mvvm.compose.viewModelFactory
 import tools.mo3ta.githubactivity.components.BasicUserData
-import tools.mo3ta.githubactivity.components.LabeledData
 import tools.mo3ta.githubactivity.components.Loading
+import tools.mo3ta.githubactivity.components.RepoList
 import tools.mo3ta.githubactivity.data.GithubService
 
-data class UserDetailsScreenData(val apiKey: String,
-                                 val userName: String,
-                                 val isEnterprise: Boolean,
-                                 val enterprise: String)
+data class UserDetailsScreenData(
+    val apiKey: String,
+    val userName: String,
+    val isEnterprise: Boolean,
+    val enterprise: String
+                                )
 
 
 data class UserDetailsScreen(
-        val data: UserDetailsScreenData) : Screen {
+    val data: UserDetailsScreenData
+                            ) : Screen {
 
     @Composable
     override fun Content() {
         val viewModel = getViewModel(Unit,
                                      viewModelFactory {
-                                         UserDetailsViewModel(data.userName,
-                                                              GithubService.create(data.apiKey,
-                                                                                   data.enterprise,
-                                                                                   data.isEnterprise))
+                                         UserDetailsViewModel(
+                                             data.userName,
+                                             GithubService.create(
+                                                 data.apiKey,
+                                                 data.enterprise,
+                                                 data.isEnterprise
+                                                                 )
+                                                             )
                                      })
         val uiState by viewModel.uiState.collectAsState()
 
-        Column(modifier = Modifier.fillMaxSize()) {
+        Column(
+            modifier = Modifier.fillMaxSize()
+                .verticalScroll(rememberScrollState())
+              ) {
             if (uiState.isLoading) {
-                Loading(Modifier.fillMaxSize(),
-                        "User Data for ${data.userName}")
+                Loading(Modifier.fillMaxSize(), "User Data for ${data.userName}")
             } else {
-                uiState.totalStars.takeIf { it > 0 }?.let {
-                    LabeledData("TotalStars",
-                                it.toString())
-                }
-                BasicUserData(uiState.userData)
+                BasicUserData(
+                    uiState.userData,
+                    uiState.totalStars.takeIf { it > 0 })
+                RepoList(uiState.repos)
             }
         }
     }