1
00:00:00,000 --> 00:00:04,000
So let's now work on storing that data

2
00:00:04,000 --> 00:00:07,000
and to do that, I'll start in the meals.js file.

3
00:00:08,000 --> 00:00:10,000
Here we have functions for getting "meals"

4
00:00:10,000 --> 00:00:12,000
and getting a single "meal."

5
00:00:12,000 --> 00:00:15,000
Now I want to export another function here,

6
00:00:15,000 --> 00:00:17,000
which is there to save a "meal"

7
00:00:17,000 --> 00:00:21,000
and I expect a "meal" object as an input.

8
00:00:21,000 --> 00:00:24,000
A "meal" object that should have this shape here.

9
00:00:26,000 --> 00:00:27,000
Now, inside of "save meal"

10
00:00:27,000 --> 00:00:31,000
we therefore have to do a couple of things.

11
00:00:31,000 --> 00:00:34,000
For example, we'll need to generate a slug

12
00:00:34,000 --> 00:00:35,000
because in my database,

13
00:00:35,000 --> 00:00:38,000
I wanna store a slug for every "meal"

14
00:00:38,000 --> 00:00:40,000
and we don't get that from the form.

15
00:00:40,000 --> 00:00:43,000
Instead, I want to generate it based on the title.

16
00:00:45,000 --> 00:00:48,000
Now to do that, I'll stop the development server

17
00:00:48,000 --> 00:00:51,000
and install a extra package,

18
00:00:51,000 --> 00:00:56,000
a package called slugify that will do what its name implies,

19
00:00:56,000 --> 00:00:59,000
but that's not the only package I'll install.

20
00:00:59,000 --> 00:01:03,000
Instead, I'll also install a package called xss,

21
00:01:03,000 --> 00:01:05,000
which will help us protect against

22
00:01:05,000 --> 00:01:06,000
cross-site scripting attacks.

23
00:01:08,000 --> 00:01:09,000
Because you must not forget

24
00:01:09,000 --> 00:01:13,000
that we're storing user-generated content

25
00:01:13,000 --> 00:01:16,000
and I'm then outputting these instructions

26
00:01:16,000 --> 00:01:20,000
that are generated by the user as HTML,

27
00:01:20,000 --> 00:01:22,000
here in that "meal" detail page,

28
00:01:22,000 --> 00:01:26,000
I'm outputting those instructions as HTML.

29
00:01:27,000 --> 00:01:31,000
So we are vulnerable to cross-site scripting attacks

30
00:01:31,000 --> 00:01:34,000
and that's why we should protect against them

31
00:01:34,000 --> 00:01:35,000
and why we should sanitize

32
00:01:35,000 --> 00:01:38,000
the content that's sent by the user,

33
00:01:38,000 --> 00:01:40,000
which is exactly what we can do

34
00:01:40,000 --> 00:01:42,000
with help of this xss package.

35
00:01:44,000 --> 00:01:45,000
So therefore, now with that installed,

36
00:01:45,000 --> 00:01:47,000
we can restart the development server

37
00:01:48,000 --> 00:01:50,000
and back here in meals.js,

38
00:01:50,000 --> 00:01:52,000
I now want to import these two packages.

39
00:01:53,000 --> 00:01:56,000
So slugify from slugify

40
00:01:59,000 --> 00:02:03,000
and xss from xss.

41
00:02:06,000 --> 00:02:10,000
Now let's start with the slugify function.

42
00:02:10,000 --> 00:02:15,000
Here, I'll create a new slug by calling slugify

43
00:02:16,000 --> 00:02:19,000
and passing meal.title to it.

44
00:02:21,000 --> 00:02:24,000
In addition, I'll pass a configuration object to slug,

45
00:02:24,000 --> 00:02:27,000
where I set lower to true

46
00:02:27,000 --> 00:02:30,000
so that it forces all characters to be lowercase.

47
00:02:32,000 --> 00:02:33,000
That's the first step.

48
00:02:34,000 --> 00:02:36,000
As a next step,

49
00:02:36,000 --> 00:02:39,000
I wanna remove any harmful content from those instructions

50
00:02:40,000 --> 00:02:44,000
and for that we can use this xss thing which we imported,

51
00:02:44,000 --> 00:02:46,000
which turns out to be a function

52
00:02:46,000 --> 00:02:49,000
to call it on meal.instructions,

53
00:02:50,000 --> 00:02:53,000
so that we sanitize and clean those instructions

54
00:02:56,000 --> 00:02:57,000
and actually,

55
00:02:57,000 --> 00:03:00,000
instead of using these extra constants or variables,

56
00:03:00,000 --> 00:03:04,000
we can of course also add a slug property to "meal"

57
00:03:04,000 --> 00:03:08,000
on the fly like this, and overwrite instructions

58
00:03:08,000 --> 00:03:11,000
with the sanitized instructions like this.

59
00:03:14,000 --> 00:03:15,000
Now with that done,

60
00:03:15,000 --> 00:03:18,000
we prepared all the data except for the image.