1
00:00:03,650 --> 00:00:08,090
Now, that we have completed updating the server-side.

2
00:00:08,090 --> 00:00:11,045
It's time to move on to the react client.

3
00:00:11,045 --> 00:00:15,060
For your convenience, I have provided you with the GitHub repository,

4
00:00:15,060 --> 00:00:20,330
that contains the final version of the client that is able to communicate with

5
00:00:20,330 --> 00:00:26,300
our REST API server and then render the various views for our client.

6
00:00:26,300 --> 00:00:30,095
So, I have taken the reapplication that we developed in

7
00:00:30,095 --> 00:00:34,040
the second course of the specialization and then modified it.

8
00:00:34,040 --> 00:00:39,175
We will take a brief tour through the code a little bit later.

9
00:00:39,175 --> 00:00:43,520
Now, you will clone the Git repository to your computer,

10
00:00:43,520 --> 00:00:49,955
and then start-up your client and then see it communicating with our server set.

11
00:00:49,955 --> 00:00:53,655
Let's see the details next.

12
00:00:53,655 --> 00:00:56,985
To get started with this exercise,

13
00:00:56,985 --> 00:01:00,460
at your terminal or command window,

14
00:01:00,460 --> 00:01:06,429
go to your convenient location and then at the prompt type git clone

15
00:01:06,429 --> 00:01:22,280
https://github.com/jmuppala/conFusion-React.git, and then let

16
00:01:22,280 --> 00:01:27,315
the React application be cloned to your computer.

17
00:01:27,315 --> 00:01:29,210
Once the cloning is complete,

18
00:01:29,210 --> 00:01:34,350
move to the conFusion-React folder

19
00:01:34,350 --> 00:01:38,625
that has just been created when you cloned this Git repository.

20
00:01:38,625 --> 00:01:43,965
Then, you will immediately notice that there are a bunch of files already there.

21
00:01:43,965 --> 00:01:50,565
Now, at the prompt, type yarn install,

22
00:01:50,565 --> 00:01:54,350
in order to install all the node modules on

23
00:01:54,350 --> 00:01:58,155
which this React application is dependent upon.

24
00:01:58,155 --> 00:02:03,140
So, once the node modules are all installed,

25
00:02:03,140 --> 00:02:11,810
then we can start up our yarn start to compile and serve up our React application.

26
00:02:11,810 --> 00:02:13,840
Once everything is in,

27
00:02:13,840 --> 00:02:18,650
make sure that your MongoDB server is up and

28
00:02:18,650 --> 00:02:23,775
running and also your REST API server is also up and running.

29
00:02:23,775 --> 00:02:26,030
Otherwise, client will not work.

30
00:02:26,030 --> 00:02:30,650
So, now that you have installed your client on your computer,

31
00:02:30,650 --> 00:02:33,200
add the prompt type yarn start

32
00:02:33,200 --> 00:02:38,610
and your application will be recompile and served up in a short while.

33
00:02:38,610 --> 00:02:42,434
Once your application is successfully compiled,

34
00:02:42,434 --> 00:02:45,650
go into the browser and you will see that

35
00:02:45,650 --> 00:02:51,095
your React application gets started up and is visible on the screen here.

36
00:02:51,095 --> 00:02:54,290
You will notice immediately that your application is

37
00:02:54,290 --> 00:02:57,440
able to fetch the data from the server and then render

38
00:02:57,440 --> 00:03:00,815
the various parts of your application just like what you

39
00:03:00,815 --> 00:03:06,070
did at the end of your React course.

40
00:03:06,100 --> 00:03:08,635
When you go to the About folder,

41
00:03:08,635 --> 00:03:14,025
you will also see that the About page also renders the information.

42
00:03:14,025 --> 00:03:16,880
As such earlier in the menu,

43
00:03:16,880 --> 00:03:21,845
you see the items in the menu being displayed just like we saw with the application.

44
00:03:21,845 --> 00:03:23,950
Now, in addition, I have added in

45
00:03:23,950 --> 00:03:28,475
one more page to the single-page application called My Favorites,

46
00:03:28,475 --> 00:03:31,150
which you cannot navigate to,

47
00:03:31,150 --> 00:03:35,170
because no user is logged into their system.

48
00:03:35,170 --> 00:03:38,330
So, you see that I don't have any user logged in to the system.

49
00:03:38,330 --> 00:03:42,160
So, that's why there is no point in indicating my favorites because you don't know

50
00:03:42,160 --> 00:03:47,950
which user as favorites should be shown here and the contact page as usual.

51
00:03:47,950 --> 00:03:49,710
Now, let's log in.

52
00:03:49,710 --> 00:03:51,555
To log in to our application,

53
00:03:51,555 --> 00:03:58,020
we'll click on the login button and then you would see that the login dialog pops up.

54
00:03:58,020 --> 00:04:04,989
Then let me login as one of the registered users,

55
00:04:04,989 --> 00:04:09,650
which we registered as part of this course earlier.

56
00:04:09,650 --> 00:04:11,445
So, once you log in,

57
00:04:11,445 --> 00:04:16,530
you will immediately notice that to the right corner,

58
00:04:16,530 --> 00:04:19,760
you see the login button has now turned into

59
00:04:19,760 --> 00:04:24,200
logout and the user's name is indicated here.

60
00:04:24,200 --> 00:04:26,810
So, whoever is logged in is indicated here.

61
00:04:26,810 --> 00:04:33,280
You can also in principle replace this with the image of the user.

62
00:04:33,280 --> 00:04:36,080
Now, for that you need to do more modifications to

63
00:04:36,080 --> 00:04:40,290
both the client and the server in order to support the image display here.

64
00:04:40,290 --> 00:04:42,160
But at the moment, I'm just showing you,

65
00:04:42,160 --> 00:04:46,640
how we can easily display the user information here.

66
00:04:46,640 --> 00:04:50,405
So, this required minor modification to the head of component,

67
00:04:50,405 --> 00:04:54,010
where I will be able to retrieve the username.

68
00:04:54,010 --> 00:04:56,225
So, once the user logs in,

69
00:04:56,225 --> 00:04:59,060
then if you now click on My Favorites you would

70
00:04:59,060 --> 00:05:02,185
notice that there is nothing in My Favorites for the user.

71
00:05:02,185 --> 00:05:07,635
Obviously because the user has not yet chosen any favorites.

72
00:05:07,635 --> 00:05:09,880
So, let's now go to the menu.

73
00:05:09,880 --> 00:05:11,520
Then, in the menu,

74
00:05:11,520 --> 00:05:19,820
let me select one item and then we will add this dish to our favorites.

75
00:05:19,820 --> 00:05:22,065
So, going down below here,

76
00:05:22,065 --> 00:05:25,250
you'll see the heart symbol there,

77
00:05:25,250 --> 00:05:29,555
click on that, and you'll see that this would be added into the favorites.

78
00:05:29,555 --> 00:05:32,000
The fact that this has been added into the favorites,

79
00:05:32,000 --> 00:05:39,550
is indicated by the change in the icon here from a unfilled heart to a filled heart.

80
00:05:39,550 --> 00:05:42,615
Now, if you go to any other dish,

81
00:05:42,615 --> 00:05:46,005
you would notice that this has an unfilled heart

82
00:05:46,005 --> 00:05:49,685
which means that this is not yet among our favorites.

83
00:05:49,685 --> 00:05:51,920
So, let me add in one more item to

84
00:05:51,920 --> 00:05:56,950
my favorites and then let's add a third item to my favorites also.

85
00:05:56,950 --> 00:06:04,265
So, now, you will see that if I now go to my favorites,

86
00:06:04,265 --> 00:06:09,390
you will see a set of My Favorites being displayed here.

87
00:06:09,390 --> 00:06:12,470
So, you saw that I just added these three dishes

88
00:06:12,470 --> 00:06:15,580
to my favorites and so these are being displayed here.

89
00:06:15,580 --> 00:06:18,800
So, this is tracked by using

90
00:06:18,800 --> 00:06:23,240
that favorites endpoint on

91
00:06:23,240 --> 00:06:26,670
the server-side whichever implemented as part of your last assignment.

92
00:06:26,670 --> 00:06:29,090
So, if you have done that assignment correctly,

93
00:06:29,090 --> 00:06:32,389
then this part should work as expected.

94
00:06:32,389 --> 00:06:36,255
Now, we can also modify My Favorite.

95
00:06:36,255 --> 00:06:40,530
So, let me go ahead and delete one of the items from My Favorites.

96
00:06:40,530 --> 00:06:43,795
So, when I click on that button you'll notice immediately that,

97
00:06:43,795 --> 00:06:48,935
that item is deleted from My Favorites and immediately disappears and

98
00:06:48,935 --> 00:06:54,120
my favorites gets updated and you see the resulting value being shown here.

99
00:06:54,120 --> 00:06:57,200
So, notice that the My Favorites will be displayed only

100
00:06:57,200 --> 00:07:01,785
for users that are logged in to the system.

101
00:07:01,785 --> 00:07:07,250
So, you immediately notice a set of changes that have been

102
00:07:07,250 --> 00:07:09,635
done to the client in order to support

103
00:07:09,635 --> 00:07:12,440
some of these additional features that you see here.

104
00:07:12,440 --> 00:07:16,690
You also saw the login and logout feature being supported here.

105
00:07:16,690 --> 00:07:18,530
So, when I click on the logout button,

106
00:07:18,530 --> 00:07:22,445
you immediately notice that the user gets logged out and

107
00:07:22,445 --> 00:07:25,520
the username disappears from there and

108
00:07:25,520 --> 00:07:29,375
so the button also is turned into the login button.

109
00:07:29,375 --> 00:07:34,880
Now, so, with this you notice how my client has been

110
00:07:34,880 --> 00:07:39,960
updated to make use of the new REST API server,

111
00:07:39,960 --> 00:07:44,180
in order to support the favorites being saved on the server-side and

112
00:07:44,180 --> 00:07:50,140
then automatically being reflected into My Client application as shown here.

113
00:07:50,140 --> 00:07:55,190
Now, that you have seen the modified React application in action,

114
00:07:55,190 --> 00:07:58,250
it's time to pay a visit to the source code to see how

115
00:07:58,250 --> 00:08:01,340
exactly is it implemented and what are the changes

116
00:08:01,340 --> 00:08:07,875
that we have made corresponding to the Redux application at the end of the Redux course.

117
00:08:07,875 --> 00:08:10,760
Now, the two major changes that you will notice,

118
00:08:10,760 --> 00:08:16,070
is the support for favorites and also the authentication support,

119
00:08:16,070 --> 00:08:19,680
the user login and logout support.

120
00:08:19,680 --> 00:08:21,770
Now, how are these implemented?

121
00:08:21,770 --> 00:08:27,720
We will start our journey in the Redux part of our application.

122
00:08:27,720 --> 00:08:29,580
So, going into the Redux part,

123
00:08:29,580 --> 00:08:31,585
let's visit the action types.

124
00:08:31,585 --> 00:08:35,255
In action types, you will see now that we have

125
00:08:35,255 --> 00:08:40,210
three new action types related to their favorites.

126
00:08:40,210 --> 00:08:41,750
So, you would see favorites loading,

127
00:08:41,750 --> 00:08:43,500
favorites failed, and add favorites,

128
00:08:43,500 --> 00:08:47,270
which as you would expect to be there.

129
00:08:47,270 --> 00:08:57,355
Then, also six different action types related to their login and logout process.

130
00:08:57,355 --> 00:09:00,320
Now, so you can see login request, login success,

131
00:09:00,320 --> 00:09:02,210
login failure, logout request,

132
00:09:02,210 --> 00:09:03,810
logout success and failure.

133
00:09:03,810 --> 00:09:10,535
So, we'll see how these action types are actually used in our action create.

134
00:09:10,535 --> 00:09:12,620
So, going into the action creators,

135
00:09:12,620 --> 00:09:17,600
so this is where you will see the support for the favorites here.

136
00:09:17,600 --> 00:09:22,070
So, we will first examine the support for favorites and then after that we will

137
00:09:22,070 --> 00:09:26,790
examine the support for the authentication support.

138
00:09:26,790 --> 00:09:32,630
So, in here, you will see that we have new methods down below

139
00:09:32,630 --> 00:09:39,160
here called as favoritesLoading, favoritesFailed, and addFavorites.

140
00:09:39,160 --> 00:09:41,550
Now, from your previous experiences

141
00:09:41,550 --> 00:09:45,950
dishesLoading and dishesFailed and addDishes and so on.

142
00:09:45,950 --> 00:09:48,650
So, these things are very familiar to you,

143
00:09:48,650 --> 00:09:54,090
so that it's exactly the same kind of setup for the code here.

144
00:09:54,090 --> 00:09:58,170
In addition, you will see another method here called fetchFavorites,

145
00:09:58,170 --> 00:10:01,780
which is again as I said a Redux tank,

146
00:10:01,780 --> 00:10:03,630
which is implemented here,

147
00:10:03,630 --> 00:10:11,040
where we will use the fetch to access the server to fetch the favorites.

148
00:10:11,040 --> 00:10:15,580
So, these are the methods that you will see here and then also you will see

149
00:10:15,580 --> 00:10:21,270
deleteFavorite here and also a Redux tank for postFavorite here.

150
00:10:21,270 --> 00:10:24,050
So, in the postFavorite as you would expect,

151
00:10:24,050 --> 00:10:28,130
you would be posting the favorite to the server here.

152
00:10:28,130 --> 00:10:35,730
So, here notice how we are using authorization.

153
00:10:35,730 --> 00:10:39,760
Being set up in our authorization header so,

154
00:10:39,760 --> 00:10:43,710
this is something that I would draw your attention to at this moment,

155
00:10:43,710 --> 00:10:50,940
we'll come back to this again when we look at the user authentication and authorization.

156
00:10:50,940 --> 00:10:55,820
So, we are setting up the authorization header like this using fetch here.

157
00:10:55,820 --> 00:11:00,620
So, for fetch, we are posting an item into the fetch

158
00:11:00,620 --> 00:11:06,845
here and then you will notice that the structure of how the fetch is done is given here.

159
00:11:06,845 --> 00:11:13,735
Now whenever you post a favorite or delete a favorite or fetch a favorite,

160
00:11:13,735 --> 00:11:17,825
we will always have the server returned to you,

161
00:11:17,825 --> 00:11:22,545
the whole set of favorites and then we'll simply add these favorites

162
00:11:22,545 --> 00:11:29,185
into our redux store here so that's what we are doing here.

163
00:11:29,185 --> 00:11:33,585
Again, the code structure should look very very familiar to you,

164
00:11:33,585 --> 00:11:37,070
if you simply look at how the post favorite,

165
00:11:37,070 --> 00:11:41,600
the delete favorite, and the fetch favorites are implemented.

166
00:11:41,600 --> 00:11:45,665
So, all these will handle the issue of favorites.

167
00:11:45,665 --> 00:11:49,520
Now, how exactly is the favorites itself implemented?

168
00:11:49,520 --> 00:11:52,950
So, the reducer function is implemented in favorite structure here.

169
00:11:52,950 --> 00:11:54,875
So, inside this reduced function,

170
00:11:54,875 --> 00:11:57,570
you will see how we handle the add favorites,

171
00:11:57,570 --> 00:11:59,760
favorites loading, and favorites failed here.

172
00:11:59,760 --> 00:12:04,120
Again the code should look very familiar to you based upon

173
00:12:04,120 --> 00:12:10,300
your experience with the reducer functions that you've seen for redux before.

174
00:12:10,300 --> 00:12:18,850
So, again pay a little bit of attention to the way the code is implemented.

175
00:12:18,850 --> 00:12:21,130
This is fairly straightforward so I'm not spending

176
00:12:21,130 --> 00:12:24,610
too much time explaining how these things are implemented.

177
00:12:24,610 --> 00:12:27,720
Now, taking advantage of these,

178
00:12:27,720 --> 00:12:30,895
we have in the components we now have

179
00:12:30,895 --> 00:12:37,630
a new favorites component whose job it is to render all the list of our favorite.

180
00:12:37,630 --> 00:12:41,380
So, here you see that the favorites component itself,

181
00:12:41,380 --> 00:12:44,790
the structure of the favorites component is very much similar to

182
00:12:44,790 --> 00:12:49,460
the structure of the menu component so here we have

183
00:12:49,460 --> 00:12:56,900
the favorites component which is implemented as a functional component and in

184
00:12:56,900 --> 00:13:05,575
there we are rendering the favorites in here as you see in the code here.

185
00:13:05,575 --> 00:13:08,460
Again, very straightforward I think you should be able to

186
00:13:08,460 --> 00:13:12,190
easily understand how the favorites component is

187
00:13:12,190 --> 00:13:18,835
implemented having had experience with how the menu component is implemented there.

188
00:13:18,835 --> 00:13:22,920
So, again I'm not spending too much time explaining code here.

189
00:13:22,920 --> 00:13:26,605
Now parsing through the code is also

190
00:13:26,605 --> 00:13:32,280
a good experience for you to learn how the code is implemented so

191
00:13:32,280 --> 00:13:37,880
processing this code in your own head will help you to understand again

192
00:13:37,880 --> 00:13:43,790
to consolidate your understanding of react in more detail.

193
00:13:43,790 --> 00:13:46,085
So, I will leave that as an exercise for you.

194
00:13:46,085 --> 00:13:49,150
Now I'm pointing out where the changes have been

195
00:13:49,150 --> 00:13:53,380
made to implement the support for favorites.

196
00:13:53,380 --> 00:13:54,840
Now the favorite term,

197
00:13:54,840 --> 00:13:56,630
favorites is also leverage in

198
00:13:56,630 --> 00:13:59,995
the dish detail component and inside the dish detail component,

199
00:13:59,995 --> 00:14:08,830
you will see that we have the additional- In here,

200
00:14:08,830 --> 00:14:14,799
in the render dish functional component,

201
00:14:14,799 --> 00:14:19,360
we will be rendering the button which supports

202
00:14:19,360 --> 00:14:27,595
the selection or when you click on the heart outline,

203
00:14:27,595 --> 00:14:33,440
it will add that particular item into your list of favorite.

204
00:14:33,440 --> 00:14:37,815
So, all this is supported here by using this button here which

205
00:14:37,815 --> 00:14:44,200
invokes as you see this function called post favorite which is the redux.

206
00:14:44,200 --> 00:14:47,900
Thank that we have implemented there and this support for this

207
00:14:47,900 --> 00:14:51,925
is implemented in the main components so when you go into the main component,

208
00:14:51,925 --> 00:14:56,720
you will see how the post favorite is implemented here

209
00:14:56,720 --> 00:15:00,230
and you will also see that this is

210
00:15:00,230 --> 00:15:04,540
included in the map dispatched to props and so the post favorite implemented.

211
00:15:04,540 --> 00:15:07,580
So, you see the structuring is very much the

212
00:15:07,580 --> 00:15:11,910
same as what you've seen for the other code there.

213
00:15:11,910 --> 00:15:18,295
So, I'm not going to spend too much time on how the favorites support is implemented,

214
00:15:18,295 --> 00:15:21,400
instead let me spend a little more time on how

215
00:15:21,400 --> 00:15:27,705
the user authorization and authentication is supported in the code here.

216
00:15:27,705 --> 00:15:29,765
Now for the user authentication,

217
00:15:29,765 --> 00:15:35,810
what we are doing here is that when you go into the configure store here,

218
00:15:35,810 --> 00:15:42,530
you will see that I have one more reducer function called Auth that is implemented here.

219
00:15:42,530 --> 00:15:49,670
So, that will track the authorization part of it.

220
00:15:49,670 --> 00:15:51,380
Now how is this implemented?

221
00:15:51,380 --> 00:15:53,910
Again, going into action creators,

222
00:15:53,910 --> 00:16:01,070
inaction types we have already seen the set of actions related to login and logout.

223
00:16:01,070 --> 00:16:02,985
So, going into action creators,

224
00:16:02,985 --> 00:16:05,980
you will see that up here we have

225
00:16:05,980 --> 00:16:10,620
all the functions that are implemented for logging in and logging out.

226
00:16:10,620 --> 00:16:18,405
So, you will see a new function called request login, receive logging,

227
00:16:18,405 --> 00:16:25,765
and so these are when the login is successful and so on but in particular,

228
00:16:25,765 --> 00:16:35,930
this particular funct here of the login user is where we start with the login process.

229
00:16:35,930 --> 00:16:40,955
So, we'll dispatch the request login at the point when the user tries to login,

230
00:16:40,955 --> 00:16:46,010
after that we will do a fetch to the users slash login endpoint with

231
00:16:46,010 --> 00:16:52,455
the post and this contains in the body of the message the credentials for the user here.

232
00:16:52,455 --> 00:16:54,445
So, once we do the fetch,

233
00:16:54,445 --> 00:16:58,570
if the response is correctly returned,

234
00:16:58,570 --> 00:17:02,330
then the response should contain the token there.

235
00:17:02,330 --> 00:17:08,545
So, we will process that response down here and then so if the login was successful,

236
00:17:08,545 --> 00:17:15,790
then we will store the token into the local storage here.

237
00:17:15,790 --> 00:17:18,210
So, you can see that we are saying LocalStorage set

238
00:17:18,210 --> 00:17:21,600
item token response token and then we'll

239
00:17:21,600 --> 00:17:27,830
also store the user's credentials in the local storage here.

240
00:17:27,830 --> 00:17:34,045
So, these two will help me to track the user's login process.

241
00:17:34,045 --> 00:17:39,600
After that, we will then dispatch the receive login.

242
00:17:39,600 --> 00:17:44,150
Now at this point when the user is successfully logged in,

243
00:17:44,150 --> 00:17:46,645
we will also fetch the favorites for the user.

244
00:17:46,645 --> 00:17:51,975
Now remember that you can only fetch the favorites for a user that is logged in.

245
00:17:51,975 --> 00:17:55,110
When no user is logged in there are no favorites to be fetched,

246
00:17:55,110 --> 00:17:58,110
but when the user successfully logs in you want to fetch

247
00:17:58,110 --> 00:18:02,250
the user's favorite so that he can display that in your react application.

248
00:18:02,250 --> 00:18:04,520
So, that's why I'm also doing a fetch favorites

249
00:18:04,520 --> 00:18:07,505
here and then we'll receive the login here.

250
00:18:07,505 --> 00:18:12,050
Then if there is an error we'll dispatch the login error here.

251
00:18:12,050 --> 00:18:18,080
So, all these functions the receive login and login error will

252
00:18:18,080 --> 00:18:25,020
then invoke the appropriate Reducer functions which are implemented in the Auth.Js file.

253
00:18:25,020 --> 00:18:27,260
So going into Auth.Js file,

254
00:18:27,260 --> 00:18:33,660
the state here tracks the user's login status here.

255
00:18:33,660 --> 00:18:36,930
So, here we will also store in the state,

256
00:18:36,930 --> 00:18:40,740
the state involves the East loading Boolean which

257
00:18:40,740 --> 00:18:46,160
tracks whether you are in the process of logging in. The ease authenticate-

258
00:18:46,160 --> 00:18:53,850
Will indicate whether the user is authenticated and so the user is logged in,

259
00:18:53,850 --> 00:18:57,200
so you'll be able to allow the user.

260
00:18:57,200 --> 00:19:00,060
So, this flag is used in many circumstances

261
00:19:00,060 --> 00:19:03,970
to display the user's login status and then also

262
00:19:03,970 --> 00:19:11,340
the user property for the state tracks the user's credentials.

263
00:19:11,340 --> 00:19:16,135
So, that is where we will get the username for display in our header component.

264
00:19:16,135 --> 00:19:25,310
Now, here you will see the login request and when the login success is triggered,

265
00:19:25,310 --> 00:19:31,695
then you will store the token value here and then the login failure.

266
00:19:31,695 --> 00:19:35,235
The logout request, successfully logging out,

267
00:19:35,235 --> 00:19:45,140
all these are handled by this various parts inside this reducer the auth.js reducer here.

268
00:19:45,140 --> 00:19:51,705
So, that's how the user's authentication is handled here.

269
00:19:51,705 --> 00:19:54,055
Now, in the header component,

270
00:19:54,055 --> 00:19:55,770
going into the header component,

271
00:19:55,770 --> 00:20:00,040
so this is where we have the login function here.

272
00:20:00,040 --> 00:20:02,460
So, the handleLogin, you remember that we have

273
00:20:02,460 --> 00:20:05,545
already implemented this in the react course.

274
00:20:05,545 --> 00:20:09,330
In the handleLogin, they'll toggle the modal.

275
00:20:09,330 --> 00:20:14,340
So, we'll close the modal and then we'll login the user at this point.

276
00:20:14,340 --> 00:20:18,810
So, we'll say this.props LoginUser and then you will see that the credentials,

277
00:20:18,810 --> 00:20:22,710
username and password are passed in as the parameters to

278
00:20:22,710 --> 00:20:27,115
the LoginUser and so that gets into the LoginUser func,

279
00:20:27,115 --> 00:20:30,400
which then takes care of logging in the user.

280
00:20:30,400 --> 00:20:34,930
Now, how do you display the user's login state.

281
00:20:34,930 --> 00:20:36,785
So, that is very simple again.

282
00:20:36,785 --> 00:20:38,870
In the navbar here,

283
00:20:38,870 --> 00:20:42,900
you will see that I have added in a new item here.

284
00:20:42,900 --> 00:20:47,900
So, this is where we will say this.props.auth.isAuthenticated.

285
00:20:47,900 --> 00:20:54,280
So, the isAuthenticated flag is being used here by me and so if this is set to true,

286
00:20:54,280 --> 00:20:55,845
then I will display

287
00:20:55,845 --> 00:21:04,910
the Logout button here and so that's the thing that I will display here.

288
00:21:04,910 --> 00:21:07,110
Otherwise, I will display the login button.

289
00:21:07,110 --> 00:21:09,890
So, using that isAuthenticated flag,

290
00:21:09,890 --> 00:21:14,435
I am flipping which particular button is going to be displayed in

291
00:21:14,435 --> 00:21:20,520
the header there whether you display the logout button or the login button.

292
00:21:20,520 --> 00:21:24,290
So, that's the point that we are displaying here.

293
00:21:24,290 --> 00:21:29,240
So, the login or the logout here.

294
00:21:29,240 --> 00:21:34,690
So, that's how we are handling the login and logout process in

295
00:21:34,690 --> 00:21:40,935
here and also we will be displaying the username right there.

296
00:21:40,935 --> 00:21:43,245
So, when you display the logout button,

297
00:21:43,245 --> 00:21:48,585
you will also see that we are displaying the user's name in there.

298
00:21:48,585 --> 00:21:54,290
So, down below here,

299
00:21:54,290 --> 00:21:59,720
we will also display the button handleLogout and

300
00:21:59,720 --> 00:22:06,490
then we have the logout button being displayed here.

301
00:22:06,490 --> 00:22:09,650
In addition, this particular statement here,

302
00:22:09,650 --> 00:22:13,280
this is how we are displaying the username here.

303
00:22:13,280 --> 00:22:17,760
So, this uses the this.props.auth.user.username.

304
00:22:17,760 --> 00:22:24,110
So, the user property in the auth state contains

305
00:22:24,110 --> 00:22:27,290
the user credentials and from there I fetched the username and then I

306
00:22:27,290 --> 00:22:30,980
use that to display this in the header bar.

307
00:22:30,980 --> 00:22:34,190
So that's the way the header component is

308
00:22:34,190 --> 00:22:38,170
updated in order to handle the login and logout process.

309
00:22:38,170 --> 00:22:41,610
Again, fairly straightforward ways of implementing,

310
00:22:41,610 --> 00:22:44,490
it's fairly simple way that I have implemented here.

311
00:22:44,490 --> 00:22:49,765
Now obviously, if you want a more complex way of handling the login and logout process,

312
00:22:49,765 --> 00:22:54,120
certainly you can go into the full-fledged way of doing things,

313
00:22:54,120 --> 00:22:58,160
but this is sufficient enough to meet the requirements for my application.

314
00:22:58,160 --> 00:23:01,650
So, I've implemented the login and logout process in

315
00:23:01,650 --> 00:23:06,970
a very simple way here using the help of the Redux store.

316
00:23:06,970 --> 00:23:09,440
So, by Redux store itself is tracking

317
00:23:09,440 --> 00:23:15,455
my login status whether I am logged in and I'm authenticated and whether I'm logged out.

318
00:23:15,455 --> 00:23:17,020
So, if the user is logged out,

319
00:23:17,020 --> 00:23:19,325
then the My Favorites is not shown here.

320
00:23:19,325 --> 00:23:24,090
Now, one important point that you will ask is,

321
00:23:24,090 --> 00:23:31,990
how do we ensure that we don't go into the favorites state here?

322
00:23:31,990 --> 00:23:39,530
So, this is handled in the place where we handle the routes here.

323
00:23:39,530 --> 00:23:42,640
So, you will notice that for the favorites here,

324
00:23:42,640 --> 00:23:46,880
we declare for the favorites the endpoint instead of

325
00:23:46,880 --> 00:23:51,080
calling this as the route we call it as a private route.

326
00:23:51,080 --> 00:23:55,590
So, the private route allows you to ensure that you will be

327
00:23:55,590 --> 00:24:00,500
allowed to go into that part only under circumstances,

328
00:24:00,500 --> 00:24:02,870
where the user is logged in.

329
00:24:02,870 --> 00:24:09,600
So, this will prevent a navigation to their /favorites endpoint if no user is logged in.

330
00:24:09,600 --> 00:24:12,055
Now, how is this private route implemented?

331
00:24:12,055 --> 00:24:16,020
This private route is implemented right up here.

332
00:24:16,020 --> 00:24:19,635
So, you can see that this private route is implemented as shown here.

333
00:24:19,635 --> 00:24:24,070
So, this is nothing but a route here and then in here,

334
00:24:24,070 --> 00:24:28,670
we will implement this.props.auth.isAuthenticated.

335
00:24:28,670 --> 00:24:30,620
So, if the user is authenticated,

336
00:24:30,620 --> 00:24:35,100
then I will allow to navigate to

337
00:24:35,100 --> 00:24:40,890
the component that is the favorites component.

338
00:24:40,890 --> 00:24:45,130
Otherwise, I will simply redirect to the home component.

339
00:24:45,130 --> 00:24:46,790
So, if no user is logged in,

340
00:24:46,790 --> 00:24:49,900
I will simply redirect to the home component and so this is

341
00:24:49,900 --> 00:24:54,230
implemented using this private route that I have designed here.

342
00:24:54,230 --> 00:25:00,270
So, the private route is something that is supported by the router

343
00:25:00,270 --> 00:25:06,750
that we use the React router Dom that we used in our React application.

344
00:25:06,750 --> 00:25:10,300
So, very simple way of handling situations,

345
00:25:10,300 --> 00:25:16,425
where you don't want certain routes to be navigated to when the user is not logged in.

346
00:25:16,425 --> 00:25:21,610
So again, few simple changes that I have made to

347
00:25:21,610 --> 00:25:23,080
the application to facilitate

348
00:25:23,080 --> 00:25:27,360
all the different features that you see in your React application.

349
00:25:27,360 --> 00:25:29,270
Now, as you would expect,

350
00:25:29,270 --> 00:25:31,115
you might be underwhelmed at this point,

351
00:25:31,115 --> 00:25:34,630
"Is it that simple to implement" and indeed that is

352
00:25:34,630 --> 00:25:39,005
exactly what has been done to support all the new features.

353
00:25:39,005 --> 00:25:42,700
As you see, user authentication and login and

354
00:25:42,700 --> 00:25:47,470
logout process since our server has full-fledged support for everything,

355
00:25:47,470 --> 00:25:51,800
implementing the client side tracking of the user logging in and

356
00:25:51,800 --> 00:25:57,290
logout process and all that becomes fairly straightforward by just

357
00:25:57,290 --> 00:25:59,980
modifying some of the components and adding in

358
00:25:59,980 --> 00:26:09,015
the auth reducer function and adding in the auth state to our Redux store.

359
00:26:09,015 --> 00:26:13,010
The whole process of handling the user authentication

360
00:26:13,010 --> 00:26:17,885
and logging in and logging out becomes fairly simple in this case.

361
00:26:17,885 --> 00:26:23,055
So, with this quick tour of the updated React code,

362
00:26:23,055 --> 00:26:25,820
let's continue on to examine

363
00:26:25,820 --> 00:26:30,415
our React application a few more features of our React application.

364
00:26:30,415 --> 00:26:33,650
So again, going back to our application,

365
00:26:33,650 --> 00:26:36,580
we can now go to the menu and then pull up

366
00:26:36,580 --> 00:26:41,080
any dish here and I can post comments to the dish here,

367
00:26:41,080 --> 00:26:49,020
so I would immediately set up the rating here and my comment value here.

368
00:26:50,020 --> 00:26:59,950
Notice that I am not inputting my username or my author's name here in the form here.

369
00:26:59,950 --> 00:27:03,820
Now of course, in order to submit a comment you need to be logged in.

370
00:27:03,820 --> 00:27:08,765
So, if you're not logged in this comment will not be accepted by my server.

371
00:27:08,765 --> 00:27:11,165
So, let me first log myself in.

372
00:27:11,165 --> 00:27:17,140
So, I can login here

373
00:27:17,140 --> 00:27:19,965
and the moment I login you immediately notice that

374
00:27:19,965 --> 00:27:23,485
header toolbar is updated to indicate my status.

375
00:27:23,485 --> 00:27:28,255
Now, I can post this comment and you would notice that when I post the comment,

376
00:27:28,255 --> 00:27:30,670
the comment is added into the list of the comments

377
00:27:30,670 --> 00:27:33,120
and also notice that the author field is

378
00:27:33,120 --> 00:27:38,285
automatically filled in here because that is how we set up our server side.

379
00:27:38,285 --> 00:27:39,810
In the comments field,

380
00:27:39,810 --> 00:27:44,680
we have setup our user as a reference to

381
00:27:44,680 --> 00:27:48,580
the user information that we store in

382
00:27:48,580 --> 00:27:53,060
our server side and since we use the populate Mongoose Populate on the server side,

383
00:27:53,060 --> 00:27:55,555
the user information is automatically populated

384
00:27:55,555 --> 00:27:58,230
into the incoming comments from the server side.

385
00:27:58,230 --> 00:28:02,350
So, that is how you notice how I'm leveraging

386
00:28:02,350 --> 00:28:07,560
what the server already provides for me to automatically fill in the details.

387
00:28:08,290 --> 00:28:12,665
So, minor changes again even into

388
00:28:12,665 --> 00:28:20,420
the dish detail page to reflect the use of the comments support on the server site.

389
00:28:20,420 --> 00:28:22,370
With this, I complete

390
00:28:22,370 --> 00:28:29,415
the quick illustration of the React client that we have implemented as part of

391
00:28:29,415 --> 00:28:33,445
this exercise and I hope that you

392
00:28:33,445 --> 00:28:37,690
go through the details of the code in the client also and then

393
00:28:37,690 --> 00:28:41,560
reflect back on what you've learned in React course and see how

394
00:28:41,560 --> 00:28:46,230
the modifications enable us to implement in a modified,

395
00:28:46,230 --> 00:28:51,390
[inaudible] which is now able to communicate with the server and then support all the features that

396
00:28:51,390 --> 00:28:58,770
we originally intended to implement as part of both our client and the server side.