fix(swift): updated concurrency in quickstart (#7828)

Author: sebsto

src/pages/[platform]/start/quickstart/index.mdx

@@ -1884,7 +1884,15 @@ Once you are done, add the API dependencies to your project. Select **File > Add
 
 ![Shows the Amplify API library for Swift selected](/images/lib/getting-started/ios/set-up-swift-9.png)
 
-After adding the dependencies, update the `init` part of your `MyAmplifyAppApp.swift` file with the following code:
+After adding the dependencies, update the `import` part of your `MyAmplifyAppApp.swift` file with the following code:
+
+```swift title="MyAmplifyAppApp.swift"
+import Amplify
+import AWSCognitoAuthPlugin
+import AWSAPIPlugin
+```
+
+Then, update the `init()` part of your `MyAmplifyAppApp.swift` file with the following code:
 
 ```swift title="MyAmplifyAppApp.swift"
 init() {
@@ -1902,31 +1910,31 @@ Create a new file called `TodoViewModel.swift` and the `createTodo` function wit
 
 ```swift title="TodoViewModel.swift"
 import Amplify
+import SwiftUI
 
 @MainActor
 class TodoViewModel: ObservableObject {
-    func createTodo() {
+    func createTodo() async {
         let creationTime = Temporal.DateTime.now()
         let todo = Todo(
-            content: "Random Todo \(creationTime)",
+            content: "Random Todo \(creationTime.iso8601String)",
             isDone: false,
             createdAt: creationTime,
             updatedAt: creationTime
         )
-        Task {
-            do {
-                let result = try await Amplify.API.mutate(request: .create(todo))
-                switch result {
-                case .success(let todo):
-                    print("Successfully created todo: \(todo)")
-                case .failure(let error):
-                    print("Got failed result with \(error.errorDescription)")
-                }
-            } catch let error as APIError {
-                print("Failed to create todo: ", error)
-            } catch {
-                print("Unexpected error: \(error)")
+        do {
+            let result = try await Amplify.API.mutate(request: .create(todo))
+            switch result {
+            case .success(let todo):
+                print("Successfully created todo: \(todo)")
+                todos.append(todo)
+            case .failure(let error):
+                print("Got failed result with \(error.errorDescription)")
             }
+        } catch let error as APIError {
+            print("Failed to create todo: ", error)
+        } catch {
+            print("Unexpected error: \(error)")
         }
     }
 }
@@ -1946,23 +1954,21 @@ class TodoViewModel: ObservableObject {
         /// ...
     }
 
-    func listTodos() {
+    func listTodos() async {
         let request = GraphQLRequest<Todo>.list(Todo.self)
-        Task {
-            do {
-                let result = try await Amplify.API.query(request: request)
-                switch result {
-                case .success(let todos):
-                    print("Successfully retrieved list of todos: \(todos)")
-                    self.todos = todos.elements
-                case .failure(let error):
-                    print("Got failed result with \(error.errorDescription)")
-                }
-            } catch let error as APIError {
-                print("Failed to query list of todos: ", error)
-            } catch {
-                print("Unexpected error: \(error)")
+        do {
+            let result = try await Amplify.API.query(request: request)
+            switch result {
+            case .success(let todos):
+                print("Successfully retrieved list of todos: \(todos)")
+                self.todos = todos.elements
+            case .failure(let error):
+                print("Got failed result with \(error.errorDescription)")
             }
+        } catch let error as APIError {
+            print("Failed to query list of todos: ", error)
+        } catch {
+            print("Unexpected error: \(error)")
         }
     }
 }
@@ -1987,8 +1993,7 @@ struct ContentView: View {
                     }
                 }
                 Button(action: {
-                    vm.createTodo()
-                    vm.listTodos()
+                    Task { await vm.createTodo() }
                 }) {
                     HStack {
                         Text("Add a New Todo")
@@ -2026,49 +2031,46 @@ class TodoViewModel: ObservableObject {
         // ...
     }
 
-    func deleteTodos(indexSet: IndexSet) {
+    func deleteTodos(indexSet: IndexSet) async {
         for index in indexSet {
-            let todo = todos[index]
-            Task {
-                do {
-                    let result = try await Amplify.API.mutate(request: .delete(todo))
-                    switch result {
-                    case .success(let todo):
-                        print("Successfully deleted todo: \(todo)")
-                    case .failure(let error):
-                        print("Got failed result with \(error.errorDescription)")
-                    }
-                } catch let error as APIError {
-                    print("Failed to deleted todo: ", error)
-                } catch {
-                    print("Unexpected error: \(error)")
-                }
-            }
-        }
-    }
-
-    func updateTodo(todo: Todo) {
-        Task {
             do {
-                let result = try await Amplify.API.mutate(request: .update(todo))
+                let todo = todos[index]
+                let result = try await Amplify.API.mutate(request: .delete(todo))
                 switch result {
                 case .success(let todo):
-                    print("Successfully updated todo: \(todo)")
+                    print("Successfully deleted todo: \(todo)")
+                    todos.remove(at: index)
                 case .failure(let error):
                     print("Got failed result with \(error.errorDescription)")
                 }
             } catch let error as APIError {
-                print("Failed to updated todo: ", error)
+                print("Failed to deleted todo: ", error)
             } catch {
                 print("Unexpected error: \(error)")
             }
         }
     }
+    
+    func updateTodo(todo: Todo) async {
+        do {
+            let result = try await Amplify.API.mutate(request: .update(todo))
+            switch result {
+            case .success(let todo):
+                print("Successfully updated todo: \(todo)")
+            case .failure(let error):
+                print("Got failed result with \(error.errorDescription)")
+            }
+        } catch let error as APIError {
+            print("Failed to updated todo: ", error)
+        } catch {
+            print("Unexpected error: \(error)")
+        }
+    }
 }
 
 ```
 
-Update the `List` in the `ContentView.swift` file with the following code:
+Update the `List` in the `ContentView.swift` file with code to fetch the todos when the View is displayed and to call `deleteTodos(indexSet:)` when the user left-swipe a todo.
 
 ```swift title="ContentView.swift"
 struct ContentView: View {
@@ -2081,11 +2083,14 @@ struct ContentView: View {
                 List {
                     ForEach($vm.todos, id: \.id) { todo in
                         TodoRow(vm: vm, todo: todo)
-                    }.onDelete { indexSet in
-                        vm.deleteTodos(indexSet: indexSet)
-                        vm.listTodos()
+                    }
+                    .onDelete { indexSet in
+                        Task { await vm.deleteTodos(indexSet: indexSet) }
                     }
                 }
+                .task {
+                    await vm.listTodos()
+                }
                 // ... Add new Todo button
             }
         }
@@ -2096,6 +2101,8 @@ struct ContentView: View {
 Lastly, create a new file called `TodoRow.swift` with the following code:
 
 ```swift title="TodoRow.swift"
+import SwiftUI
+
 struct TodoRow: View {
     @ObservedObject var vm: TodoViewModel
     @Binding var todo: Todo
@@ -2104,15 +2111,19 @@ struct TodoRow: View {
         Toggle(isOn: $todo.isDone) {
             Text(todo.content ?? "")
         }
-        .toggleStyle(SwitchToggleStyle())
+        .toggleStyle(.switch)
         .onChange(of: todo.isDone) { _, newValue in
             var updatedTodo = todo
             updatedTodo.isDone = newValue
-            vm.updateTodo(todo: updatedTodo)
-            vm.listTodos()
+            Task { await vm.updateTodo(todo: updatedTodo) }
         }
     }
 }
+
+#Preview {
+    @State var todo = Todo(content: "Hello Todo World 20240706T15:23:42.256Z", isDone: false)
+    return TodoRow(vm: TodoViewModel(), todo: $todo)
+}
 ```
 
 This will update the UI to show a toggle to update the todo `isDone` and a swipe to delete the todo. Now if you run the application you should see the following flow.