Merge pull request #272 from maxtox3/bugfix/state_as_external_interface

changed all state classes to external interfaces

Author: arkivanov

sample/todo-app-js/src/main/kotlin/details/TodoDetailsComponent.kt

@@ -42,7 +42,8 @@ class TodoDetailsComponent(props: TodoDetailsParentProps) :
     private lateinit var controller: TodoDetailsController
 
     init {
-        state = TodoDetailsParentState(TodoDetailsView.Model("", false))
+        state = js("{}") as TodoDetailsParentState
+        state.model = TodoDetailsView.Model("", false)
     }
 
     override fun componentDidMount() {
@@ -146,9 +147,9 @@ class TodoDetailsComponent(props: TodoDetailsParentProps) :
 
 }
 
-class TodoDetailsParentState(
+external interface TodoDetailsParentState : RState {
     var model: TodoDetailsView.Model
-) : RState
+}
 
 external interface TodoDetailsParentProps : RProps {
     var dependencies: TodoDetailsComponent.Dependencies

sample/todo-app-js/src/main/kotlin/list/TodoListComponent.kt

@@ -43,7 +43,9 @@ class TodoListParentComponent(props: TodoListParentProps) : RComponent<TodoListP
     private lateinit var controller: TodoListController
 
     init {
-        state = TodoListParentState(TodoListView.Model(listOf()), TodoAddView.Model(""))
+        state = js("{}") as TodoListParentState
+        state.listModel = TodoListView.Model(listOf())
+        state.addModel = TodoAddView.Model("")
     }
 
     override fun componentDidMount() {
@@ -127,10 +129,10 @@ external interface TodoListParentProps : RProps {
     var dependencies: TodoListParentComponent.Dependencies
 }
 
-class TodoListParentState(
-    var listModel: TodoListView.Model,
+external interface TodoListParentState : RState {
+    var listModel: TodoListView.Model
     var addModel: TodoAddView.Model
-) : RState
+}
 
 fun RBuilder.todoContainer(dependencies: TodoListParentComponent.Dependencies): ReactElement =
     child(TodoListParentComponent::class) {

sample/todo-app-js/src/main/kotlin/root/App.kt

@@ -57,7 +57,9 @@ abstract class App : RComponent<AppProps, AppState>() {
     private val detailsOutput: (TodoDetailsController.Output) -> Unit = ::detailsOutput
 
     init {
-        state = AppState(todoId = "", showDebugDrawer = false)
+        state = js("{}") as AppState
+        state.todoId = ""
+        state.showDebugDrawer = false
     }
 
     override fun RBuilder.render() {
@@ -84,7 +86,7 @@ abstract class App : RComponent<AppProps, AppState>() {
                     }
                 )
             }
-            if (DEBUG && state.showDebugDrawer) {
+            if (DEBUG && state.showDebugDrawer == true) {
                 timeTravel(onClose = ::closeDebug)
             }
         }
@@ -187,10 +189,10 @@ abstract class App : RComponent<AppProps, AppState>() {
     }
 }
 
-class AppState(
-    var todoId: String,
-    var showDebugDrawer: Boolean
-) : RState
+external interface AppState : RState {
+    var todoId: String
+    var showDebugDrawer: Boolean?
+}
 
 external interface AppProps : RProps {
     var dependecies: App.Dependencies

sample/todo-app-js/src/main/kotlin/timetravel/TimeTravelComponent.kt

@@ -26,13 +26,12 @@ class TimeTravelComponent(prps: TimeTravelComponentProps) :
     private var disposable: Disposable? = null
 
     init {
-        state = TimeTravelComponentState(
-            events = listOf(),
-            mode = TimeTravelState.Mode.IDLE,
-            selectedEventIndex = -1,
-            dialogOpen = false,
-            currentEvent = null
-        )
+        state = js("{}") as TimeTravelComponentState
+        state.events = listOf()
+        state.mode = TimeTravelState.Mode.IDLE
+        state.selectedEventIndex = -1
+        state.dialogOpen = false
+        state.currentEvent = null
     }
 
     override fun componentDidMount() {
@@ -74,7 +73,7 @@ class TimeTravelComponent(prps: TimeTravelComponentProps) :
             }
             state.currentEvent?.let { event ->
                 infoDialog(
-                    open = state.dialogOpen,
+                    open = state.dialogOpen == true,
                     event = event,
                     onClose = { hideDialog() }
                 )
@@ -114,13 +113,13 @@ external interface TimeTravelComponentProps : RProps {
     var onClose: () -> Unit
 }
 
-class TimeTravelComponentState(
-    var events: List<TimeTravelEvent>,
-    var mode: TimeTravelState.Mode,
-    var selectedEventIndex: Int,
-    var dialogOpen: Boolean,
+external interface TimeTravelComponentState : RState {
+    var events: List<TimeTravelEvent>
+    var mode: TimeTravelState.Mode
+    var selectedEventIndex: Int
+    var dialogOpen: Boolean?
     var currentEvent: TimeTravelEvent?
-) : RState
+}
 
 fun RBuilder.timeTravel(onClose: () -> Unit): ReactElement =
     child(TimeTravelComponent::class) {

sample/todo-app-js/src/main/kotlin/timetravel/TimeTravelEventsView.kt

@@ -77,7 +77,7 @@ external interface TimeTravelEventsProps : RProps {
     var onItemClick: (TimeTravelEvent) -> Unit
 }
 
-class TimeTravelEventsState : RState
+external interface TimeTravelEventsState : RState
 
 fun RBuilder.timeTravelEventsView(
     events: List<TimeTravelEvent>,