diff options
3 files changed, 63 insertions, 3 deletions
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt new file mode 100644 index 00000000..8bf43f1d --- /dev/null +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt @@ -0,0 +1,41 @@ +package org.luxons.sevenwonders.ui.components.home + +import kotlinx.html.InputType +import kotlinx.html.js.onChangeFunction +import kotlinx.html.js.onSubmitFunction +import org.luxons.sevenwonders.ui.redux.ChooseUserName +import org.luxons.sevenwonders.ui.redux.connectDispatch +import react.RBuilder +import react.RClass +import react.RComponent +import react.RProps +import react.RState +import react.dom.* + +private interface ChooseNameFormProps: RProps { + var chooseUsername: (String) -> Unit +} + +private data class ChooseNameFormState(val username: String): RState + +private class ChooseNameForm(props: ChooseNameFormProps): RComponent<ChooseNameFormProps, ChooseNameFormState>(props) { + + override fun RBuilder.render() { + form { + attrs.onSubmitFunction = { props.chooseUsername(state.username) } + + input(type = InputType.text) { + attrs { + value = state.username + onChangeFunction = { + setState(transformState = { ChooseNameFormState(value) }) + } + } + } + } + } +} + +val chooseNameForm: RClass<RProps> = connectDispatch(ChooseNameForm::class) { dispatch, _ -> + chooseUsername = { name -> dispatch(ChooseUserName(name)) } +} diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt index abbd84a9..458dc7c4 100644 --- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt @@ -16,7 +16,5 @@ fun RBuilder.home() = styledDiv { img(src = LOGO, alt = "Seven Wonders") {} - p { - +"Great app!" - } + chooseNameForm {} } diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt new file mode 100644 index 00000000..e40e11bc --- /dev/null +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt @@ -0,0 +1,21 @@ +package org.luxons.sevenwonders.ui.redux + +import react.RClass +import react.RComponent +import react.RProps +import react.RState +import react.invoke +import react.redux.rConnect +import redux.RAction +import redux.WrapperAction +import kotlin.reflect.KClass + +inline fun <reified T : RProps> connectDispatch( + clazz: KClass<out RComponent<T, out RState>>, + crossinline mapDispatchToProps: T.((RAction) -> WrapperAction, RProps) -> Unit +): RClass<RProps> { + val connect = rConnect<RAction, WrapperAction, RProps, T>(mapDispatchToProps = { dispatch, ownProps -> + mapDispatchToProps(dispatch, ownProps) + }) + return connect.invoke(clazz.js.unsafeCast<RClass<T>>()) +} |