1 00:00:00,800 --> 00:00:06,400 Now it is time to build the schedule page where we will see all the interviews that we have. 2 00:00:06,400 --> 00:00:10,200 Either that is completed, it is live, or it is upcoming. 3 00:00:10,240 --> 00:00:10,800 Right? 4 00:00:10,840 --> 00:00:16,720 And then when we click to this button, we should be able to see a model where we can give the details 5 00:00:16,720 --> 00:00:18,560 and schedule an interview. 6 00:00:18,640 --> 00:00:25,680 So we're going to give the title description who is the candidate and who are going to be the interviewers. 7 00:00:25,680 --> 00:00:28,920 So this can be only one but this could be multiple. 8 00:00:29,040 --> 00:00:30,960 So currently this user is selected. 9 00:00:30,960 --> 00:00:36,240 And if this user wants to it can add more interviewers into the call. 10 00:00:36,280 --> 00:00:36,720 Right. 11 00:00:36,760 --> 00:00:40,240 So they can select this one and it would be listed here. 12 00:00:40,480 --> 00:00:43,400 Then we'll select a date as well as a time. 13 00:00:43,400 --> 00:00:48,680 And at the bottom there is a button to submit this or cancel it right. 14 00:00:48,720 --> 00:00:48,960 Okay. 15 00:00:49,000 --> 00:00:52,440 So with this in mind let's go ahead and try to build this UI. 16 00:00:52,960 --> 00:00:56,760 So I'll visit VS code where we have this schedule page. 17 00:00:56,880 --> 00:01:03,710 And I will first kill the left hand side and mark this with use client because we'll do some client 18 00:01:03,710 --> 00:01:04,710 side stuff. 19 00:01:04,910 --> 00:01:11,390 So we're going to get the router from use router hook from next navigation. 20 00:01:11,630 --> 00:01:17,030 Then we'll say you would like to get the use user role hook. 21 00:01:18,630 --> 00:01:21,230 So from here we can get two different values. 22 00:01:21,510 --> 00:01:24,070 Is interviewer actually three different ones. 23 00:01:24,070 --> 00:01:29,350 But we're going to get the loading state as well as this if user is interviewer or not. 24 00:01:30,390 --> 00:01:38,470 So I will say if we are in the loading state we can return a not a p tag, but this loader component 25 00:01:38,470 --> 00:01:39,590 that we have built. 26 00:01:40,390 --> 00:01:48,750 And then if we are not in a river, so let's say if not is in a river. 27 00:01:48,750 --> 00:01:51,830 In this case we can take the user to the homepage. 28 00:01:51,990 --> 00:01:55,750 So I'll say router dot push to the homepage. 29 00:01:56,070 --> 00:02:03,590 And I think previously we also used something like loading three dots in the homepage. 30 00:02:03,590 --> 00:02:09,510 So instead of having this we can use this component loader UI. 31 00:02:09,550 --> 00:02:12,350 It should be okay. 32 00:02:13,190 --> 00:02:15,310 Now let's go back to the schedule page. 33 00:02:15,830 --> 00:02:20,310 So now that we have protected this page we can return the actual UI. 34 00:02:20,670 --> 00:02:29,590 So instead of putting everything here I will create a component I'll say inner view schedule UI. 35 00:02:30,830 --> 00:02:37,150 So basically here we checked for the access if there if user can access this page or not. 36 00:02:37,190 --> 00:02:39,590 If not we will take them to the home page. 37 00:02:39,590 --> 00:02:42,630 But else they can see this component, this UI. 38 00:02:42,950 --> 00:02:48,270 And this is something that will that will create under the source under the components. 39 00:02:49,790 --> 00:02:55,390 So if you really wanted to you can put it put this component into the schedule page as well. 40 00:02:55,430 --> 00:02:56,580 So this is this is what I'll be doing. 41 00:02:56,620 --> 00:03:02,580 Actually, let's say dot TSX, this is the only com, this is the component that we'll be using only 42 00:03:02,580 --> 00:03:03,460 in this page. 43 00:03:03,820 --> 00:03:10,500 So that's why I'll go ahead and say Ahrefs save this and try to import it here on this file. 44 00:03:11,100 --> 00:03:11,580 Okay. 45 00:03:12,300 --> 00:03:15,060 So now let's try to build this component. 46 00:03:15,100 --> 00:03:16,540 This is going to be a long one. 47 00:03:16,540 --> 00:03:18,260 But we can go step by step. 48 00:03:18,820 --> 00:03:21,980 So first I will get the stream video client. 49 00:03:22,740 --> 00:03:25,780 So this is something that we have done multiple times at this point. 50 00:03:25,780 --> 00:03:30,100 And we would like to get the current user by using this hook coming from Clark. 51 00:03:30,420 --> 00:03:35,260 Then we would like to have this state to check if the dialog is open or not. 52 00:03:35,660 --> 00:03:37,220 So it is going to be this dialog. 53 00:03:37,220 --> 00:03:41,260 When we click to this button it would open and we can close it. 54 00:03:42,820 --> 00:03:43,300 Okay. 55 00:03:43,460 --> 00:03:47,500 Then we're going to have one loading state called is creating. 56 00:03:47,660 --> 00:03:49,540 When we are creating the call. 57 00:03:49,580 --> 00:03:53,660 When we are creating the inner view we will have a loading state for a second. 58 00:03:54,020 --> 00:03:58,900 Then we can go ahead and get all the interviews to be able to display it in this page. 59 00:03:59,180 --> 00:04:04,860 So I'll say inner views and I'll say use query coming from convex. 60 00:04:04,860 --> 00:04:09,940 We'll say API dot inner views dot get all interviews. 61 00:04:10,180 --> 00:04:11,540 Since we are the admin. 62 00:04:11,540 --> 00:04:15,860 Since we are in the admin page, we can go ahead and actually fetch all of them, right? 63 00:04:16,180 --> 00:04:20,140 This schedule page is only related to admins. 64 00:04:20,700 --> 00:04:23,980 And then we'll click to get all the users. 65 00:04:24,020 --> 00:04:29,460 So I'll just say const users use query. 66 00:04:31,300 --> 00:04:32,140 Just like this. 67 00:04:32,140 --> 00:04:35,660 We can go under the API under the users and get the users. 68 00:04:35,900 --> 00:04:40,020 Then I would like to get a mutation which is to create an inner view. 69 00:04:40,260 --> 00:04:43,340 So this is something that we have done previously right. 70 00:04:43,380 --> 00:04:44,620 That was the mutation. 71 00:04:45,020 --> 00:04:50,180 And you can see these are all the mutations and queries that we have created under the inner views. 72 00:04:50,460 --> 00:04:53,130 And we would like to get the create interview mutation. 73 00:04:53,450 --> 00:04:55,890 Then I would like to fetch all the candidates. 74 00:04:56,450 --> 00:04:59,090 So let me just paste this in. 75 00:04:59,250 --> 00:05:01,090 We will say const candidates. 76 00:05:01,090 --> 00:05:06,930 And from the users we will basically filter out the ones that has the role of candidate. 77 00:05:07,130 --> 00:05:09,970 And we can do the same thing for the inner keywords. 78 00:05:11,250 --> 00:05:16,130 So this word is really hard to pronounce but I'm trying to do my best. 79 00:05:16,530 --> 00:05:19,450 Then we would like to have some form data right. 80 00:05:19,490 --> 00:05:20,530 This is some form data. 81 00:05:20,530 --> 00:05:22,250 We need to keep it in this state. 82 00:05:22,370 --> 00:05:28,930 And for this we will go ahead and create a use state where we will have this object. 83 00:05:28,930 --> 00:05:34,130 So we have the title description the date we can update this time. 84 00:05:34,130 --> 00:05:36,130 By default it's going to be 9 a.m.. 85 00:05:36,290 --> 00:05:40,690 And then we have the candidate ID as well as the inner keywords IDs. 86 00:05:40,730 --> 00:05:41,210 Right. 87 00:05:41,290 --> 00:05:42,770 So this could be multiple ones. 88 00:05:42,770 --> 00:05:45,050 So we're going to hold it in an array. 89 00:05:46,210 --> 00:05:49,570 And by default this is including the current user's ID. 90 00:05:50,050 --> 00:05:54,400 Then we would like to have a function to be able to schedule the meeting. 91 00:05:54,760 --> 00:05:59,640 So before we build this UI, let's handle all the functions and the states that we would need so that 92 00:05:59,640 --> 00:06:02,480 we can build the UI pretty quickly and easily. 93 00:06:02,760 --> 00:06:12,440 I'll just say, um, how do we type this schedule meeting async function where we'll do a bunch of different 94 00:06:12,440 --> 00:06:13,000 things. 95 00:06:13,200 --> 00:06:15,200 So first I will add my if cards. 96 00:06:15,240 --> 00:06:20,480 I'll say if there is no client or if user is not authenticated, return out of this call. 97 00:06:20,520 --> 00:06:21,560 Don't do anything. 98 00:06:21,840 --> 00:06:29,400 And we'll say if form data doesn't include any candidate ID or interviewer IDs, then we can show a 99 00:06:29,400 --> 00:06:32,560 toast and then return out of this function. 100 00:06:32,840 --> 00:06:37,400 But else we can start to creating it right. 101 00:06:37,440 --> 00:06:39,600 So we'll just set our state to be true. 102 00:06:39,640 --> 00:06:43,920 Then we'll have a try catch and then maybe a finally block. 103 00:06:45,760 --> 00:06:47,160 And in the finally block. 104 00:06:47,200 --> 00:06:50,520 As you can imagine the loading alerting state will be equal to false. 105 00:06:50,880 --> 00:06:57,040 And then in the try we can get the form data and destructure everything that you can see. 106 00:06:57,240 --> 00:06:59,920 And we would like to get the hours and minutes. 107 00:06:59,920 --> 00:07:01,840 So we'll say time dot split. 108 00:07:02,080 --> 00:07:04,080 This is going to give us two different values. 109 00:07:04,120 --> 00:07:07,960 The first one will be the hour and then the other one will be the minutes. 110 00:07:08,240 --> 00:07:14,640 Then we can declare the meeting date where we'll create a new date with this date coming from the form 111 00:07:14,640 --> 00:07:15,160 data. 112 00:07:15,400 --> 00:07:18,560 And we can set the hours just like that. 113 00:07:18,600 --> 00:07:25,920 We would like to get a random ID from this random call. 114 00:07:25,960 --> 00:07:31,040 This is something that we have done previously and we're going to call I mean we're going to create 115 00:07:31,040 --> 00:07:35,320 a default call and giving it a random ID. 116 00:07:35,720 --> 00:07:37,880 Then we can call our method. 117 00:07:38,240 --> 00:07:40,920 Once again this is something that we have done previously. 118 00:07:41,280 --> 00:07:49,910 So call dot get or create with our data which is the start date, as well as some custom data that we 119 00:07:49,910 --> 00:07:53,070 can add such as description and additional details. 120 00:07:53,710 --> 00:08:00,150 Um, we can go ahead and create the inner view in the database by calling our mutation. 121 00:08:00,270 --> 00:08:02,830 So this is what we have just declared above. 122 00:08:03,270 --> 00:08:05,510 This is our mutation coming from convex. 123 00:08:05,710 --> 00:08:11,950 And it expects you to put the title description start time status by default. 124 00:08:11,950 --> 00:08:16,670 This is going to be upcoming because we are trying to schedule a meeting right. 125 00:08:16,790 --> 00:08:18,990 So it cannot be completed or live. 126 00:08:19,190 --> 00:08:22,190 Um, it will be probably a couple of days later right. 127 00:08:22,230 --> 00:08:23,990 So start status is upcoming. 128 00:08:24,230 --> 00:08:28,470 Then the stream call ID, candidate ID, and interviewer IDs. 129 00:08:29,470 --> 00:08:37,390 Once we have done this, we can set Openstate to be false so that the model is closed and we'll show 130 00:08:37,390 --> 00:08:38,150 a toast. 131 00:08:38,550 --> 00:08:42,430 Let's say meeting scheduled successfully. 132 00:08:42,430 --> 00:08:45,070 And then we can reset the form data. 133 00:08:46,380 --> 00:08:46,780 Okay. 134 00:08:48,460 --> 00:08:51,180 So that's going to be it for the try block. 135 00:08:51,180 --> 00:08:57,780 Now in the catch we can console log the error and maybe show a toast to let the user something failed. 136 00:08:58,140 --> 00:09:04,500 And that's entire thing is going to be it for the schedule meeting function that we'll be using. 137 00:09:04,540 --> 00:09:06,460 So almost 60 lines of code. 138 00:09:06,820 --> 00:09:13,660 And it's not that much actually when you take a look at it we have some validations and we are extracting 139 00:09:13,660 --> 00:09:19,740 some data, preparing it so that we can create a call in the stream dashboard as well as in our database, 140 00:09:19,740 --> 00:09:26,060 so that we can keep track of the state, who is the candidate, who is the interviewer, etc. then I 141 00:09:26,060 --> 00:09:33,420 would like to have two different functions that are going to be needed to be able to select a candidate 142 00:09:33,420 --> 00:09:35,460 and to add an inner reward. 143 00:09:35,980 --> 00:09:41,060 So if we add this inner reward, we should be able to delete that as well. 144 00:09:41,340 --> 00:09:41,700 Right. 145 00:09:41,740 --> 00:09:46,420 So we'll have two different functions to be able to make this work. 146 00:09:47,420 --> 00:09:51,060 So the first one is to add an inner river to our state. 147 00:09:51,060 --> 00:09:56,420 Basically, we will keep the previous state and then add this new one to the very end. 148 00:09:56,980 --> 00:10:04,700 Then in the other function, which is to remove an inner river from the state, we're going to keep 149 00:10:04,700 --> 00:10:10,380 all the previous ones, and we are going to filter out the current one that we are trying to delete. 150 00:10:11,580 --> 00:10:14,380 So we have just copied and pasted 100 lines of code. 151 00:10:14,380 --> 00:10:15,820 I hope you don't mind it. 152 00:10:16,140 --> 00:10:17,140 This is nothing. 153 00:10:17,180 --> 00:10:18,380 Then basic react. 154 00:10:18,660 --> 00:10:25,740 So I think I would like to save time rather than spending it by typing these out. 155 00:10:26,140 --> 00:10:31,540 So if you were to type this out, I believe this should be taking at least ten minutes up until now. 156 00:10:32,100 --> 00:10:34,660 So we're going to say selected inner rivers. 157 00:10:34,700 --> 00:10:36,540 We would like to grab those values. 158 00:10:36,540 --> 00:10:37,020 Right. 159 00:10:37,140 --> 00:10:40,900 And now here this as it could be possibly undefined. 160 00:10:41,020 --> 00:10:43,330 And we can go can go ahead actually fix this. 161 00:10:43,730 --> 00:10:50,810 We will say, if this is the case, maybe we can just have an empty array and we can do the same thing. 162 00:10:50,850 --> 00:10:52,330 I believe for this one. 163 00:10:54,090 --> 00:10:56,770 Now we should be able to get rid of that error. 164 00:10:57,450 --> 00:11:00,450 Then we'll try to find the available inner reverse. 165 00:11:00,730 --> 00:11:02,290 I will go ahead paste this. 166 00:11:02,730 --> 00:11:08,690 And that's going to be it for everything that we would need before the return statement okay. 167 00:11:09,130 --> 00:11:12,210 So let's say return a div with some classes. 168 00:11:12,250 --> 00:11:16,370 Let's say container maximum width of seven xlarge. 169 00:11:16,730 --> 00:11:22,610 Center this with max auto padding of six space y of eight. 170 00:11:22,650 --> 00:11:24,130 It should be inside. 171 00:11:24,130 --> 00:11:32,130 I'll have one more div with let's say class name of flex items centered and justify between. 172 00:11:32,810 --> 00:11:33,250 Then. 173 00:11:33,690 --> 00:11:34,050 Um. 174 00:11:34,170 --> 00:11:36,650 Inside this div we will have one more div. 175 00:11:36,690 --> 00:11:38,690 Let me just put a comment. 176 00:11:38,690 --> 00:11:42,610 I'll say header info and I'll say a div. 177 00:11:43,810 --> 00:11:46,930 We will have one p tag as well as an H1. 178 00:11:47,090 --> 00:11:50,930 So inner views and then this p tag that you can see on the UI. 179 00:11:51,690 --> 00:11:53,410 So we have just built this part. 180 00:11:53,450 --> 00:11:58,570 Now we're going to build this button which is to actually open up the dialog. 181 00:12:00,650 --> 00:12:01,090 Okay. 182 00:12:01,330 --> 00:12:08,330 So after this div I'll just say dialog component and we can say dialog. 183 00:12:08,330 --> 00:12:10,810 Let's try to import it from the components. 184 00:12:10,810 --> 00:12:18,770 And this is going to take two different states or props I should say the open prop as well as on open 185 00:12:18,770 --> 00:12:21,690 change is going to call the setter function. 186 00:12:22,010 --> 00:12:29,210 Then we would like to have the trigger which is going to be this button, that green button that you 187 00:12:29,210 --> 00:12:30,530 have seen in the image. 188 00:12:30,770 --> 00:12:34,010 After the trigger we can have the dialogue content. 189 00:12:34,330 --> 00:12:41,520 So I'll say dialogue content import this and this will be taking some classes that I'll just basically 190 00:12:41,520 --> 00:12:42,480 copy and paste. 191 00:12:42,920 --> 00:12:43,560 There we go. 192 00:12:44,200 --> 00:12:47,320 We are making this to to be responsive. 193 00:12:47,560 --> 00:12:52,160 And inside we'll have a dialogue header component with the title itself. 194 00:12:56,000 --> 00:12:56,360 Okay. 195 00:12:56,400 --> 00:12:58,160 Let's save to get this formatting. 196 00:12:58,400 --> 00:13:01,000 Then after the header component we'll have a div. 197 00:13:01,280 --> 00:13:04,760 Let's say class name of space y of four. 198 00:13:04,920 --> 00:13:07,920 And then padding y of four as well. 199 00:13:08,360 --> 00:13:13,240 Inside of this we can just get the inner view title state. 200 00:13:14,200 --> 00:13:16,920 So we are basically trying to build this part. 201 00:13:16,960 --> 00:13:18,520 And we're going to go one by one. 202 00:13:20,040 --> 00:13:20,400 Okay. 203 00:13:20,440 --> 00:13:21,840 So you can find this comment. 204 00:13:21,840 --> 00:13:25,600 And below to it there will be a div that you can copy and paste. 205 00:13:25,880 --> 00:13:27,320 So five lines of code. 206 00:13:27,360 --> 00:13:31,160 We have a label as well as an input within placeholder. 207 00:13:31,160 --> 00:13:34,800 And then the value as well as the on change method. 208 00:13:35,240 --> 00:13:39,110 So after this div we're going to go ahead and create one more comment. 209 00:13:39,110 --> 00:13:42,870 Let's say inner view description. 210 00:13:43,230 --> 00:13:50,910 Once again you can find it, copy it and paste it, which is going to have a text area component and 211 00:13:50,910 --> 00:13:52,830 looks like we don't have this. 212 00:13:52,870 --> 00:13:57,110 So let's open up our terminal and try to install it from CDN. 213 00:13:57,310 --> 00:14:04,270 I'll say NP chat CDN at latest add a text area component. 214 00:14:06,110 --> 00:14:06,550 Okay. 215 00:14:06,590 --> 00:14:08,870 So now we can import this one as well. 216 00:14:09,910 --> 00:14:16,590 So after the description we're going to have the candidate which is going to be a select element. 217 00:14:19,110 --> 00:14:19,550 Okay. 218 00:14:19,790 --> 00:14:27,550 So you can copy this paste this down and let's try to import the select the select trigger component 219 00:14:27,990 --> 00:14:31,030 the content as well as the value. 220 00:14:31,870 --> 00:14:37,910 And finally the item and then the then the user info icon it should be. 221 00:14:41,190 --> 00:14:41,670 Right. 222 00:14:41,710 --> 00:14:42,830 User info. 223 00:14:42,870 --> 00:14:48,350 Okay, so this is actually going to be a component because we'll be using it a couple of different times. 224 00:14:48,470 --> 00:14:51,230 So this is the user info component I believe. 225 00:14:51,710 --> 00:14:56,510 Let's try to create it under the components. 226 00:15:02,590 --> 00:15:02,870 Okay. 227 00:15:02,910 --> 00:15:05,990 For now let's leave it like this and we will import it. 228 00:15:06,830 --> 00:15:07,270 Okay. 229 00:15:08,430 --> 00:15:11,990 Now here it says um. 230 00:15:14,150 --> 00:15:14,430 Okay. 231 00:15:14,430 --> 00:15:18,510 So I think this is complaining because we didn't set the type here. 232 00:15:18,550 --> 00:15:19,670 We'll handle this. 233 00:15:19,870 --> 00:15:24,070 But after this candidate we would like to add the inner viewers. 234 00:15:27,910 --> 00:15:35,220 And I will go ahead maybe grab this one as well which is a little bit more longer, but let's see. 235 00:15:37,700 --> 00:15:39,500 So we have this x icon. 236 00:15:39,500 --> 00:15:42,060 Let's try to import it from Lucid React. 237 00:15:42,420 --> 00:15:44,860 We have the Userinfo component once again. 238 00:15:45,100 --> 00:15:52,940 And other than this we are basically um we are basically trying to render the selected inner viewers 239 00:15:53,100 --> 00:15:55,540 with this with this markup. 240 00:15:55,540 --> 00:16:01,140 So we have a bunch of different classes as well as a button to be able to delete it from the state. 241 00:16:01,140 --> 00:16:04,140 That will call the remove inner function. 242 00:16:04,140 --> 00:16:07,340 But other than this we are showing the Userinfo component. 243 00:16:08,940 --> 00:16:15,900 And then if there if there is any more available inner viewers, you would like to render it as well. 244 00:16:16,380 --> 00:16:20,620 So I know this might look a little bit complicated, but we'll just see it in a second. 245 00:16:21,380 --> 00:16:26,660 Okay, so if there are more inner rewards that we can add, we can display it right here. 246 00:16:27,660 --> 00:16:30,220 So actually I'll go ahead and build this component. 247 00:16:30,220 --> 00:16:32,420 Then we can try to see the UI. 248 00:16:33,220 --> 00:16:41,820 So this component will be let's say first this is going to take an take a prop called user. 249 00:16:41,980 --> 00:16:46,540 And let's say this user will be type of user. 250 00:16:46,660 --> 00:16:50,780 But how can we get the user type that is coming from convex. 251 00:16:51,100 --> 00:16:56,220 Well basically we can say type user and call this document. 252 00:16:56,660 --> 00:16:58,900 Here we can pass the table name. 253 00:16:59,020 --> 00:17:06,740 So from the users now you can see this user has all the fields that a user has in our database such 254 00:17:06,740 --> 00:17:09,300 as the underscore ID and creation time. 255 00:17:09,500 --> 00:17:13,500 These are the ones that will be created by convex by default. 256 00:17:13,620 --> 00:17:16,940 But these are the ones that we have in our schema right. 257 00:17:16,980 --> 00:17:19,740 So let's actually double double check this. 258 00:17:20,140 --> 00:17:23,580 So we have the name email image role and clerk ID. 259 00:17:24,100 --> 00:17:27,380 And this is exactly what you can see when you hover over this. 260 00:17:28,100 --> 00:17:28,500 Okay. 261 00:17:28,540 --> 00:17:36,250 So that's going to be the user type, and in the return statement we can show a div with an avatar image 262 00:17:36,250 --> 00:17:36,970 component. 263 00:17:37,290 --> 00:17:40,810 So let's say this avatar should be coming from components. 264 00:17:44,090 --> 00:17:47,570 Okay, so why maybe we don't have the avatar component. 265 00:17:47,850 --> 00:17:51,130 Let's see I thought we have it but looks like we don't. 266 00:17:51,170 --> 00:17:53,290 So let's go ahead and get this. 267 00:17:53,730 --> 00:17:56,850 We'll say add avatar component. 268 00:18:00,370 --> 00:18:00,810 Okay. 269 00:18:01,010 --> 00:18:03,770 Now that we have it this should stop complaining. 270 00:18:03,770 --> 00:18:06,450 And we'll get the user circle icon. 271 00:18:07,970 --> 00:18:09,810 So that's the user info component. 272 00:18:09,810 --> 00:18:13,010 Let's try to see the output that we have. 273 00:18:14,010 --> 00:18:14,450 Okay. 274 00:18:14,610 --> 00:18:19,330 So for some reason we can see the dialog on the right hand side I will refresh. 275 00:18:22,010 --> 00:18:24,810 Okay so this does not look right. 276 00:18:25,970 --> 00:18:27,130 We need to fix this. 277 00:18:27,970 --> 00:18:31,400 So I have paused the video and just debug this a little bit. 278 00:18:31,400 --> 00:18:37,000 And I have realized instead of getting this from the components, I am getting it from the radix UI. 279 00:18:37,160 --> 00:18:38,880 So that's why it is crashing. 280 00:18:38,920 --> 00:18:46,480 I will go ahead and delete this complete line and instead have this dialog component or dialog content 281 00:18:46,600 --> 00:18:48,720 coming from the components folder. 282 00:18:49,000 --> 00:18:51,000 So let's save and test this out. 283 00:18:51,240 --> 00:18:53,080 Now it is working as expected. 284 00:18:53,120 --> 00:18:57,280 We can see the title description candidate right. 285 00:18:57,320 --> 00:18:58,400 We can select it. 286 00:18:58,400 --> 00:19:01,720 And we can see the inner rivers in our database. 287 00:19:01,720 --> 00:19:04,080 We only have one interviewer right. 288 00:19:06,480 --> 00:19:09,040 So let's try to make this an interviewer as well. 289 00:19:09,280 --> 00:19:10,800 So let's see what we're going to get. 290 00:19:14,000 --> 00:19:14,440 Okay. 291 00:19:14,520 --> 00:19:18,320 Now as you can tell we have more inner rivers that we can select. 292 00:19:18,320 --> 00:19:21,160 And if you want to remove them we can remove it. 293 00:19:21,520 --> 00:19:24,200 So that's what I meant when we built that function. 294 00:19:24,480 --> 00:19:28,280 But now I'll go ahead and make this user to be a candidate. 295 00:19:34,560 --> 00:19:37,160 Okay, so this is how that look, right? 296 00:19:37,480 --> 00:19:42,600 Maybe we have a little bit more space here that could be fixed when we add the calendar as well as the 297 00:19:42,600 --> 00:19:43,840 time component. 298 00:19:44,320 --> 00:19:47,760 So let's go ahead and try to build the rest of this component. 299 00:19:48,120 --> 00:19:50,520 So I will head over to the VS code. 300 00:19:50,920 --> 00:19:54,320 And let's scroll to the very bottom where we had. 301 00:19:56,280 --> 00:19:58,000 Let's just shrink everything. 302 00:19:58,000 --> 00:20:01,240 We had the inner viewers at the very bottom below to it. 303 00:20:01,240 --> 00:20:04,040 I will have the date as well as the time. 304 00:20:04,680 --> 00:20:10,320 So here I will have a div first with some classes such as flex and gap of four. 305 00:20:10,440 --> 00:20:14,360 And then I will I would like to say the calendar component. 306 00:20:14,640 --> 00:20:16,680 So here once again we'll have a div. 307 00:20:16,720 --> 00:20:20,040 Let's say class name space y of two. 308 00:20:20,200 --> 00:20:23,600 And then I will say we'll have a label component. 309 00:20:25,790 --> 00:20:27,870 And maybe I can just copy and paste it. 310 00:20:27,870 --> 00:20:30,270 Instead of typing this out, I can walk you through it. 311 00:20:31,190 --> 00:20:35,950 Okay, so we have a label that says date and we'll be using the calendar component. 312 00:20:36,070 --> 00:20:39,350 And these are the props that are coming from the documentation. 313 00:20:39,390 --> 00:20:42,110 So let's go ahead and actually double check this. 314 00:20:42,310 --> 00:20:44,230 I will say calendar. 315 00:20:44,910 --> 00:20:45,230 Okay. 316 00:20:45,230 --> 00:20:49,230 So this is the component that we would like to import into our code. 317 00:20:49,470 --> 00:20:52,790 So where we can have this single date right. 318 00:20:52,830 --> 00:20:57,030 And these are the props that are coming from the docs as you can tell. 319 00:20:57,350 --> 00:21:01,030 Let's go ahead and copy this and paste it into our terminal. 320 00:21:01,870 --> 00:21:03,430 So I'll go ahead and paste this in. 321 00:21:07,070 --> 00:21:07,350 Okay. 322 00:21:07,390 --> 00:21:09,630 So for some reason this crashes. 323 00:21:10,190 --> 00:21:11,870 Let's see why this is the case. 324 00:21:12,470 --> 00:21:15,710 So I have paused the video and debug this a little bit. 325 00:21:15,710 --> 00:21:17,630 And I have found the solution. 326 00:21:17,750 --> 00:21:22,790 So first you need to type this out where you would like to uninstall the date fns. 327 00:21:23,060 --> 00:21:26,180 So just type npm uninstall datefns. 328 00:21:26,340 --> 00:21:31,460 And then you would like to paste this previous command that you had, and it will ask you if you want 329 00:21:31,460 --> 00:21:35,580 to overwrite the button component and you can just say yes or no. 330 00:21:35,580 --> 00:21:39,420 It doesn't really matter because we didn't change this component at all. 331 00:21:39,540 --> 00:21:40,780 Then it should be good to go. 332 00:21:40,780 --> 00:21:43,660 It will go ahead and get the calendar for you. 333 00:21:43,900 --> 00:21:52,820 So the primary reason for this, I think the data version that Shatkin uses did not work with the one 334 00:21:52,820 --> 00:21:53,700 that we have. 335 00:21:53,700 --> 00:21:59,700 So that's why we had to uninstall the current one and then just install it with the with the calendar 336 00:21:59,700 --> 00:22:02,140 component that is coming from Shatkin. 337 00:22:02,620 --> 00:22:04,100 Okay, I hope that makes sense. 338 00:22:04,140 --> 00:22:08,980 Let's go ahead and import the calendar coming from components UI folder. 339 00:22:09,020 --> 00:22:09,540 Right. 340 00:22:09,740 --> 00:22:13,620 And let's save this and take a look at the UI. 341 00:22:15,020 --> 00:22:17,060 So it says exports is not defined. 342 00:22:17,100 --> 00:22:17,980 Let's refresh. 343 00:22:19,500 --> 00:22:20,420 What does that mean. 344 00:22:24,020 --> 00:22:33,260 So as before, I will go ahead and open up my terminal and maybe try to kill this and rerun this. 345 00:22:33,260 --> 00:22:34,540 Maybe this should fix it. 346 00:22:40,980 --> 00:22:41,940 Let's refresh. 347 00:22:48,380 --> 00:22:49,300 Okay, there we go. 348 00:22:49,300 --> 00:22:51,340 Everything is working as expected. 349 00:22:51,340 --> 00:22:55,220 We can see our calendar where we can select a date. 350 00:22:55,420 --> 00:22:56,460 Select a date. 351 00:22:56,580 --> 00:22:59,660 Now next to it we would like to have some time slots. 352 00:23:00,020 --> 00:23:07,020 Let's go ahead below to the calendar component below to this very first div we would like to have the 353 00:23:07,780 --> 00:23:09,500 let's say time right? 354 00:23:09,780 --> 00:23:15,580 And then I will have a div once again with the same classes space y of two. 355 00:23:15,740 --> 00:23:22,170 And I can get a label that says time and we'll be using a select component. 356 00:23:22,450 --> 00:23:27,210 And this select component will be using the time slots that we have in our constants. 357 00:23:27,650 --> 00:23:30,090 So let's save and take a look at the UI. 358 00:23:30,730 --> 00:23:32,130 This is how that look. 359 00:23:32,250 --> 00:23:35,650 And we can select a time as well. 360 00:23:38,730 --> 00:23:39,130 Okay. 361 00:23:39,330 --> 00:23:47,010 And then after the select after the first div after the second one we would like to add the action buttons. 362 00:23:47,250 --> 00:23:51,570 So I will go ahead and copy this and then paste this inside. 363 00:23:52,090 --> 00:23:55,770 So we have the action buttons with a loader to icon. 364 00:23:56,010 --> 00:23:58,370 If you are creating this is what we're going to see. 365 00:23:58,370 --> 00:24:00,930 But else we will see this text inside the button. 366 00:24:01,130 --> 00:24:06,650 And when we submit this button or when we clicked it we will call this function. 367 00:24:08,010 --> 00:24:08,410 Okay. 368 00:24:08,450 --> 00:24:09,850 So this is how that look. 369 00:24:09,890 --> 00:24:13,330 Let's go ahead and create our very first interview. 370 00:24:13,610 --> 00:24:20,890 So let's say for the title um let's say a coding problem. 371 00:24:21,650 --> 00:24:29,130 And for the description let's say meeting and coding, we can select a candidate. 372 00:24:29,730 --> 00:24:32,810 Interviewer is us and time slot. 373 00:24:33,490 --> 00:24:37,570 Let's say it will be next week today. 374 00:24:38,210 --> 00:24:38,450 Okay. 375 00:24:38,450 --> 00:24:39,890 Let's say schedule the interview. 376 00:24:39,930 --> 00:24:42,090 We have a loading state and there we go. 377 00:24:42,130 --> 00:24:44,010 Meeting scheduled successfully. 378 00:24:44,730 --> 00:24:49,410 Just in a couple of minutes we are going to actually fetch them and display it here on the UI. 379 00:24:49,610 --> 00:24:51,570 But let's take a look at the database. 380 00:24:51,610 --> 00:24:53,050 We should have an inner view. 381 00:24:53,610 --> 00:24:54,290 There we go. 382 00:24:54,330 --> 00:24:56,330 This is the description that we just had. 383 00:24:56,650 --> 00:24:58,090 The title. 384 00:24:58,330 --> 00:25:00,210 It should be at the very end. 385 00:25:00,210 --> 00:25:00,810 There we go. 386 00:25:00,810 --> 00:25:02,450 And the status is upcoming. 387 00:25:03,130 --> 00:25:03,410 Okay. 388 00:25:03,450 --> 00:25:06,090 So that means everything is working as expected. 389 00:25:06,130 --> 00:25:13,210 Next we can build the meeting card component that is going to look like this, where we can see the 390 00:25:13,210 --> 00:25:16,330 status of each meeting with the details.