From 92f9a060085046d0a1cf4970284554b19c55bcb2 Mon Sep 17 00:00:00 2001
From: Nekoyue <cirno.yue@gmail.com>
Date: Thu, 2 Apr 2020 20:16:09 +0800
Subject: [PATCH 01/14] Update kotlin and reactjs.

---
 build.gradle.kts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/build.gradle.kts b/build.gradle.kts
index 384f5d5..b16c0eb 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -16,13 +16,13 @@ dependencies {
     implementation(kotlin("stdlib-js"))
 
     //React, React DOM + Wrappers (chapter 3)
-    implementation("org.jetbrains:kotlin-react:16.9.0-pre.89-kotlin-1.3.60")
-    implementation("org.jetbrains:kotlin-react-dom:16.9.0-pre.89-kotlin-1.3.60")
-    implementation(npm("react", "16.12.0"))
-    implementation(npm("react-dom", "16.12.0"))
+    implementation("org.jetbrains:kotlin-react:16.13.0-pre.94-kotlin-1.3.70")
+    implementation("org.jetbrains:kotlin-react-dom:16.13.0-pre.94-kotlin-1.3.70")
+    implementation(npm("react", "16.13.1"))
+    implementation(npm("react-dom", "16.13.1"))
 
     //Kotlin Styled (chapter 3)
-    implementation("org.jetbrains:kotlin-styled:1.0.0-pre.90-kotlin-1.3.61")
+    implementation("org.jetbrains:kotlin-styled:1.0.0-pre.94-kotlin-1.3.70")
     implementation(npm("styled-components"))
     implementation(npm("inline-style-prefixer"))
 
@@ -33,7 +33,7 @@ dependencies {
     implementation(npm("react-share"))
 
     //Coroutines (chapter 8)
-    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core-common:1.3.3")
+    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core-common:1.3.5")
 }
 
 kotlin.target.browser { }
\ No newline at end of file

From 13ec914bc77cac4cd0ede4c29d5761ce9531f5c4 Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 5 Feb 2020 13:25:27 +0100
Subject: [PATCH 02/14] Add typesafe HTML representation of website Use styled
 components Add Video data class and example lists for unwatched and watched
 videos

---
 src/main/kotlin/Main.kt | 55 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)

diff --git a/src/main/kotlin/Main.kt b/src/main/kotlin/Main.kt
index efa3a07..3b5d9a8 100644
--- a/src/main/kotlin/Main.kt
+++ b/src/main/kotlin/Main.kt
@@ -1,5 +1,58 @@
+import react.dom.*
 import kotlin.browser.document
+import kotlinx.css.*
+import styled.*
+
+data class Video(val id: Int, val title: String, val speaker: String, val videoUrl: String)
+
+val unwatchedVideos = listOf(
+    Video(1, "Building and breaking things", "John Doe", "https://youtu.be/PsaFVLr8t4E"),
+    Video(2, "The development process", "Jane Smith", "https://youtu.be/PsaFVLr8t4E"),
+    Video(3, "The Web 7.0", "Matt Miller", "https://youtu.be/PsaFVLr8t4E")
+)
+
+val watchedVideos = listOf(
+    Video(4, "Mouseless development", "Tom Jerry", "https://youtu.be/PsaFVLr8t4E")
+)
 
 fun main() {
-    document.bgColor = "blue"
+    render(document.getElementById("root")) {
+        h1 {
+            +"KotlinConf Explorer"
+        }
+        div {
+            h3 {
+                +"Videos to watch"
+            }
+            for(video in unwatchedVideos) {
+                p {
+                    +"${video.speaker}: ${video.title}"
+                }
+            }
+
+            h3 {
+                +"Videos watched"
+            }
+            for(video in watchedVideos) {
+                p {
+                    +"${video.speaker}: ${video.title}"
+                }
+            }
+        }
+        styledDiv {
+            css {
+                position = Position.absolute
+                top = 10.px
+                right = 10.px
+            }
+            h3 {
+                +"John Doe: Building and breaking things"
+            }
+            img {
+                attrs {
+                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+                }
+            }
+        }
+    }
 }
\ No newline at end of file

From daf1370b93fe6ca716830c44a84e771cc4c423f2 Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 5 Feb 2020 13:53:04 +0100
Subject: [PATCH 03/14] Move HTML to App component Introduce VideoList
 component with selection mechanism (state and properties)

---
 src/main/kotlin/App.kt       | 43 ++++++++++++++++++++++++++++++++++++
 src/main/kotlin/Main.kt      | 38 +------------------------------
 src/main/kotlin/VideoList.kt | 40 +++++++++++++++++++++++++++++++++
 3 files changed, 84 insertions(+), 37 deletions(-)
 create mode 100644 src/main/kotlin/App.kt
 create mode 100644 src/main/kotlin/VideoList.kt

diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
new file mode 100644
index 0000000..accd6a9
--- /dev/null
+++ b/src/main/kotlin/App.kt
@@ -0,0 +1,43 @@
+import kotlinx.css.*
+import react.*
+import react.dom.*
+import styled.css
+import styled.styledDiv
+
+class App : RComponent<RProps, RState>() {
+    override fun RBuilder.render() {
+        h1 {
+            +"KotlinConf Explorer"
+        }
+        div {
+            h3 {
+                +"Videos to watch"
+            }
+            videoList {
+                videos = unwatchedVideos
+            }
+
+            h3 {
+                +"Videos watched"
+            }
+            videoList {
+                videos = watchedVideos
+            }
+        }
+        styledDiv {
+            css {
+                position = Position.absolute
+                top = 10.px
+                right = 10.px
+            }
+            h3 {
+                +"John Doe: Building and breaking things"
+            }
+            img {
+                attrs {
+                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/main/kotlin/Main.kt b/src/main/kotlin/Main.kt
index 3b5d9a8..cca790c 100644
--- a/src/main/kotlin/Main.kt
+++ b/src/main/kotlin/Main.kt
@@ -17,42 +17,6 @@ val watchedVideos = listOf(
 
 fun main() {
     render(document.getElementById("root")) {
-        h1 {
-            +"KotlinConf Explorer"
-        }
-        div {
-            h3 {
-                +"Videos to watch"
-            }
-            for(video in unwatchedVideos) {
-                p {
-                    +"${video.speaker}: ${video.title}"
-                }
-            }
-
-            h3 {
-                +"Videos watched"
-            }
-            for(video in watchedVideos) {
-                p {
-                    +"${video.speaker}: ${video.title}"
-                }
-            }
-        }
-        styledDiv {
-            css {
-                position = Position.absolute
-                top = 10.px
-                right = 10.px
-            }
-            h3 {
-                +"John Doe: Building and breaking things"
-            }
-            img {
-                attrs {
-                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
-                }
-            }
-        }
+        child(App::class) {}
     }
 }
\ No newline at end of file
diff --git a/src/main/kotlin/VideoList.kt b/src/main/kotlin/VideoList.kt
new file mode 100644
index 0000000..2b474f1
--- /dev/null
+++ b/src/main/kotlin/VideoList.kt
@@ -0,0 +1,40 @@
+import kotlinx.html.js.onClickFunction
+import kotlin.browser.window
+import react.*
+import react.dom.*
+
+
+interface VideoListProps: RProps {
+    var videos: List<Video>
+}
+
+interface VideoListState: RState {
+    var selectedVideo: Video?
+}
+
+class VideoList: RComponent<VideoListProps, VideoListState>() {
+    override fun RBuilder.render() {
+        for (video in props.videos) {
+            p {
+                key = video.id.toString()
+                attrs {
+                    onClickFunction = {
+                        setState {
+                            selectedVideo = video
+                        }
+                    }
+                }
+                if(video == state.selectedVideo) {
+                    +"▶ "
+                }
+                +"${video.speaker}: ${video.title}"
+            }
+        }
+    }
+}
+
+fun RBuilder.videoList(handler: VideoListProps.() -> Unit): ReactElement {
+    return child(VideoList::class) {
+        this.attrs(handler)
+    }
+}
\ No newline at end of file

From 608b912b7e762dcfe4872b39230c00f892fdc318 Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 5 Feb 2020 13:58:58 +0100
Subject: [PATCH 04/14] Lift currentVideo state to app, remove video list state
 Pass video selection handlers to video list

---
 src/main/kotlin/App.kt       | 18 +++++++++++++++++-
 src/main/kotlin/VideoList.kt | 14 +++++---------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
index accd6a9..5e4e5bf 100644
--- a/src/main/kotlin/App.kt
+++ b/src/main/kotlin/App.kt
@@ -4,7 +4,11 @@ import react.dom.*
 import styled.css
 import styled.styledDiv
 
-class App : RComponent<RProps, RState>() {
+external interface AppState: RState {
+    var currentVideo: Video?
+}
+
+class App : RComponent<RProps, AppState>() {
     override fun RBuilder.render() {
         h1 {
             +"KotlinConf Explorer"
@@ -15,6 +19,12 @@ class App : RComponent<RProps, RState>() {
             }
             videoList {
                 videos = unwatchedVideos
+                selectedVideo = state.currentVideo
+                onSelectVideo = { video ->
+                    setState {
+                        currentVideo = video
+                    }
+                }
             }
 
             h3 {
@@ -22,6 +32,12 @@ class App : RComponent<RProps, RState>() {
             }
             videoList {
                 videos = watchedVideos
+                selectedVideo = state.currentVideo
+                onSelectVideo = { video ->
+                    setState {
+                        currentVideo = video
+                    }
+                }
             }
         }
         styledDiv {
diff --git a/src/main/kotlin/VideoList.kt b/src/main/kotlin/VideoList.kt
index 2b474f1..5705f8b 100644
--- a/src/main/kotlin/VideoList.kt
+++ b/src/main/kotlin/VideoList.kt
@@ -4,27 +4,23 @@ import react.*
 import react.dom.*
 
 
-interface VideoListProps: RProps {
+external interface VideoListProps: RProps {
     var videos: List<Video>
-}
-
-interface VideoListState: RState {
     var selectedVideo: Video?
+    var onSelectVideo: (Video) -> Unit
 }
 
-class VideoList: RComponent<VideoListProps, VideoListState>() {
+class VideoList: RComponent<VideoListProps, RState>() {
     override fun RBuilder.render() {
         for (video in props.videos) {
             p {
                 key = video.id.toString()
                 attrs {
                     onClickFunction = {
-                        setState {
-                            selectedVideo = video
-                        }
+                        props.onSelectVideo(video)
                     }
                 }
-                if(video == state.selectedVideo) {
+                if(video == props.selectedVideo) {
                     +"▶ "
                 }
                 +"${video.speaker}: ${video.title}"

From 8c1735d315ba31c909caf9b7dbf60d2f898a7c76 Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 5 Feb 2020 14:10:58 +0100
Subject: [PATCH 05/14] Extract video player component Add "Mark as
 (un)watched" button to video player Move (un)watched videos to AppState

---
 src/main/kotlin/App.kt         | 47 ++++++++++++++++++++----------
 src/main/kotlin/Main.kt        | 10 -------
 src/main/kotlin/VideoPlayer.kt | 53 ++++++++++++++++++++++++++++++++++
 3 files changed, 85 insertions(+), 25 deletions(-)
 create mode 100644 src/main/kotlin/VideoPlayer.kt

diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
index 5e4e5bf..1991b76 100644
--- a/src/main/kotlin/App.kt
+++ b/src/main/kotlin/App.kt
@@ -4,11 +4,24 @@ import react.dom.*
 import styled.css
 import styled.styledDiv
 
-external interface AppState: RState {
+external interface AppState : RState {
     var currentVideo: Video?
+    var unwatchedVideos: List<Video>
+    var watchedVideos: List<Video>
 }
 
 class App : RComponent<RProps, AppState>() {
+    override fun AppState.init() {
+        unwatchedVideos = listOf(
+            Video(1, "Building and breaking things", "John Doe", "https://youtu.be/PsaFVLr8t4E"),
+            Video(2, "The development process", "Jane Smith", "https://youtu.be/PsaFVLr8t4E"),
+            Video(3, "The Web 7.0", "Matt Miller", "https://youtu.be/PsaFVLr8t4E")
+        )
+        watchedVideos = listOf(
+            Video(4, "Mouseless development", "Tom Jerry", "https://youtu.be/PsaFVLr8t4E")
+        )
+    }
+
     override fun RBuilder.render() {
         h1 {
             +"KotlinConf Explorer"
@@ -18,7 +31,7 @@ class App : RComponent<RProps, AppState>() {
                 +"Videos to watch"
             }
             videoList {
-                videos = unwatchedVideos
+                videos = state.unwatchedVideos
                 selectedVideo = state.currentVideo
                 onSelectVideo = { video ->
                     setState {
@@ -31,7 +44,7 @@ class App : RComponent<RProps, AppState>() {
                 +"Videos watched"
             }
             videoList {
-                videos = watchedVideos
+                videos = state.watchedVideos
                 selectedVideo = state.currentVideo
                 onSelectVideo = { video ->
                     setState {
@@ -40,18 +53,22 @@ class App : RComponent<RProps, AppState>() {
                 }
             }
         }
-        styledDiv {
-            css {
-                position = Position.absolute
-                top = 10.px
-                right = 10.px
-            }
-            h3 {
-                +"John Doe: Building and breaking things"
-            }
-            img {
-                attrs {
-                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+        state.currentVideo?.let { currentVideo ->
+            videoPlayer {
+                video = currentVideo
+                unwatchedVideo = currentVideo in state.unwatchedVideos
+                onWatchedButtonPressed = {
+                    if (video in state.unwatchedVideos) {
+                        setState {
+                            unwatchedVideos -= video
+                            watchedVideos += video
+                        }
+                    } else {
+                        setState {
+                            watchedVideos -= video
+                            unwatchedVideos += video
+                        }
+                    }
                 }
             }
         }
diff --git a/src/main/kotlin/Main.kt b/src/main/kotlin/Main.kt
index cca790c..56c5a8f 100644
--- a/src/main/kotlin/Main.kt
+++ b/src/main/kotlin/Main.kt
@@ -5,16 +5,6 @@ import styled.*
 
 data class Video(val id: Int, val title: String, val speaker: String, val videoUrl: String)
 
-val unwatchedVideos = listOf(
-    Video(1, "Building and breaking things", "John Doe", "https://youtu.be/PsaFVLr8t4E"),
-    Video(2, "The development process", "Jane Smith", "https://youtu.be/PsaFVLr8t4E"),
-    Video(3, "The Web 7.0", "Matt Miller", "https://youtu.be/PsaFVLr8t4E")
-)
-
-val watchedVideos = listOf(
-    Video(4, "Mouseless development", "Tom Jerry", "https://youtu.be/PsaFVLr8t4E")
-)
-
 fun main() {
     render(document.getElementById("root")) {
         child(App::class) {}
diff --git a/src/main/kotlin/VideoPlayer.kt b/src/main/kotlin/VideoPlayer.kt
new file mode 100644
index 0000000..6ea0f00
--- /dev/null
+++ b/src/main/kotlin/VideoPlayer.kt
@@ -0,0 +1,53 @@
+import kotlinx.css.*
+import kotlinx.html.js.onClickFunction
+import react.*
+import react.dom.*
+import styled.*
+
+external interface VideoPlayerProps : RProps {
+    var video: Video
+    var onWatchedButtonPressed: (Video) -> Unit
+    var unwatchedVideo: Boolean
+}
+
+class VideoPlayer(props: VideoPlayerProps) : RComponent<VideoPlayerProps, RState>(props) {
+    override fun RBuilder.render() {
+        styledDiv {
+            css {
+                position = Position.absolute
+                top = 10.px
+                right = 10.px
+            }
+            h3 {
+                +"${props.video.speaker}: ${props.video.title}"
+            }
+            styledButton {
+                css {
+                    display = Display.block
+                    backgroundColor = if (props.unwatchedVideo) Color.lightGreen else Color.red
+                }
+                attrs {
+                    onClickFunction = {
+                        props.onWatchedButtonPressed(props.video)
+                    }
+                }
+                if (props.unwatchedVideo) {
+                    +"Mark as watched"
+                } else {
+                    +"Mark as unwatched"
+                }
+            }
+            img {
+                attrs {
+                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+                }
+            }
+        }
+    }
+}
+
+fun RBuilder.videoPlayer(handler: VideoPlayerProps.() -> Unit): ReactElement {
+    return child(VideoPlayer::class) {
+        this.attrs(handler)
+    }
+}
\ No newline at end of file

From 4e6f7f4cbbe9ffcf147c676689b4400967af4770 Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 5 Feb 2020 13:53:04 +0100
Subject: [PATCH 06/14] Move HTML to App component Introduce VideoList
 component with selection mechanism (state and properties)

---
 src/main/kotlin/App.kt       | 43 ++++++++++++++++++++++++++++++++++++
 src/main/kotlin/Main.kt      | 38 +------------------------------
 src/main/kotlin/VideoList.kt | 40 +++++++++++++++++++++++++++++++++
 3 files changed, 84 insertions(+), 37 deletions(-)
 create mode 100644 src/main/kotlin/App.kt
 create mode 100644 src/main/kotlin/VideoList.kt

diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
new file mode 100644
index 0000000..accd6a9
--- /dev/null
+++ b/src/main/kotlin/App.kt
@@ -0,0 +1,43 @@
+import kotlinx.css.*
+import react.*
+import react.dom.*
+import styled.css
+import styled.styledDiv
+
+class App : RComponent<RProps, RState>() {
+    override fun RBuilder.render() {
+        h1 {
+            +"KotlinConf Explorer"
+        }
+        div {
+            h3 {
+                +"Videos to watch"
+            }
+            videoList {
+                videos = unwatchedVideos
+            }
+
+            h3 {
+                +"Videos watched"
+            }
+            videoList {
+                videos = watchedVideos
+            }
+        }
+        styledDiv {
+            css {
+                position = Position.absolute
+                top = 10.px
+                right = 10.px
+            }
+            h3 {
+                +"John Doe: Building and breaking things"
+            }
+            img {
+                attrs {
+                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/main/kotlin/Main.kt b/src/main/kotlin/Main.kt
index 3b5d9a8..cca790c 100644
--- a/src/main/kotlin/Main.kt
+++ b/src/main/kotlin/Main.kt
@@ -17,42 +17,6 @@ val watchedVideos = listOf(
 
 fun main() {
     render(document.getElementById("root")) {
-        h1 {
-            +"KotlinConf Explorer"
-        }
-        div {
-            h3 {
-                +"Videos to watch"
-            }
-            for(video in unwatchedVideos) {
-                p {
-                    +"${video.speaker}: ${video.title}"
-                }
-            }
-
-            h3 {
-                +"Videos watched"
-            }
-            for(video in watchedVideos) {
-                p {
-                    +"${video.speaker}: ${video.title}"
-                }
-            }
-        }
-        styledDiv {
-            css {
-                position = Position.absolute
-                top = 10.px
-                right = 10.px
-            }
-            h3 {
-                +"John Doe: Building and breaking things"
-            }
-            img {
-                attrs {
-                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
-                }
-            }
-        }
+        child(App::class) {}
     }
 }
\ No newline at end of file
diff --git a/src/main/kotlin/VideoList.kt b/src/main/kotlin/VideoList.kt
new file mode 100644
index 0000000..5bcfed0
--- /dev/null
+++ b/src/main/kotlin/VideoList.kt
@@ -0,0 +1,40 @@
+import kotlinx.html.js.onClickFunction
+import kotlin.browser.window
+import react.*
+import react.dom.*
+
+
+external interface VideoListProps: RProps {
+    var videos: List<Video>
+}
+
+external interface VideoListState: RState {
+    var selectedVideo: Video?
+}
+
+class VideoList: RComponent<VideoListProps, VideoListState>() {
+    override fun RBuilder.render() {
+        for (video in props.videos) {
+            p {
+                key = video.id.toString()
+                attrs {
+                    onClickFunction = {
+                        setState {
+                            selectedVideo = video
+                        }
+                    }
+                }
+                if(video == state.selectedVideo) {
+                    +"▶ "
+                }
+                +"${video.speaker}: ${video.title}"
+            }
+        }
+    }
+}
+
+fun RBuilder.videoList(handler: VideoListProps.() -> Unit): ReactElement {
+    return child(VideoList::class) {
+        this.attrs(handler)
+    }
+}
\ No newline at end of file

From 6fec6c042801a1e422071483411ee59cb85cd50f Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 5 Feb 2020 13:58:58 +0100
Subject: [PATCH 07/14] Lift currentVideo state to app, remove video list state
 Pass video selection handlers to video list

---
 src/main/kotlin/App.kt       | 18 +++++++++++++++++-
 src/main/kotlin/VideoList.kt | 12 ++++--------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
index accd6a9..5e4e5bf 100644
--- a/src/main/kotlin/App.kt
+++ b/src/main/kotlin/App.kt
@@ -4,7 +4,11 @@ import react.dom.*
 import styled.css
 import styled.styledDiv
 
-class App : RComponent<RProps, RState>() {
+external interface AppState: RState {
+    var currentVideo: Video?
+}
+
+class App : RComponent<RProps, AppState>() {
     override fun RBuilder.render() {
         h1 {
             +"KotlinConf Explorer"
@@ -15,6 +19,12 @@ class App : RComponent<RProps, RState>() {
             }
             videoList {
                 videos = unwatchedVideos
+                selectedVideo = state.currentVideo
+                onSelectVideo = { video ->
+                    setState {
+                        currentVideo = video
+                    }
+                }
             }
 
             h3 {
@@ -22,6 +32,12 @@ class App : RComponent<RProps, RState>() {
             }
             videoList {
                 videos = watchedVideos
+                selectedVideo = state.currentVideo
+                onSelectVideo = { video ->
+                    setState {
+                        currentVideo = video
+                    }
+                }
             }
         }
         styledDiv {
diff --git a/src/main/kotlin/VideoList.kt b/src/main/kotlin/VideoList.kt
index 5bcfed0..5705f8b 100644
--- a/src/main/kotlin/VideoList.kt
+++ b/src/main/kotlin/VideoList.kt
@@ -6,25 +6,21 @@ import react.dom.*
 
 external interface VideoListProps: RProps {
     var videos: List<Video>
-}
-
-external interface VideoListState: RState {
     var selectedVideo: Video?
+    var onSelectVideo: (Video) -> Unit
 }
 
-class VideoList: RComponent<VideoListProps, VideoListState>() {
+class VideoList: RComponent<VideoListProps, RState>() {
     override fun RBuilder.render() {
         for (video in props.videos) {
             p {
                 key = video.id.toString()
                 attrs {
                     onClickFunction = {
-                        setState {
-                            selectedVideo = video
-                        }
+                        props.onSelectVideo(video)
                     }
                 }
-                if(video == state.selectedVideo) {
+                if(video == props.selectedVideo) {
                     +"▶ "
                 }
                 +"${video.speaker}: ${video.title}"

From 37ec432c05fd44e57c9e4a81e8b1850e915d1066 Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 5 Feb 2020 14:10:58 +0100
Subject: [PATCH 08/14] Extract video player component Add "Mark as
 (un)watched" button to video player Move (un)watched videos to AppState

---
 src/main/kotlin/App.kt         | 47 ++++++++++++++++++++----------
 src/main/kotlin/Main.kt        | 10 -------
 src/main/kotlin/VideoPlayer.kt | 53 ++++++++++++++++++++++++++++++++++
 3 files changed, 85 insertions(+), 25 deletions(-)
 create mode 100644 src/main/kotlin/VideoPlayer.kt

diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
index 5e4e5bf..1991b76 100644
--- a/src/main/kotlin/App.kt
+++ b/src/main/kotlin/App.kt
@@ -4,11 +4,24 @@ import react.dom.*
 import styled.css
 import styled.styledDiv
 
-external interface AppState: RState {
+external interface AppState : RState {
     var currentVideo: Video?
+    var unwatchedVideos: List<Video>
+    var watchedVideos: List<Video>
 }
 
 class App : RComponent<RProps, AppState>() {
+    override fun AppState.init() {
+        unwatchedVideos = listOf(
+            Video(1, "Building and breaking things", "John Doe", "https://youtu.be/PsaFVLr8t4E"),
+            Video(2, "The development process", "Jane Smith", "https://youtu.be/PsaFVLr8t4E"),
+            Video(3, "The Web 7.0", "Matt Miller", "https://youtu.be/PsaFVLr8t4E")
+        )
+        watchedVideos = listOf(
+            Video(4, "Mouseless development", "Tom Jerry", "https://youtu.be/PsaFVLr8t4E")
+        )
+    }
+
     override fun RBuilder.render() {
         h1 {
             +"KotlinConf Explorer"
@@ -18,7 +31,7 @@ class App : RComponent<RProps, AppState>() {
                 +"Videos to watch"
             }
             videoList {
-                videos = unwatchedVideos
+                videos = state.unwatchedVideos
                 selectedVideo = state.currentVideo
                 onSelectVideo = { video ->
                     setState {
@@ -31,7 +44,7 @@ class App : RComponent<RProps, AppState>() {
                 +"Videos watched"
             }
             videoList {
-                videos = watchedVideos
+                videos = state.watchedVideos
                 selectedVideo = state.currentVideo
                 onSelectVideo = { video ->
                     setState {
@@ -40,18 +53,22 @@ class App : RComponent<RProps, AppState>() {
                 }
             }
         }
-        styledDiv {
-            css {
-                position = Position.absolute
-                top = 10.px
-                right = 10.px
-            }
-            h3 {
-                +"John Doe: Building and breaking things"
-            }
-            img {
-                attrs {
-                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+        state.currentVideo?.let { currentVideo ->
+            videoPlayer {
+                video = currentVideo
+                unwatchedVideo = currentVideo in state.unwatchedVideos
+                onWatchedButtonPressed = {
+                    if (video in state.unwatchedVideos) {
+                        setState {
+                            unwatchedVideos -= video
+                            watchedVideos += video
+                        }
+                    } else {
+                        setState {
+                            watchedVideos -= video
+                            unwatchedVideos += video
+                        }
+                    }
                 }
             }
         }
diff --git a/src/main/kotlin/Main.kt b/src/main/kotlin/Main.kt
index cca790c..56c5a8f 100644
--- a/src/main/kotlin/Main.kt
+++ b/src/main/kotlin/Main.kt
@@ -5,16 +5,6 @@ import styled.*
 
 data class Video(val id: Int, val title: String, val speaker: String, val videoUrl: String)
 
-val unwatchedVideos = listOf(
-    Video(1, "Building and breaking things", "John Doe", "https://youtu.be/PsaFVLr8t4E"),
-    Video(2, "The development process", "Jane Smith", "https://youtu.be/PsaFVLr8t4E"),
-    Video(3, "The Web 7.0", "Matt Miller", "https://youtu.be/PsaFVLr8t4E")
-)
-
-val watchedVideos = listOf(
-    Video(4, "Mouseless development", "Tom Jerry", "https://youtu.be/PsaFVLr8t4E")
-)
-
 fun main() {
     render(document.getElementById("root")) {
         child(App::class) {}
diff --git a/src/main/kotlin/VideoPlayer.kt b/src/main/kotlin/VideoPlayer.kt
new file mode 100644
index 0000000..6ea0f00
--- /dev/null
+++ b/src/main/kotlin/VideoPlayer.kt
@@ -0,0 +1,53 @@
+import kotlinx.css.*
+import kotlinx.html.js.onClickFunction
+import react.*
+import react.dom.*
+import styled.*
+
+external interface VideoPlayerProps : RProps {
+    var video: Video
+    var onWatchedButtonPressed: (Video) -> Unit
+    var unwatchedVideo: Boolean
+}
+
+class VideoPlayer(props: VideoPlayerProps) : RComponent<VideoPlayerProps, RState>(props) {
+    override fun RBuilder.render() {
+        styledDiv {
+            css {
+                position = Position.absolute
+                top = 10.px
+                right = 10.px
+            }
+            h3 {
+                +"${props.video.speaker}: ${props.video.title}"
+            }
+            styledButton {
+                css {
+                    display = Display.block
+                    backgroundColor = if (props.unwatchedVideo) Color.lightGreen else Color.red
+                }
+                attrs {
+                    onClickFunction = {
+                        props.onWatchedButtonPressed(props.video)
+                    }
+                }
+                if (props.unwatchedVideo) {
+                    +"Mark as watched"
+                } else {
+                    +"Mark as unwatched"
+                }
+            }
+            img {
+                attrs {
+                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+                }
+            }
+        }
+    }
+}
+
+fun RBuilder.videoPlayer(handler: VideoPlayerProps.() -> Unit): ReactElement {
+    return child(VideoPlayer::class) {
+        this.attrs(handler)
+    }
+}
\ No newline at end of file

From 8d70792a42a62d2cc3798da747bc82f547ee8791 Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 5 Feb 2020 14:28:16 +0100
Subject: [PATCH 09/14] Add react-player and react-share definitions Use
 react-player in video player Add Email and Telegram share buttons to video
 player

---
 src/main/kotlin/ReactPlayer.kt | 11 +++++++++++
 src/main/kotlin/ReactShare.kt  | 26 ++++++++++++++++++++++++++
 src/main/kotlin/VideoPlayer.kt | 25 ++++++++++++++++++++++---
 3 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 src/main/kotlin/ReactPlayer.kt
 create mode 100644 src/main/kotlin/ReactShare.kt

diff --git a/src/main/kotlin/ReactPlayer.kt b/src/main/kotlin/ReactPlayer.kt
new file mode 100644
index 0000000..715b267
--- /dev/null
+++ b/src/main/kotlin/ReactPlayer.kt
@@ -0,0 +1,11 @@
+@file:JsModule("react-player")
+@file:JsNonModule
+
+import react.*
+
+@JsName("default")
+external val reactPlayer: RClass<ReactPlayerProps>
+
+external interface ReactPlayerProps : RProps {
+    var url: String
+}
\ No newline at end of file
diff --git a/src/main/kotlin/ReactShare.kt b/src/main/kotlin/ReactShare.kt
new file mode 100644
index 0000000..10b0ccd
--- /dev/null
+++ b/src/main/kotlin/ReactShare.kt
@@ -0,0 +1,26 @@
+@file:JsModule("react-share")
+@file:JsNonModule
+
+import react.RClass
+import react.RProps
+
+@JsName("EmailIcon")
+external val emailIcon: RClass<IconProps>
+
+@JsName("EmailShareButton")
+external val emailShareButton: RClass<ShareButtonProps>
+
+@JsName("TelegramIcon")
+external val telegramIcon: RClass<IconProps>
+
+@JsName("TelegramShareButton")
+external val telegramShareButton: RClass<ShareButtonProps>
+
+external interface ShareButtonProps : RProps {
+    var url: String
+}
+
+external interface IconProps : RProps {
+    var size: Int
+    var round: Boolean
+}
\ No newline at end of file
diff --git a/src/main/kotlin/VideoPlayer.kt b/src/main/kotlin/VideoPlayer.kt
index 6ea0f00..aa843e2 100644
--- a/src/main/kotlin/VideoPlayer.kt
+++ b/src/main/kotlin/VideoPlayer.kt
@@ -37,10 +37,29 @@ class VideoPlayer(props: VideoPlayerProps) : RComponent<VideoPlayerProps, RState
                     +"Mark as unwatched"
                 }
             }
-            img {
-                attrs {
-                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+            styledDiv {
+                css {
+                    display = Display.flex
+                    marginBottom = 10.px
+                }
+                emailShareButton {
+                    attrs.url = props.video.videoUrl
+                    emailIcon {
+                        attrs.size = 32
+                        attrs.round = true
+                    }
                 }
+
+                telegramShareButton {
+                    attrs.url = props.video.videoUrl
+                    telegramIcon {
+                        attrs.size = 32
+                        attrs.round = true
+                    }
+                }
+            }
+            reactPlayer {
+                attrs.url = props.video.videoUrl
             }
         }
     }

From 538edefed6bdbdc876076ffd7ce2d757c05cfb37 Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 5 Feb 2020 14:33:17 +0100
Subject: [PATCH 10/14] Use external API and coroutines to get real video
 information

---
 src/main/kotlin/App.kt | 36 ++++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
index 1991b76..cc2f8fb 100644
--- a/src/main/kotlin/App.kt
+++ b/src/main/kotlin/App.kt
@@ -1,8 +1,26 @@
+import kotlinx.coroutines.async
 import kotlinx.css.*
 import react.*
 import react.dom.*
 import styled.css
 import styled.styledDiv
+import kotlin.browser.window
+import kotlinx.coroutines.*
+
+suspend fun fetchVideo(id: Int): Video =
+    window.fetch("https://my-json-server.typicode.com/kotlin-hands-on/kotlinconf-json/videos/$id")
+        .await()
+        .json()
+        .await()
+        .unsafeCast<Video>()
+
+suspend fun fetchVideos(): List<Video> = coroutineScope {
+    (1..25).map { id ->
+        async {
+            fetchVideo(id)
+        }
+    }.awaitAll()
+}
 
 external interface AppState : RState {
     var currentVideo: Video?
@@ -12,14 +30,16 @@ external interface AppState : RState {
 
 class App : RComponent<RProps, AppState>() {
     override fun AppState.init() {
-        unwatchedVideos = listOf(
-            Video(1, "Building and breaking things", "John Doe", "https://youtu.be/PsaFVLr8t4E"),
-            Video(2, "The development process", "Jane Smith", "https://youtu.be/PsaFVLr8t4E"),
-            Video(3, "The Web 7.0", "Matt Miller", "https://youtu.be/PsaFVLr8t4E")
-        )
-        watchedVideos = listOf(
-            Video(4, "Mouseless development", "Tom Jerry", "https://youtu.be/PsaFVLr8t4E")
-        )
+        unwatchedVideos = listOf()
+        watchedVideos = listOf()
+
+        val mainScope = MainScope()
+        mainScope.launch {
+            val videos = fetchVideos()
+            setState {
+                unwatchedVideos = videos
+            }
+        }
     }
 
     override fun RBuilder.render() {

From 1a483fca9a335c3813901b7f0982242203f9b2dc Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 5 Feb 2020 13:53:04 +0100
Subject: [PATCH 11/14] Move HTML to App component Introduce VideoList
 component with selection mechanism (state and properties)

---
 src/main/kotlin/App.kt       | 43 ++++++++++++++++++++++++++++++++++++
 src/main/kotlin/Main.kt      | 38 +------------------------------
 src/main/kotlin/VideoList.kt | 40 +++++++++++++++++++++++++++++++++
 3 files changed, 84 insertions(+), 37 deletions(-)
 create mode 100644 src/main/kotlin/App.kt
 create mode 100644 src/main/kotlin/VideoList.kt

diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
new file mode 100644
index 0000000..accd6a9
--- /dev/null
+++ b/src/main/kotlin/App.kt
@@ -0,0 +1,43 @@
+import kotlinx.css.*
+import react.*
+import react.dom.*
+import styled.css
+import styled.styledDiv
+
+class App : RComponent<RProps, RState>() {
+    override fun RBuilder.render() {
+        h1 {
+            +"KotlinConf Explorer"
+        }
+        div {
+            h3 {
+                +"Videos to watch"
+            }
+            videoList {
+                videos = unwatchedVideos
+            }
+
+            h3 {
+                +"Videos watched"
+            }
+            videoList {
+                videos = watchedVideos
+            }
+        }
+        styledDiv {
+            css {
+                position = Position.absolute
+                top = 10.px
+                right = 10.px
+            }
+            h3 {
+                +"John Doe: Building and breaking things"
+            }
+            img {
+                attrs {
+                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/main/kotlin/Main.kt b/src/main/kotlin/Main.kt
index 3b5d9a8..cca790c 100644
--- a/src/main/kotlin/Main.kt
+++ b/src/main/kotlin/Main.kt
@@ -17,42 +17,6 @@ val watchedVideos = listOf(
 
 fun main() {
     render(document.getElementById("root")) {
-        h1 {
-            +"KotlinConf Explorer"
-        }
-        div {
-            h3 {
-                +"Videos to watch"
-            }
-            for(video in unwatchedVideos) {
-                p {
-                    +"${video.speaker}: ${video.title}"
-                }
-            }
-
-            h3 {
-                +"Videos watched"
-            }
-            for(video in watchedVideos) {
-                p {
-                    +"${video.speaker}: ${video.title}"
-                }
-            }
-        }
-        styledDiv {
-            css {
-                position = Position.absolute
-                top = 10.px
-                right = 10.px
-            }
-            h3 {
-                +"John Doe: Building and breaking things"
-            }
-            img {
-                attrs {
-                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
-                }
-            }
-        }
+        child(App::class) {}
     }
 }
\ No newline at end of file
diff --git a/src/main/kotlin/VideoList.kt b/src/main/kotlin/VideoList.kt
new file mode 100644
index 0000000..5bcfed0
--- /dev/null
+++ b/src/main/kotlin/VideoList.kt
@@ -0,0 +1,40 @@
+import kotlinx.html.js.onClickFunction
+import kotlin.browser.window
+import react.*
+import react.dom.*
+
+
+external interface VideoListProps: RProps {
+    var videos: List<Video>
+}
+
+external interface VideoListState: RState {
+    var selectedVideo: Video?
+}
+
+class VideoList: RComponent<VideoListProps, VideoListState>() {
+    override fun RBuilder.render() {
+        for (video in props.videos) {
+            p {
+                key = video.id.toString()
+                attrs {
+                    onClickFunction = {
+                        setState {
+                            selectedVideo = video
+                        }
+                    }
+                }
+                if(video == state.selectedVideo) {
+                    +"▶ "
+                }
+                +"${video.speaker}: ${video.title}"
+            }
+        }
+    }
+}
+
+fun RBuilder.videoList(handler: VideoListProps.() -> Unit): ReactElement {
+    return child(VideoList::class) {
+        this.attrs(handler)
+    }
+}
\ No newline at end of file

From 8e770eb8c4bffc54ee5496a88942df31a6a9fecf Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Mon, 17 Aug 2020 22:33:27 +0200
Subject: [PATCH 12/14] Update code to 1.4 Update Gradle to 6.6 Update
 dependency versions to 1.4-compatible libraries Add explicit versions to NPM
 dependencies Use new Gradle DSL for configuring Kotlin/JS Move kotlin.browser
 to kotlinx.browser

---
 build.gradle.kts                         | 29 ++++++++++++++----------
 gradle/wrapper/gradle-wrapper.properties |  2 +-
 src/main/kotlin/Main.kt                  |  2 +-
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/build.gradle.kts b/build.gradle.kts
index b16c0eb..1b68790 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -1,5 +1,5 @@
 plugins {
-    id("org.jetbrains.kotlin.js") version "1.3.70-eap-184"
+    id("org.jetbrains.kotlin.js") version "1.4.0"
 }
 
 group = "org.example"
@@ -12,28 +12,33 @@ repositories {
     jcenter()
 }
 
+kotlin {
+    js {
+        browser {}
+        binaries.executable()
+    }
+}
+
 dependencies {
     implementation(kotlin("stdlib-js"))
 
     //React, React DOM + Wrappers (chapter 3)
-    implementation("org.jetbrains:kotlin-react:16.13.0-pre.94-kotlin-1.3.70")
-    implementation("org.jetbrains:kotlin-react-dom:16.13.0-pre.94-kotlin-1.3.70")
+    implementation("org.jetbrains:kotlin-react:16.13.1-pre.110-kotlin-1.4.0")
+    implementation("org.jetbrains:kotlin-react-dom:16.13.1-pre.110-kotlin-1.4.0")
     implementation(npm("react", "16.13.1"))
     implementation(npm("react-dom", "16.13.1"))
 
     //Kotlin Styled (chapter 3)
-    implementation("org.jetbrains:kotlin-styled:1.0.0-pre.94-kotlin-1.3.70")
-    implementation(npm("styled-components"))
-    implementation(npm("inline-style-prefixer"))
+    implementation("org.jetbrains:kotlin-styled:1.0.0-pre.110-kotlin-1.4.0")
+    implementation(npm("styled-components", "~5.1.1"))
+    implementation(npm("inline-style-prefixer", "~6.0.0"))
 
     //Video Player (chapter 7)
-    implementation(npm("react-player"))
+    implementation(npm("react-player", "~2.6.0"))
 
     //Share Buttons (chapter 7)
-    implementation(npm("react-share"))
+    implementation(npm("react-share", "~4.2.1"))
 
     //Coroutines (chapter 8)
-    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core-common:1.3.5")
-}
-
-kotlin.target.browser { }
\ No newline at end of file
+    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.9")
+}
\ No newline at end of file
diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties
index ba94df8..6c9a224 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-6.1-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.6-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
diff --git a/src/main/kotlin/Main.kt b/src/main/kotlin/Main.kt
index efa3a07..15f7cf0 100644
--- a/src/main/kotlin/Main.kt
+++ b/src/main/kotlin/Main.kt
@@ -1,4 +1,4 @@
-import kotlin.browser.document
+import kotlinx.browser.document
 
 fun main() {
     document.bgColor = "blue"

From aa0a5f604c5883a5a86fb02167ba16798739033c Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 19 Aug 2020 17:06:14 +0200
Subject: [PATCH 13/14] kotlin.browser => kotlinx.browser

---
 src/main/kotlin/VideoList.kt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/kotlin/VideoList.kt b/src/main/kotlin/VideoList.kt
index 5bcfed0..26669d7 100644
--- a/src/main/kotlin/VideoList.kt
+++ b/src/main/kotlin/VideoList.kt
@@ -1,5 +1,5 @@
 import kotlinx.html.js.onClickFunction
-import kotlin.browser.window
+import kotlinx.browser.window
 import react.*
 import react.dom.*
 

From dae2920d9b5bc14ddb5988d8a8074ef5340163b3 Mon Sep 17 00:00:00 2001
From: Siva <byteshiva@users.noreply.github.com>
Date: Sat, 31 Oct 2020 07:31:30 +0530
Subject: [PATCH 14/14] Correction: Fix Browser import statement

Fix browser import statement
---
 src/main/kotlin/App.kt | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
index cc2f8fb..ea4a30e 100644
--- a/src/main/kotlin/App.kt
+++ b/src/main/kotlin/App.kt
@@ -4,7 +4,7 @@ import react.*
 import react.dom.*
 import styled.css
 import styled.styledDiv
-import kotlin.browser.window
+import kotlinx.browser.window
 import kotlinx.coroutines.*
 
 suspend fun fetchVideo(id: Int): Video =
@@ -93,4 +93,4 @@ class App : RComponent<RProps, AppState>() {
             }
         }
     }
-}
\ No newline at end of file
+}