further compose for web changes

README.md

@@ -6,6 +6,7 @@ Minimal **Kotlin Multiplatform** project using Jetpack Compose and SwiftUI.  Cur
 * watchOS (SwiftUI)
 * macOS (SwiftUI)
 * Desktop (Compose for Desktop)
+* Web (Compose for Web)
 * Web (Kotlin/JS + React Wrapper)
 * JVM (small Ktor back end service + `Main.kt` in `common` module)
 
@@ -41,13 +42,19 @@ I also have the following samples that demonstrate the use of a variety of Kotli
 
 ### Building
 You need to use Android Studio Canary version (**note: Java 11 is now the minimum version required**). Have tested with XCode v11 and v12.  When opening
-iOS/watchOS/macOS projects remember to open `.xcworkspace` file (and not `.xcodeproj` one). To exercise web client run `./gradlew :web:browserDevelopmentRun`.
+iOS/watchOS/macOS projects remember to open `.xcworkspace` file (and not `.xcodeproj` one). To exercise (React based) web client run `./gradlew :web:browserDevelopmentRun`.
 To run backend you can either run `./gradlew :backend:run` or run `Server.kt` directly from Android Studio.
 After doing that you should then for example be able to open `http://localhost:9090/astros_local.json` in a browser.
 
 **UPDATE**: now also works in stable version of Android Studio.
 
-### Jetpack Compose for Desktop client
+
+### Compose for Web client
+
+The Compose for Web client resides in the `compose-web` module and can be run by
+invoking ``./gradlew :compose-web:jsBrowserDevelopmentRun`
+
+### Compose for Desktop client
 
 This client is available in `compose-desktop` module.  Note that you need to use appropriate version of JVM when running (works for example with Java 11)
 

backend/build.gradle.kts

@@ -19,6 +19,10 @@ dependencies {
     implementation(project(":common"))
 }
 
+tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile>() {
+    kotlinOptions.jvmTarget = "1.8"
+}
+
 application {
     mainClass.set("ServerKt")
 }

build.gradle.kts

@@ -1,18 +1,11 @@
 
 buildscript {
     repositories {
-        mavenLocal() {
-            content {
-                includeGroup("io.insert-koin")
-                includeGroup("co.touchlab")
-            }
-        }
         google()
         mavenCentral()
-        jcenter()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:4.2.0")
+        classpath("com.android.tools.build:gradle:4.2.1")
         classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${Versions.kotlin}")
         classpath("org.jetbrains.kotlin:kotlin-serialization:${Versions.kotlin}")
         classpath("com.squareup.sqldelight:gradle-plugin:${Versions.sqlDelight}")
@@ -21,15 +14,8 @@ buildscript {
 
 allprojects {
     repositories {
-        mavenLocal() {
-            content {
-                includeGroup("io.insert-koin")
-                includeGroup("co.touchlab")
-            }
-        }
         google()
         mavenCentral()
-        jcenter()
         maven(url = "https://kotlin.bintray.com/kotlin-js-wrappers/")
         maven(url = "https://jitpack.io")
     }

buildSrc/src/main/java/Dependencies.kt

@@ -47,7 +47,7 @@ object Koin {
     val core = "io.insert-koin:koin-core:${Versions.koin}"
     val test = "io.insert-koin:koin-test:${Versions.koin}"
     val android = "io.insert-koin:koin-android:${Versions.koin}"
-    val compose = "io.insert-koin:koin-androidx-compose:${Versions.koin}"
+    val compose = "io.insert-koin:koin-androidx-compose:3.0.1"
 }
 
 object Ktor {

common/build.gradle.kts

@@ -1,5 +1,3 @@
-import org.jetbrains.kotlin.gradle.plugin.mpp.KotlinNativeTarget
-
 plugins {
     kotlin("multiplatform")
     id("kotlinx-serialization")
@@ -23,6 +21,10 @@ android {
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
     }
+    compileOptions {
+        sourceCompatibility = JavaVersion.VERSION_1_8
+        targetCompatibility = JavaVersion.VERSION_1_8
+    }
 }
 
 kotlin {
@@ -127,6 +129,12 @@ kotlin {
     }
 }
 
+tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile> {
+    kotlinOptions {
+        jvmTarget = "1.8"
+    }
+}
+
 sqldelight {
     database("PeopleInSpaceDatabase") {
         packageName = "com.surrus.peopleinspace.db"

compose-web/build.gradle.kts

@@ -1,13 +1,12 @@
 
 plugins {
     kotlin("multiplatform")
-    id("org.jetbrains.compose") version "0.0.0-web-dev-11"
+    id("org.jetbrains.compose") version "0.0.0-web-dev-12"
 }
 
 version = "1.0"
 
 repositories {
-    jcenter()
     mavenCentral()
     maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
 }

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

@@ -4,35 +4,52 @@ import androidx.compose.web.renderComposable
 import androidx.compose.web.elements.*
 import com.surrus.common.di.initKoin
 import com.surrus.common.remote.Assignment
-import com.surrus.common.remote.PeopleInSpaceApi
+import com.surrus.common.remote.IssPosition
+import com.surrus.common.repository.PeopleInSpaceRepository
+import kotlinx.coroutines.InternalCoroutinesApi
+import kotlinx.coroutines.flow.collect
 import org.jetbrains.compose.common.foundation.layout.Column
+import org.jetbrains.compose.common.foundation.layout.Row
 
 
 private val koin = initKoin(enableNetworkLogs = true).koin
 
+@InternalCoroutinesApi
 fun main() {
-    val peopleInSpaceApi = koin.get<PeopleInSpaceApi>()
+    val repo = koin.get<PeopleInSpaceRepository>()
 
     renderComposable(rootElementId = "root") {
         var people by remember { mutableStateOf(emptyList<Assignment>()) }
 
         LaunchedEffect(true) {
-            people = peopleInSpaceApi.fetchPeople().people
+            people = repo.fetchPeople()
         }
 
+        val issPosition by produceState(initialValue = IssPosition(0.0, 0.0), repo) {
+            repo.pollISSPosition().collect { value = it }
+        }
+
+
         Div(style = { padding(16.px) }) {
             Column {
                 H1(attrs = { classes(TextStyles.titleText) }) {
                     Text("People In Space")
                 }
-                Ul(attrs = { classes(TextStyles.personText) }) {
-                    people.forEach { person ->
-                        Li {
-                            Text(person.name)
-                        }
-                    }
+                H2 {
+                    Text("ISS Position: latitude = ${issPosition.latitude}, longitude = ${issPosition.longitude}")
                 }
 
+                people.forEach { person ->
+                    Row {
+                        val imageUrl = repo.getPersonImage(person.name)
+                        Img(src = imageUrl, style = {
+                            width(48.px)
+                            property("padding-right", value(16.px))
+                        })
+
+                        Text("${person.name} (${person.craft})")
+                    }
+                }
             }
         }
     }

web/build.gradle.kts

@@ -6,7 +6,7 @@ plugins {
 dependencies {
     implementation(kotlin("stdlib-js"))
 
-    implementation("org.jetbrains.kotlinx:kotlinx-html-js:0.7.2")
+    implementation("org.jetbrains.kotlinx:kotlinx-html-js:0.7.3")
 
     implementation("org.jetbrains:kotlin-react:16.13.1-pre.110-kotlin-1.4.0")
     implementation("org.jetbrains:kotlin-react-dom:16.13.1-pre.110-kotlin-1.4.0")