From 466b0786fd44d40e886e4819285bf6bb08ce7860 Mon Sep 17 00:00:00 2001
From: Gabriel Grubba <70247653+Grubba27@users.noreply.github.com>
Date: Mon, 5 Sep 2022 21:28:17 -0300
Subject: [PATCH 01/15] chore: updated step02
---
src/simple-todos/step02/imports/ui/App.svelte | 21 ++++++----
src/simple-todos/step02/server/main.js | 7 ++--
tutorial/simple-todos/02-collections.md | 38 ++++++++++++-------
3 files changed, 42 insertions(+), 24 deletions(-)
diff --git a/src/simple-todos/step02/imports/ui/App.svelte b/src/simple-todos/step02/imports/ui/App.svelte
index 3f1b70f..aa9e1a3 100644
--- a/src/simple-todos/step02/imports/ui/App.svelte
+++ b/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()
-
- {#each tasks as task (task._id)}
-
- {/each}
-
+ {#await getTasks}
+
Loading...
+ {:then tasks}
+
+ {#each tasks as task (task._id)}
+
+ {/each}
+
+ {:catch error}
+
{error.message}
+ {/await}
diff --git a/src/simple-todos/step02/server/main.js b/src/simple-todos/step02/server/main.js
index cd5ce50..896720a 100644
--- a/src/simple-todos/step02/server/main.js
+++ b/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',
diff --git a/tutorial/simple-todos/02-collections.md b/tutorial/simple-todos/02-collections.md
index c21c51b..9062be2 100644
--- a/tutorial/simple-todos/02-collections.md
+++ b/tutorial/simple-todos/02-collections.md
@@ -37,10 +37,11 @@ You don't need to keep the old content of `server/main.js`.
import { Meteor } from 'meteor/meteor';
import { TasksCollection } from '/imports/api/TasksCollection';
-const insertTask = taskText => TasksCollection.insert({ text: taskText });
-
-Meteor.startup(() => {
- if (TasksCollection.find().count() === 0) {
+const insertTask = async (taskText) =>
+ await TasksCollection.insert({ text: taskText });
+
+Meteor.startup(async () => {
+ if (await TasksCollection.find().countAsync() === 0) {
[
'First Task',
'Second Task',
@@ -48,10 +49,11 @@ Meteor.startup(() => {
'Fourth Task',
'Fifth Task',
'Sixth Task',
- 'Seventh Task'
- ].forEach(insertTask)
+ 'Seventh Task',
+ ].forEach(insertTask);
}
});
+
```
So you are importing the `TasksCollection` and adding a few tasks to it over an array of strings, and for each string, calling a function to insert this string as our `text` field in our `task` document.
@@ -62,13 +64,15 @@ Now comes the fun part, you will render the tasks saved in our database. With Sv
On your file `App.svelte`, import the `TasksCollection` file and, instead of returning a static array, return the tasks saved in the database. Let's use an extension of the Svelte's [$ reactive statements](https://svelte.dev/docs#3_$_marks_a_statement_as_reactive) feature, to maintain your tasks, called [$m](https://github.com/zodern/melte#tracker-statements):
+Because it is an asynchronous function, we need to use the `#await` keyword to wait for the data to be fetched from the database. More information about how Svelte handles asynchronous values can be found [here](https://svelte.dev/docs#template-syntax-await).
+
`imports/ui/App.svelte`
-```html
+```sveltehtml
@@ -77,11 +81,17 @@ On your file `App.svelte`, import the `TasksCollection` file and, instead of ret
Todo List
-
- {#each tasks as task (task._id)}
-
- {/each}
-
+ {#await getTasks}
+ Loading...
+ {:then tasks}
+
+ {#each tasks as task (task._id)}
+
+ {/each}
+
+ {:catch error}
+ {error.message}
+ {/await}
```
From c4239b87bfe24742f498363d0dcf1acdf06178b2 Mon Sep 17 00:00:00 2001
From: Gabriel Grubba <70247653+Grubba27@users.noreply.github.com>
Date: Mon, 5 Sep 2022 21:28:34 -0300
Subject: [PATCH 02/15] chore: updated step03
---
src/simple-todos/step03/imports/ui/App.svelte | 23 ++++++++++++-------
.../step03/imports/ui/TaskForm.svelte | 4 ++--
src/simple-todos/step03/server/main.js | 7 +++---
tutorial/simple-todos/03-forms-and-events.md | 9 ++++----
4 files changed, 26 insertions(+), 17 deletions(-)
diff --git a/src/simple-todos/step03/imports/ui/App.svelte b/src/simple-todos/step03/imports/ui/App.svelte
index 64491ba..06f23bf 100644
--- a/src/simple-todos/step03/imports/ui/App.svelte
+++ b/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()
-
+
-
- {#each tasks as task (task._id)}
-
- {/each}
-
+ {#await getTasks}
+
Loading...
+ {:then tasks}
+
+ {#each tasks as task (task._id)}
+
+ {/each}
+
+ {:catch error}
+
{error.message}
+ {/await}
diff --git a/src/simple-todos/step03/imports/ui/TaskForm.svelte b/src/simple-todos/step03/imports/ui/TaskForm.svelte
index d0bdb47..7e51106 100644
--- a/src/simple-todos/step03/imports/ui/TaskForm.svelte
+++ b/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
});
diff --git a/src/simple-todos/step03/server/main.js b/src/simple-todos/step03/server/main.js
index cd5ce50..896720a 100644
--- a/src/simple-todos/step03/server/main.js
+++ b/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',
diff --git a/tutorial/simple-todos/03-forms-and-events.md b/tutorial/simple-todos/03-forms-and-events.md
index 2e9bb9f..76fc561 100644
--- a/tutorial/simple-todos/03-forms-and-events.md
+++ b/tutorial/simple-todos/03-forms-and-events.md
@@ -27,7 +27,7 @@ Then we can simply add this new form to our `App.svelte` component by first impo
`imports/ui/App.svelte`
-```html
+```sveltehtml
..
```
From 62fdfda384af655ea237c25f6a5ee066928b54ba Mon Sep 17 00:00:00 2001
From: Gabriel Grubba <70247653+Grubba27@users.noreply.github.com>
Date: Mon, 5 Sep 2022 21:28:59 -0300
Subject: [PATCH 03/15] chore: updated step04
---
src/simple-todos/step04/imports/ui/App.svelte | 20 +++++++++++++------
.../step04/imports/ui/Task.svelte | 8 ++++----
.../step04/imports/ui/TaskForm.svelte | 4 ++--
src/simple-todos/step04/server/main.js | 7 ++++---
tutorial/simple-todos/04-update-and-remove.md | 16 +++++++--------
5 files changed, 32 insertions(+), 23 deletions(-)
diff --git a/src/simple-todos/step04/imports/ui/App.svelte b/src/simple-todos/step04/imports/ui/App.svelte
index 64491ba..08c5124 100644
--- a/src/simple-todos/step04/imports/ui/App.svelte
+++ b/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()
@@ -14,9 +15,16 @@
-
- {#each tasks as task (task._id)}
-
- {/each}
-
+
+ {#await getTasks}
+ Loading...
+ {:then tasks}
+
+ {#each tasks as task (task._id)}
+
+ {/each}
+
+ {:catch error}
+ {error.message}
+ {/await}
diff --git a/src/simple-todos/step04/imports/ui/Task.svelte b/src/simple-todos/step04/imports/ui/Task.svelte
index 3ad80ff..3fffb82 100644
--- a/src/simple-todos/step04/imports/ui/Task.svelte
+++ b/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);
};
diff --git a/src/simple-todos/step04/imports/ui/TaskForm.svelte b/src/simple-todos/step04/imports/ui/TaskForm.svelte
index d0bdb47..7e51106 100644
--- a/src/simple-todos/step04/imports/ui/TaskForm.svelte
+++ b/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
});
diff --git a/src/simple-todos/step04/server/main.js b/src/simple-todos/step04/server/main.js
index cd5ce50..896720a 100644
--- a/src/simple-todos/step04/server/main.js
+++ b/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',
diff --git a/tutorial/simple-todos/04-update-and-remove.md b/tutorial/simple-todos/04-update-and-remove.md
index 3a26959..3f1918b 100644
--- a/tutorial/simple-todos/04-update-and-remove.md
+++ b/tutorial/simple-todos/04-update-and-remove.md
@@ -10,7 +10,7 @@ First, you need to add a `checkbox` element to your `Task` component:
`imports/ui/Task.svelte`
-```html
+```sveltehtml
{
- // Set the isChecked property to the opposite of its current value
- TasksCollection.update(task._id, {
- $set: { isChecked: !task.isChecked }
- });
+ const toggleChecked = async () => {
+ // Set the checked property to the opposite of its current value
+ await TasksCollection.updateAsync(task._id, {
+ $set: { isChecked: !task.isChecked }
+ });
};
..
@@ -78,8 +78,8 @@ Now add the removal logic inside the `` tag. It will be just a new fun
```html
..
From ae03ef7cfa93ae444bc98206c5032fe6d5f8a2f1 Mon Sep 17 00:00:00 2001
From: Gabriel Grubba <70247653+Grubba27@users.noreply.github.com>
Date: Mon, 5 Sep 2022 21:29:13 -0300
Subject: [PATCH 04/15] chore: updated step05
---
src/simple-todos/step05/imports/ui/App.svelte | 20 ++++++++++++-------
.../step05/imports/ui/Task.svelte | 8 ++++----
.../step05/imports/ui/TaskForm.svelte | 4 ++--
src/simple-todos/step05/server/main.js | 7 ++++---
tutorial/simple-todos/05-styles.md | 19 +++++++++++-------
5 files changed, 35 insertions(+), 23 deletions(-)
diff --git a/src/simple-todos/step05/imports/ui/App.svelte b/src/simple-todos/step05/imports/ui/App.svelte
index c2d2f8a..b7d8ecf 100644
--- a/src/simple-todos/step05/imports/ui/App.svelte
+++ b/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()
@@ -18,11 +19,16 @@
-
-
- {#each tasks as task (task._id)}
-
- {/each}
-
+ {#await getTasks}
+
Loading...
+ {:then tasks}
+
+ {#each tasks as task (task._id)}
+
+ {/each}
+
+ {:catch error}
+
{error.message}
+ {/await}
diff --git a/src/simple-todos/step05/imports/ui/Task.svelte b/src/simple-todos/step05/imports/ui/Task.svelte
index 3ad80ff..3fffb82 100644
--- a/src/simple-todos/step05/imports/ui/Task.svelte
+++ b/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);
};
diff --git a/src/simple-todos/step05/imports/ui/TaskForm.svelte b/src/simple-todos/step05/imports/ui/TaskForm.svelte
index d0bdb47..7e51106 100644
--- a/src/simple-todos/step05/imports/ui/TaskForm.svelte
+++ b/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
});
diff --git a/src/simple-todos/step05/server/main.js b/src/simple-todos/step05/server/main.js
index cd5ce50..896720a 100644
--- a/src/simple-todos/step05/server/main.js
+++ b/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',
diff --git a/tutorial/simple-todos/05-styles.md b/tutorial/simple-todos/05-styles.md
index f8013ba..2951a5e 100644
--- a/tutorial/simple-todos/05-styles.md
+++ b/tutorial/simple-todos/05-styles.md
@@ -156,7 +156,7 @@ Now you need to add some elements around your components. Also, we need to apply
`imports/ui/App.svelte`
-```html
+```sveltehtml
..
@@ -169,12 +169,17 @@ Now you need to add some elements around your components. Also, we need to apply
-
-
- {#each tasks as task (task._id)}
-
- {/each}
-
+ {#await getTasks}
+
Loading...
+ {:then tasks}
+
+ {#each tasks as task (task._id)}
+
+ {/each}
+
+ {:catch error}
+
{error.message}
+ {/await}
From b41c21c14ec258f3c987c373f2c9ce8f838dd74d Mon Sep 17 00:00:00 2001
From: Gabriel Grubba <70247653+Grubba27@users.noreply.github.com>
Date: Mon, 5 Sep 2022 21:29:25 -0300
Subject: [PATCH 05/15] chore: updated step06
---
src/simple-todos/step06/imports/ui/App.svelte | 38 +++++++++++--------
.../step06/imports/ui/Task.svelte | 14 +++----
.../step06/imports/ui/TaskForm.svelte | 22 +++++------
src/simple-todos/step06/server/main.js | 7 ++--
tutorial/simple-todos/06-filter-tasks.md | 32 ++++++++--------
5 files changed, 62 insertions(+), 51 deletions(-)
diff --git a/src/simple-todos/step06/imports/ui/App.svelte b/src/simple-todos/step06/imports/ui/App.svelte
index 0df1f71..c87260f 100644
--- a/src/simple-todos/step06/imports/ui/App.svelte
+++ b/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 @@
@@ -42,10 +44,16 @@
{hideCompleted ? 'Show All' : 'Hide Completed'}
-
- {#each tasks as task (task._id)}
-
- {/each}
-
+ {#await getTasks}
+ Loading...
+ {:then tasks}
+
+ {#each tasks as task (task._id)}
+
+ {/each}
+
+ {:catch error}
+ {error.message}
+ {/await}
diff --git a/src/simple-todos/step06/imports/ui/Task.svelte b/src/simple-todos/step06/imports/ui/Task.svelte
index 3ad80ff..43911f6 100644
--- a/src/simple-todos/step06/imports/ui/Task.svelte
+++ b/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);
};
{ task.text }
×
diff --git a/src/simple-todos/step06/imports/ui/TaskForm.svelte b/src/simple-todos/step06/imports/ui/TaskForm.svelte
index d0bdb47..0f1bc86 100644
--- a/src/simple-todos/step06/imports/ui/TaskForm.svelte
+++ b/src/simple-todos/step06/imports/ui/TaskForm.svelte
@@ -1,18 +1,18 @@