Use external API and coroutines to get real video information

Author: SebastianAigner

src/main/kotlin/App.kt

@@ -1,8 +1,28 @@
+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 {
+    val response = window
+        .fetch("https://my-json-server.typicode.com/kotlin-hands-on/kotlinconf-json/videos/$id")
+        .await()
+        .json()
+        .await()
+    return response as Video
+}
+
+suspend fun fetchVideos(): List<Video> = coroutineScope {
+    (1..25).map { id ->
+        async {
+            fetchVideo(id)
+        }
+    }.awaitAll()
+}
 
 external interface AppState : RState {
     var currentVideo: Video?
@@ -13,14 +33,16 @@ external interface AppState : RState {
 @JsExport
 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() {