From 1c2068b127cd8b7ea39e4d90c17b0bb3330472f4 Mon Sep 17 00:00:00 2001 From: "Viktor.Noskin" Date: Sat, 12 Jun 2021 19:07:40 +0300 Subject: [PATCH 01/15] feat: migrate to IR and update kotlin to 1.4.32 --- build.gradle | 66 ------------------- build.gradle.kts | 37 +++++++++++ gradle/wrapper/gradle-wrapper.properties | 2 +- settings.gradle | 19 ------ settings.gradle.kts | 2 + .../nl/lawik/poc/frontend/reactredux/Index.kt | 13 +--- .../poc/frontend/reactredux/components/App.kt | 5 +- .../frontend/reactredux/components/Link.kt | 4 +- .../reactredux/components/TodoList.kt | 3 +- .../frontend/reactredux/containers/AddTodo.kt | 2 +- .../reactredux/containers/FilterLink.kt | 6 +- .../reactredux/containers/VisibleTodoList.kt | 4 +- .../poc/frontend/reactredux/reducers/Index.kt | 22 +++++-- src/main/resources/{web => }/index.html | 0 14 files changed, 73 insertions(+), 112 deletions(-) delete mode 100644 build.gradle create mode 100644 build.gradle.kts delete mode 100644 settings.gradle create mode 100644 settings.gradle.kts rename src/main/resources/{web => }/index.html (100%) diff --git a/build.gradle b/build.gradle deleted file mode 100644 index 80d59da..0000000 --- a/build.gradle +++ /dev/null @@ -1,66 +0,0 @@ -plugins { - id "kotlin2js" version "1.3.21" - id "org.jetbrains.kotlin.frontend" version "0.0.45" - id "kotlin-dce-js" version "1.3.21" -} -group 'kotlin-poc-frontend-react-redux' -version '1.0-SNAPSHOT' - -ext { - web_dir = "web" -} - -repositories { - mavenCentral() - jcenter() - maven { url "https://kotlin.bintray.com/kotlin-js-wrappers" } - maven { url "https://kotlin.bintray.com/kotlinx" } -} - -dependencies { - implementation "org.jetbrains.kotlin:kotlin-stdlib-js" - implementation 'org.jetbrains:kotlin-react:16.6.0-pre.70-kotlin-1.3.21' - implementation 'org.jetbrains:kotlin-react-dom:16.6.0-pre.70-kotlin-1.3.21' - implementation 'org.jetbrains:kotlin-react-redux:5.0.7-pre.70-kotlin-1.3.21' - implementation 'org.jetbrains:kotlin-redux:4.0.0-pre.70-kotlin-1.3.21' - implementation 'org.jetbrains:kotlin-styled:1.0.0-pre.70-kotlin-1.3.21' - implementation 'org.jetbrains:kotlin-react-router-dom:4.3.1-pre.70-kotlin-1.3.21' -} - -clean.doFirst() { - delete("${web_dir}") -} - - -bundle.doLast() { - copy { - from "${buildDir}/resources/main/web" - from "${buildDir}/bundle" - into "${web_dir}" - } -} - -kotlinFrontend { - npm { - dependency "react" - dependency "react-dom" - dependency "react-router-dom" - dependency "react-redux" - dependency "redux" - dependency "core-js" - dependency "inline-style-prefixer" - dependency "styled-components" - } - - webpackBundle { - bundleName = "this-will-be-overwritten" // NOTE: for example purposes this is overwritten in `webpack.config.d/filename.js`. - contentPath = file('src/main/resources/web') - if (project.hasProperty('prod')) { - mode = "production" - } - } -} - -compileKotlin2Js { - kotlinOptions.moduleKind = 'commonjs' -} \ No newline at end of file diff --git a/build.gradle.kts b/build.gradle.kts new file mode 100644 index 0000000..85acb4e --- /dev/null +++ b/build.gradle.kts @@ -0,0 +1,37 @@ +import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig.* + +plugins { + kotlin("js") version "1.4.32" +} + +val web_dir = "web" +group = "kotlin-poc-frontend-react-redux" +version = "1.0-SNAPSHOT" + +repositories { + mavenCentral() + jcenter() + maven { url = uri("https://maven.pkg.jetbrains.space/kotlin/p/kotlin/kotlin-js-wrappers") } +} + +dependencies { + implementation("org.jetbrains:kotlin-react:17.0.1-pre.148-kotlin-1.4.30") + implementation("org.jetbrains:kotlin-react-dom:17.0.1-pre.148-kotlin-1.4.30") + implementation("org.jetbrains:kotlin-redux:4.0.5-pre.148-kotlin-1.4.30") + implementation("org.jetbrains:kotlin-react-redux:7.2.2-pre.148-kotlin-1.4.30") + implementation("org.jetbrains:kotlin-styled:5.2.1-pre.148-kotlin-1.4.30") + implementation("org.jetbrains:kotlin-react-router-dom:5.2.0-pre.148-kotlin-1.4.30") +} + +kotlin { + js(IR) { + binaries.executable() + browser { + commonWebpackConfig { + cssSupport.enabled = true + mode = if(project.hasProperty("prod")) Mode.PRODUCTION else Mode.DEVELOPMENT + } + } + useCommonJs() + } +} \ No newline at end of file diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties index 290541c..da9702f 100644 --- a/gradle/wrapper/gradle-wrapper.properties +++ b/gradle/wrapper/gradle-wrapper.properties @@ -1,5 +1,5 @@ distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists -distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.3-bin.zip +distributionUrl=https\://services.gradle.org/distributions/gradle-6.8-bin.zip zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists diff --git a/settings.gradle b/settings.gradle deleted file mode 100644 index a8c634e..0000000 --- a/settings.gradle +++ /dev/null @@ -1,19 +0,0 @@ -pluginManagement { - repositories { - gradlePluginPortal() - maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' } - } - resolutionStrategy { - eachPlugin { - if (requested.id.id == "kotlin2js" || requested.id.id == "kotlin-dce-js") { - useModule("org.jetbrains.kotlin:kotlin-gradle-plugin:${requested.version}") - } - if (requested.id.id == "org.jetbrains.kotlin.frontend") { - useModule("org.jetbrains.kotlin:kotlin-frontend-plugin:${requested.version}") - } - } - } -} - -rootProject.name = 'kotlin-poc-frontend-react-redux' - diff --git a/settings.gradle.kts b/settings.gradle.kts new file mode 100644 index 0000000..44921b6 --- /dev/null +++ b/settings.gradle.kts @@ -0,0 +1,2 @@ +rootProject.name = "kotlin-poc-frontend-react-redux" + diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/Index.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/Index.kt index 3032396..81d44de 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/Index.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/Index.kt @@ -2,21 +2,14 @@ package nl.lawik.poc.frontend.reactredux import nl.lawik.poc.frontend.reactredux.components.app import nl.lawik.poc.frontend.reactredux.reducers.State -import nl.lawik.poc.frontend.reactredux.reducers.combinedReducers import react.dom.render import react.redux.provider -import redux.RAction -import redux.compose import redux.createStore import redux.rEnhancer -import kotlin.browser.document +import kotlinx.browser.document +import nl.lawik.poc.frontend.reactredux.reducers.rootReducer -val store = createStore( - combinedReducers(), State(), compose( - rEnhancer(), - js("if(window.__REDUX_DEVTOOLS_EXTENSION__ )window.__REDUX_DEVTOOLS_EXTENSION__ ();else(function(f){return f;});") - ) -) +val store = createStore(::rootReducer, State(), rEnhancer()) fun main() { val rootDiv = document.getElementById("root") diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/App.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/App.kt index 3579740..17d484f 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/App.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/App.kt @@ -3,6 +3,7 @@ package nl.lawik.poc.frontend.reactredux.components import nl.lawik.poc.frontend.reactredux.containers.addTodo import nl.lawik.poc.frontend.reactredux.containers.visibleTodoList import react.RBuilder +import react.RProps import react.dom.br import react.dom.div import react.dom.h1 @@ -21,7 +22,7 @@ fun RBuilder.app() = h1 { +"Kotlin React + React-Dom + Redux + React-Redux + React-Router Example" } - navLink(TODO_LIST_PATH) { + navLink(TODO_LIST_PATH) { +"Go to todo list" } } @@ -32,7 +33,7 @@ fun RBuilder.app() = visibleTodoList {} footer() br {} - navLink("/") { + navLink("/") { +"Go back" } } diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Link.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Link.kt index 81edfac..d6a54af 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Link.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Link.kt @@ -1,5 +1,6 @@ package nl.lawik.poc.frontend.reactredux.components +import kotlinx.css.marginLeft import kotlinx.css.px import kotlinx.html.js.onClickFunction import react.RBuilder @@ -9,11 +10,12 @@ import react.RState import styled.css import styled.styledButton -interface LinkProps : RProps { +external interface LinkProps : RProps { var active: Boolean var onClick: () -> Unit } +@JsExport class Link(props: LinkProps) : RComponent(props) { override fun RBuilder.render() { styledButton { diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/TodoList.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/TodoList.kt index 96f8ad1..f11aec1 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/TodoList.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/TodoList.kt @@ -7,11 +7,12 @@ import react.RProps import react.RState import react.dom.ul -interface TodoListProps : RProps { +external interface TodoListProps : RProps { var todos: Array var toggleTodo: (Int) -> Unit } +@JsExport class TodoList(props: TodoListProps) : RComponent(props) { override fun RBuilder.render() { ul { diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt index d7f3023..c008994 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt @@ -14,7 +14,7 @@ import react.dom.input import react.redux.rConnect import redux.WrapperAction - +@JsExport class AddTodo(props: RProps) : RComponent(props) { private val inputRef = createRef() override fun RBuilder.render() { diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/FilterLink.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/FilterLink.kt index cab3167..58e37ae 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/FilterLink.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/FilterLink.kt @@ -11,15 +11,15 @@ import react.invoke import react.redux.rConnect import redux.WrapperAction -interface FilterLinkProps : RProps { +external interface FilterLinkProps : RProps { var filter: VisibilityFilter } -private interface LinkStateProps : RProps { +private external interface LinkStateProps : RProps { var active: Boolean } -private interface LinkDispatchProps : RProps { +private external interface LinkDispatchProps : RProps { var onClick: () -> Unit } diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/VisibleTodoList.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/VisibleTodoList.kt index 7dd714e..41b7f94 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/VisibleTodoList.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/VisibleTodoList.kt @@ -18,11 +18,11 @@ private fun getVisibleTodos(todos: Array, filter: VisibilityFilter): Array VisibilityFilter.SHOW_COMPLETED -> todos.filter { it.completed }.toTypedArray() } -private interface TodoListStateProps : RProps { +private external interface TodoListStateProps : RProps { var todos: Array } -private interface TodoListDispatchProps : RProps { +private external interface TodoListDispatchProps : RProps { var toggleTodo: (Int) -> Unit } diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt index ace899d..da7755c 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt @@ -3,6 +3,8 @@ package nl.lawik.poc.frontend.reactredux.reducers import nl.lawik.poc.frontend.reactredux.entities.Todo import nl.lawik.poc.frontend.reactredux.enums.VisibilityFilter import nl.lawik.poc.frontend.reactredux.util.combineReducers +import redux.Action +import redux.RAction data class State( @@ -10,9 +12,17 @@ data class State( val visibilityFilter: VisibilityFilter = VisibilityFilter.SHOW_ALL ) -fun combinedReducers() = combineReducers( - mapOf( - State::todos to ::todos, - State::visibilityFilter to ::visibilityFilter - ) -) +//fun combinedReducers() = combineReducers( +// mapOf( +// State::todos to ::todos, +// State::visibilityFilter to ::visibilityFilter +// ) +//) + +fun rootReducer( + state: State, + action: Any +) = State( + todos(state.todos, action.unsafeCast()), + visibilityFilter(state.visibilityFilter, action.unsafeCast()), +) \ No newline at end of file diff --git a/src/main/resources/web/index.html b/src/main/resources/index.html similarity index 100% rename from src/main/resources/web/index.html rename to src/main/resources/index.html From fad0e1bcca81dec18fee8dbb8f4c96692d7601c5 Mon Sep 17 00:00:00 2001 From: "Viktor.Noskin" Date: Sat, 12 Jun 2021 19:22:44 +0300 Subject: [PATCH 02/15] feat: kotlin 1.5.10 --- build.gradle.kts | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/build.gradle.kts b/build.gradle.kts index 85acb4e..68d33f8 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -1,10 +1,9 @@ import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig.* plugins { - kotlin("js") version "1.4.32" + kotlin("js") version "1.5.10" } -val web_dir = "web" group = "kotlin-poc-frontend-react-redux" version = "1.0-SNAPSHOT" @@ -15,12 +14,12 @@ repositories { } dependencies { - implementation("org.jetbrains:kotlin-react:17.0.1-pre.148-kotlin-1.4.30") - implementation("org.jetbrains:kotlin-react-dom:17.0.1-pre.148-kotlin-1.4.30") - implementation("org.jetbrains:kotlin-redux:4.0.5-pre.148-kotlin-1.4.30") - implementation("org.jetbrains:kotlin-react-redux:7.2.2-pre.148-kotlin-1.4.30") - implementation("org.jetbrains:kotlin-styled:5.2.1-pre.148-kotlin-1.4.30") - implementation("org.jetbrains:kotlin-react-router-dom:5.2.0-pre.148-kotlin-1.4.30") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.209-kotlin-1.5.10") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.209-kotlin-1.5.10") + implementation("org.jetbrains.kotlin-wrappers:kotlin-redux:4.0.5-pre.209-kotlin-1.5.10") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.3-pre.209-kotlin-1.5.10") + implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.0-pre.209-kotlin-1.5.10") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:5.2.0-pre.209-kotlin-1.5.10") } kotlin { From 29e3ecb8eefa5928f14ab6981fe82ca3de3e0798 Mon Sep 17 00:00:00 2001 From: "Viktor.Noskin" Date: Sat, 12 Jun 2021 19:25:03 +0300 Subject: [PATCH 03/15] feat: uncomment combinedReducers --- .../kotlin/nl/lawik/poc/frontend/reactredux/Index.kt | 1 + .../lawik/poc/frontend/reactredux/reducers/Index.kt | 12 ++++++------ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/Index.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/Index.kt index 81d44de..c314878 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/Index.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/Index.kt @@ -7,6 +7,7 @@ import react.redux.provider import redux.createStore import redux.rEnhancer import kotlinx.browser.document +import nl.lawik.poc.frontend.reactredux.reducers.combinedReducers import nl.lawik.poc.frontend.reactredux.reducers.rootReducer val store = createStore(::rootReducer, State(), rEnhancer()) diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt index da7755c..5b41158 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt @@ -12,12 +12,12 @@ data class State( val visibilityFilter: VisibilityFilter = VisibilityFilter.SHOW_ALL ) -//fun combinedReducers() = combineReducers( -// mapOf( -// State::todos to ::todos, -// State::visibilityFilter to ::visibilityFilter -// ) -//) +fun combinedReducers() = combineReducers( + mapOf( + State::todos to ::todos, + State::visibilityFilter to ::visibilityFilter + ) +) fun rootReducer( state: State, From e2b17593a4d8875c18538640088ffa0afb032fbe Mon Sep 17 00:00:00 2001 From: "Viktor.Noskin" Date: Mon, 19 Jul 2021 17:03:46 +0300 Subject: [PATCH 04/15] feat: update kotlin-wrappers and kotlin to 1.5.21 --- build.gradle.kts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/build.gradle.kts b/build.gradle.kts index 68d33f8..914751d 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -1,7 +1,7 @@ import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig.* plugins { - kotlin("js") version "1.5.10" + kotlin("js") version "1.5.21" } group = "kotlin-poc-frontend-react-redux" @@ -14,12 +14,12 @@ repositories { } dependencies { - implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.209-kotlin-1.5.10") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.209-kotlin-1.5.10") - implementation("org.jetbrains.kotlin-wrappers:kotlin-redux:4.0.5-pre.209-kotlin-1.5.10") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.3-pre.209-kotlin-1.5.10") - implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.0-pre.209-kotlin-1.5.10") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:5.2.0-pre.209-kotlin-1.5.10") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.218-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.218-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-redux:4.1.0-pre.218-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.4-pre.218-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.0-pre.218-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:5.2.0-pre.218-kotlin-1.5.21") } kotlin { From 255e8948901649d6ba670d01249dca08341473a2 Mon Sep 17 00:00:00 2001 From: "Viktor.Noskin" Date: Tue, 27 Jul 2021 16:40:28 +0300 Subject: [PATCH 05/15] feat: update kotlin-wrappers version to 222 --- build.gradle.kts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/build.gradle.kts b/build.gradle.kts index 914751d..f3f36a1 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -14,12 +14,12 @@ repositories { } dependencies { - implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.218-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.218-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-redux:4.1.0-pre.218-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.4-pre.218-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.0-pre.218-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:5.2.0-pre.218-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.222-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.222-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-redux:4.1.0-pre.222-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.4-pre.222-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.0-pre.222-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:5.2.0-pre.222-kotlin-1.5.21") } kotlin { From 1663c158e26cd4c0b59eb69d7f6bcec5d16930ac Mon Sep 17 00:00:00 2001 From: "Viktor.Noskin" Date: Sat, 31 Jul 2021 18:10:37 +0300 Subject: [PATCH 06/15] feat: use State instead of RState and ComponentClass instead of RClass --- .../nl/lawik/poc/frontend/reactredux/components/Link.kt | 7 ++----- .../lawik/poc/frontend/reactredux/components/TodoList.kt | 7 ++----- .../nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt | 6 +++--- .../lawik/poc/frontend/reactredux/containers/FilterLink.kt | 6 +++--- .../poc/frontend/reactredux/containers/VisibleTodoList.kt | 6 +++--- .../nl/lawik/poc/frontend/reactredux/reducers/Index.kt | 1 - 6 files changed, 13 insertions(+), 20 deletions(-) diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Link.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Link.kt index d6a54af..6aeb862 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Link.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Link.kt @@ -3,10 +3,7 @@ package nl.lawik.poc.frontend.reactredux.components import kotlinx.css.marginLeft import kotlinx.css.px import kotlinx.html.js.onClickFunction -import react.RBuilder -import react.RComponent -import react.RProps -import react.RState +import react.* import styled.css import styled.styledButton @@ -16,7 +13,7 @@ external interface LinkProps : RProps { } @JsExport -class Link(props: LinkProps) : RComponent(props) { +class Link(props: LinkProps) : RComponent(props) { override fun RBuilder.render() { styledButton { attrs.onClickFunction = { props.onClick() } diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/TodoList.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/TodoList.kt index f11aec1..03b48e9 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/TodoList.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/TodoList.kt @@ -1,10 +1,7 @@ package nl.lawik.poc.frontend.reactredux.components import nl.lawik.poc.frontend.reactredux.entities.Todo -import react.RBuilder -import react.RComponent -import react.RProps -import react.RState +import react.* import react.dom.ul external interface TodoListProps : RProps { @@ -13,7 +10,7 @@ external interface TodoListProps : RProps { } @JsExport -class TodoList(props: TodoListProps) : RComponent(props) { +class TodoList(props: TodoListProps) : RComponent(props) { override fun RBuilder.render() { ul { props.todos.forEach { todo(it) { props.toggleTodo(it.id) } } diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt index c008994..e042805 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt @@ -15,7 +15,7 @@ import react.redux.rConnect import redux.WrapperAction @JsExport -class AddTodo(props: RProps) : RComponent(props) { +class AddTodo(props: RProps) : RComponent(props) { private val inputRef = createRef() override fun RBuilder.render() { div { @@ -41,5 +41,5 @@ class AddTodo(props: RProps) : RComponent(props) { } -val addTodo: RClass = - rConnect()(nl.lawik.poc.frontend.reactredux.containers.AddTodo::class.js.unsafeCast>()) \ No newline at end of file +val addTodo: ComponentClass = + rConnect()(nl.lawik.poc.frontend.reactredux.containers.AddTodo::class.js.unsafeCast>()) \ No newline at end of file diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/FilterLink.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/FilterLink.kt index 58e37ae..4204ed8 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/FilterLink.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/FilterLink.kt @@ -5,7 +5,7 @@ import nl.lawik.poc.frontend.reactredux.components.Link import nl.lawik.poc.frontend.reactredux.components.LinkProps import nl.lawik.poc.frontend.reactredux.enums.VisibilityFilter import nl.lawik.poc.frontend.reactredux.reducers.State -import react.RClass +import react.ComponentClass import react.RProps import react.invoke import react.redux.rConnect @@ -23,7 +23,7 @@ private external interface LinkDispatchProps : RProps { var onClick: () -> Unit } -val filterLink: RClass = +val filterLink: ComponentClass = rConnect( { state, ownProps -> active = state.visibilityFilter == ownProps.filter @@ -31,4 +31,4 @@ val filterLink: RClass = { dispatch, ownProps -> onClick = { dispatch(SetVisibilityFilter(ownProps.filter)) } } - )(Link::class.js.unsafeCast>()) + )(Link::class.js.unsafeCast>()) diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/VisibleTodoList.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/VisibleTodoList.kt index 41b7f94..c939d12 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/VisibleTodoList.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/VisibleTodoList.kt @@ -6,7 +6,7 @@ import nl.lawik.poc.frontend.reactredux.components.TodoListProps import nl.lawik.poc.frontend.reactredux.entities.Todo import nl.lawik.poc.frontend.reactredux.enums.VisibilityFilter import nl.lawik.poc.frontend.reactredux.reducers.State -import react.RClass +import react.ComponentClass import react.RProps import react.invoke import react.redux.rConnect @@ -26,7 +26,7 @@ private external interface TodoListDispatchProps : RProps { var toggleTodo: (Int) -> Unit } -val visibleTodoList: RClass = +val visibleTodoList: ComponentClass = rConnect( { state, _ -> todos = getVisibleTodos(state.todos, state.visibilityFilter) @@ -34,4 +34,4 @@ val visibleTodoList: RClass = { dispatch, _ -> toggleTodo = { dispatch(ToggleTodo(it)) } } - )(TodoList::class.js.unsafeCast>()) \ No newline at end of file + )(TodoList::class.js.unsafeCast>()) \ No newline at end of file diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt index 5b41158..288de2d 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt @@ -3,7 +3,6 @@ package nl.lawik.poc.frontend.reactredux.reducers import nl.lawik.poc.frontend.reactredux.entities.Todo import nl.lawik.poc.frontend.reactredux.enums.VisibilityFilter import nl.lawik.poc.frontend.reactredux.util.combineReducers -import redux.Action import redux.RAction From ddb880a92be3e7e3eea97f3b9676cd7c0162af5c Mon Sep 17 00:00:00 2001 From: "Viktor.Noskin" Date: Sat, 31 Jul 2021 18:12:36 +0300 Subject: [PATCH 07/15] refactoring: remove unused combined reducer --- .../nl/lawik/poc/frontend/reactredux/Index.kt | 1 - .../poc/frontend/reactredux/reducers/Index.kt | 9 ------ .../poc/frontend/reactredux/util/Util.kt | 28 ------------------- 3 files changed, 38 deletions(-) delete mode 100644 src/main/kotlin/nl/lawik/poc/frontend/reactredux/util/Util.kt diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/Index.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/Index.kt index c314878..81d44de 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/Index.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/Index.kt @@ -7,7 +7,6 @@ import react.redux.provider import redux.createStore import redux.rEnhancer import kotlinx.browser.document -import nl.lawik.poc.frontend.reactredux.reducers.combinedReducers import nl.lawik.poc.frontend.reactredux.reducers.rootReducer val store = createStore(::rootReducer, State(), rEnhancer()) diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt index 288de2d..2038e19 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt @@ -2,22 +2,13 @@ package nl.lawik.poc.frontend.reactredux.reducers import nl.lawik.poc.frontend.reactredux.entities.Todo import nl.lawik.poc.frontend.reactredux.enums.VisibilityFilter -import nl.lawik.poc.frontend.reactredux.util.combineReducers import redux.RAction - data class State( val todos: Array = emptyArray(), val visibilityFilter: VisibilityFilter = VisibilityFilter.SHOW_ALL ) -fun combinedReducers() = combineReducers( - mapOf( - State::todos to ::todos, - State::visibilityFilter to ::visibilityFilter - ) -) - fun rootReducer( state: State, action: Any diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/util/Util.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/util/Util.kt deleted file mode 100644 index 8c02845..0000000 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/util/Util.kt +++ /dev/null @@ -1,28 +0,0 @@ -package nl.lawik.poc.frontend.reactredux.util - -import redux.Reducer -import redux.combineReducers -import kotlin.reflect.KProperty1 - - -/** - * Helper function that combines reducers using [combineReducers] where the keys in the map are - * properties of the state object instead of strings with the name of the state's properties - * this helper function has 2 advantages over the original: - * - * 1. It is less error-prone, when you change the name of the property of the state you must change the - * corresponding key or you will get a compile error. - * 2. The compiler is now able to infer the [S] type parameter which means it is no longer needed to provide the 2 type parameters explicitly. - * - * @param S state - * @param A action - * @param R state property type - * - * @param reducers map where the key is the state property and the value is the reducer for said property. - * - * @return the combined reducer. - * - */ -fun combineReducers(reducers: Map, Reducer<*, A>>): Reducer { - return combineReducers(reducers.mapKeys { it.key.name }) -} \ No newline at end of file From ed051ccc44e92c8819288867dd2ca6588747d82d Mon Sep 17 00:00:00 2001 From: "Viktor.Noskin" Date: Sat, 31 Jul 2021 18:14:30 +0300 Subject: [PATCH 08/15] feat: update wrappers to 223 --- build.gradle.kts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/build.gradle.kts b/build.gradle.kts index f3f36a1..f5cc5b4 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -14,12 +14,12 @@ repositories { } dependencies { - implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.222-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.222-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-redux:4.1.0-pre.222-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.4-pre.222-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.0-pre.222-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:5.2.0-pre.222-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.223-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.223-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-redux:4.1.0-pre.223-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.4-pre.223-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.0-pre.223-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:5.2.0-pre.223-kotlin-1.5.21") } kotlin { From 12667faaef62f174baf2734ea41ac022d0866187 Mon Sep 17 00:00:00 2001 From: "Viktor.Noskin" Date: Sat, 31 Jul 2021 18:37:36 +0300 Subject: [PATCH 09/15] feat: add kotlin-ringui to project --- build.gradle.kts | 5 ++++- webpack.config.d/ring-ui.js | 3 +++ 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 webpack.config.d/ring-ui.js diff --git a/build.gradle.kts b/build.gradle.kts index f5cc5b4..bfa23ee 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -20,6 +20,10 @@ dependencies { implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.4-pre.223-kotlin-1.5.21") implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.0-pre.223-kotlin-1.5.21") implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:5.2.0-pre.223-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-ring-ui:4.0.21-pre.223-kotlin-1.5.21") + + // for kotlin-ring-ui + implementation(npm("core-js", "^3.16.0")) } kotlin { @@ -27,7 +31,6 @@ kotlin { binaries.executable() browser { commonWebpackConfig { - cssSupport.enabled = true mode = if(project.hasProperty("prod")) Mode.PRODUCTION else Mode.DEVELOPMENT } } diff --git a/webpack.config.d/ring-ui.js b/webpack.config.d/ring-ui.js new file mode 100644 index 0000000..41da041 --- /dev/null +++ b/webpack.config.d/ring-ui.js @@ -0,0 +1,3 @@ +const ringConfig = require('@jetbrains/ring-ui/webpack.config').config; + +config.module.rules.push(...ringConfig.module.rules) \ No newline at end of file From df0a5730454b21a551b77e9e4b9fcacac9b9a031 Mon Sep 17 00:00:00 2001 From: "Viktor.Noskin" Date: Sun, 1 Aug 2021 15:27:59 +0300 Subject: [PATCH 10/15] feat: use ring-ui components, added task deletion and update --- .../frontend/reactredux/actions/Actions.kt | 3 +- .../poc/frontend/reactredux/components/App.kt | 14 +-- .../components/{Footer.kt => Filters.kt} | 8 +- .../frontend/reactredux/components/Link.kt | 15 +-- .../frontend/reactredux/components/Todo.kt | 97 +++++++++++++++++-- .../reactredux/components/TodoList.kt | 16 ++- .../frontend/reactredux/containers/AddTodo.kt | 26 +++-- .../reactredux/containers/VisibleTodoList.kt | 9 +- .../frontend/reactredux/pages/ToDoListPage.kt | 46 +++++++++ .../poc/frontend/reactredux/reducers/Todos.kt | 10 ++ .../frontend/reactredux/ringui/ButtonGroup.kt | 12 +++ .../poc/frontend/reactredux/ringui/Heading.kt | 14 +++ .../poc/frontend/reactredux/ringui/Input.kt | 37 +++++++ 13 files changed, 259 insertions(+), 48 deletions(-) rename src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/{Footer.kt => Filters.kt} (83%) create mode 100644 src/main/kotlin/nl/lawik/poc/frontend/reactredux/pages/ToDoListPage.kt create mode 100644 src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/ButtonGroup.kt create mode 100644 src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/Heading.kt create mode 100644 src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/Input.kt diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/actions/Actions.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/actions/Actions.kt index a4edde9..5eeaa35 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/actions/Actions.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/actions/Actions.kt @@ -13,4 +13,5 @@ class AddTodo(val text: String): RAction { } class ToggleTodo(val id: Int): RAction - +class DeleteTodo(val id: Int): RAction +class EditTodo(val id: Int, val newText: String): RAction \ No newline at end of file diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/App.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/App.kt index 17d484f..0c92b7e 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/App.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/App.kt @@ -1,10 +1,8 @@ package nl.lawik.poc.frontend.reactredux.components -import nl.lawik.poc.frontend.reactredux.containers.addTodo -import nl.lawik.poc.frontend.reactredux.containers.visibleTodoList +import nl.lawik.poc.frontend.reactredux.pages.toDoListPage import react.RBuilder import react.RProps -import react.dom.br import react.dom.div import react.dom.h1 import react.router.dom.browserRouter @@ -28,15 +26,7 @@ fun RBuilder.app() = } } route(TODO_LIST_PATH) { - div { - addTodo {} - visibleTodoList {} - footer() - br {} - navLink("/") { - +"Go back" - } - } + toDoListPage() } } } diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Footer.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Filters.kt similarity index 83% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Footer.kt rename to src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Filters.kt index 54a9f31..ae7d5b4 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Footer.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Filters.kt @@ -2,13 +2,11 @@ package nl.lawik.poc.frontend.reactredux.components import nl.lawik.poc.frontend.reactredux.containers.filterLink import nl.lawik.poc.frontend.reactredux.enums.VisibilityFilter +import nl.lawik.poc.frontend.reactredux.ringui.ButtonGroup import react.RBuilder -import react.dom.div -import react.dom.span -fun RBuilder.footer() = - div { - span { +"Show: " } +fun RBuilder.filters() = + ButtonGroup { filterLink { attrs.filter = VisibilityFilter.SHOW_ALL +"All" diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Link.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Link.kt index 6aeb862..ef05518 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Link.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Link.kt @@ -1,11 +1,7 @@ package nl.lawik.poc.frontend.reactredux.components -import kotlinx.css.marginLeft -import kotlinx.css.px -import kotlinx.html.js.onClickFunction import react.* -import styled.css -import styled.styledButton +import ringui.Button external interface LinkProps : RProps { var active: Boolean @@ -15,12 +11,9 @@ external interface LinkProps : RProps { @JsExport class Link(props: LinkProps) : RComponent(props) { override fun RBuilder.render() { - styledButton { - attrs.onClickFunction = { props.onClick() } - attrs.disabled = props.active - css { - marginLeft = 4.px - } + Button { + attrs.onMouseDown = { props.onClick() } + attrs.active = props.active children() } } diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Todo.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Todo.kt index 0287fcf..b44fcf0 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Todo.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Todo.kt @@ -4,15 +4,96 @@ import kotlinx.css.properties.TextDecorationLine import kotlinx.css.properties.textDecoration import kotlinx.html.js.onClickFunction import nl.lawik.poc.frontend.reactredux.entities.Todo +import nl.lawik.poc.frontend.reactredux.ringui.ButtonGroup +import nl.lawik.poc.frontend.reactredux.ringui.Input +import org.w3c.dom.HTMLInputElement import react.RBuilder +import react.RProps +import react.functionComponent +import react.useState +import ringui.* import styled.css -import styled.styledLi +import styled.styledP -fun RBuilder.todo(todo: Todo, onClick: () -> Unit) = - styledLi { - attrs.onClickFunction = { onClick() } - css { - if (todo.completed) textDecoration(TextDecorationLine.lineThrough) +external interface TodoProps : RProps { + var todo: Todo + var onClick: () -> Unit + var onDelete: () -> Unit + var onUpdate: (String) -> Unit +} + +private val TodoItem = functionComponent { props -> + val (isEdit, setEdit) = useState(false) + val (editableValue, setEditableValue) = useState(props.todo.text) + + Row { + attrs.baseline = RowPosition.xs + attrs.between = RowPosition.xs + Col { + if (!isEdit) { + styledP { + css { + if (props.todo.completed) textDecoration(TextDecorationLine.lineThrough) + } + attrs.onClickFunction = { props.onClick() } + +props.todo.text + } + } else { + Input { + attrs { + value = editableValue + onChange = { event -> + val target = event.target as HTMLInputElement + setEditableValue(target.value) + } + } + } + } + } + Col { + ButtonGroup { + if (isEdit) { + Button { + attrs.onMouseDown = { + setEditableValue(props.todo.text) + setEdit(false) + } + +"Cancel" + } + Button { + attrs { + onMouseDown = { + props.onUpdate(editableValue) + setEdit(false) + } + this.asDynamic().disabled = + editableValue.isBlank() // todo: add property to ring-ui wrappers + } + +"Save" + } + } + Button { + attrs.onMouseDown = { props.onDelete() } + +"Delete" + } + if (!isEdit) { + Button { + attrs.onMouseDown = { setEdit(true) } + +"Edit" + } + } + } + } + } +} + +fun RBuilder.todo(todo: Todo, onClick: () -> Unit, onDelete: () -> Unit, onUpdate: (String) -> Unit) { + TodoItem { + attrs { + this.todo = todo + this.onClick = onClick + this.onDelete = onDelete + this.onUpdate = onUpdate } - +todo.text - } \ No newline at end of file + } +} diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/TodoList.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/TodoList.kt index 03b48e9..fc03c37 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/TodoList.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/TodoList.kt @@ -1,19 +1,31 @@ package nl.lawik.poc.frontend.reactredux.components import nl.lawik.poc.frontend.reactredux.entities.Todo -import react.* +import react.RBuilder +import react.RComponent +import react.RProps +import react.State import react.dom.ul external interface TodoListProps : RProps { var todos: Array var toggleTodo: (Int) -> Unit + var deleteTodo: (Int) -> Unit + var updateTodo: (Int, String) -> Unit } @JsExport class TodoList(props: TodoListProps) : RComponent(props) { override fun RBuilder.render() { ul { - props.todos.forEach { todo(it) { props.toggleTodo(it.id) } } + props.todos.forEach { + todo( + todo = it, + onClick = { props.toggleTodo(it.id) }, + onDelete = { props.deleteTodo(it.id) }, + onUpdate = { newText -> props.updateTodo(it.id, newText) } + ) + } } } } \ No newline at end of file diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt index e042805..3fa66a4 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt @@ -1,18 +1,17 @@ package nl.lawik.poc.frontend.reactredux.containers import kotlinx.html.ButtonType -import kotlinx.html.InputType import kotlinx.html.js.onSubmitFunction import nl.lawik.poc.frontend.reactredux.actions.AddTodo +import nl.lawik.poc.frontend.reactredux.ringui.Input import nl.lawik.poc.frontend.reactredux.store import org.w3c.dom.HTMLInputElement import react.* -import react.dom.button import react.dom.div import react.dom.form -import react.dom.input import react.redux.rConnect import redux.WrapperAction +import ringui.* @JsExport class AddTodo(props: RProps) : RComponent(props) { @@ -29,11 +28,22 @@ class AddTodo(props: RProps) : RComponent(props) { } } } - input(type = InputType.text) { - ref = inputRef - } - button(type = ButtonType.submit) { - +"Add Todo" + Row { + attrs.baseline = RowPosition.xs + attrs.center = RowPosition.xs + Col { + Input { + attrs.size = "L" + attrs.inputRef = inputRef + attrs.label = "Task name" + } + } + Col { + Button { + attrs.asDynamic().type = ButtonType.submit + +"Add Todo" + } + } } } } diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/VisibleTodoList.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/VisibleTodoList.kt index c939d12..886b854 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/VisibleTodoList.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/VisibleTodoList.kt @@ -1,5 +1,7 @@ package nl.lawik.poc.frontend.reactredux.containers +import nl.lawik.poc.frontend.reactredux.actions.DeleteTodo +import nl.lawik.poc.frontend.reactredux.actions.EditTodo import nl.lawik.poc.frontend.reactredux.actions.ToggleTodo import nl.lawik.poc.frontend.reactredux.components.TodoList import nl.lawik.poc.frontend.reactredux.components.TodoListProps @@ -10,6 +12,7 @@ import react.ComponentClass import react.RProps import react.invoke import react.redux.rConnect +import redux.RAction import redux.WrapperAction private fun getVisibleTodos(todos: Array, filter: VisibilityFilter): Array = when (filter) { @@ -24,14 +27,18 @@ private external interface TodoListStateProps : RProps { private external interface TodoListDispatchProps : RProps { var toggleTodo: (Int) -> Unit + var deleteTodo: (Int) -> Unit + var updateTodo: (Int, String) -> Unit } val visibleTodoList: ComponentClass = - rConnect( + rConnect( { state, _ -> todos = getVisibleTodos(state.todos, state.visibilityFilter) }, { dispatch, _ -> toggleTodo = { dispatch(ToggleTodo(it)) } + deleteTodo = { dispatch(DeleteTodo(it)) } + updateTodo = { id, newText -> dispatch(EditTodo(id, newText)) } } )(TodoList::class.js.unsafeCast>()) \ No newline at end of file diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/pages/ToDoListPage.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/pages/ToDoListPage.kt new file mode 100644 index 0000000..d6ed7bc --- /dev/null +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/pages/ToDoListPage.kt @@ -0,0 +1,46 @@ +package nl.lawik.poc.frontend.reactredux.pages + +import nl.lawik.poc.frontend.reactredux.components.filters +import nl.lawik.poc.frontend.reactredux.containers.addTodo +import nl.lawik.poc.frontend.reactredux.containers.visibleTodoList +import nl.lawik.poc.frontend.reactredux.ringui.Heading +import react.RBuilder +import react.RProps +import react.dom.br +import react.router.dom.navLink +import ringui.* + +fun RBuilder.toDoListPage() { + Grid { + Row { + attrs { center = RowPosition.xs } + + Col { + attrs { + xs = 10 + md = 8 + lg = 5 + } + + Island { + IslandHeader { + attrs.border = true + + Heading { + +"Todo app sample" + } + } + IslandContent { + addTodo {} + filters() + visibleTodoList {} + br {} + navLink("/") { + +"Go back" + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Todos.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Todos.kt index 1dd604c..662b15f 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Todos.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Todos.kt @@ -1,6 +1,8 @@ package nl.lawik.poc.frontend.reactredux.reducers import nl.lawik.poc.frontend.reactredux.actions.AddTodo +import nl.lawik.poc.frontend.reactredux.actions.DeleteTodo +import nl.lawik.poc.frontend.reactredux.actions.EditTodo import nl.lawik.poc.frontend.reactredux.actions.ToggleTodo import nl.lawik.poc.frontend.reactredux.entities.Todo import redux.RAction @@ -14,5 +16,13 @@ fun todos(state: Array = emptyArray(), action: RAction): Array = whe it } }.toTypedArray() + is DeleteTodo -> state.filterNot { it.id == action.id }.toTypedArray() + is EditTodo -> state.map { + if(it.id == action.id) { + it.copy(text = action.newText) + } else { + it + } + }.toTypedArray() else -> state } \ No newline at end of file diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/ButtonGroup.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/ButtonGroup.kt new file mode 100644 index 0000000..edf2aab --- /dev/null +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/ButtonGroup.kt @@ -0,0 +1,12 @@ +@file:JsModule("@jetbrains/ring-ui/components/button-group/button-group") +@file:JsNonModule + +package nl.lawik.poc.frontend.reactredux.ringui + +import react.ComponentClass +import react.dom.WithClassName + +external interface ButtonGroupProps : WithClassName + +@JsName("default") +external val ButtonGroup: ComponentClass diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/Heading.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/Heading.kt new file mode 100644 index 0000000..9c4a01d --- /dev/null +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/Heading.kt @@ -0,0 +1,14 @@ +@file:JsModule("@jetbrains/ring-ui/components/heading/heading") +@file:JsNonModule() + +package nl.lawik.poc.frontend.reactredux.ringui + +import react.ComponentClass +import react.dom.WithClassName + +external interface HeadingProps : WithClassName { + var level: Int +} + +@JsName("default") +external val Heading: ComponentClass diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/Input.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/Input.kt new file mode 100644 index 0000000..650e349 --- /dev/null +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/Input.kt @@ -0,0 +1,37 @@ +@file:JsModule("@jetbrains/ring-ui/components/input/input") +@file:JsNonModule + +package nl.lawik.poc.frontend.reactredux.ringui + +import org.w3c.dom.HTMLInputElement +import org.w3c.dom.events.InputEvent +import react.ComponentClass +import react.RefObject +import react.dom.WithClassName + +// https://github.com/JetBrains/ring-ui/blob/master/components/input/input.js +external interface InputProps : WithClassName { + var value: String + var theme: String + var inputClassName: String + var size: String + var label: String + var active: String + var error: String + var multiline: Boolean + var borderless: Boolean + var compact: Boolean + var onChange: (InputEvent) -> Unit + var onClear: () -> Unit + var inputRef: RefObject + var enableShortcuts: Boolean + var disabled: Boolean + var id: String + var placeholder: String + var icon: String + + var renderUnderline: () -> Unit +} + +@JsName("default") +external val Input : ComponentClass From 452e5353edd86da9bd5282f6a999869d5a2cc8d4 Mon Sep 17 00:00:00 2001 From: "Viktor.Noskin" Date: Mon, 2 Aug 2021 13:38:56 +0300 Subject: [PATCH 11/15] feat: update kotlin-wrappers to 224 version --- build.gradle.kts | 14 +++---- .../frontend/reactredux/components/Filters.kt | 2 +- .../frontend/reactredux/components/Todo.kt | 5 +-- .../frontend/reactredux/containers/AddTodo.kt | 1 - .../frontend/reactredux/pages/ToDoListPage.kt | 1 - .../frontend/reactredux/ringui/ButtonGroup.kt | 12 ------ .../poc/frontend/reactredux/ringui/Heading.kt | 14 ------- .../poc/frontend/reactredux/ringui/Input.kt | 37 ------------------- 8 files changed, 9 insertions(+), 77 deletions(-) delete mode 100644 src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/ButtonGroup.kt delete mode 100644 src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/Heading.kt delete mode 100644 src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/Input.kt diff --git a/build.gradle.kts b/build.gradle.kts index bfa23ee..8bad6e2 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -14,13 +14,13 @@ repositories { } dependencies { - implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.223-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.223-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-redux:4.1.0-pre.223-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.4-pre.223-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.0-pre.223-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:5.2.0-pre.223-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-ring-ui:4.0.21-pre.223-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.224-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.224-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-redux:4.1.0-pre.224-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.4-pre.224-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.0-pre.224-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:5.2.0-pre.224-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-ring-ui:4.0.26-pre.224-kotlin-1.5.21") // for kotlin-ring-ui implementation(npm("core-js", "^3.16.0")) diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Filters.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Filters.kt index ae7d5b4..2dbca04 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Filters.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Filters.kt @@ -2,8 +2,8 @@ package nl.lawik.poc.frontend.reactredux.components import nl.lawik.poc.frontend.reactredux.containers.filterLink import nl.lawik.poc.frontend.reactredux.enums.VisibilityFilter -import nl.lawik.poc.frontend.reactredux.ringui.ButtonGroup import react.RBuilder +import ringui.ButtonGroup fun RBuilder.filters() = ButtonGroup { diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Todo.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Todo.kt index b44fcf0..4bc01cc 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Todo.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Todo.kt @@ -4,8 +4,6 @@ import kotlinx.css.properties.TextDecorationLine import kotlinx.css.properties.textDecoration import kotlinx.html.js.onClickFunction import nl.lawik.poc.frontend.reactredux.entities.Todo -import nl.lawik.poc.frontend.reactredux.ringui.ButtonGroup -import nl.lawik.poc.frontend.reactredux.ringui.Input import org.w3c.dom.HTMLInputElement import react.RBuilder import react.RProps @@ -66,8 +64,7 @@ private val TodoItem = functionComponent { props -> props.onUpdate(editableValue) setEdit(false) } - this.asDynamic().disabled = - editableValue.isBlank() // todo: add property to ring-ui wrappers + disabled = editableValue.isBlank() } +"Save" } diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt index 3fa66a4..98c45de 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt @@ -3,7 +3,6 @@ package nl.lawik.poc.frontend.reactredux.containers import kotlinx.html.ButtonType import kotlinx.html.js.onSubmitFunction import nl.lawik.poc.frontend.reactredux.actions.AddTodo -import nl.lawik.poc.frontend.reactredux.ringui.Input import nl.lawik.poc.frontend.reactredux.store import org.w3c.dom.HTMLInputElement import react.* diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/pages/ToDoListPage.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/pages/ToDoListPage.kt index d6ed7bc..955f116 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/pages/ToDoListPage.kt +++ b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/pages/ToDoListPage.kt @@ -3,7 +3,6 @@ package nl.lawik.poc.frontend.reactredux.pages import nl.lawik.poc.frontend.reactredux.components.filters import nl.lawik.poc.frontend.reactredux.containers.addTodo import nl.lawik.poc.frontend.reactredux.containers.visibleTodoList -import nl.lawik.poc.frontend.reactredux.ringui.Heading import react.RBuilder import react.RProps import react.dom.br diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/ButtonGroup.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/ButtonGroup.kt deleted file mode 100644 index edf2aab..0000000 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/ButtonGroup.kt +++ /dev/null @@ -1,12 +0,0 @@ -@file:JsModule("@jetbrains/ring-ui/components/button-group/button-group") -@file:JsNonModule - -package nl.lawik.poc.frontend.reactredux.ringui - -import react.ComponentClass -import react.dom.WithClassName - -external interface ButtonGroupProps : WithClassName - -@JsName("default") -external val ButtonGroup: ComponentClass diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/Heading.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/Heading.kt deleted file mode 100644 index 9c4a01d..0000000 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/Heading.kt +++ /dev/null @@ -1,14 +0,0 @@ -@file:JsModule("@jetbrains/ring-ui/components/heading/heading") -@file:JsNonModule() - -package nl.lawik.poc.frontend.reactredux.ringui - -import react.ComponentClass -import react.dom.WithClassName - -external interface HeadingProps : WithClassName { - var level: Int -} - -@JsName("default") -external val Heading: ComponentClass diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/Input.kt b/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/Input.kt deleted file mode 100644 index 650e349..0000000 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/ringui/Input.kt +++ /dev/null @@ -1,37 +0,0 @@ -@file:JsModule("@jetbrains/ring-ui/components/input/input") -@file:JsNonModule - -package nl.lawik.poc.frontend.reactredux.ringui - -import org.w3c.dom.HTMLInputElement -import org.w3c.dom.events.InputEvent -import react.ComponentClass -import react.RefObject -import react.dom.WithClassName - -// https://github.com/JetBrains/ring-ui/blob/master/components/input/input.js -external interface InputProps : WithClassName { - var value: String - var theme: String - var inputClassName: String - var size: String - var label: String - var active: String - var error: String - var multiline: Boolean - var borderless: Boolean - var compact: Boolean - var onChange: (InputEvent) -> Unit - var onClear: () -> Unit - var inputRef: RefObject - var enableShortcuts: Boolean - var disabled: Boolean - var id: String - var placeholder: String - var icon: String - - var renderUnderline: () -> Unit -} - -@JsName("default") -external val Input : ComponentClass From fd3dc176e1c6eb0b3f08ef7bab693c5ab4b6e655 Mon Sep 17 00:00:00 2001 From: "Viktor.Noskin" Date: Mon, 2 Aug 2021 13:48:48 +0300 Subject: [PATCH 12/15] feat: rename project --- build.gradle.kts | 2 +- settings.gradle.kts | 2 +- .../poc/frontend => }/reactredux/Index.kt | 8 ++++---- .../reactredux/actions/Actions.kt | 4 ++-- .../frontend => }/reactredux/components/App.kt | 4 ++-- .../reactredux/components/Filters.kt | 6 +++--- .../reactredux/components/Link.kt | 2 +- .../reactredux/components/Todo.kt | 4 ++-- .../reactredux/components/TodoList.kt | 4 ++-- .../reactredux/containers/AddTodo.kt | 8 ++++---- .../reactredux/containers/FilterLink.kt | 12 ++++++------ .../reactredux/containers/VisibleTodoList.kt | 18 +++++++++--------- .../frontend => }/reactredux/entities/Todo.kt | 2 +- .../reactredux/enums/VisibilityFilter.kt | 2 +- .../reactredux/pages/ToDoListPage.kt | 8 ++++---- .../frontend => }/reactredux/reducers/Index.kt | 6 +++--- .../frontend => }/reactredux/reducers/Todos.kt | 12 ++++++------ .../reactredux/reducers/VisiblityFilter.kt | 6 +++--- src/main/resources/index.html | 2 +- webpack.config.d/filename.js | 2 +- 20 files changed, 57 insertions(+), 57 deletions(-) rename src/main/kotlin/{nl/lawik/poc/frontend => }/reactredux/Index.kt (61%) rename src/main/kotlin/{nl/lawik/poc/frontend => }/reactredux/actions/Actions.kt (76%) rename src/main/kotlin/{nl/lawik/poc/frontend => }/reactredux/components/App.kt (87%) rename src/main/kotlin/{nl/lawik/poc/frontend => }/reactredux/components/Filters.kt (70%) rename src/main/kotlin/{nl/lawik/poc/frontend => }/reactredux/components/Link.kt (88%) rename src/main/kotlin/{nl/lawik/poc/frontend => }/reactredux/components/Todo.kt (96%) rename src/main/kotlin/{nl/lawik/poc/frontend => }/reactredux/components/TodoList.kt (87%) rename src/main/kotlin/{nl/lawik/poc/frontend => }/reactredux/containers/AddTodo.kt (83%) rename src/main/kotlin/{nl/lawik/poc/frontend => }/reactredux/containers/FilterLink.kt (69%) rename src/main/kotlin/{nl/lawik/poc/frontend => }/reactredux/containers/VisibleTodoList.kt (70%) rename src/main/kotlin/{nl/lawik/poc/frontend => }/reactredux/entities/Todo.kt (59%) rename src/main/kotlin/{nl/lawik/poc/frontend => }/reactredux/enums/VisibilityFilter.kt (63%) rename src/main/kotlin/{nl/lawik/poc/frontend => }/reactredux/pages/ToDoListPage.kt (80%) rename src/main/kotlin/{nl/lawik/poc/frontend => }/reactredux/reducers/Index.kt (67%) rename src/main/kotlin/{nl/lawik/poc/frontend => }/reactredux/reducers/Todos.kt (64%) rename src/main/kotlin/{nl/lawik/poc/frontend => }/reactredux/reducers/VisiblityFilter.kt (55%) diff --git a/build.gradle.kts b/build.gradle.kts index 8bad6e2..0ddfa8f 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -4,7 +4,7 @@ plugins { kotlin("js") version "1.5.21" } -group = "kotlin-poc-frontend-react-redux" +group = "react-redux-todo-list-sample" version = "1.0-SNAPSHOT" repositories { diff --git a/settings.gradle.kts b/settings.gradle.kts index 44921b6..063a9bc 100644 --- a/settings.gradle.kts +++ b/settings.gradle.kts @@ -1,2 +1,2 @@ -rootProject.name = "kotlin-poc-frontend-react-redux" +rootProject.name = "react-redux-todo-list-sample" diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/Index.kt b/src/main/kotlin/reactredux/Index.kt similarity index 61% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/Index.kt rename to src/main/kotlin/reactredux/Index.kt index 81d44de..3119f0a 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/Index.kt +++ b/src/main/kotlin/reactredux/Index.kt @@ -1,13 +1,13 @@ -package nl.lawik.poc.frontend.reactredux +package reactredux -import nl.lawik.poc.frontend.reactredux.components.app -import nl.lawik.poc.frontend.reactredux.reducers.State +import reactredux.components.app +import reactredux.reducers.State import react.dom.render import react.redux.provider import redux.createStore import redux.rEnhancer import kotlinx.browser.document -import nl.lawik.poc.frontend.reactredux.reducers.rootReducer +import reactredux.reducers.rootReducer val store = createStore(::rootReducer, State(), rEnhancer()) diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/actions/Actions.kt b/src/main/kotlin/reactredux/actions/Actions.kt similarity index 76% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/actions/Actions.kt rename to src/main/kotlin/reactredux/actions/Actions.kt index 5eeaa35..c7a1706 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/actions/Actions.kt +++ b/src/main/kotlin/reactredux/actions/Actions.kt @@ -1,6 +1,6 @@ -package nl.lawik.poc.frontend.reactredux.actions +package reactredux.actions -import nl.lawik.poc.frontend.reactredux.enums.VisibilityFilter +import reactredux.enums.VisibilityFilter import redux.RAction class SetVisibilityFilter(val filter: VisibilityFilter) : RAction diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/App.kt b/src/main/kotlin/reactredux/components/App.kt similarity index 87% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/App.kt rename to src/main/kotlin/reactredux/components/App.kt index 0c92b7e..bc0f1a1 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/App.kt +++ b/src/main/kotlin/reactredux/components/App.kt @@ -1,6 +1,6 @@ -package nl.lawik.poc.frontend.reactredux.components +package reactredux.components -import nl.lawik.poc.frontend.reactredux.pages.toDoListPage +import reactredux.pages.toDoListPage import react.RBuilder import react.RProps import react.dom.div diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Filters.kt b/src/main/kotlin/reactredux/components/Filters.kt similarity index 70% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Filters.kt rename to src/main/kotlin/reactredux/components/Filters.kt index 2dbca04..5a64d51 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Filters.kt +++ b/src/main/kotlin/reactredux/components/Filters.kt @@ -1,7 +1,7 @@ -package nl.lawik.poc.frontend.reactredux.components +package reactredux.components -import nl.lawik.poc.frontend.reactredux.containers.filterLink -import nl.lawik.poc.frontend.reactredux.enums.VisibilityFilter +import reactredux.containers.filterLink +import reactredux.enums.VisibilityFilter import react.RBuilder import ringui.ButtonGroup diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Link.kt b/src/main/kotlin/reactredux/components/Link.kt similarity index 88% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Link.kt rename to src/main/kotlin/reactredux/components/Link.kt index ef05518..27f4046 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Link.kt +++ b/src/main/kotlin/reactredux/components/Link.kt @@ -1,4 +1,4 @@ -package nl.lawik.poc.frontend.reactredux.components +package reactredux.components import react.* import ringui.Button diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Todo.kt b/src/main/kotlin/reactredux/components/Todo.kt similarity index 96% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Todo.kt rename to src/main/kotlin/reactredux/components/Todo.kt index 4bc01cc..589f1b6 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/Todo.kt +++ b/src/main/kotlin/reactredux/components/Todo.kt @@ -1,9 +1,9 @@ -package nl.lawik.poc.frontend.reactredux.components +package reactredux.components import kotlinx.css.properties.TextDecorationLine import kotlinx.css.properties.textDecoration import kotlinx.html.js.onClickFunction -import nl.lawik.poc.frontend.reactredux.entities.Todo +import reactredux.entities.Todo import org.w3c.dom.HTMLInputElement import react.RBuilder import react.RProps diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/TodoList.kt b/src/main/kotlin/reactredux/components/TodoList.kt similarity index 87% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/TodoList.kt rename to src/main/kotlin/reactredux/components/TodoList.kt index fc03c37..73bea8b 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/components/TodoList.kt +++ b/src/main/kotlin/reactredux/components/TodoList.kt @@ -1,6 +1,6 @@ -package nl.lawik.poc.frontend.reactredux.components +package reactredux.components -import nl.lawik.poc.frontend.reactredux.entities.Todo +import reactredux.entities.Todo import react.RBuilder import react.RComponent import react.RProps diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt b/src/main/kotlin/reactredux/containers/AddTodo.kt similarity index 83% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt rename to src/main/kotlin/reactredux/containers/AddTodo.kt index 98c45de..ace553a 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/AddTodo.kt +++ b/src/main/kotlin/reactredux/containers/AddTodo.kt @@ -1,9 +1,9 @@ -package nl.lawik.poc.frontend.reactredux.containers +package reactredux.containers import kotlinx.html.ButtonType import kotlinx.html.js.onSubmitFunction -import nl.lawik.poc.frontend.reactredux.actions.AddTodo -import nl.lawik.poc.frontend.reactredux.store +import reactredux.actions.AddTodo +import reactredux.store import org.w3c.dom.HTMLInputElement import react.* import react.dom.div @@ -51,4 +51,4 @@ class AddTodo(props: RProps) : RComponent(props) { val addTodo: ComponentClass = - rConnect()(nl.lawik.poc.frontend.reactredux.containers.AddTodo::class.js.unsafeCast>()) \ No newline at end of file + rConnect()(reactredux.containers.AddTodo::class.js.unsafeCast>()) \ No newline at end of file diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/FilterLink.kt b/src/main/kotlin/reactredux/containers/FilterLink.kt similarity index 69% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/FilterLink.kt rename to src/main/kotlin/reactredux/containers/FilterLink.kt index 4204ed8..15f3e7f 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/FilterLink.kt +++ b/src/main/kotlin/reactredux/containers/FilterLink.kt @@ -1,10 +1,10 @@ -package nl.lawik.poc.frontend.reactredux.containers +package reactredux.containers -import nl.lawik.poc.frontend.reactredux.actions.SetVisibilityFilter -import nl.lawik.poc.frontend.reactredux.components.Link -import nl.lawik.poc.frontend.reactredux.components.LinkProps -import nl.lawik.poc.frontend.reactredux.enums.VisibilityFilter -import nl.lawik.poc.frontend.reactredux.reducers.State +import reactredux.actions.SetVisibilityFilter +import reactredux.components.Link +import reactredux.components.LinkProps +import reactredux.enums.VisibilityFilter +import reactredux.reducers.State import react.ComponentClass import react.RProps import react.invoke diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/VisibleTodoList.kt b/src/main/kotlin/reactredux/containers/VisibleTodoList.kt similarity index 70% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/VisibleTodoList.kt rename to src/main/kotlin/reactredux/containers/VisibleTodoList.kt index 886b854..de70647 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/containers/VisibleTodoList.kt +++ b/src/main/kotlin/reactredux/containers/VisibleTodoList.kt @@ -1,13 +1,13 @@ -package nl.lawik.poc.frontend.reactredux.containers +package reactredux.containers -import nl.lawik.poc.frontend.reactredux.actions.DeleteTodo -import nl.lawik.poc.frontend.reactredux.actions.EditTodo -import nl.lawik.poc.frontend.reactredux.actions.ToggleTodo -import nl.lawik.poc.frontend.reactredux.components.TodoList -import nl.lawik.poc.frontend.reactredux.components.TodoListProps -import nl.lawik.poc.frontend.reactredux.entities.Todo -import nl.lawik.poc.frontend.reactredux.enums.VisibilityFilter -import nl.lawik.poc.frontend.reactredux.reducers.State +import reactredux.actions.DeleteTodo +import reactredux.actions.EditTodo +import reactredux.actions.ToggleTodo +import reactredux.components.TodoList +import reactredux.components.TodoListProps +import reactredux.entities.Todo +import reactredux.enums.VisibilityFilter +import reactredux.reducers.State import react.ComponentClass import react.RProps import react.invoke diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/entities/Todo.kt b/src/main/kotlin/reactredux/entities/Todo.kt similarity index 59% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/entities/Todo.kt rename to src/main/kotlin/reactredux/entities/Todo.kt index 281a634..5cc23b0 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/entities/Todo.kt +++ b/src/main/kotlin/reactredux/entities/Todo.kt @@ -1,3 +1,3 @@ -package nl.lawik.poc.frontend.reactredux.entities +package reactredux.entities data class Todo(val id: Int, val text: String, var completed: Boolean) diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/enums/VisibilityFilter.kt b/src/main/kotlin/reactredux/enums/VisibilityFilter.kt similarity index 63% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/enums/VisibilityFilter.kt rename to src/main/kotlin/reactredux/enums/VisibilityFilter.kt index 9565798..5170bb8 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/enums/VisibilityFilter.kt +++ b/src/main/kotlin/reactredux/enums/VisibilityFilter.kt @@ -1,4 +1,4 @@ -package nl.lawik.poc.frontend.reactredux.enums +package reactredux.enums enum class VisibilityFilter { SHOW_ALL, diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/pages/ToDoListPage.kt b/src/main/kotlin/reactredux/pages/ToDoListPage.kt similarity index 80% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/pages/ToDoListPage.kt rename to src/main/kotlin/reactredux/pages/ToDoListPage.kt index 955f116..f139dfd 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/pages/ToDoListPage.kt +++ b/src/main/kotlin/reactredux/pages/ToDoListPage.kt @@ -1,8 +1,8 @@ -package nl.lawik.poc.frontend.reactredux.pages +package reactredux.pages -import nl.lawik.poc.frontend.reactredux.components.filters -import nl.lawik.poc.frontend.reactredux.containers.addTodo -import nl.lawik.poc.frontend.reactredux.containers.visibleTodoList +import reactredux.components.filters +import reactredux.containers.addTodo +import reactredux.containers.visibleTodoList import react.RBuilder import react.RProps import react.dom.br diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt b/src/main/kotlin/reactredux/reducers/Index.kt similarity index 67% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt rename to src/main/kotlin/reactredux/reducers/Index.kt index 2038e19..92d7ad7 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Index.kt +++ b/src/main/kotlin/reactredux/reducers/Index.kt @@ -1,7 +1,7 @@ -package nl.lawik.poc.frontend.reactredux.reducers +package reactredux.reducers -import nl.lawik.poc.frontend.reactredux.entities.Todo -import nl.lawik.poc.frontend.reactredux.enums.VisibilityFilter +import reactredux.entities.Todo +import reactredux.enums.VisibilityFilter import redux.RAction data class State( diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Todos.kt b/src/main/kotlin/reactredux/reducers/Todos.kt similarity index 64% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Todos.kt rename to src/main/kotlin/reactredux/reducers/Todos.kt index 662b15f..4277132 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/Todos.kt +++ b/src/main/kotlin/reactredux/reducers/Todos.kt @@ -1,10 +1,10 @@ -package nl.lawik.poc.frontend.reactredux.reducers +package reactredux.reducers -import nl.lawik.poc.frontend.reactredux.actions.AddTodo -import nl.lawik.poc.frontend.reactredux.actions.DeleteTodo -import nl.lawik.poc.frontend.reactredux.actions.EditTodo -import nl.lawik.poc.frontend.reactredux.actions.ToggleTodo -import nl.lawik.poc.frontend.reactredux.entities.Todo +import reactredux.actions.AddTodo +import reactredux.actions.DeleteTodo +import reactredux.actions.EditTodo +import reactredux.actions.ToggleTodo +import reactredux.entities.Todo import redux.RAction fun todos(state: Array = emptyArray(), action: RAction): Array = when (action) { diff --git a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/VisiblityFilter.kt b/src/main/kotlin/reactredux/reducers/VisiblityFilter.kt similarity index 55% rename from src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/VisiblityFilter.kt rename to src/main/kotlin/reactredux/reducers/VisiblityFilter.kt index 030e8d5..27907b0 100644 --- a/src/main/kotlin/nl/lawik/poc/frontend/reactredux/reducers/VisiblityFilter.kt +++ b/src/main/kotlin/reactredux/reducers/VisiblityFilter.kt @@ -1,7 +1,7 @@ -package nl.lawik.poc.frontend.reactredux.reducers +package reactredux.reducers -import nl.lawik.poc.frontend.reactredux.actions.SetVisibilityFilter -import nl.lawik.poc.frontend.reactredux.enums.VisibilityFilter +import reactredux.actions.SetVisibilityFilter +import reactredux.enums.VisibilityFilter import redux.RAction fun visibilityFilter( diff --git a/src/main/resources/index.html b/src/main/resources/index.html index 6795924..043f7b4 100644 --- a/src/main/resources/index.html +++ b/src/main/resources/index.html @@ -6,6 +6,6 @@
- + \ No newline at end of file diff --git a/webpack.config.d/filename.js b/webpack.config.d/filename.js index af1c9a6..26f1738 100644 --- a/webpack.config.d/filename.js +++ b/webpack.config.d/filename.js @@ -1 +1 @@ -config.output.filename = "kotlin-poc-frontend-react-redux.bundle.js" \ No newline at end of file +config.output.filename = "react-redux-todo-list-sample.bundle.js" \ No newline at end of file From f15b11bce12151b63de4a8c872df89d285c69bde Mon Sep 17 00:00:00 2001 From: "Viktor.Noskin" Date: Fri, 6 Aug 2021 16:12:22 +0300 Subject: [PATCH 13/15] feat: update project name in readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index dad87f1..efe8859 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Kotlin React Redux PoC +# Kotlin/JS IR BE and React + Redux ToDo List Sample This project is a PoC of using Kotlin (JS) and React, React-Dom, React-Router, Redux and React-Redux. This project is an implementation/translation of the react-redux [Todo List example project](https://redux.js.org/basics/example) in Kotlin (with the addition of react-router). The project showcases the following features: From 602f4c1303bd4d19d0ec1fe1f299b23c692ed7a9 Mon Sep 17 00:00:00 2001 From: "Viktor.Noskin" Date: Tue, 5 Oct 2021 12:52:38 +0300 Subject: [PATCH 14/15] feat: bump kotlin to 1.5.31 and update kotlin-wrappers --- build.gradle.kts | 16 +++++++-------- src/main/kotlin/reactredux/components/App.kt | 20 +++++++++---------- src/main/kotlin/reactredux/components/Link.kt | 4 ++-- src/main/kotlin/reactredux/components/Todo.kt | 7 ++----- .../kotlin/reactredux/components/TodoList.kt | 7 ++----- .../kotlin/reactredux/containers/AddTodo.kt | 6 +++--- .../reactredux/containers/FilterLink.kt | 8 ++++---- .../reactredux/containers/VisibleTodoList.kt | 10 +++++----- .../kotlin/reactredux/pages/ToDoListPage.kt | 6 +++--- 9 files changed, 39 insertions(+), 45 deletions(-) diff --git a/build.gradle.kts b/build.gradle.kts index 0ddfa8f..4dab627 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -1,7 +1,7 @@ import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig.* plugins { - kotlin("js") version "1.5.21" + kotlin("js") version "1.5.31" } group = "react-redux-todo-list-sample" @@ -14,13 +14,13 @@ repositories { } dependencies { - implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.224-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.224-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-redux:4.1.0-pre.224-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.4-pre.224-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.0-pre.224-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:5.2.0-pre.224-kotlin-1.5.21") - implementation("org.jetbrains.kotlin-wrappers:kotlin-ring-ui:4.0.26-pre.224-kotlin-1.5.21") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.252-kotlin-1.5.31") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.252-kotlin-1.5.31") + implementation("org.jetbrains.kotlin-wrappers:kotlin-redux:4.1.0-pre.252-kotlin-1.5.31") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.4-pre.252-kotlin-1.5.31") + implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.1-pre.252-kotlin-1.5.31") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:5.2.0-pre.252-kotlin-1.5.31") + implementation("org.jetbrains.kotlin-wrappers:kotlin-ring-ui:4.0.47-pre.252-kotlin-1.5.31") // for kotlin-ring-ui implementation(npm("core-js", "^3.16.0")) diff --git a/src/main/kotlin/reactredux/components/App.kt b/src/main/kotlin/reactredux/components/App.kt index bc0f1a1..dda9d51 100644 --- a/src/main/kotlin/reactredux/components/App.kt +++ b/src/main/kotlin/reactredux/components/App.kt @@ -2,30 +2,30 @@ package reactredux.components import reactredux.pages.toDoListPage import react.RBuilder -import react.RProps import react.dom.div import react.dom.h1 -import react.router.dom.browserRouter -import react.router.dom.navLink -import react.router.dom.route -import react.router.dom.switch +import react.router.dom.* private const val TODO_LIST_PATH = "/todolist" fun RBuilder.app() = - browserRouter { - switch { - route("/", exact = true) { + BrowserRouter { + Switch { + Route { // "/", exact = true + attrs.path = arrayOf("/") + attrs.exact = true div { h1 { +"Kotlin React + React-Dom + Redux + React-Redux + React-Router Example" } - navLink(TODO_LIST_PATH) { + NavLink { + attrs.to = TODO_LIST_PATH +"Go to todo list" } } } - route(TODO_LIST_PATH) { + Route { + attrs.path = arrayOf(TODO_LIST_PATH) toDoListPage() } } diff --git a/src/main/kotlin/reactredux/components/Link.kt b/src/main/kotlin/reactredux/components/Link.kt index 27f4046..ed70f03 100644 --- a/src/main/kotlin/reactredux/components/Link.kt +++ b/src/main/kotlin/reactredux/components/Link.kt @@ -3,7 +3,7 @@ package reactredux.components import react.* import ringui.Button -external interface LinkProps : RProps { +external interface LinkProps : PropsWithChildren { var active: Boolean var onClick: () -> Unit } @@ -14,7 +14,7 @@ class Link(props: LinkProps) : RComponent(props) { Button { attrs.onMouseDown = { props.onClick() } attrs.active = props.active - children() + props.children() } } } \ No newline at end of file diff --git a/src/main/kotlin/reactredux/components/Todo.kt b/src/main/kotlin/reactredux/components/Todo.kt index 589f1b6..2824456 100644 --- a/src/main/kotlin/reactredux/components/Todo.kt +++ b/src/main/kotlin/reactredux/components/Todo.kt @@ -5,15 +5,12 @@ import kotlinx.css.properties.textDecoration import kotlinx.html.js.onClickFunction import reactredux.entities.Todo import org.w3c.dom.HTMLInputElement -import react.RBuilder -import react.RProps -import react.functionComponent -import react.useState +import react.* import ringui.* import styled.css import styled.styledP -external interface TodoProps : RProps { +external interface TodoProps : Props { var todo: Todo var onClick: () -> Unit var onDelete: () -> Unit diff --git a/src/main/kotlin/reactredux/components/TodoList.kt b/src/main/kotlin/reactredux/components/TodoList.kt index 73bea8b..00da2f5 100644 --- a/src/main/kotlin/reactredux/components/TodoList.kt +++ b/src/main/kotlin/reactredux/components/TodoList.kt @@ -1,13 +1,10 @@ package reactredux.components +import react.* import reactredux.entities.Todo -import react.RBuilder -import react.RComponent -import react.RProps -import react.State import react.dom.ul -external interface TodoListProps : RProps { +external interface TodoListProps : Props { var todos: Array var toggleTodo: (Int) -> Unit var deleteTodo: (Int) -> Unit diff --git a/src/main/kotlin/reactredux/containers/AddTodo.kt b/src/main/kotlin/reactredux/containers/AddTodo.kt index ace553a..0fc9db1 100644 --- a/src/main/kotlin/reactredux/containers/AddTodo.kt +++ b/src/main/kotlin/reactredux/containers/AddTodo.kt @@ -13,7 +13,7 @@ import redux.WrapperAction import ringui.* @JsExport -class AddTodo(props: RProps) : RComponent(props) { +class AddTodo(props: Props) : RComponent(props) { private val inputRef = createRef() override fun RBuilder.render() { div { @@ -50,5 +50,5 @@ class AddTodo(props: RProps) : RComponent(props) { } -val addTodo: ComponentClass = - rConnect()(reactredux.containers.AddTodo::class.js.unsafeCast>()) \ No newline at end of file +val addTodo: ComponentClass = + rConnect()(reactredux.containers.AddTodo::class.js.unsafeCast>()) \ No newline at end of file diff --git a/src/main/kotlin/reactredux/containers/FilterLink.kt b/src/main/kotlin/reactredux/containers/FilterLink.kt index 15f3e7f..9b9fee0 100644 --- a/src/main/kotlin/reactredux/containers/FilterLink.kt +++ b/src/main/kotlin/reactredux/containers/FilterLink.kt @@ -6,20 +6,20 @@ import reactredux.components.LinkProps import reactredux.enums.VisibilityFilter import reactredux.reducers.State import react.ComponentClass -import react.RProps +import react.Props import react.invoke import react.redux.rConnect import redux.WrapperAction -external interface FilterLinkProps : RProps { +external interface FilterLinkProps : Props { var filter: VisibilityFilter } -private external interface LinkStateProps : RProps { +private external interface LinkStateProps : Props { var active: Boolean } -private external interface LinkDispatchProps : RProps { +private external interface LinkDispatchProps : Props { var onClick: () -> Unit } diff --git a/src/main/kotlin/reactredux/containers/VisibleTodoList.kt b/src/main/kotlin/reactredux/containers/VisibleTodoList.kt index de70647..aea8d88 100644 --- a/src/main/kotlin/reactredux/containers/VisibleTodoList.kt +++ b/src/main/kotlin/reactredux/containers/VisibleTodoList.kt @@ -9,7 +9,7 @@ import reactredux.entities.Todo import reactredux.enums.VisibilityFilter import reactredux.reducers.State import react.ComponentClass -import react.RProps +import react.Props import react.invoke import react.redux.rConnect import redux.RAction @@ -21,18 +21,18 @@ private fun getVisibleTodos(todos: Array, filter: VisibilityFilter): Array VisibilityFilter.SHOW_COMPLETED -> todos.filter { it.completed }.toTypedArray() } -private external interface TodoListStateProps : RProps { +private external interface TodoListStateProps : Props { var todos: Array } -private external interface TodoListDispatchProps : RProps { +private external interface TodoListDispatchProps : Props { var toggleTodo: (Int) -> Unit var deleteTodo: (Int) -> Unit var updateTodo: (Int, String) -> Unit } -val visibleTodoList: ComponentClass = - rConnect( +val visibleTodoList: ComponentClass = + rConnect( { state, _ -> todos = getVisibleTodos(state.todos, state.visibilityFilter) }, diff --git a/src/main/kotlin/reactredux/pages/ToDoListPage.kt b/src/main/kotlin/reactredux/pages/ToDoListPage.kt index f139dfd..414638c 100644 --- a/src/main/kotlin/reactredux/pages/ToDoListPage.kt +++ b/src/main/kotlin/reactredux/pages/ToDoListPage.kt @@ -4,9 +4,8 @@ import reactredux.components.filters import reactredux.containers.addTodo import reactredux.containers.visibleTodoList import react.RBuilder -import react.RProps import react.dom.br -import react.router.dom.navLink +import react.router.dom.NavLink import ringui.* fun RBuilder.toDoListPage() { @@ -34,7 +33,8 @@ fun RBuilder.toDoListPage() { filters() visibleTodoList {} br {} - navLink("/") { + NavLink { + attrs.to = "/" +"Go back" } } From 6cf8f3794f3f48442fab14f3a4b7766870a85975 Mon Sep 17 00:00:00 2001 From: "Viktor.Noskin" Date: Wed, 19 Jan 2022 14:41:21 +0300 Subject: [PATCH 15/15] feat: bump kotlin and wrappers versions --- build.gradle.kts | 16 +++++----- src/main/kotlin/reactredux/Index.kt | 2 +- src/main/kotlin/reactredux/components/App.kt | 32 +++++++++++-------- src/main/kotlin/reactredux/components/Todo.kt | 2 +- 4 files changed, 29 insertions(+), 23 deletions(-) diff --git a/build.gradle.kts b/build.gradle.kts index 4dab627..0a6ad7d 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -1,7 +1,7 @@ import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig.* plugins { - kotlin("js") version "1.5.31" + kotlin("js") version "1.6.10" } group = "react-redux-todo-list-sample" @@ -14,13 +14,13 @@ repositories { } dependencies { - implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.252-kotlin-1.5.31") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.252-kotlin-1.5.31") - implementation("org.jetbrains.kotlin-wrappers:kotlin-redux:4.1.0-pre.252-kotlin-1.5.31") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.4-pre.252-kotlin-1.5.31") - implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.1-pre.252-kotlin-1.5.31") - implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:5.2.0-pre.252-kotlin-1.5.31") - implementation("org.jetbrains.kotlin-wrappers:kotlin-ring-ui:4.0.47-pre.252-kotlin-1.5.31") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.290-kotlin-1.6.10") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.290-kotlin-1.6.10") + implementation("org.jetbrains.kotlin-wrappers:kotlin-redux:4.1.2-pre.290-kotlin-1.6.10") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.6-pre.290-kotlin-1.6.10") + implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.3-pre.290-kotlin-1.6.10") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:6.2.1-pre.290-kotlin-1.6.10") + implementation("org.jetbrains.kotlin-wrappers:kotlin-ring-ui:4.1.5-pre.290-kotlin-1.6.10") // for kotlin-ring-ui implementation(npm("core-js", "^3.16.0")) diff --git a/src/main/kotlin/reactredux/Index.kt b/src/main/kotlin/reactredux/Index.kt index 3119f0a..b9df2a0 100644 --- a/src/main/kotlin/reactredux/Index.kt +++ b/src/main/kotlin/reactredux/Index.kt @@ -12,7 +12,7 @@ import reactredux.reducers.rootReducer val store = createStore(::rootReducer, State(), rEnhancer()) fun main() { - val rootDiv = document.getElementById("root") + val rootDiv = document.getElementById("root")!! render(rootDiv) { provider(store) { app() diff --git a/src/main/kotlin/reactredux/components/App.kt b/src/main/kotlin/reactredux/components/App.kt index dda9d51..88e4d93 100644 --- a/src/main/kotlin/reactredux/components/App.kt +++ b/src/main/kotlin/reactredux/components/App.kt @@ -2,31 +2,37 @@ package reactredux.components import reactredux.pages.toDoListPage import react.RBuilder +import react.createElement import react.dom.div import react.dom.h1 +import react.router.Route +import react.router.Routes import react.router.dom.* private const val TODO_LIST_PATH = "/todolist" fun RBuilder.app() = BrowserRouter { - Switch { - Route { // "/", exact = true - attrs.path = arrayOf("/") - attrs.exact = true - div { - h1 { - +"Kotlin React + React-Dom + Redux + React-Redux + React-Router Example" - } - NavLink { - attrs.to = TODO_LIST_PATH - +"Go to todo list" + Routes { + Route { + attrs.path = "/" + attrs.element = createElement { + div { + h1 { + +"Kotlin React + React-Dom + Redux + React-Redux + React-Router Example" + } + NavLink { + attrs.to = TODO_LIST_PATH + +"Go to todo list" + } } } } Route { - attrs.path = arrayOf(TODO_LIST_PATH) - toDoListPage() + attrs.path = TODO_LIST_PATH + attrs.element = createElement { + toDoListPage() + } } } } diff --git a/src/main/kotlin/reactredux/components/Todo.kt b/src/main/kotlin/reactredux/components/Todo.kt index 2824456..17d64ec 100644 --- a/src/main/kotlin/reactredux/components/Todo.kt +++ b/src/main/kotlin/reactredux/components/Todo.kt @@ -17,7 +17,7 @@ external interface TodoProps : Props { var onUpdate: (String) -> Unit } -private val TodoItem = functionComponent { props -> +private val TodoItem = fc { props -> val (isEdit, setEdit) = useState(false) val (editableValue, setEditableValue) = useState(props.todo.text)