Now, this is almost it for
this course section.
To come to an end of this section, I just wanna
fix a couple of issues and polish this site a little bit.
For example, one issue that we have is,
that if we're on this mobile page,
and I add items to the cart,
this cart badge here, isn't updated.
It is updated on the nonmobile page,
but not on the mobile page.
Now I did add a text lecture about this before,
but now I wanna fix it together with you.
The reason for that is that,
in the cartmanagement.js file,
where I have this Add-to-cart function,
I do get my cart badge element,
where I select the first fitting element
with that badge clause.
But of course I have two such elements on the page.
In my views here, in the shared navitems.js file,
I have this badge here,
but we use nav items twice in the header.
We use it here in the header itself,
and also in the mobile menu.
Therefore we have this badge twice,
and therefore here, I wanna use query selector all,
to select all my badges.
And therefore here, I have the cart badge elements.
This name makes more sense.
And then in all the places
where I was using the cart badge element.
Here to be precise.
I now wanna use cart badge elements,
but go through all of them.
For example, with for const cart badge element of
cart badge elements, to loop through all these badges.
And then, I just move that code
where we update the text content inside that for loop,
so that we update all cart badge elements.
Of course we don't just have this in here,
but also in cart item management.
Here, I also get my cart badge.
Elements is the better name now, with query selector all.
And then again,
in all the places where I used cart badge before,
I now wanna loop instead.
So here again, we wanna use for const cart badge
element of cart badge elements,
to go through all those badges,
and then call a cart badge element text content,
and set it equal to the new total quantity in there.
And with that done.
Back here, if I now try to add items to the cart,
this was updated here.
And if I now update this here on the mobile view,
for example, this now also works like this.
So that's one fix.
Another thing I wanna add is,
I wanna handle the case that we enter some invalid URL.
If I entered something like carts,
I get this not authenticated error,
which isn't really true.
The main issue here is not that I'm not authenticated,
but that I tried to access a page which doesn't exist.
Now, we learned early in the course how we can handle this.
In app.js,
we can add a new middleware,
at the very end of our routes here,
before we have the error handling middleware.
And there, I just wanna handle all requests
that haven't been handled up to this point,
except for errors.
Those will be handled by the error handler middleware.
But here, we can then add a new middleware,
in the middlewares folder, for example,
which we could call not-found.js.
And in there we add a simple function,
not found
handler,
where I get request and response.
And in there, I wanna render
a 404 template, let's say,
which I do have in the shared folder.
So it's actually shared/404 .
There I have this 404 EJS file.
And I wanna render this here,
and then export this not-found handler here,
so that in app.js, we can import and use it.
Here where I import all my other middlewares as well,
I'll import the not-found middleware,
by requiring ./middlewaresnot-found like this.
And then we can use the not-found middleware,
like that, appointing added.
Now, one issue we'll still have
is that protect routes Middleware comes before that,
which means we would still get that error.
If I save and reload, I still get that 401 error,
if I entered something invalid,
because this middleware,
handles this request
before this middleware has a chance of doing so.
Now we can't move that in front of protect route middleware,
because then all the other routes would never be reached,
because this middleware handles everything,
every request.
So, what we can do instead, is we can remove
protect routes middleware from here.
And instead add it here as a second
parameter value
on these app-use methods.
You learned that app use takes more than just
two parameter values,
and you can add multiple middlewares here,
which will then be executed left to right.
Now that means that all requests that start with /orders,
will first be funneled through that middleware.
And if that middleware grants access,
we continue to reroutes.
And the same here for the admin routes.
Now, if a request does not start with /orders, or /admin,
then this not-found middleware will become active.
So then we will handle such unknown pages.
If we save this now, and I enter some random page,
I get my could not find page here.
Of course, if I enter a /orders, some invalid page,
I get Not Authenticated,
but since I tried to access a page
that requires authentication, I am fine with that,
even if the exact page I tried to access doesn't exist.
Now, the same is true for admin, of course.