1
00:00:00,840 --> 00:00:03,920
I'd like to show you some images before we build it.

2
00:00:03,920 --> 00:00:08,520
So we'll have a logo on the left hand side and some other logos.

3
00:00:08,560 --> 00:00:10,280
These are not too much important.

4
00:00:10,640 --> 00:00:15,640
The most important thing here is that these two buttons.

5
00:00:15,800 --> 00:00:19,040
So when we have some notifications, we will see some count.

6
00:00:19,080 --> 00:00:25,480
And if we have some network connection requests we would see here as well.

7
00:00:25,640 --> 00:00:30,600
So in the navbar component we would like to fetch these data right.

8
00:00:30,640 --> 00:00:33,520
And we can use use query for them.

9
00:00:33,640 --> 00:00:38,160
So let's go ahead and try to maybe first build that right.

10
00:00:38,200 --> 00:00:39,320
I'll say const.

11
00:00:39,600 --> 00:00:43,920
We're going to get some data from the use query hook.

12
00:00:45,560 --> 00:00:52,960
So here I can just put the query key where we can basically first fetch the notifications.

13
00:00:54,280 --> 00:00:57,840
And you can pause the video and try to do it by yourself.

14
00:00:58,040 --> 00:01:00,200
I'll just say query function.

15
00:01:00,240 --> 00:01:01,960
It's going to be an async function.

16
00:01:03,410 --> 00:01:11,570
where we would like to basically call the Axios dot instance dot get slash notifications.

17
00:01:11,570 --> 00:01:13,370
So this is going to be our endpoint.

18
00:01:13,410 --> 00:01:15,290
But here there is one catch.

19
00:01:15,290 --> 00:01:24,810
So let's try to just see it I will say give me also the oath user I'll just rename this let's say use

20
00:01:24,810 --> 00:01:25,570
query.

21
00:01:25,770 --> 00:01:28,090
Our query key is going to be Oath user.

22
00:01:28,250 --> 00:01:32,690
And let's make this to be one liner so that it looks clean.

23
00:01:36,570 --> 00:01:36,810
Okay.

24
00:01:36,850 --> 00:01:37,530
Just like this.

25
00:01:37,530 --> 00:01:42,010
And I'll rename this to be notification or notifications.

26
00:01:42,010 --> 00:01:48,530
So the catch here is that if we don't have the authenticated user, we don't really want to fetch this

27
00:01:48,530 --> 00:01:49,170
data.

28
00:01:49,170 --> 00:01:55,130
And how can we make this so that this is going to wait until we have the oath user field.

29
00:01:55,450 --> 00:01:58,170
Well basically there is a field called enabled.

30
00:01:58,690 --> 00:02:02,130
And you will just say like bang bang operators.

31
00:02:02,130 --> 00:02:03,540
And then the oath user.

32
00:02:03,780 --> 00:02:06,940
This basically returns true or false.

33
00:02:06,940 --> 00:02:13,820
If you have the oath user and we just say if we have the oath user only, then go ahead and run this

34
00:02:13,820 --> 00:02:14,900
query function.

35
00:02:15,340 --> 00:02:16,580
I hope this makes sense.

36
00:02:16,780 --> 00:02:21,300
So the query has just thought of everything for you.

37
00:02:21,820 --> 00:02:26,420
Here you can see they have the enabled flag query function.

38
00:02:26,620 --> 00:02:31,500
Let's just see like millions of other things that you can't really even imagine right.

39
00:02:31,540 --> 00:02:40,020
So these are all the things you can retry, update the retry delay refetch on window change and things

40
00:02:40,020 --> 00:02:40,620
like that.

41
00:02:41,980 --> 00:02:42,180
Okay.

42
00:02:42,220 --> 00:02:43,260
So I hope that makes sense.

43
00:02:43,260 --> 00:02:46,340
This is kind of like the motivation behind it.

44
00:02:46,380 --> 00:02:48,260
Let's try to duplicate this.

45
00:02:48,260 --> 00:02:54,660
And as I said I would like to also fetch the connections that we have the connection requests.

46
00:02:54,860 --> 00:03:00,260
So I will say connection free right.

47
00:03:00,580 --> 00:03:03,540
And we can give this as a query key as well.

48
00:03:04,020 --> 00:03:11,500
The endpoint is going to be, let's say, uh, we had slash connections and slash requests.

49
00:03:11,500 --> 00:03:16,940
And we will again just say only call this function if we have the authenticated user.

50
00:03:17,300 --> 00:03:26,420
Now we can try to console log the notifications and the connection requests.

51
00:03:29,740 --> 00:03:34,660
Which is going to be empty arrays I believe because we don't really have any of them for now.

52
00:03:35,700 --> 00:03:37,020
Um, I'll just go ahead.

53
00:03:37,020 --> 00:03:37,780
Refresh.

54
00:03:38,980 --> 00:03:39,260
Okay.

55
00:03:39,300 --> 00:03:42,300
So here it says this is not found.

56
00:03:42,860 --> 00:03:44,180
Why this is the case.

57
00:03:44,220 --> 00:03:48,380
API v1 not connection, but connections.

58
00:03:48,380 --> 00:03:49,140
It should be.

59
00:03:49,900 --> 00:03:51,100
Let's try to refresh.

60
00:03:51,620 --> 00:03:55,580
And here we can see for the notifications we got an empty array.

61
00:03:55,820 --> 00:03:59,980
And for the connection requests we also got an empty array.

62
00:04:00,020 --> 00:04:03,860
This is what we returned from the backend because we don't have any of them.

63
00:04:03,860 --> 00:04:06,710
But here we can see it is working successfully.

64
00:04:07,110 --> 00:04:13,110
So we just fetched our data and we would like to also have the logout functionality, which is also

65
00:04:13,110 --> 00:04:17,590
going to be a mutation, so that when we clicked it, it is just going to log us out.

66
00:04:18,670 --> 00:04:18,870
Okay.

67
00:04:18,910 --> 00:04:22,230
So you can pause the video here and maybe just try to implement it.

68
00:04:22,230 --> 00:04:24,230
This is going to be a mutation.

69
00:04:24,590 --> 00:04:26,150
Just a spoiler alert.

70
00:04:28,190 --> 00:04:31,550
And basically you would have your mutation function.

71
00:04:31,750 --> 00:04:35,910
And this is going to give us the mutate function.

72
00:04:36,670 --> 00:04:39,510
And we can call this as logout.

73
00:04:42,190 --> 00:04:49,190
And let's say like we can put the async or you can just have it as a normal function because we are

74
00:04:49,190 --> 00:04:51,030
not going to return anything from here.

75
00:04:51,070 --> 00:05:01,470
I'll just say Axios instance dot post method to the auth logout and on success case we can show a toast,

76
00:05:01,470 --> 00:05:01,790
right?

77
00:05:01,790 --> 00:05:05,110
You can just add it, but we don't really need to show a toast.

78
00:05:05,510 --> 00:05:06,030
For now.

79
00:05:06,510 --> 00:05:11,120
We will We'll just save and let's have a button on the nav bar.

80
00:05:12,640 --> 00:05:20,320
I will say like log out, but I don't want to collect it because if we click to that, that would just

81
00:05:20,320 --> 00:05:25,200
log us out and we wouldn't be able to see the nav bar component, I think.

82
00:05:25,400 --> 00:05:28,240
Um, like we should be able to see it.

83
00:05:28,240 --> 00:05:32,880
But for now, let's just try to build the UI and then we will come back to this function.

84
00:05:32,880 --> 00:05:35,120
So I promise this is going to be super quick.

85
00:05:35,680 --> 00:05:36,960
I can delete these.

86
00:05:37,080 --> 00:05:43,320
And instead of just having them console logs, what we can do is just grab them as variables because

87
00:05:43,320 --> 00:05:44,400
we'll be using them.

88
00:05:44,440 --> 00:05:51,280
Let's say const un notification count.

89
00:05:51,880 --> 00:05:58,080
And we can basically filter out all the notifications that are not read right.

90
00:05:58,120 --> 00:06:06,160
So I'll say notifications dot data because this is what react query sends you under the data.

91
00:06:06,200 --> 00:06:10,810
You can get that and we'll say, um, like filter.

92
00:06:11,290 --> 00:06:16,850
And for each notification we'll just check if it is not red.

93
00:06:16,890 --> 00:06:21,250
So notification dot read or red like this.

94
00:06:22,050 --> 00:06:23,570
We'll just filter out them.

95
00:06:23,570 --> 00:06:27,690
And the other ones will be the unread notifications.

96
00:06:27,730 --> 00:06:29,650
And we'll just say get the length.

97
00:06:30,170 --> 00:06:36,250
So I hope I have explained this clearly, but basically we are just filtering out the notifications

98
00:06:36,250 --> 00:06:39,090
that are already being read, right.

99
00:06:39,410 --> 00:06:41,410
So I accidentally paused the video.

100
00:06:41,450 --> 00:06:47,610
Uh, but I was just saying this is going to give us the unread notification count and we can save this.

101
00:06:48,130 --> 00:06:52,610
We also want to get the unread connection requests count.

102
00:06:52,930 --> 00:06:56,090
So this is really longer to type.

103
00:06:56,090 --> 00:06:57,490
I'll just copy and paste.

104
00:06:57,530 --> 00:07:05,730
We say connection requests dot data dot length so that we can really display them here for the notifications

105
00:07:05,730 --> 00:07:08,050
and then for the connection requests.

106
00:07:08,570 --> 00:07:10,090
Okay I hope that makes sense.

107
00:07:10,090 --> 00:07:11,930
Now we can build the UI.

108
00:07:12,410 --> 00:07:17,450
What I'll be doing is basically go ahead, copy it and paste it completely.

109
00:07:17,730 --> 00:07:20,090
It's about 70 lines of code.

110
00:07:20,130 --> 00:07:21,690
You can do the exact same thing.

111
00:07:21,850 --> 00:07:24,170
Just copy it and paste it with me.

112
00:07:24,570 --> 00:07:27,930
I'll zoom out like they are just classes completely.

113
00:07:27,930 --> 00:07:32,210
And I'll just like I'll just not try to type this out, right?

114
00:07:32,250 --> 00:07:36,330
So I'll just try to import and walk you through it.

115
00:07:36,570 --> 00:07:40,010
So we'll take the get the home icon from Lucid React.

116
00:07:40,210 --> 00:07:45,570
We would like to get the user's icon from Lucid React Bell icon.

117
00:07:46,250 --> 00:07:51,610
And we have unread notifications count or maybe notification count.

118
00:07:51,650 --> 00:07:53,130
This is how we called it.

119
00:07:54,170 --> 00:07:56,490
Let's import everything and I'll just walk you through it.

120
00:07:59,170 --> 00:07:59,530
Okay.

121
00:07:59,570 --> 00:08:01,290
Let's save what we're going to see.

122
00:08:02,370 --> 00:08:03,970
This is how that look right.

123
00:08:04,650 --> 00:08:05,810
We will fix the logo.

124
00:08:05,810 --> 00:08:12,460
But basically we have the home my network notifications Since me and logout button.

125
00:08:12,460 --> 00:08:17,260
So these are the classes that we give to be able to get that output.

126
00:08:17,300 --> 00:08:23,500
And we say if the connection request count is greater than zero then show this part.

127
00:08:23,540 --> 00:08:27,780
So here I'll just make this to be true so that you can see it.

128
00:08:27,780 --> 00:08:29,660
And I will just say three.

129
00:08:30,500 --> 00:08:34,700
So this is how it's going to look like if you have some requests.

130
00:08:36,020 --> 00:08:38,340
And same thing for this one.

131
00:08:39,180 --> 00:08:46,820
Let's just say if this is true and if we have like three there we go.

132
00:08:48,340 --> 00:08:51,340
So really these are not too much important.

133
00:08:51,340 --> 00:08:52,260
They are classes.

134
00:08:52,260 --> 00:08:57,380
But the important part is here above which we typed it together.

135
00:08:57,380 --> 00:09:03,940
And when you click to the logout button you are calling the logout function which is our mutation,

136
00:09:03,980 --> 00:09:04,460
right?

137
00:09:04,700 --> 00:09:09,580
In this case, let's just try to save and just try to test this out.

138
00:09:09,620 --> 00:09:12,510
Now when I click to this it is going to lock me out.

139
00:09:13,430 --> 00:09:14,830
I didn't click this yet.

140
00:09:15,390 --> 00:09:18,270
I will open up the application.

141
00:09:19,550 --> 00:09:20,830
Take a look at my cookies.

142
00:09:20,830 --> 00:09:24,310
I have the JWT linked in here, right?

143
00:09:24,870 --> 00:09:28,950
Once I clicked it, it has been cleared out and I am logged out.

144
00:09:28,950 --> 00:09:32,710
But it didn't refresh my page to be able to make this work.

145
00:09:33,350 --> 00:09:37,510
What we can do is use something called Use query client.

146
00:09:39,310 --> 00:09:42,230
So let's see use query client.

147
00:09:42,790 --> 00:09:49,990
Call this and we will put it into the query client variable.

148
00:09:50,270 --> 00:09:57,910
So we will say once we log that on success I want you to invalidate a query.

149
00:09:59,230 --> 00:10:02,270
So here I'll just say query client dot.

150
00:10:02,590 --> 00:10:05,950
Um I think I didn't remember the name.

151
00:10:05,950 --> 00:10:07,750
So let me just check this out.

152
00:10:07,790 --> 00:10:08,190
Sorry.

153
00:10:08,230 --> 00:10:08,470
Okay.

154
00:10:08,470 --> 00:10:13,880
So we'll just say invalidate queries and the query name that we would like to invalid.

155
00:10:14,200 --> 00:10:18,800
Let's say query key is going to be the oath user.

156
00:10:19,480 --> 00:10:28,040
So what this does when you log out, if it is completed successfully we just say could you please refetch

157
00:10:28,040 --> 00:10:29,320
this data?

158
00:10:29,360 --> 00:10:34,880
Could you please refresh this query which is going to run this here?

159
00:10:35,160 --> 00:10:36,960
This is the query key that we have.

160
00:10:37,000 --> 00:10:39,800
And it's going to see that user is null.

161
00:10:39,840 --> 00:10:41,400
It is 401 right.

162
00:10:41,440 --> 00:10:42,640
Not authenticated.

163
00:10:42,640 --> 00:10:45,800
And that would take us to the login page.

164
00:10:46,120 --> 00:10:49,440
So let's try to refresh this and just see this in action.

165
00:10:49,840 --> 00:10:52,120
I'll try to maybe just sign up.

166
00:10:53,600 --> 00:10:55,080
And by the way this is the view.

167
00:10:55,080 --> 00:10:59,520
If you are not logged in for the navbar you can check out the component.

168
00:10:59,880 --> 00:11:02,280
So here for the name I don't know what to give.

169
00:11:02,320 --> 00:11:03,760
Let's just say Jesse.

170
00:11:04,520 --> 00:11:06,240
And we can give the Pinkman.

171
00:11:09,920 --> 00:11:12,600
Let's just give it an email.

172
00:11:12,640 --> 00:11:18,400
I'll go ahead and copy this, paste it and add gmail.com.

173
00:11:18,440 --> 00:11:20,560
123456.

174
00:11:21,680 --> 00:11:26,320
Okay, now we just created our account and it didn't refresh this.

175
00:11:26,320 --> 00:11:27,960
So we can also fix that.

176
00:11:28,240 --> 00:11:35,560
We'll go into the signup form and we will say if we completed this successfully could you please refetch

177
00:11:35,560 --> 00:11:37,040
the authenticated user.

178
00:11:37,360 --> 00:11:39,600
And let's just do the exact same thing.

179
00:11:39,640 --> 00:11:41,040
Get the query client.

180
00:11:43,680 --> 00:11:49,000
And on success we will invalidate that query just like that.

181
00:11:49,920 --> 00:11:53,560
And now for like let's just go into this page refresh.

182
00:11:53,560 --> 00:12:00,200
And if I click to that it would immediately take me to the login page because as I said it is going

183
00:12:00,200 --> 00:12:02,640
to rerun this query.

184
00:12:03,520 --> 00:12:04,920
Uh, where where is it.

185
00:12:05,440 --> 00:12:05,640
Okay.

186
00:12:05,680 --> 00:12:10,200
So it's going to rerun this query because we say invalidate this query.

187
00:12:11,200 --> 00:12:12,280
I hope this makes sense.

188
00:12:12,280 --> 00:12:17,210
This is how we can sign up and log in or log out.

189
00:12:17,250 --> 00:12:17,850
My bad.

190
00:12:17,890 --> 00:12:21,370
Let's try to fix the logo on the nav bar.

191
00:12:23,610 --> 00:12:30,210
So here we have an image component that says small I mean small logo dot png.

192
00:12:30,970 --> 00:12:32,650
Let me just provide this to you.

193
00:12:32,690 --> 00:12:36,930
You can grab this from the GitHub repo and paste it to here.

194
00:12:39,970 --> 00:12:43,610
Now if you refresh you should be able to see that logo.

195
00:12:43,850 --> 00:12:45,570
It is working as expected.

196
00:12:47,050 --> 00:12:53,050
So now we can build the login page, which is going to be pretty similar to what we have here.

197
00:12:53,370 --> 00:12:57,490
Same for the design and same for the functionality.

198
00:12:57,850 --> 00:13:00,930
So let's try to build it pretty quickly.

199
00:13:01,290 --> 00:13:05,650
We will have a login form dot JSX.

200
00:13:06,170 --> 00:13:08,010
You can basically try to import it.

201
00:13:08,050 --> 00:13:16,890
We will come back to the UI design and under the login page let's try to build the UI.