update: adding a Wasm target to the full stack KMP tutorial

codeSnippets/snippets/full-stack-task-manager/composeApp/build.gradle.kts

@@ -67,6 +67,9 @@ kotlin {
         iosMain.dependencies {
             implementation(libs.ktor.client.darwin)
         }
+        wasmJsMain.dependencies {
+            implementation(libs.ktor.client.wasm)
+        }
     }
 }
 

codeSnippets/snippets/full-stack-task-manager/composeApp/src/commonMain/kotlin/com/example/ktor/full_stack_task_manager/App.kt

@@ -1,14 +1,15 @@
 package com.example.ktor.full_stack_task_manager
 
-import Priority
-import Task
-import TaskApi
+import com.example.ktor.full_stack_task_manager.model.Priority
+import com.example.ktor.full_stack_task_manager.model.Task
+import com.example.ktor.full_stack_task_manager.network.TaskApi
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.safeContentPadding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
@@ -18,15 +19,11 @@ import androidx.compose.material3.Card
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextField
-import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import androidx.compose.ui.window.Dialog
 import com.example.ktor.full_stack_task_manager.network.createHttpClient
 import kotlinx.coroutines.launch
 
@@ -37,26 +34,16 @@ fun App() {
         val taskApi = remember { TaskApi(httpClient) }
         var tasks by remember { mutableStateOf(emptyList<Task>()) }
         val scope = rememberCoroutineScope()
-        var currentTask by remember { mutableStateOf<Task?>(null) }
 
         LaunchedEffect(Unit) {
             tasks = taskApi.getAllTasks()
         }
 
-        if (currentTask != null) {
-            UpdateTaskDialog(
-                currentTask!!,
-                onConfirm = {
-                    scope.launch {
-                        taskApi.updateTask(it)
-                        tasks = taskApi.getAllTasks()
-                    }
-                    currentTask = null
-                }
-            )
-        }
-
-        LazyColumn(modifier = Modifier.fillMaxSize().padding(8.dp)) {
+        LazyColumn(
+            modifier = Modifier
+                .safeContentPadding()
+                .fillMaxSize()
+        ) {
             items(tasks) { task ->
                 TaskCard(
                     task,
@@ -67,7 +54,6 @@ fun App() {
                         }
                     },
                     onUpdate = {
-                        currentTask = task
                     }
                 )
             }
@@ -109,54 +95,4 @@ fun TaskCard(
             }
         }
     }
-}
-
-@Composable
-fun UpdateTaskDialog(
-    task: Task,
-    onConfirm: (Task) -> Unit
-) {
-    var description by remember { mutableStateOf(task.description) }
-    var priorityText by remember { mutableStateOf(task.priority.toString()) }
-    val colors = TextFieldDefaults.colors(
-        focusedTextColor = Color.Blue,
-        focusedContainerColor = Color.White,
-    )
-
-    Dialog(onDismissRequest = {}) {
-        Card(
-            modifier = Modifier.fillMaxWidth().padding(4.dp),
-            shape = RoundedCornerShape(CornerSize(4.dp))
-        ) {
-            Column(modifier = Modifier.padding(10.dp)) {
-                Text("Update ${task.name}", fontSize = 20.sp)
-                TextField(
-                    value = description,
-                    onValueChange = { description = it },
-                    label = { Text("Description") },
-                    colors = colors
-                )
-                TextField(
-                    value = priorityText,
-                    onValueChange = { priorityText = it },
-                    label = { Text("Priority") },
-                    colors = colors
-                )
-                OutlinedButton(onClick = {
-                    val newTask = Task(
-                        task.name,
-                        description,
-                        try {
-                            Priority.valueOf(priorityText)
-                        } catch (e: IllegalArgumentException) {
-                            Priority.Low
-                        }
-                    )
-                    onConfirm(newTask)
-                }) {
-                    Text("Update")
-                }
-            }
-        }
-    }
 }

codeSnippets/snippets/full-stack-task-manager/composeApp/src/commonMain/kotlin/com/example/ktor/full_stack_task_manager/App_first.kt

@@ -0,0 +1,43 @@
+package com.example.ktor.full_stack_task_manager
+
+import com.example.ktor.full_stack_task_manager.model.Task
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.safeContentPadding
+import androidx.compose.material3.Button
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import com.example.ktor.full_stack_task_manager.network.TaskApi
+import com.example.ktor.full_stack_task_manager.network.createHttpClient
+import kotlinx.coroutines.launch
+
+@Composable
+fun App() {
+    MaterialTheme {
+        val httpClient = createHttpClient()
+        val taskApi = remember { TaskApi(httpClient) }
+        val tasks = remember { mutableStateOf(emptyList<Task>()) }
+        val scope = rememberCoroutineScope()
+
+        Column(
+            modifier = Modifier
+                .safeContentPadding()
+                .fillMaxSize(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Button(onClick = {
+                scope.launch {
+                    tasks.value = taskApi.getAllTasks()
+                }
+            }) {
+                Text("Fetch Tasks")
+            }
+            for (task in tasks.value) {
+                Text(task.name)
+            }
+        }
+    }
+}

codeSnippets/snippets/full-stack-task-manager/composeApp/src/commonMain/kotlin/com/example/ktor/full_stack_task_manager/network/TaskApi.kt

@@ -1,3 +1,4 @@
+import com.example.ktor.full_stack_task_manager.model.Task
 import io.ktor.client.HttpClient
 import io.ktor.client.call.body
 import io.ktor.client.request.delete

codeSnippets/snippets/full-stack-task-manager/gradle/libs.versions.toml

@@ -38,6 +38,7 @@ ktor-client-cio = { module = "io.ktor:ktor-client-cio", version.ref = "ktor" }
 ktor-client-content-negotiation = { module = "io.ktor:ktor-client-content-negotiation", version.ref = "ktor" }
 ktor-client-core = { module = "io.ktor:ktor-client-core", version.ref = "ktor" }
 ktor-client-darwin = { module = "io.ktor:ktor-client-darwin", version.ref = "ktor" }
+ktor-client-wasm = { module = "io.ktor:ktor-client-js-wasm-js", version.ref = "ktor"}
 ktor-serialization-kotlinx-json = { module = "io.ktor:ktor-serialization-kotlinx-json", version.ref = "ktor" }
 ktor-serialization-kotlinx-json-jvm = { module = "io.ktor:ktor-serialization-kotlinx-json-jvm", version.ref = "ktor" }
 ktor-server-content-negotiation-jvm = { module = "io.ktor:ktor-server-content-negotiation-jvm", version.ref = "ktor" }

codeSnippets/snippets/full-stack-task-manager/server/src/main/kotlin/com/example/ktor/full_stack_task_manager/Application.kt

@@ -1,15 +1,17 @@
 package com.example.ktor.full_stack_task_manager
 
-import InMemoryTaskRepository
-import Task
-import io.ktor.http.HttpStatusCode
-import io.ktor.serialization.JsonConvertException
-import io.ktor.serialization.kotlinx.json.json
+import com.example.ktor.full_stack_task_manager.model.InMemoryTaskRepository
+import com.example.ktor.full_stack_task_manager.model.Priority
+import com.example.ktor.full_stack_task_manager.model.Task
+import io.ktor.http.*
+import io.ktor.serialization.*
+import io.ktor.serialization.kotlinx.json.*
 import io.ktor.server.application.*
 import io.ktor.server.engine.*
 import io.ktor.server.netty.*
-import io.ktor.server.plugins.contentnegotiation.ContentNegotiation
-import io.ktor.server.request.receive
+import io.ktor.server.plugins.contentnegotiation.*
+import io.ktor.server.plugins.cors.routing.*
+import io.ktor.server.request.*
 import io.ktor.server.response.*
 import io.ktor.server.routing.*
 
@@ -22,7 +24,12 @@ fun Application.module() {
     install(ContentNegotiation) {
         json()
     }
-
+    install(CORS) {
+        allowHeader(HttpHeaders.ContentType)
+        // For ease of demonstration we allow any connections.
+        // Don't do this in production if possible.
+        anyHost()
+    }
     val repository = InMemoryTaskRepository()
 
     routing {