1
00:00:02,090 --> 00:00:04,370
Now, this is almost it for

2
00:00:04,370 --> 00:00:05,860
this course section.

3
00:00:05,860 --> 00:00:08,540
To come to an end of this section, I just wanna

4
00:00:08,540 --> 00:00:13,520
fix a couple of issues and polish this site a little bit.

5
00:00:13,520 --> 00:00:16,560
For example, one issue that we have is,

6
00:00:16,560 --> 00:00:18,740
that if we're on this mobile page,

7
00:00:18,740 --> 00:00:21,340
and I add items to the cart,

8
00:00:21,340 --> 00:00:24,710
this cart badge here, isn't updated.

9
00:00:24,710 --> 00:00:26,870
It is updated on the nonmobile page,

10
00:00:26,870 --> 00:00:28,870
but not on the mobile page.

11
00:00:28,870 --> 00:00:31,690
Now I did add a text lecture about this before,

12
00:00:31,690 --> 00:00:34,060
but now I wanna fix it together with you.

13
00:00:34,060 --> 00:00:35,347
The reason for that is that,

14
00:00:35,347 --> 00:00:38,290
in the cartmanagement.js file,

15
00:00:38,290 --> 00:00:41,410
where I have this Add-to-cart function,

16
00:00:41,410 --> 00:00:44,150
I do get my cart badge element,

17
00:00:44,150 --> 00:00:46,060
where I select the first fitting element

18
00:00:46,060 --> 00:00:47,590
with that badge clause.

19
00:00:47,590 --> 00:00:50,900
But of course I have two such elements on the page.

20
00:00:50,900 --> 00:00:55,900
In my views here, in the shared navitems.js file,

21
00:00:57,200 --> 00:00:58,830
I have this badge here,

22
00:00:58,830 --> 00:01:02,360
but we use nav items twice in the header.

23
00:01:02,360 --> 00:01:04,410
We use it here in the header itself,

24
00:01:04,410 --> 00:01:06,740
and also in the mobile menu.

25
00:01:06,740 --> 00:01:08,840
Therefore we have this badge twice,

26
00:01:08,840 --> 00:01:12,480
and therefore here, I wanna use query selector all,

27
00:01:12,480 --> 00:01:14,313
to select all my badges.

28
00:01:15,330 --> 00:01:18,580
And therefore here, I have the cart badge elements.

29
00:01:18,580 --> 00:01:20,483
This name makes more sense.

30
00:01:21,360 --> 00:01:23,070
And then in all the places

31
00:01:23,070 --> 00:01:26,700
where I was using the cart badge element.

32
00:01:26,700 --> 00:01:28,280
Here to be precise.

33
00:01:28,280 --> 00:01:30,940
I now wanna use cart badge elements,

34
00:01:30,940 --> 00:01:32,620
but go through all of them.

35
00:01:32,620 --> 00:01:37,380
For example, with for const cart badge element of

36
00:01:37,380 --> 00:01:41,820
cart badge elements, to loop through all these badges.

37
00:01:41,820 --> 00:01:43,480
And then, I just move that code

38
00:01:43,480 --> 00:01:46,620
where we update the text content inside that for loop,

39
00:01:46,620 --> 00:01:49,453
so that we update all cart badge elements.

40
00:01:51,330 --> 00:01:54,230
Of course we don't just have this in here,

41
00:01:54,230 --> 00:01:56,650
but also in cart item management.

42
00:01:56,650 --> 00:01:59,870
Here, I also get my cart badge.

43
00:01:59,870 --> 00:02:03,893
Elements is the better name now, with query selector all.

44
00:02:05,230 --> 00:02:06,063
And then again,

45
00:02:06,063 --> 00:02:09,470
in all the places where I used cart badge before,

46
00:02:09,470 --> 00:02:11,780
I now wanna loop instead.

47
00:02:11,780 --> 00:02:16,380
So here again, we wanna use for const cart badge

48
00:02:16,380 --> 00:02:20,090
element of cart badge elements,

49
00:02:20,090 --> 00:02:22,170
to go through all those badges,

50
00:02:22,170 --> 00:02:25,410
and then call a cart badge element text content,

51
00:02:25,410 --> 00:02:28,213
and set it equal to the new total quantity in there.

52
00:02:31,071 --> 00:02:32,900
And with that done.

53
00:02:32,900 --> 00:02:37,070
Back here, if I now try to add items to the cart,

54
00:02:37,070 --> 00:02:38,760
this was updated here.

55
00:02:38,760 --> 00:02:41,210
And if I now update this here on the mobile view,

56
00:02:41,210 --> 00:02:44,810
for example, this now also works like this.

57
00:02:44,810 --> 00:02:46,293
So that's one fix.

58
00:02:47,223 --> 00:02:49,770
Another thing I wanna add is,

59
00:02:49,770 --> 00:02:53,700
I wanna handle the case that we enter some invalid URL.

60
00:02:53,700 --> 00:02:56,560
If I entered something like carts,

61
00:02:56,560 --> 00:02:59,080
I get this not authenticated error,

62
00:02:59,080 --> 00:03:00,760
which isn't really true.

63
00:03:00,760 --> 00:03:03,710
The main issue here is not that I'm not authenticated,

64
00:03:03,710 --> 00:03:07,530
but that I tried to access a page which doesn't exist.

65
00:03:07,530 --> 00:03:11,320
Now, we learned early in the course how we can handle this.

66
00:03:11,320 --> 00:03:13,110
In app.js,

67
00:03:13,110 --> 00:03:15,510
we can add a new middleware,

68
00:03:15,510 --> 00:03:18,843
at the very end of our routes here,

69
00:03:20,050 --> 00:03:22,600
before we have the error handling middleware.

70
00:03:22,600 --> 00:03:25,750
And there, I just wanna handle all requests

71
00:03:25,750 --> 00:03:28,110
that haven't been handled up to this point,

72
00:03:28,110 --> 00:03:29,520
except for errors.

73
00:03:29,520 --> 00:03:32,220
Those will be handled by the error handler middleware.

74
00:03:33,150 --> 00:03:35,600
But here, we can then add a new middleware,

75
00:03:35,600 --> 00:03:38,070
in the middlewares folder, for example,

76
00:03:38,070 --> 00:03:42,010
which we could call not-found.js.

77
00:03:42,010 --> 00:03:44,400
And in there we add a simple function,

78
00:03:44,400 --> 00:03:45,370
not found

79
00:03:47,380 --> 00:03:48,213
handler,

80
00:03:49,800 --> 00:03:52,380
where I get request and response.

81
00:03:52,380 --> 00:03:54,570
And in there, I wanna render

82
00:03:54,570 --> 00:03:58,960
a 404 template, let's say,

83
00:03:58,960 --> 00:04:01,950
which I do have in the shared folder.

84
00:04:01,950 --> 00:04:04,380
So it's actually shared/404 .

85
00:04:04,380 --> 00:04:07,300
There I have this 404 EJS file.

86
00:04:07,300 --> 00:04:09,000
And I wanna render this here,

87
00:04:09,000 --> 00:04:13,040
and then export this not-found handler here,

88
00:04:13,040 --> 00:04:16,910
so that in app.js, we can import and use it.

89
00:04:16,910 --> 00:04:20,300
Here where I import all my other middlewares as well,

90
00:04:20,300 --> 00:04:23,213
I'll import the not-found middleware,

91
00:04:24,960 --> 00:04:29,613
by requiring ./middlewaresnot-found like this.

92
00:04:31,749 --> 00:04:34,163
And then we can use the not-found middleware,

93
00:04:35,560 --> 00:04:37,013
like that, appointing added.

94
00:04:37,940 --> 00:04:39,360
Now, one issue we'll still have

95
00:04:39,360 --> 00:04:43,070
is that protect routes Middleware comes before that,

96
00:04:43,070 --> 00:04:45,290
which means we would still get that error.

97
00:04:45,290 --> 00:04:48,750
If I save and reload, I still get that 401 error,

98
00:04:48,750 --> 00:04:50,550
if I entered something invalid,

99
00:04:50,550 --> 00:04:52,460
because this middleware,

100
00:04:52,460 --> 00:04:53,670
handles this request

101
00:04:53,670 --> 00:04:56,283
before this middleware has a chance of doing so.

102
00:04:57,640 --> 00:05:01,070
Now we can't move that in front of protect route middleware,

103
00:05:01,070 --> 00:05:03,890
because then all the other routes would never be reached,

104
00:05:03,890 --> 00:05:06,440
because this middleware handles everything,

105
00:05:06,440 --> 00:05:07,513
every request.

106
00:05:08,910 --> 00:05:11,620
So, what we can do instead, is we can remove

107
00:05:11,620 --> 00:05:15,400
protect routes middleware from here.

108
00:05:15,400 --> 00:05:18,190
And instead add it here as a second

109
00:05:19,870 --> 00:05:21,190
parameter value

110
00:05:22,060 --> 00:05:24,223
on these app-use methods.

111
00:05:25,130 --> 00:05:27,760
You learned that app use takes more than just

112
00:05:27,760 --> 00:05:29,260
two parameter values,

113
00:05:29,260 --> 00:05:31,650
and you can add multiple middlewares here,

114
00:05:31,650 --> 00:05:34,780
which will then be executed left to right.

115
00:05:34,780 --> 00:05:38,400
Now that means that all requests that start with /orders,

116
00:05:38,400 --> 00:05:41,170
will first be funneled through that middleware.

117
00:05:41,170 --> 00:05:43,360
And if that middleware grants access,

118
00:05:43,360 --> 00:05:45,210
we continue to reroutes.

119
00:05:45,210 --> 00:05:47,173
And the same here for the admin routes.

120
00:05:48,160 --> 00:05:52,520
Now, if a request does not start with /orders, or /admin,

121
00:05:52,520 --> 00:05:56,430
then this not-found middleware will become active.

122
00:05:56,430 --> 00:05:59,800
So then we will handle such unknown pages.

123
00:05:59,800 --> 00:06:02,800
If we save this now, and I enter some random page,

124
00:06:02,800 --> 00:06:04,893
I get my could not find page here.

125
00:06:05,730 --> 00:06:09,670
Of course, if I enter a /orders, some invalid page,

126
00:06:09,670 --> 00:06:11,070
I get Not Authenticated,

127
00:06:11,070 --> 00:06:13,250
but since I tried to access a page

128
00:06:13,250 --> 00:06:16,540
that requires authentication, I am fine with that,

129
00:06:16,540 --> 00:06:19,883
even if the exact page I tried to access doesn't exist.

130
00:06:21,450 --> 00:06:23,600
Now, the same is true for admin, of course.