1
00:00:01,120 --> 00:00:02,800
So this is where we left.

2
00:00:02,840 --> 00:00:08,760
We have built a dialogue component in this interview schedule UI file.

3
00:00:09,080 --> 00:00:14,640
Now after this dialogue and after this step, we would like to render out our meeting cards.

4
00:00:14,960 --> 00:00:20,680
So I'll go ahead and add a comment which is going to have our loading state as well as the meeting cards.

5
00:00:21,600 --> 00:00:24,360
Now let's say we'll have some conditional rendering.

6
00:00:24,680 --> 00:00:30,400
So we'll just say if interviews is undefined in this case we would like to return something.

7
00:00:30,560 --> 00:00:33,200
But in the else case we'll take the return something else.

8
00:00:33,640 --> 00:00:36,560
So here we will have some loader component.

9
00:00:36,920 --> 00:00:38,600
So I will go ahead and copy this.

10
00:00:38,600 --> 00:00:39,240
Paste it.

11
00:00:39,480 --> 00:00:44,080
We have a div with a loader to icon coming from react.

12
00:00:44,440 --> 00:00:47,840
And in the else case we'll just check for something.

13
00:00:47,880 --> 00:00:53,920
Let's say if interviews dot length is greater than zero we would like to return this part.

14
00:00:53,960 --> 00:00:56,040
But else we would like to return this part.

15
00:00:56,600 --> 00:00:59,800
So here we can basically map through the interviews.

16
00:00:59,800 --> 00:00:59,890
use.

17
00:01:00,450 --> 00:01:00,850
Um.

18
00:01:01,690 --> 00:01:02,530
Let's go here.

19
00:01:02,530 --> 00:01:08,250
I'll just say I would like to have a div with some classes.

20
00:01:08,690 --> 00:01:11,810
Such as, let's say space Y of four.

21
00:01:12,130 --> 00:01:13,610
Then I'll have one more div.

22
00:01:13,930 --> 00:01:16,490
Let's say class name grid.

23
00:01:17,450 --> 00:01:20,490
Gap of six and then medium screens.

24
00:01:20,490 --> 00:01:28,210
And above the grid columns will be two larger screens and above grid calls of three let's say.

25
00:01:28,610 --> 00:01:33,970
Then here we would like to basically render out all of our inner views in a meeting card.

26
00:01:34,210 --> 00:01:36,130
So I'll say interviews dot map.

27
00:01:36,130 --> 00:01:40,090
And we would like to show you can call this as inner view card as well.

28
00:01:40,410 --> 00:01:42,850
But I think I'll just go with a general name.

29
00:01:43,170 --> 00:01:46,130
So I'll just say meeting card.

30
00:01:46,850 --> 00:01:50,730
This is going to take the key as well as let's say the inner view.

31
00:01:51,050 --> 00:01:52,930
We're going to create this in a second.

32
00:01:53,050 --> 00:01:59,750
And this should be underscore ID because this is how convex stores it Okay.

33
00:01:59,790 --> 00:02:04,310
So after this let's go ahead and add the else case.

34
00:02:04,950 --> 00:02:11,110
Basically we'll just have a div that says no interviews scheduled or no interviews found.

35
00:02:11,390 --> 00:02:21,390
I would like to give some classes, such as text of centered padding y of 12 and text muted foreground

36
00:02:21,870 --> 00:02:22,430
color.

37
00:02:23,070 --> 00:02:23,550
Okay.

38
00:02:23,590 --> 00:02:25,550
Let's go ahead and create this component.

39
00:02:26,070 --> 00:02:27,670
Under the components.

40
00:02:34,550 --> 00:02:35,790
Let's try to import it.

41
00:02:36,030 --> 00:02:38,550
And we have some TypeScript errors.

42
00:02:39,110 --> 00:02:40,630
Let's go ahead and fix it.

43
00:02:41,070 --> 00:02:45,310
So I'll close these and let's try to build this component.

44
00:02:45,630 --> 00:02:50,430
So first things first we would like to get the prop which is the inner view.

45
00:02:50,550 --> 00:02:57,070
And let's say this is the type inner view which is the type of interview right.

46
00:02:57,910 --> 00:03:00,360
But how can we get this in a real type?

47
00:03:00,400 --> 00:03:07,120
Well, just like previously, we can say type interview and we're going to use the document coming from

48
00:03:07,120 --> 00:03:07,840
convex.

49
00:03:07,880 --> 00:03:11,080
And we'll put the table name which is the inner views.

50
00:03:11,160 --> 00:03:14,240
And now we can see the inner view type that we just have.

51
00:03:14,880 --> 00:03:17,680
Then here we'll go ahead and use an action.

52
00:03:18,320 --> 00:03:21,320
Or I should say we're going to be using a custom hook.

53
00:03:23,880 --> 00:03:26,880
Which is going to be this use meeting actions.

54
00:03:27,120 --> 00:03:30,640
And this is going to give us some values.

55
00:03:30,760 --> 00:03:34,320
And we would like to get the join meeting function right.

56
00:03:34,360 --> 00:03:36,120
So I'll save get this formatting.

57
00:03:36,160 --> 00:03:39,640
And we would like to grab the status of the meeting.

58
00:03:39,800 --> 00:03:42,000
So I'll just say get meeting status.

59
00:03:42,320 --> 00:03:45,800
This is a function that we have under the utils file.

60
00:03:46,440 --> 00:03:48,400
So let's just see which one is it.

61
00:03:48,440 --> 00:03:48,600
Okay.

62
00:03:48,600 --> 00:03:53,880
It is this one we pass in a view and it returns us the uh the status.

63
00:03:53,920 --> 00:03:54,720
Is it completed?

64
00:03:54,720 --> 00:03:55,560
Is it upcoming?

65
00:03:55,600 --> 00:03:58,460
Is it live or is it completed?

66
00:03:59,580 --> 00:04:05,540
So okay, with that in mind, let's try to call this pass the inner view as an argument.

67
00:04:05,660 --> 00:04:08,100
Then I'll just get the formatted date.

68
00:04:11,020 --> 00:04:13,100
Not data but it should be date.

69
00:04:13,300 --> 00:04:17,940
We're going to call the format function coming from date fns.

70
00:04:19,140 --> 00:04:22,100
So for some reason I cannot get the Autosuggestion.

71
00:04:22,380 --> 00:04:25,300
So let's say format coming from data fitness.

72
00:04:25,700 --> 00:04:28,700
And we're going to pass the new date inside.

73
00:04:28,700 --> 00:04:32,020
And I think I can copy this and paste it.

74
00:04:32,060 --> 00:04:32,540
Okay.

75
00:04:32,700 --> 00:04:35,940
So we are formatting the start time with this format.

76
00:04:36,980 --> 00:04:40,460
And in the return statement we're going to return a card.

77
00:04:41,300 --> 00:04:42,940
So let's say we'll have a card.

78
00:04:45,380 --> 00:04:50,180
Just like this inside we're going to have a card header component.

79
00:04:51,220 --> 00:04:55,540
And this card header will take the class name of space Y of two.

80
00:04:55,740 --> 00:05:03,230
And inside we'll will have a div with class name of flex item centered and justify between.

81
00:05:03,630 --> 00:05:09,630
Then inside this we'll have one more div where we'll just basically put the formatted date as well as

82
00:05:09,630 --> 00:05:10,390
an icon.

83
00:05:10,950 --> 00:05:14,430
So it's going to it's going to look like this.

84
00:05:14,630 --> 00:05:15,590
Let me just save.

85
00:05:16,390 --> 00:05:18,270
So this is what we have so far.

86
00:05:18,550 --> 00:05:25,910
After this div we would like to have a badge component which is going to be coming from CDN UI.

87
00:05:26,830 --> 00:05:28,310
So let's double check this.

88
00:05:30,670 --> 00:05:36,190
So this is a badge component that you can have by installing it.

89
00:05:40,030 --> 00:05:42,550
So I'll just clear up my terminal and paste this in.

90
00:05:45,030 --> 00:05:45,630
There we go.

91
00:05:45,670 --> 00:05:50,390
Just got that component and we can import it coming from the UI folder.

92
00:05:50,510 --> 00:05:53,430
And this is going to take a variant.

93
00:05:53,470 --> 00:05:57,530
So let's say variant which is going to going to be dynamic.

94
00:05:57,730 --> 00:06:00,890
So we'll say if status, let me give it space.

95
00:06:01,370 --> 00:06:04,690
We'll say if status is equal to life.

96
00:06:05,090 --> 00:06:08,890
Then this is going to be default variant.

97
00:06:09,050 --> 00:06:11,850
And this should be string just like this.

98
00:06:12,050 --> 00:06:12,730
Default.

99
00:06:13,050 --> 00:06:15,090
And in the else case we'll say if status.

100
00:06:15,130 --> 00:06:19,250
Is equal to upcoming then it will be secondary.

101
00:06:19,730 --> 00:06:22,530
And in the else case we can go with the outline.

102
00:06:24,130 --> 00:06:24,450
Okay.

103
00:06:24,490 --> 00:06:27,570
So we just make this variant to be dynamic.

104
00:06:27,890 --> 00:06:30,930
And in the same way we'll change the text.

105
00:06:31,170 --> 00:06:32,410
It will be dynamic.

106
00:06:32,530 --> 00:06:36,170
So we'll just say if status is equal to live.

107
00:06:36,770 --> 00:06:40,890
We're going to get live now.

108
00:06:43,050 --> 00:06:47,050
And in this case we'll say if status is equal to upcoming.

109
00:06:47,890 --> 00:06:49,850
We'll like to see upcoming text.

110
00:06:50,050 --> 00:06:52,730
And in the else case that means it has been completed.

111
00:06:54,090 --> 00:06:57,420
So this is exactly what we would like to have for a batch.

112
00:06:57,780 --> 00:06:58,740
After the batch.

113
00:06:58,740 --> 00:07:03,860
After this div, we would like to have a card title component.

114
00:07:06,220 --> 00:07:12,020
Okay, so here I'll just put the inner view title and that's it.

115
00:07:12,700 --> 00:07:19,500
Finally we'll put the inner view description so I can say our description.

116
00:07:24,380 --> 00:07:25,260
Import it.

117
00:07:25,260 --> 00:07:30,780
And this is going to take the class name of let's say line clamp of two.

118
00:07:31,180 --> 00:07:35,380
And for the text we'll say inner view dot description.

119
00:07:36,700 --> 00:07:37,940
Okay let's save.

120
00:07:38,820 --> 00:07:41,460
But now this description could be undefined right.

121
00:07:41,500 --> 00:07:43,620
Because this is an optional field.

122
00:07:43,620 --> 00:07:45,340
So we can wrap this with.

123
00:07:47,580 --> 00:07:48,580
Curly braces.

124
00:07:48,580 --> 00:07:55,960
And we'll say if inner view dot description only then actually display this card description component

125
00:07:56,720 --> 00:08:00,360
and after this card header, let's go outside.

126
00:08:02,080 --> 00:08:06,040
We would like to have a card content component.

127
00:08:09,640 --> 00:08:10,520
I can type.

128
00:08:12,640 --> 00:08:13,600
Okay there we go.

129
00:08:13,840 --> 00:08:16,160
This is going to take the button.

130
00:08:16,360 --> 00:08:18,120
Let me just copy it and paste it.

131
00:08:18,160 --> 00:08:23,280
We'll say if status is equal to life we should be able to join into the meeting.

132
00:08:23,800 --> 00:08:30,200
And if status is upcoming we'll see a different button which is disabled.

133
00:08:30,520 --> 00:08:31,640
So you cannot join.

134
00:08:31,640 --> 00:08:32,960
You just have to wait.

135
00:08:34,120 --> 00:08:34,520
Okay.

136
00:08:34,560 --> 00:08:40,440
So this is everything that we would need for the meeting card as well as this part that we have just

137
00:08:40,440 --> 00:08:40,880
built.

138
00:08:41,120 --> 00:08:42,760
Let's save and test this out.

139
00:08:45,480 --> 00:08:50,720
So that was the inner view that we have created a couple of seconds ago.

140
00:08:50,760 --> 00:08:52,600
Or maybe in the previous section.

141
00:08:52,640 --> 00:08:53,080
Right.

142
00:08:53,320 --> 00:08:55,410
It is in the upcoming state.

143
00:08:55,410 --> 00:08:57,650
Let's create one for right now.

144
00:08:58,130 --> 00:08:59,650
I'll say schedule interview.

145
00:08:59,690 --> 00:09:00,850
Let's say test.

146
00:09:01,810 --> 00:09:05,450
Test description candidate is going to be this user.

147
00:09:05,490 --> 00:09:07,410
Let's just add it right now.

148
00:09:08,370 --> 00:09:13,090
And we don't have the current time which is almost 1 a.m..

149
00:09:13,450 --> 00:09:17,490
Let's try to add it into the time slots under the constants.

150
00:09:23,290 --> 00:09:26,090
So I'll just add the midnight as an option here.

151
00:09:30,250 --> 00:09:30,490
Okay.

152
00:09:30,490 --> 00:09:33,290
Let's select it and just say schedule the interview.

153
00:09:34,210 --> 00:09:34,690
There we go.

154
00:09:34,770 --> 00:09:35,570
It is live.

155
00:09:35,610 --> 00:09:37,410
We can join into it.

156
00:09:37,890 --> 00:09:41,290
Let's click to it and I will go ahead.

157
00:09:42,410 --> 00:09:43,370
Select this one.

158
00:09:43,410 --> 00:09:43,650
Okay.

159
00:09:43,650 --> 00:09:51,130
Let's say hello while visiting site or maybe just this time and we can do the same thing for the camera.

160
00:09:51,130 --> 00:09:54,630
But I have disabled it so we can go ahead.

161
00:09:54,630 --> 00:09:56,510
Everything is working as expected.

162
00:09:56,510 --> 00:10:00,150
We can change the speakers, microphone and the camera.

163
00:10:00,750 --> 00:10:01,550
Let's join.

164
00:10:03,270 --> 00:10:05,950
Okay, so everything is working as expected.

165
00:10:06,150 --> 00:10:11,270
And now we can see this button because the inner view is in the database right.

166
00:10:11,310 --> 00:10:14,750
It is this one that is live status is upcoming.

167
00:10:14,870 --> 00:10:19,910
But if we end this now it should be completed as you can tell.

168
00:10:20,830 --> 00:10:23,550
So everything is working as expected so far.

169
00:10:23,830 --> 00:10:30,190
And also if you visit the schedule page, we should be able to see that this has been completed, because

170
00:10:30,190 --> 00:10:35,790
this is the state that we have in the database which is ended that call now it is completed.

171
00:10:36,070 --> 00:10:39,870
So with that, I think that's going to be it for the schedule page as well.

172
00:10:40,110 --> 00:10:41,510
This is what we have built.

173
00:10:41,710 --> 00:10:46,750
The entire model is working and we can join into the meetings if it is live.

174
00:10:46,910 --> 00:10:52,750
And now as the next step we can build the dashboard page, which is going to be our very last page.