First connected component

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>>())
+}