Feature mongo async

src/simple-todos/step02/imports/ui/App.svelte

@@ -2,18 +2,25 @@
   import Task from './Task.svelte';
   import { TasksCollection } from '../api/TasksCollection';
 
-  $m: tasks = TasksCollection.find({}).fetch()
+  let getTasks;
+  $m: getTasks = TasksCollection.find({}).fetchAsync()
 </script>
 
 
 <div class="container">
     <header>
-      <h1>Todo List</h1>
+        <h1>Todo List</h1>
     </header>
 
-    <ul>
-      {#each tasks as task (task._id)}
-          <Task task={task} />
-      {/each}
-    </ul>
+    {#await getTasks}
+        <p>Loading...</p>
+    {:then tasks}
+        <ul>
+            {#each tasks as task (task._id)}
+                <Task task={task}/>
+            {/each}
+        </ul>
+    {:catch error}
+        <p>{error.message}</p>
+    {/await}
 </div>

src/simple-todos/step02/server/main.js

@@ -1,10 +1,11 @@
 import { Meteor } from 'meteor/meteor';
 import { TasksCollection } from '/imports/api/TasksCollection';
 
-const insertTask = taskText => TasksCollection.insert({ text: taskText });
+const insertTask = async (taskText) =>
+  await TasksCollection.insert({ text: taskText });
 
-Meteor.startup(() => {
-  if (TasksCollection.find().count() === 0) {
+Meteor.startup(async () => {
+  if (await TasksCollection.find().countAsync() === 0) {
     [
       'First Task',
       'Second Task',

src/simple-todos/step03/imports/ui/App.svelte

@@ -3,20 +3,27 @@
   import Task from './Task.svelte';
   import TaskForm from './TaskForm.svelte';
 
-  $m: tasks = TasksCollection.find({}, { sort: { createdAt: -1 } }).fetch()
+  let getTasks;
+  $m: getTasks = TasksCollection.find({}, { sort: { createdAt: -1 } }).fetchAsync()
 </script>
 
 
 <div class="container">
     <header>
-      <h1>Todo List</h1>
+        <h1>Todo List</h1>
     </header>
 
-    <TaskForm />
+    <TaskForm/>
 
-    <ul>
-      {#each tasks as task (task._id)}
-          <Task task={task} />
-      {/each}
-    </ul>
+    {#await getTasks}
+        <p>Loading...</p>
+    {:then tasks}
+        <ul>
+            {#each tasks as task (task._id)}
+                <Task task={task}/>
+            {/each}
+        </ul>
+    {:catch error}
+        <p>{error.message}</p>
+    {/await}
 </div>

src/simple-todos/step03/imports/ui/TaskForm.svelte

@@ -3,9 +3,9 @@
 
     let newTask = '';
 
-    const handleSubmit = () => {
+    const handleSubmit = async () => {
       // Insert a task into the collection
-      TasksCollection.insert({
+      await TasksCollection.insertAsync({
         text: newTask,
         createdAt: new Date(), // current time
       });

src/simple-todos/step03/server/main.js

@@ -1,10 +1,11 @@
 import { Meteor } from 'meteor/meteor';
 import { TasksCollection } from '/imports/api/TasksCollection';
 
-const insertTask = taskText => TasksCollection.insert({ text: taskText });
+const insertTask = async (taskText) =>
+  await TasksCollection.insert({ text: taskText });
 
-Meteor.startup(() => {
-  if (TasksCollection.find().count() === 0) {
+Meteor.startup(async () => {
+  if (await TasksCollection.find().countAsync() === 0) {
     [
       'First Task',
       'Second Task',

src/simple-todos/step04/imports/ui/App.svelte

@@ -3,7 +3,8 @@
   import Task from './Task.svelte';
   import TaskForm from './TaskForm.svelte';
 
-  $m: tasks = TasksCollection.find({}, { sort: { createdAt: -1 } }).fetch()
+  let getTasks;
+  $m: getTasks = TasksCollection.find({}, { sort: { createdAt: -1 } }).fetchAsync()
 </script>
 
 
@@ -14,9 +15,16 @@
 
     <TaskForm />
 
-    <ul>
-      {#each tasks as task (task._id)}
-          <Task task={task} />
-      {/each}
-    </ul>
+
+    {#await getTasks}
+        <p>Loading...</p>
+    {:then tasks}
+        <ul>
+            {#each tasks as task (task._id)}
+                <Task task={task}/>
+            {/each}
+        </ul>
+    {:catch error}
+        <p>{error.message}</p>
+    {/await}
 </div>

src/simple-todos/step04/imports/ui/Task.svelte

@@ -3,15 +3,15 @@
 
   export let task;
 
-  const toggleChecked = () => {
+  const toggleChecked = async () => {
     // Set the checked property to the opposite of its current value
-    TasksCollection.update(task._id, {
+    await TasksCollection.updateAsync(task._id, {
       $set: { isChecked: !task.isChecked }
     });
   };
 
-  const deleteThisTask = () => {
-    TasksCollection.remove(task._id);
+  const deleteThisTask = async () => {
+    await TasksCollection.removeAsync(task._id);
   };
 </script>
 

src/simple-todos/step04/imports/ui/TaskForm.svelte

@@ -3,9 +3,9 @@
 
     let newTask = '';
 
-    const handleSubmit = () => {
+    const handleSubmit = async () => {
       // Insert a task into the collection
-      TasksCollection.insert({
+      await TasksCollection.insertAsync({
         text: newTask,
         createdAt: new Date(), // current time
       });

src/simple-todos/step04/server/main.js

@@ -1,10 +1,11 @@
 import { Meteor } from 'meteor/meteor';
 import { TasksCollection } from '/imports/api/TasksCollection';
 
-const insertTask = taskText => TasksCollection.insert({ text: taskText });
+const insertTask = async (taskText) =>
+  await TasksCollection.insert({ text: taskText });
 
-Meteor.startup(() => {
-  if (TasksCollection.find().count() === 0) {
+Meteor.startup(async () => {
+  if (await TasksCollection.find().countAsync() === 0) {
     [
       'First Task',
       'Second Task',

src/simple-todos/step05/imports/ui/App.svelte

@@ -3,7 +3,8 @@
   import Task from './Task.svelte';
   import TaskForm from './TaskForm.svelte';
 
-  $m: tasks = TasksCollection.find({}, { sort: { createdAt: -1 } }).fetch()
+  let getTasks;
+  $m: getTasks = TasksCollection.find({}, { sort: { createdAt: -1 } }).fetchAsync()
 </script>
 
 
@@ -18,11 +19,16 @@
 
     <div class="main">
         <TaskForm />
-
-        <ul class="tasks">
-          {#each tasks as task (task._id)}
-              <Task task={task} />
-          {/each}
-        </ul>
+        {#await getTasks}
+            <p>Loading...</p>
+        {:then tasks}
+            <ul class="tasks">
+                {#each tasks as task (task._id)}
+                    <Task task={task}/>
+                {/each}
+            </ul>
+        {:catch error}
+            <p>{error.message}</p>
+        {/await}
     </div>
 </div>

src/simple-todos/step05/imports/ui/Task.svelte

@@ -3,15 +3,15 @@
 
   export let task;
 
-  const toggleChecked = () => {
+  const toggleChecked = async () => {
     // Set the checked property to the opposite of its current value
-    TasksCollection.update(task._id, {
+    await TasksCollection.updateAsync(task._id, {
       $set: { isChecked: !task.isChecked }
     });
   };
 
-  const deleteThisTask = () => {
-    TasksCollection.remove(task._id);
+  const deleteThisTask = async () => {
+    await TasksCollection.removeAsync(task._id);
   };
 </script>
 

src/simple-todos/step05/imports/ui/TaskForm.svelte

@@ -3,9 +3,9 @@
 
     let newTask = '';
 
-    const handleSubmit = () => {
+    const handleSubmit = async () => {
       // Insert a task into the collection
-      TasksCollection.insert({
+      await TasksCollection.insertAsync({
         text: newTask,
         createdAt: new Date(), // current time
       });

src/simple-todos/step05/server/main.js

@@ -1,10 +1,11 @@
 import { Meteor } from 'meteor/meteor';
 import { TasksCollection } from '/imports/api/TasksCollection';
 
-const insertTask = taskText => TasksCollection.insert({ text: taskText });
+const insertTask = async (taskText) =>
+  await TasksCollection.insert({ text: taskText });
 
-Meteor.startup(() => {
-  if (TasksCollection.find().count() === 0) {
+Meteor.startup(async () => {
+  if (await TasksCollection.find().countAsync() === 0) {
     [
       'First Task',
       'Second Task',

src/simple-todos/step06/imports/ui/App.svelte

@@ -6,21 +6,19 @@
   let hideCompleted = false;
 
   const hideCompletedFilter = { isChecked: { $ne: true } };
-
-  let incompleteCount;
-  let pendingTasksTitle = '';
-  let tasks = [];
+  let getTasks;
+  let getCount;
 
   $m: {
-    tasks = TasksCollection.find(hideCompleted ? hideCompletedFilter : {}, {
+    getTasks = TasksCollection.find(hideCompleted ? hideCompletedFilter : {}, {
       sort: { createdAt: -1 },
-    }).fetch();
-
-    incompleteCount = TasksCollection.find(hideCompletedFilter).count();
+    }).fetchAsync();
 
-    pendingTasksTitle = `${incompleteCount ? ` (${incompleteCount})` : ''}`;
+    getCount = TasksCollection.find(hideCompletedFilter).countAsync();
   }
 
+  const pendingTitle = (count) => `${count ? ` (${count})` : ''}`;
+
   const setHideCompleted = (value) => {
     hideCompleted = value;
   };
@@ -30,7 +28,11 @@
   <header>
     <div class="app-bar">
       <div class="app-header">
-        <h1>📝️ To Do List {pendingTasksTitle}</h1>
+        {#await getCount}
+            <h1>📝️ To Do List (...)</h1>
+            {:then count}
+            <h1>📝️ To Do List {pendingTitle(count)}</h1>
+        {/await}
       </div>
     </div>
   </header>
@@ -42,10 +44,16 @@
         {hideCompleted ? 'Show All' : 'Hide Completed'}
       </button>
     </div>
-    <ul class="tasks">
-      {#each tasks as task (task._id)}
-        <Task task={task} />
-      {/each}
-    </ul>
+    {#await getTasks}
+      <p>Loading...</p>
+    {:then tasks}
+      <ul class="tasks">
+        {#each tasks as task (task._id)}
+          <Task task={task}/>
+        {/each}
+      </ul>
+    {:catch error}
+      <p>{error.message}</p>
+    {/await}
   </div>
 </div>

src/simple-todos/step06/imports/ui/Task.svelte

@@ -3,24 +3,24 @@
 
   export let task;
 
-  const toggleChecked = () => {
+  const toggleChecked = async () => {
     // Set the checked property to the opposite of its current value
-    TasksCollection.update(task._id, {
+    await TasksCollection.updateAsync(task._id, {
       $set: { isChecked: !task.isChecked }
     });
   };
 
-  const deleteThisTask = () => {
-    TasksCollection.remove(task._id);
+  const deleteThisTask = async () => {
+    await TasksCollection.removeAsync(task._id);
   };
 </script>
 
 <li>
     <input
             type="checkbox"
-           readonly
-           checked={!!task.isChecked}
-           on:click={toggleChecked}
+            readonly
+            checked={!!task.isChecked}
+            on:click={toggleChecked}
     />
     <span>{ task.text }</span>
     <button class="delete" on:click={deleteThisTask}>&times;</button>

src/simple-todos/step06/imports/ui/TaskForm.svelte

@@ -1,18 +1,18 @@
 <script>
-    import { TasksCollection } from '../api/TasksCollection';
+  import { TasksCollection } from '../api/TasksCollection';
 
-    let newTask = '';
+  let newTask = '';
 
-    const handleSubmit = () => {
-      // Insert a task into the collection
-      TasksCollection.insert({
-        text: newTask,
-        createdAt: new Date(), // current time
-      });
+  const handleSubmit = async () => {
+    // Insert a task into the collection
+    await TasksCollection.insertAsync({
+      text: newTask,
+      createdAt: new Date(), // current time
+    });
 
-      // Clear form
-      newTask = '';
-    }
+    // Clear form
+    newTask = '';
+  }
 </script>
 
 <form class="task-form" on:submit|preventDefault={handleSubmit}>