All language subtitles for 006 Adding New Items to the Custom ToDo Lists_en

So in the last lesson we looked at how we could use these route parameters that Express conveniently

provides for us to create new lists off the bat. So we could say for example, / (I don't know) Orange

and it would create a list called orange.

But if we tried to add a new item in here then it actually doesn't work.

It takes us back to the default list called Today and then adds an item there.

That's not what we wanted.

We want it to add it to the customer list that we were in previously,

but now we're somehow redirected to the root route.

So what's going on here?

Well if you take a look inside your list.ejs you can see that whenever we press the submit

button which is that "+" then no matter which list we're inside

we're always posting to the root route. And remember because this is an EJS file

then it's the same template that we use for the home list, the work list, the shopping list, whatever it

may be.

So it's being dynamically rendered.

We have to figure out how we can handle this inside that root route for the post request.

At the moment, all that we do here is we create a new item,

we save the item to our database and then we'd redirect to the root route. And that creates the behavior

that we saw just now.

What we need to do instead is we need to pass over the current list that's being displayed which we

have access to fr the listTitle variable up here, and we need to pass it back when this form gets triggered.

So the perfect place to do that is of course inside the button which is inside the same form.

So you might already have this but make sure we add a new value to our button and the value is going

to be created using that same EJS tag,

so it's the one where we grab the value of the variable. And the variable we need is of course listTitle.

So let's go ahead and add that here.

Now whenever we submit our form we should get access to two things:

one is the newItem and the second is the list.

So now that means if we head back to app.js

then inside this post route we should be able to tap into not just the itemName but also the listName.

And that's going to be through req.body.list which corresponds to the name of this button

and the value is going to be the current list that the user is trying to add an item to.

So now it means that if we try to submit a new item to our Today or our default list then we need to handle

it a little bit differently than if it was from the custom list.

So let's write an IF statement that checks for that. No matter which list the item came from

we still need to create it as a new item document.

So let's go ahead and create our IF statement down here where we check to see if the list name that

triggered the post request is equal to "Today" in which case we're probably in the default list in which

case we'll simply just save our item to our items collection and then we'll just redirect to the root

route, just as we've done previously.

But if the list wasn't today then our newItem comes from a custom list. In that case we'd need to search

for that list document in our lists collection in our database and we need to add the item and embed it

into the existing array of items.

So in order to do that we're going to use findOne.

So we're going to say list.findOne and we're going to pass over the condition as we're going

to look for a list with the name that's equal to the listName.

And then once we've found it we can have the call back with the error and the foundList

and now we can tap into this foundList document and try to add our newItem. So we can say foundList

.items to tap into the embedded array of items and then we're going to call the Javascript push function

to push a new item into the array of items.

So the item that we want to push is of course this one that we've just created based off what the user

typed,

so we'll push item. And now we're going to save our foundList so that we update it with the new data.

And finally we have to res.redirect. But instead of redirecting to the root route,

in this case we have to redirect to the route where the user came from which is going to be

/listName.

Now what should happen is that no matter which list we're in when a user tries to add an input into

the text field and then press the submit button, the form will make a post request that's handled through

the root route right here and our server will catch it right here.

And then we will check to see if the list that the user tried to add the item into was from the default

list where the listName is equal to today in which case we're just going to do a simple save item redirect

back to the root route. But otherwise, namely if the user came from a custom list, then we're going to

find that custom list and then we're going to add this new item to the items in that list.

And finally we're going to redirect back to the /listName which should take us into this

part and then we can render all of the items that belong in that list.

So let's hit save and let's refresh our web page.

So let's say that I go over to my Home list and I decide to add a new item. Let's say "clean

kitchen"

right?

And let's go ahead and press add

and now it gets added to my list and I can do the same with say for example my work list.

Let's say"Read emails" and press + and it gets added to my work list.

But now the beauty is if I head back to my home list, it's all still saved under my home list and all

of our items are now categorized based off the list where they were added to.