Implemented compose-web UI

compose-web/build.gradle.kts

@@ -22,6 +22,7 @@ kotlin {
  dependencies {
  implementation(compose.web.core)
  implementation(compose.runtime)
+ implementation(project(":shared"))
  }
  }
  }

compose-web/src/jsMain/kotlin/TrendingReposListScreen.kt

@@ -0,0 +1,107 @@
+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 com.baseio.kmm.features.trending.GithubTrendingDataModel
+import org.jetbrains.compose.web.attributes.InputType
+import org.jetbrains.compose.web.attributes.href
+import org.jetbrains.compose.web.css.marginLeft
+import org.jetbrains.compose.web.css.paddingBottom
+import org.jetbrains.compose.web.css.paddingLeft
+import org.jetbrains.compose.web.css.paddingTop
+import org.jetbrains.compose.web.css.px
+import org.jetbrains.compose.web.css.width
+import org.jetbrains.compose.web.dom.A
+import org.jetbrains.compose.web.dom.Button
+import org.jetbrains.compose.web.dom.Div
+import org.jetbrains.compose.web.dom.H1
+import org.jetbrains.compose.web.dom.Img
+import org.jetbrains.compose.web.dom.Input
+import org.jetbrains.compose.web.dom.Progress
+import org.jetbrains.compose.web.dom.Text
+
+@Composable
+fun TrendingReposListScreen(trendingReposVM: TrendingReposVM) {
+ val uiState = trendingReposVM.uiState
+ var currentSearchText by remember { mutableStateOf("") }
+
+ H1 {
+ Text("Trending Kotlin Repositories")
+ }
+
+ Div {
+ Input(InputType.Text) {
+ onChange { newTextState ->
+ currentSearchText = newTextState.value
+ }
+ }
+ Button(
+ attrs = {
+ style {
+ marginLeft(8.px)
+ }
+ onClick {
+ trendingReposVM.trendingDataModel.filterRecords(search = currentSearchText)
+ }
+ }
+ ) {
+ Text("Search")
+ }
+ }
+
+ when (uiState) {
+ is GithubTrendingDataModel.LoadingState -> Progress()
+ is GithubTrendingDataModel.ErrorState -> {
+ Text(uiState.throwable.message ?: "Unexpected error occurred!")
+ }
+ is GithubTrendingDataModel.SuccessState -> {
+ uiState.trendingList.forEach { repoItem ->
+ Div(
+ attrs = {
+ style {
+ paddingTop(16.px)
+ paddingLeft(16.px)
+ }
+ }
+ ) {
+ Img(
+ src = repoItem.avatar ?: "http:https://via.placeholder.com/640x360",
+ attrs = {
+ style {
+ width(100.px)
+ }
+ }
+ )
+ }
+ Div(
+ attrs = {
+ style {
+ paddingLeft(16.px)
+ paddingTop(16.px)
+ }
+ }
+ ) {
+ Text("${repoItem.author}: ${repoItem.name}")
+ }
+ Div(
+ attrs = {
+ style {
+ paddingLeft(16.px)
+ paddingBottom(16.px)
+ }
+ }
+ ) {
+ A(
+ attrs = {
+ href(repoItem.url.orEmpty())
+ }
+ ) {
+ Text(repoItem.url.orEmpty())
+ }
+ }
+ }
+ }
+ else -> Unit
+ }
+}

compose-web/src/jsMain/kotlin/TrendingReposVM.kt

@@ -0,0 +1,46 @@
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import com.baseio.kmm.db.DriverFactory
+import com.baseio.kmm.di.SharedComponent
+import com.baseio.kmm.features.trending.GithubTrendingDataModel
+import kotlinx.coroutines.MainScope
+import kotlinx.coroutines.launch
+
+val sharedComponent = SharedComponent()
+
+class TrendingReposVM {
+
+ var uiState by mutableStateOf<GithubTrendingDataModel.DataState>(GithubTrendingDataModel.EmptyState)
+ private set
+
+ val trendingDataModel = GithubTrendingDataModel(onDataState = { stateNew ->
+ uiState = stateNew
+ })
+
+ init {
+ MainScope().launch {
+ setupDriver()
+ trendingDataModel.activate()
+ }
+ }
+}
+
+suspend fun setupDriver() {
+ sharedComponent.provideGithubTrendingLocal().driver?.let {} ?: run {
+ setupDriverInternal()
+ }
+
+}
+
+private suspend fun setupDriverInternal() {
+ try {
+ val driver = DriverFactory().createDriverBlocking()
+ val trendingLocal = sharedComponent.provideGithubTrendingLocal()
+ trendingLocal.driver = driver
+ } catch (ex: Exception) {
+ console.log(ex.message)
+ console.log("Exception happened here.")
+ console.log(ex)
+ }
+}

compose-web/src/jsMain/kotlin/main.kt

@@ -1,33 +1,10 @@
-import androidx.compose.runtime.*
-import org.jetbrains.compose.web.css.padding
-import org.jetbrains.compose.web.css.px
-import org.jetbrains.compose.web.dom.Button
-import org.jetbrains.compose.web.dom.Div
-import org.jetbrains.compose.web.dom.Span
-import org.jetbrains.compose.web.dom.Text
+import com.baseio.kmm.di.initSqlDelightExperimentalDependencies
 import org.jetbrains.compose.web.renderComposable
 
 // invoke using `./gradlew :compose-web:jsBrowserDevelopmentRun`
 fun main() {
- var count: Int by mutableStateOf(0)
-
+ initSqlDelightExperimentalDependencies()
  renderComposable(rootElementId = "root") {
- Div({ style { padding(25.px) } }) {
- Button(attrs = {
- onClick { count -= 1 }
- }) {
- Text("-")
- }
-
- Span({ style { padding(15.px) } }) {
- Text("$count")
- }
-
- Button(attrs = {
- onClick { count += 1 }
- }) {
- Text("+")
- }
- }
+ TrendingReposListScreen(TrendingReposVM())
  }
 }

compose-web/webpack.config.d/sqljs.js

@@ -0,0 +1,18 @@
+
+config.resolve.fallback = {
+ fs: false,
+ path: false,
+ crypto: false,
+};
+
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+config.plugins.push(
+ new CopyWebpackPlugin({
+ patterns: [
+ {
+ from: '../../node_modules/sql.js/dist/sql-wasm.wasm',
+ to: '../../../compose-web/build/distributions'
+ }
+ ]
+ })
+);