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.