1
00:00:01,000 --> 00:00:06,360
And now we are going to build the comment dialog component, which is going to look like this.

2
00:00:06,600 --> 00:00:13,480
We can see all the previous comments about this interview, and we can select a rating and add our comment

3
00:00:13,520 --> 00:00:14,880
with the submit button.

4
00:00:15,560 --> 00:00:23,040
And when we click to this select select element, we're going to see a couple of different options starting

5
00:00:23,040 --> 00:00:27,200
from the one star option to the five.

6
00:00:27,560 --> 00:00:30,720
And let's try to see how we can build this component.

7
00:00:31,000 --> 00:00:39,120
So basically when we click to this button, when we click to this button um this dialog should open

8
00:00:39,120 --> 00:00:39,600
right.

9
00:00:39,920 --> 00:00:42,240
So I'll go ahead and uncomment this.

10
00:00:42,600 --> 00:00:49,400
Open up my left hand side under the components I'll just say comment dialog dot TSX.

11
00:00:51,480 --> 00:00:53,080
Let's try to import it.

12
00:00:55,160 --> 00:00:58,040
And just go ahead and try to build it.

13
00:00:58,360 --> 00:01:06,380
So first things first we'll get the interview You ID as the argument so we can say inerview id, but

14
00:01:06,420 --> 00:01:14,020
instead of type of string, we can just say this is going to be a convex ID and specifically the comment

15
00:01:14,020 --> 00:01:14,980
ID, right.

16
00:01:15,020 --> 00:01:16,700
I mean the inner view id my bad.

17
00:01:16,740 --> 00:01:17,820
This is an inner view ID.

18
00:01:17,820 --> 00:01:20,740
So we go ahead and get this specific type.

19
00:01:21,100 --> 00:01:27,300
Then we would like to have a couple of different states such as to check if dialogue is open or not.

20
00:01:27,340 --> 00:01:29,340
By default this is going to be false.

21
00:01:29,460 --> 00:01:32,860
And the comment state that we're going to keep track of.

22
00:01:32,980 --> 00:01:36,620
And then the default rating we're going to start with three.

23
00:01:36,620 --> 00:01:38,300
And user can change it.

24
00:01:38,660 --> 00:01:42,380
So I will get a couple of different mutations and queries.

25
00:01:42,540 --> 00:01:48,980
So we're going to have one mutation that is going to allow us to add a comment.

26
00:01:48,980 --> 00:01:53,340
And we can get the old users, which is going to be a query.

27
00:01:53,540 --> 00:01:56,580
And then we can get all the existing comments.

28
00:01:57,100 --> 00:02:00,180
So once again this is a query that we have built.

29
00:02:00,980 --> 00:02:03,510
Let's go ahead and see the See the definition.

30
00:02:04,590 --> 00:02:05,070
Okay.

31
00:02:05,230 --> 00:02:07,310
Get all comments for an interview.

32
00:02:08,350 --> 00:02:10,390
We are just fetching those now.

33
00:02:10,390 --> 00:02:16,910
When we submit this form we would like to have a function let's say const handle submit which is going

34
00:02:16,950 --> 00:02:18,350
to be an async function.

35
00:02:20,630 --> 00:02:22,990
And it will have a couple of different checks.

36
00:02:23,270 --> 00:02:27,910
So first I'll say if comment is not defined right.

37
00:02:27,950 --> 00:02:29,390
We'll just show it host.

38
00:02:29,550 --> 00:02:32,150
That's going to say please enter a comment.

39
00:02:32,510 --> 00:02:34,910
Then we can have a try catch block.

40
00:02:35,190 --> 00:02:36,390
So this is really basic.

41
00:02:36,390 --> 00:02:37,830
So I'll go ahead and paste it.

42
00:02:38,350 --> 00:02:41,630
We'll just have a try block where we would like to add a comment.

43
00:02:41,670 --> 00:02:43,310
We are calling our mutation.

44
00:02:43,470 --> 00:02:45,670
Then we'll have a success host.

45
00:02:45,670 --> 00:02:47,790
And just to reset our form.

46
00:02:47,910 --> 00:02:51,110
And in the catch we'll show an error toast.

47
00:02:51,550 --> 00:02:57,870
And then I will have a helper function that is going to allow me to render stars.

48
00:02:58,110 --> 00:03:03,510
So if it is let's say we say render three stars that is filled in.

49
00:03:03,650 --> 00:03:10,490
it would give us this output, and then it would put two more stars at the very bottom or at the very

50
00:03:10,530 --> 00:03:10,810
end.

51
00:03:10,850 --> 00:03:12,530
But this will not be filled in.

52
00:03:12,970 --> 00:03:14,490
So let's just see what I mean.

53
00:03:14,770 --> 00:03:17,770
This is going to be a function called render stars.

54
00:03:18,010 --> 00:03:20,410
And it's going to be around ten lines of code.

55
00:03:21,370 --> 00:03:24,330
So basically we're going to map through five times.

56
00:03:24,330 --> 00:03:30,490
And if the star value is equal to the rating the class name will be filled.

57
00:03:30,530 --> 00:03:32,370
But else it is not going to be filled.

58
00:03:33,530 --> 00:03:35,290
So this is what we're trying to build.

59
00:03:36,330 --> 00:03:39,490
And we are going to call this function in a couple of minutes.

60
00:03:39,850 --> 00:03:46,690
And let's say if existing comments is equal to undefined, that means we are in the loading state.

61
00:03:46,730 --> 00:03:51,490
We can just return null or we can return a loader UI.

62
00:03:51,890 --> 00:04:00,650
And we can even add or field to just say if users is undefined, uh, just return null.

63
00:04:02,850 --> 00:04:05,150
So basically this is our loading state.

64
00:04:05,510 --> 00:04:08,870
Then we can go ahead and build the return statement.

65
00:04:09,550 --> 00:04:14,390
So since going to since this is going to be a dialog, we can just wrap our entire application with

66
00:04:14,390 --> 00:04:17,630
it and make sure you import it from the UI folder.

67
00:04:18,310 --> 00:04:18,870
There we go.

68
00:04:18,910 --> 00:04:25,230
We'll have a couple of different props such as open that's going to be equal to is open.

69
00:04:26,270 --> 00:04:31,870
And then we will have let's say on open change this is going to be equal to our setter function.

70
00:04:32,150 --> 00:04:34,350
Then we would like to have our trigger.

71
00:04:34,430 --> 00:04:38,630
So we'll just say trigger button.

72
00:04:39,230 --> 00:04:42,710
You can find this comment from the source code and copy it.

73
00:04:42,710 --> 00:04:43,430
Paste it.

74
00:04:43,590 --> 00:04:44,310
There we go.

75
00:04:44,510 --> 00:04:46,950
Let's try to import them from the UI folder.

76
00:04:51,350 --> 00:04:51,750
Okay.

77
00:04:51,790 --> 00:04:54,310
So this is the button that says add comment.

78
00:04:54,510 --> 00:05:01,070
Then we can put the dialog say content component.

79
00:05:04,870 --> 00:05:06,650
That is That is going to take some classes.

80
00:05:06,650 --> 00:05:13,530
Let me just go ahead and grab it and then we'll have the header component with the title.

81
00:05:17,210 --> 00:05:17,650
Okay.

82
00:05:17,970 --> 00:05:23,930
Below to the header we'll have a div with some classes let's say space y of six.

83
00:05:24,050 --> 00:05:30,730
And then we'll have let's say a check that's going to say existing comments dot length.

84
00:05:30,730 --> 00:05:37,050
If it is greater than zero then we would like to render this right hand side which is basically going

85
00:05:37,090 --> 00:05:38,290
to be our UI.

86
00:05:38,770 --> 00:05:40,810
So I'll have a div at the very top.

87
00:05:40,810 --> 00:05:45,930
This is going to be let's say class name space Y of four.

88
00:05:45,970 --> 00:05:48,330
This is our parent component.

89
00:05:48,530 --> 00:05:51,210
Then we would like to just show the numbers.

90
00:05:51,490 --> 00:05:54,450
So I'll just say show us a badge.

91
00:05:55,650 --> 00:05:57,530
And this is going to give you the length.

92
00:05:57,530 --> 00:06:00,690
So it will say like five comments right.

93
00:06:01,690 --> 00:06:03,570
Let's save to get this formatting.

94
00:06:03,610 --> 00:06:09,020
After this div we would like to like to put the actual existing comments.

95
00:06:09,020 --> 00:06:16,580
So I'll just say display existing comments, which is going to be inside a scroll area.

96
00:06:16,860 --> 00:06:21,100
So I will go ahead and grab the code which is around 20 lines of code.

97
00:06:22,860 --> 00:06:23,140
Okay.

98
00:06:23,180 --> 00:06:25,180
So let's go ahead and get the scroll area.

99
00:06:25,540 --> 00:06:28,100
And this is a function that we already have.

100
00:06:28,140 --> 00:06:29,580
Get interview info.

101
00:06:29,700 --> 00:06:31,860
This will grab you the interviewer info.

102
00:06:33,140 --> 00:06:38,020
Let's say give us the avatar, give us the image as well as the fallback.

103
00:06:39,700 --> 00:06:41,380
And we have a format function.

104
00:06:41,380 --> 00:06:43,660
This is going to be coming from date fns.

105
00:06:44,100 --> 00:06:49,820
So I'll just say import format from date fns.

106
00:06:49,820 --> 00:06:50,460
There we go.

107
00:06:52,940 --> 00:06:55,860
Let's actually save it and try to see the output.

108
00:06:55,860 --> 00:07:03,980
Basically we have the rating, the comment content as well as the, the interviewer, um, info I should

109
00:07:03,980 --> 00:07:04,340
say.

110
00:07:06,020 --> 00:07:07,560
So let's click to this one.

111
00:07:07,560 --> 00:07:12,440
Currently we cannot see anything because in our database we don't really have any comments.

112
00:07:12,920 --> 00:07:21,160
So let's just keep continue to building which is going to be this Rest component okay.

113
00:07:21,360 --> 00:07:28,200
So after the scroll area I will say that maybe just go above here I mean below.

114
00:07:28,240 --> 00:07:28,440
Okay.

115
00:07:28,480 --> 00:07:36,360
So below to this curly braces, we would like to have a div that's going to have class name of space

116
00:07:36,560 --> 00:07:37,880
Y of four.

117
00:07:38,120 --> 00:07:41,360
And we would like to put the rating component here.

118
00:07:42,000 --> 00:07:44,240
I will just go ahead and grab it as well.

119
00:07:44,240 --> 00:07:46,520
This is going to be a select component.

120
00:07:47,160 --> 00:07:48,400
Let's paste this in.

121
00:07:48,880 --> 00:07:51,640
So we have space Y of two as the class name.

122
00:07:51,680 --> 00:07:54,760
We'll get the label from the components.

123
00:07:55,040 --> 00:07:59,000
And I believe we don't have the label component installed right.

124
00:07:59,240 --> 00:08:03,520
Let's double check under the UI we don't have label.

125
00:08:03,800 --> 00:08:08,780
So let's go ahead and install it in a new terminal, I'll say.

126
00:08:08,820 --> 00:08:13,700
Mpcs Shad Khan at latest at label.

127
00:08:18,060 --> 00:08:20,660
Okay, now we can install it.

128
00:08:20,700 --> 00:08:22,820
I mean import it from the UI folder.

129
00:08:22,820 --> 00:08:30,700
Let's get a select select trigger component, value content and item.

130
00:08:32,340 --> 00:08:32,740
Okay.

131
00:08:32,900 --> 00:08:36,820
So basically five times we would like to render stars.

132
00:08:37,180 --> 00:08:40,220
And it is going to look like this.

133
00:08:40,900 --> 00:08:44,140
So this is our first time rendering five stars.

134
00:08:44,180 --> 00:08:47,060
This is our second time all the way up to five.

135
00:08:50,180 --> 00:08:50,620
Okay.

136
00:08:50,740 --> 00:08:53,380
So that's going to be it for the rating part as well.

137
00:08:53,420 --> 00:08:56,540
We would like to put the comment section as well.

138
00:08:56,580 --> 00:08:59,020
This is going to be a text area component.

139
00:08:59,060 --> 00:09:03,860
Let's say div with class name of space y of two.

140
00:09:04,260 --> 00:09:08,840
We can put our label component that says your Early comment.

141
00:09:09,040 --> 00:09:16,680
And we all have the text area component, which is something that we have already used and imported.

142
00:09:17,080 --> 00:09:18,640
This is going to take the value.

143
00:09:18,680 --> 00:09:20,560
Let me just go ahead and grab all of them.

144
00:09:21,760 --> 00:09:23,880
We'll have an Onchange function.

145
00:09:23,880 --> 00:09:27,520
This is going to update the state placeholder and then a class name.

146
00:09:28,160 --> 00:09:28,440
Okay.

147
00:09:28,480 --> 00:09:30,800
So let's save after the comment.

148
00:09:30,840 --> 00:09:36,920
So we'll basically go all the way down to here just above the dialogue content.

149
00:09:36,960 --> 00:09:38,920
We would like to put our buttons.

150
00:09:39,280 --> 00:09:42,280
This is going to be inside a dialog footer component.

151
00:09:44,120 --> 00:09:44,600
Okay.

152
00:09:45,480 --> 00:09:49,440
So let's just try to see the UI if I clicked this.

153
00:09:49,680 --> 00:09:50,840
This is what I can see.

154
00:09:50,880 --> 00:09:55,560
We don't really have any existing comments, so I'll just go ahead and say five stars.

155
00:09:56,400 --> 00:10:01,160
He knows what he is doing.

156
00:10:02,760 --> 00:10:05,160
Let's hire him.

157
00:10:06,000 --> 00:10:12,050
Submit this comment submitted successfully and we can see the previous comments.

158
00:10:12,050 --> 00:10:12,530
Right?

159
00:10:13,050 --> 00:10:15,570
So that means everything is working as expected.

160
00:10:15,570 --> 00:10:18,290
And in this interview let's just put one.

161
00:10:19,330 --> 00:10:25,050
He tried to cheat in his interview.

162
00:10:25,530 --> 00:10:29,610
Let's say ban him from everywhere.

163
00:10:34,210 --> 00:10:39,850
Okay, so everything is working as expected with the ratings, with the comments.

164
00:10:39,850 --> 00:10:42,290
And we are able to fetch those as well.

165
00:10:42,610 --> 00:10:45,930
And with that, I think that's going to be it for the dialogue.

166
00:10:45,970 --> 00:10:48,530
I mean comment dialogue component as well.

167
00:10:48,970 --> 00:10:53,890
We have two different queries and we have one mutation.

168
00:10:53,890 --> 00:10:57,770
And other than this, this code is completely easy to understand.

169
00:10:57,810 --> 00:11:03,530
Maybe this function looks a little bit weird at first, but we are basically trying to render five different

170
00:11:03,770 --> 00:11:07,210
stars that is either failed or not failed.

171
00:11:08,130 --> 00:11:11,370
Okay, so with that, that's going to be it for this component as well.