So let's now work on storing that data
and to do that, I'll start in the meals.js file.
Here we have functions for getting "meals"
and getting a single "meal."
Now I want to export another function here,
which is there to save a "meal"
and I expect a "meal" object as an input.
A "meal" object that should have this shape here.
Now, inside of "save meal"
we therefore have to do a couple of things.
For example, we'll need to generate a slug
because in my database,
I wanna store a slug for every "meal"
and we don't get that from the form.
Instead, I want to generate it based on the title.
Now to do that, I'll stop the development server
and install a extra package,
a package called slugify that will do what its name implies,
but that's not the only package I'll install.
Instead, I'll also install a package called xss,
which will help us protect against
cross-site scripting attacks.
Because you must not forget
that we're storing user-generated content
and I'm then outputting these instructions
that are generated by the user as HTML,
here in that "meal" detail page,
I'm outputting those instructions as HTML.
So we are vulnerable to cross-site scripting attacks
and that's why we should protect against them
and why we should sanitize
the content that's sent by the user,
which is exactly what we can do
with help of this xss package.
So therefore, now with that installed,
we can restart the development server
and back here in meals.js,
I now want to import these two packages.
So slugify from slugify
and xss from xss.
Now let's start with the slugify function.
Here, I'll create a new slug by calling slugify
and passing meal.title to it.
In addition, I'll pass a configuration object to slug,
where I set lower to true
so that it forces all characters to be lowercase.
That's the first step.
As a next step,
I wanna remove any harmful content from those instructions
and for that we can use this xss thing which we imported,
which turns out to be a function
to call it on meal.instructions,
so that we sanitize and clean those instructions
and actually,
instead of using these extra constants or variables,
we can of course also add a slug property to "meal"
on the fly like this, and overwrite instructions
with the sanitized instructions like this.
Now with that done,
we prepared all the data except for the image.