1
00:00:01,054 --> 00:00:04,631
‫Next up, let's build our application's header

2
00:00:04,631 --> 00:00:08,142
‫which will contain the username and an avatar

3
00:00:08,142 --> 00:00:10,833
‫and also a small menu.

4
00:00:12,750 --> 00:00:17,283
‫So let's come here to our header component.

5
00:00:18,240 --> 00:00:22,890
‫And so this is where right now we have the logout component

6
00:00:22,890 --> 00:00:25,635
‫but here we will now, as I just mentioned,

7
00:00:25,635 --> 00:00:30,522
‫have that username and avatar and a small menu.

8
00:00:30,522 --> 00:00:33,075
‫And let's start with that menu.

9
00:00:33,075 --> 00:00:37,080
‫And let's, for that, create a new file.

10
00:00:37,080 --> 00:00:39,753
‫So a new component called HeaderMenu.

11
00:00:43,830 --> 00:00:46,305
‫And let's make this an unordered list

12
00:00:46,305 --> 00:00:51,305
‫and let's actually use a styled component for that.

13
00:00:53,220 --> 00:00:58,003
‫So let's call it StyledHeaderMenu, not Meader.

14
00:01:02,280 --> 00:01:06,383
‫And then we use styled.unordered list.

15
00:01:10,110 --> 00:01:14,100
‫And so this will just be a flex container

16
00:01:14,100 --> 00:01:18,150
‫with a gap of 0.4 rem.

17
00:01:18,150 --> 00:01:19,713
‫And that's actually it.

18
00:01:24,216 --> 00:01:29,216
‫And then here we will have a couple of list item elements.

19
00:01:29,610 --> 00:01:32,760
‫And then here, one of the items of the menu

20
00:01:32,760 --> 00:01:36,273
‫will actually be that logout component.

21
00:01:38,190 --> 00:01:39,807
‫So this one right here.

22
00:01:39,807 --> 00:01:42,210
‫And then we also want to have a button

23
00:01:42,210 --> 00:01:44,820
‫that will lead the user to the page

24
00:01:44,820 --> 00:01:47,103
‫where they can update their settings.

25
00:01:48,030 --> 00:01:51,150
‫So that could also perfectly find via menu

26
00:01:51,150 --> 00:01:56,150
‫but I just want to reuse that button icon component

27
00:01:56,501 --> 00:01:58,053
‫that we already have.

28
00:02:00,600 --> 00:02:04,593
‫So here, let's use OutlineUser like this.

29
00:02:09,180 --> 00:02:13,563
‫And then as we click here, we need to then navigate.

30
00:02:15,900 --> 00:02:18,633
‫So let's grab that function.

31
00:02:23,760 --> 00:02:25,600
‫And so where we want to go

32
00:02:26,970 --> 00:02:31,803
‫is let's actually see in our routes.

33
00:02:33,060 --> 00:02:36,960
‫So yeah, we have this one here,

34
00:02:36,960 --> 00:02:39,090
‫which is the account route.

35
00:02:39,090 --> 00:02:41,010
‫And so that's where we want to go

36
00:02:41,010 --> 00:02:43,140
‫when the user clicks here on this button

37
00:02:43,140 --> 00:02:45,213
‫with the user icon.

38
00:02:47,601 --> 00:02:49,456
‫All right.

39
00:02:49,456 --> 00:02:51,489
‫And if we think about this,

40
00:02:51,489 --> 00:02:53,892
‫this actually looks very similar

41
00:02:53,892 --> 00:02:57,518
‫to this logout component, right?

42
00:02:57,518 --> 00:03:00,420
‫However, I think that in this case,

43
00:03:00,420 --> 00:03:03,728
‫it's actually worth separating this into its own component

44
00:03:03,728 --> 00:03:06,880
‫because it really has its own functionality

45
00:03:06,880 --> 00:03:11,610
‫like getting this useLogout hook

46
00:03:11,610 --> 00:03:14,910
‫and also it has even this loading spinner.

47
00:03:14,910 --> 00:03:16,530
‫And on top of that,

48
00:03:16,530 --> 00:03:21,530
‫logout itself is kind of a small feature in of itself,

49
00:03:21,717 --> 00:03:25,500
‫and so then I think it deserves its own component,

50
00:03:25,500 --> 00:03:28,893
‫while this one here is really just a simple button.

51
00:03:30,030 --> 00:03:32,700
‫Then a bit later we will also have

52
00:03:32,700 --> 00:03:35,040
‫the dark mode toggle here,

53
00:03:35,040 --> 00:03:38,040
‫but for now, this is it.

54
00:03:38,040 --> 00:03:41,193
‫And so let's include that here instead of logout.

55
00:03:43,020 --> 00:03:44,720
‫So the HeaderMenu,

56
00:03:47,700 --> 00:03:48,903
‫let's bring that in.

57
00:03:52,440 --> 00:03:57,440
‫So import HeaderMenu from HeaderMenu.

58
00:04:02,341 --> 00:04:05,700
‫So let's see what that looks like.

59
00:04:05,700 --> 00:04:08,010
‫And so that actually looks pretty similar

60
00:04:08,010 --> 00:04:09,390
‫to what we had before,

61
00:04:09,390 --> 00:04:11,235
‫but now this leads indeed

62
00:04:11,235 --> 00:04:15,513
‫to this update your account page.

63
00:04:16,710 --> 00:04:17,550
‫Okay.

64
00:04:17,550 --> 00:04:21,420
‫And next up, let's then create that user avatar.

65
00:04:21,420 --> 00:04:24,198
‫And actually that component already exists

66
00:04:24,198 --> 00:04:27,213
‫so let's just include that here.

67
00:04:31,650 --> 00:04:36,650
‫And so as always, we need to import that here.

68
00:04:42,630 --> 00:04:47,630
‫And features and authentication and user avatar.

69
00:04:50,460 --> 00:04:55,230
‫Alright, so let's still leave that open.

70
00:04:55,230 --> 00:04:58,830
‫And then we open up this component

71
00:04:58,830 --> 00:05:02,190
‫that again is part of your starter files.

72
00:05:02,190 --> 00:05:04,910
‫And so this doesn't return anything at this point

73
00:05:04,910 --> 00:05:07,653
‫which is why we get that error there.

74
00:05:13,950 --> 00:05:16,590
‫And so there we go.

75
00:05:16,590 --> 00:05:20,130
‫Now this component here is actually another place

76
00:05:20,130 --> 00:05:23,250
‫in which we need to get the current user.

77
00:05:23,250 --> 00:05:25,071
‫And so then it's great

78
00:05:25,071 --> 00:05:29,700
‫that we already created our custom hook for that.

79
00:05:29,700 --> 00:05:33,383
‫So we can just get the user from useUser, right?

80
00:05:35,940 --> 00:05:38,280
‫And here we don't even need the loading state

81
00:05:38,280 --> 00:05:42,633
‫because we already know that if this page has loaded

82
00:05:42,633 --> 00:05:46,833
‫that the user is already loaded as well.

83
00:05:46,833 --> 00:05:51,180
‫Now here, let's lock that user to the console first.

84
00:05:51,180 --> 00:05:52,259
‫Or maybe we don't need to

85
00:05:52,259 --> 00:05:55,159
‫'cause we already have it in here.

86
00:05:55,159 --> 00:05:59,760
‫So we can just inspect the user object here.

87
00:05:59,760 --> 00:06:03,469
‫And so what we want is here this,

88
00:06:03,469 --> 00:06:08,469
‫well, not the app metadata, but actually user metadata.

89
00:06:08,867 --> 00:06:12,420
‫Now the problem with the currently logged in user

90
00:06:12,420 --> 00:06:17,254
‫is that we created it right here on Supabase.

91
00:06:17,254 --> 00:06:19,200
‫So here with this button,

92
00:06:19,200 --> 00:06:23,520
‫and so therefore it doesn't have any metadata associated.

93
00:06:23,520 --> 00:06:27,960
‫So there's no full name and there's also no avatar.

94
00:06:27,960 --> 00:06:30,540
‫So this is maybe not the best one.

95
00:06:30,540 --> 00:06:32,597
‫So let's log out here

96
00:06:32,597 --> 00:06:36,300
‫and now we can just use this other

97
00:06:36,300 --> 00:06:38,550
‫that we already have as well.

98
00:06:38,550 --> 00:06:43,550
‫So that's test@test.com, I believe.

99
00:06:46,950 --> 00:06:49,650
‫And yeah, that works.

100
00:06:49,650 --> 00:06:52,510
‫And so let's see now

101
00:06:53,790 --> 00:06:56,520
‫and indeed now we have the avatar

102
00:06:56,520 --> 00:06:58,530
‫even though it is an empty string

103
00:06:58,530 --> 00:07:02,790
‫and we have the name of the user, which is test user.

104
00:07:02,790 --> 00:07:07,790
‫And so let's now retrieve these two from that object.

105
00:07:09,302 --> 00:07:14,013
‫So the full name and the avatar,

106
00:07:14,850 --> 00:07:18,390
‫we get it from user.user_metadata.

107
00:07:23,490 --> 00:07:24,600
‫And so now here,

108
00:07:24,600 --> 00:07:29,600
‫let's use all of that first with this styled component.

109
00:07:31,920 --> 00:07:35,130
‫And then in there we use the avatar component

110
00:07:35,130 --> 00:07:38,163
‫which as we can see up there is an image.

111
00:07:39,840 --> 00:07:42,630
‫So here we use avatar,

112
00:07:42,630 --> 00:07:46,140
‫but in this case it is just an empty string

113
00:07:46,140 --> 00:07:49,860
‫and it will always be an empty string for new users.

114
00:07:49,860 --> 00:07:51,450
‫And so by default,

115
00:07:51,450 --> 00:07:56,450
‫we want to now display this image that we have here in data.

116
00:07:57,960 --> 00:07:59,755
‫Or maybe I already placed it here.

117
00:07:59,755 --> 00:08:02,580
‫Yeah, actually here it is already.

118
00:08:02,580 --> 00:08:06,420
‫So this default user is what we want to display

119
00:08:06,420 --> 00:08:08,613
‫if the avatar doesn't exist.

120
00:08:10,560 --> 00:08:14,673
‫So default-user.jpg.

121
00:08:17,330 --> 00:08:21,093
‫And then let's add an alt text as well.

122
00:08:23,880 --> 00:08:28,880
‫So Avatar of, and then here just the fullName.

123
00:08:34,369 --> 00:08:39,369
‫Okay, and then let's also add the name of the user itself.

124
00:08:42,360 --> 00:08:44,067
‫So again, fullName.

125
00:08:45,390 --> 00:08:47,850
‫And there it is.

126
00:08:47,850 --> 00:08:49,380
‫Beautiful.

127
00:08:49,380 --> 00:08:54,380
‫So we have our user's name and this default avatar.

128
00:08:54,480 --> 00:08:58,110
‫All we need to do is to add some styling to the header

129
00:08:58,110 --> 00:09:00,660
‫to place these side by side.

130
00:09:00,660 --> 00:09:03,108
‫But this component here is finished.

131
00:09:03,108 --> 00:09:07,530
‫And so here let's just add a bit of styling.

132
00:09:07,530 --> 00:09:10,540
‫So let's make this a flex container

133
00:09:11,940 --> 00:09:16,023
‫with a gap of 2.4 rem,

134
00:09:17,821 --> 00:09:21,000
‫align the items to the center.

135
00:09:21,000 --> 00:09:25,350
‫And then finally, let's justify everything to the end.

136
00:09:25,350 --> 00:09:29,100
‫So justify-content: flex-end

137
00:09:29,100 --> 00:09:31,091
‫and great.

138
00:09:31,091 --> 00:09:33,480
‫So that looks a lot nicer.

139
00:09:33,480 --> 00:09:36,562
‫And so at this point, this application

140
00:09:36,562 --> 00:09:41,562
‫really starts to look like a real world application.

141
00:09:41,910 --> 00:09:44,460
‫So we have all this beautiful styling

142
00:09:44,460 --> 00:09:46,230
‫right here for our data.

143
00:09:46,230 --> 00:09:48,988
‫We have this amazing looking navigation

144
00:09:48,988 --> 00:09:52,650
‫or this main menu here on the left side.

145
00:09:52,650 --> 00:09:56,463
‫And now we even have a small secondary menu up here.

146
00:09:57,824 --> 00:10:00,000
‫So if we click here,

147
00:10:00,000 --> 00:10:02,610
‫then again that takes us to the page

148
00:10:02,610 --> 00:10:05,280
‫where the user can update the account.

149
00:10:05,280 --> 00:10:06,995
‫So both the user's data

150
00:10:06,995 --> 00:10:11,430
‫which is gonna be the name and the avatar and the password.

151
00:10:11,430 --> 00:10:15,153
‫And so let's go implement these in the next video.