kotlin-hands-on / hands-on

Apache License 2.0
130 stars 176 forks source link

Fullstack web app with Kotlin multiplatform - Old code #161

Closed revosw closed 2 years ago

revosw commented 2 years ago

https://play.kotlinlang.org/hands-on/Full%20Stack%20Web%20App%20with%20Kotlin%20Multiplatform/05_Building_the_Frontend

This code needs an update from using functionalComponent<RProps to using fc<Props>, and also just remove the _ ->

import react.*
import react.dom.*
import kotlinext.js.*
import kotlinx.html.js.*
import kotlinx.coroutines.*

private val scope = MainScope()

val app = functionalComponent<RProps> { _ ->
    var shoppingList by useState(emptyList<ShoppingListItem>())

    useEffectOnce {
        scope.launch {
            shoppingList = getShoppingList()
        }
    }

    h1 {
        +"Full-Stack Shopping List"
    }
    ul {
        shoppingList.sortedByDescending(ShoppingListItem::priority).forEach { item ->
            li {
                key = item.toString()
                +"[${item.priority}] ${item.desc} "
            }
        }
    }
}
SebastianAigner commented 2 years ago

I've just finished the update of the tutorial to the latest DSLs, including the new FC syntax and the usage of kotlin-react-css. Hope you'll find them useful again!