1 00:00:00,920 --> 00:00:03,960 So far, this is what we have in the meeting page. 2 00:00:04,160 --> 00:00:06,480 And let me show you the demo application. 3 00:00:06,640 --> 00:00:10,560 In the meeting page we're going to have basically two different UIs. 4 00:00:10,720 --> 00:00:14,640 One to be able to set up the UI to set up the call. 5 00:00:14,840 --> 00:00:18,280 And once we say join meeting, this is what we're going to get. 6 00:00:18,480 --> 00:00:25,800 So basically we need to have a state to check if we are in the setup UI or if we are in the actual meeting. 7 00:00:25,840 --> 00:00:26,280 Right. 8 00:00:26,680 --> 00:00:32,880 So let's try to keep this in mind and start with this UI, where we will have the camera display on 9 00:00:32,880 --> 00:00:38,200 the left hand side and then our options on the right hand side. 10 00:00:39,920 --> 00:00:40,400 Okay. 11 00:00:40,600 --> 00:00:42,200 So I'll shrink the left hand side. 12 00:00:42,200 --> 00:00:47,000 Let's say we would like to use this use params hook. 13 00:00:47,480 --> 00:00:51,280 And since we're using this hook this should be a client component. 14 00:00:55,200 --> 00:00:55,600 Okay. 15 00:00:55,920 --> 00:00:58,120 Now we're going to go ahead and just say const. 16 00:00:58,160 --> 00:00:59,720 Grab the ID. 17 00:01:03,400 --> 00:01:08,480 So we are destructuring this as ID because this is how we called our folder name. 18 00:01:08,520 --> 00:01:09,000 Right. 19 00:01:09,360 --> 00:01:19,000 And then we will say to get the use user hook because we would like to get this is loaded state. 20 00:01:19,320 --> 00:01:23,960 Then I would like to get a state let's say const. 21 00:01:25,920 --> 00:01:36,200 This is going to be equal to use state let's import use state and we'll say is setup complete. 22 00:01:37,760 --> 00:01:40,040 And by default this is going to be false. 23 00:01:41,640 --> 00:01:51,520 Then we'll say if it is not loaded or if we will have another state called is called loading. 24 00:01:52,840 --> 00:01:55,520 Let's try to create this for now. 25 00:01:56,200 --> 00:01:56,680 Like this. 26 00:01:56,680 --> 00:01:58,080 As a as a hard coded value. 27 00:01:58,120 --> 00:02:00,920 Let's say true call is loading. 28 00:02:00,960 --> 00:02:05,400 If you are in this state, we would like to return a loader UI. 29 00:02:05,920 --> 00:02:07,880 This is something that we have already. 30 00:02:09,600 --> 00:02:11,760 So let's import it and try to use it. 31 00:02:11,960 --> 00:02:18,560 And we can say now in the return statement instead of this meeting page div, we'll have a different 32 00:02:18,560 --> 00:02:22,680 component which is going to be stream call. 33 00:02:23,240 --> 00:02:25,040 This is coming from our SDK. 34 00:02:25,920 --> 00:02:27,680 Make sure you close this off. 35 00:02:28,520 --> 00:02:33,360 So this want you to pass a prop called call. 36 00:02:33,520 --> 00:02:35,960 And we're going to get this just in a second. 37 00:02:36,040 --> 00:02:40,320 For now leave it as empty or let's delete it so that we don't have any errors. 38 00:02:40,640 --> 00:02:46,440 So stream call to be able to get some theming to some styling from the stream. 39 00:02:46,440 --> 00:02:53,280 We can say stream theme, wrap our application with it as well. 40 00:02:53,680 --> 00:02:55,200 Wrap this page with it. 41 00:02:55,320 --> 00:03:03,040 then we'll say if is set up, not completed, we can return this part. 42 00:03:03,080 --> 00:03:05,000 Else we can return this part. 43 00:03:06,280 --> 00:03:06,800 Okay. 44 00:03:06,880 --> 00:03:09,440 Now let's go ahead and try to first build this one. 45 00:03:09,480 --> 00:03:14,080 We will say we would like to return a component called Meeting Setup. 46 00:03:15,600 --> 00:03:20,440 And here we would like to return a different component called meeting room. 47 00:03:22,880 --> 00:03:25,160 So we're going to create both of them in a second. 48 00:03:25,160 --> 00:03:29,680 And here we would like to pass this function called on Setup Complete. 49 00:03:30,160 --> 00:03:33,000 Basically we will set this state to be true. 50 00:03:33,160 --> 00:03:36,600 And once this is true we will see the meeting room. 51 00:03:36,960 --> 00:03:40,240 So first let's go ahead and try to create this component. 52 00:03:40,640 --> 00:03:46,200 I'll copy the name go under the components dot TSX. 53 00:03:48,760 --> 00:03:48,960 Okay. 54 00:03:49,000 --> 00:03:49,560 Save it. 55 00:03:49,560 --> 00:03:50,320 Close that. 56 00:03:50,360 --> 00:03:57,560 Let's try to import it and do the same thing for this one. 57 00:04:03,760 --> 00:04:06,080 Okay, so TypeScript complaining for now. 58 00:04:06,240 --> 00:04:07,080 Just ignore it. 59 00:04:07,480 --> 00:04:13,760 We would like to get the current call and pass it into this stream call component. 60 00:04:13,960 --> 00:04:18,280 So we would like to pass the call that we are having in this page. 61 00:04:18,640 --> 00:04:20,120 But how can we get this call. 62 00:04:20,520 --> 00:04:22,800 We can put the logic inside of this page. 63 00:04:22,800 --> 00:04:27,160 But I think it would be much more cleaner if we create a custom hook. 64 00:04:27,240 --> 00:04:35,920 So I will call this as use get call by ID and we're going to pass the ID that is coming from the URL. 65 00:04:36,640 --> 00:04:39,480 And here this is going to give us two different values. 66 00:04:39,520 --> 00:04:40,560 Let's say call. 67 00:04:40,680 --> 00:04:44,240 And it will give us this state that we have created above. 68 00:04:44,520 --> 00:04:50,160 So instead of this hardcoded value we'll say is call loading will be coming from this hook. 69 00:04:50,360 --> 00:04:53,360 And we can take it above just like this. 70 00:04:54,760 --> 00:04:55,240 Okay. 71 00:04:55,400 --> 00:04:58,880 So now let's go ahead and try to create this custom hook. 72 00:04:59,840 --> 00:05:08,040 Um, under the hooks I will create a new file and let me walk you through this entire file. 73 00:05:08,320 --> 00:05:11,320 So as always we are going to start with our imports. 74 00:05:11,360 --> 00:05:17,840 Let's go ahead and grab them which is use effect use state call type as well as this hook coming from 75 00:05:17,840 --> 00:05:18,920 stream SDK. 76 00:05:19,320 --> 00:05:25,640 Then we are going to create our hook which is going to take an ID that is type of string and we will 77 00:05:25,680 --> 00:05:26,680 export this. 78 00:05:26,680 --> 00:05:29,440 So here we should pass the ID as you can tell. 79 00:05:29,840 --> 00:05:34,040 And then we will have a state which is a call state. 80 00:05:34,080 --> 00:05:35,760 Initially it will be undefined. 81 00:05:35,800 --> 00:05:40,120 And to make TypeScript happy we will pass this type as a generic. 82 00:05:40,520 --> 00:05:42,680 Then here we'll have this loading state. 83 00:05:42,720 --> 00:05:47,720 Initially it will be true because we would like to immediately fetch this call. 84 00:05:47,920 --> 00:05:51,160 And once we fetch it, we will make will make this to be equal to true. 85 00:05:51,560 --> 00:05:54,120 Then we will get the client from this hook. 86 00:05:54,320 --> 00:05:59,840 Then we'll have a useeffect that will run whenever the client or ID changes, right? 87 00:05:59,960 --> 00:06:00,800 As you can tell. 88 00:06:01,080 --> 00:06:07,880 Then we will have this if check if there is no client return immediately out of this function, then 89 00:06:07,880 --> 00:06:12,080 we will have a function called get call that is async. 90 00:06:12,360 --> 00:06:16,080 It is going to have a try catch as well as a finally block. 91 00:06:16,400 --> 00:06:20,080 In the try we would like to fetch the current call right? 92 00:06:20,080 --> 00:06:26,440 This is the point we would like to get call by ID so we can say const calls. 93 00:06:26,480 --> 00:06:31,480 We are destructuring this from the client dot query calls. 94 00:06:31,720 --> 00:06:34,400 This is coming from the stream documentation. 95 00:06:34,400 --> 00:06:40,680 Once again you can take a look at it where we can add an object with our filter conditions. 96 00:06:40,680 --> 00:06:45,240 And we would like to pass our ID that is coming from as a parameter. 97 00:06:45,640 --> 00:06:47,920 This will give us the current call. 98 00:06:47,960 --> 00:06:48,520 Right? 99 00:06:48,560 --> 00:06:54,920 And then if there is a result, you would like to set the call with the first one, which is going to 100 00:06:54,920 --> 00:06:55,960 give us our call. 101 00:06:56,200 --> 00:07:02,640 In the catch, we can handle this console log as well as setting the call to be undefined because it 102 00:07:02,640 --> 00:07:04,240 means we got some errors. 103 00:07:04,560 --> 00:07:11,320 Finally, voting state will be false regardless of the success or false case. 104 00:07:11,760 --> 00:07:18,920 And we're going to call this function inside Useeffect and finally return two different functions or 105 00:07:18,960 --> 00:07:24,640 two different states I should say, which is the call state as well as the loading state. 106 00:07:25,040 --> 00:07:25,440 Okay. 107 00:07:25,480 --> 00:07:29,680 So that's it for this entire hook, which is around 30 lines of code. 108 00:07:29,720 --> 00:07:32,240 And there isn't anything complicated, right? 109 00:07:32,280 --> 00:07:38,000 We just have a useeffect that is going to run to get a call with this filter conditions. 110 00:07:40,000 --> 00:07:41,480 Now let's try to call this. 111 00:07:41,960 --> 00:07:44,880 We're going to get the call that we are passing it inside. 112 00:07:45,120 --> 00:07:51,880 But now um, so here it says string or string array. 113 00:07:53,000 --> 00:07:53,240 Okay. 114 00:07:53,280 --> 00:07:58,720 So maybe we can just copy this, paste it inside here as the type. 115 00:07:59,240 --> 00:08:03,960 Now that this is happy we're going to fix this typing error as well. 116 00:08:04,440 --> 00:08:11,320 And I was going to say now let's say if call is undefined in this case we can put a fallback UI. 117 00:08:11,680 --> 00:08:18,840 So I will just get this if check if there is no call, return a div with a p tag that says meeting not 118 00:08:18,840 --> 00:08:19,320 found. 119 00:08:19,760 --> 00:08:24,320 Let's save and try to maybe just see the output. 120 00:08:24,320 --> 00:08:27,840 So I will visit my browser let's say start a meeting. 121 00:08:29,120 --> 00:08:31,360 Okay, so we had a brief loading state. 122 00:08:31,360 --> 00:08:35,240 If you have realized I'll refresh like just for a second. 123 00:08:35,240 --> 00:08:35,840 We have it. 124 00:08:35,840 --> 00:08:38,360 Then we got into the meeting setup. 125 00:08:38,960 --> 00:08:39,400 Okay. 126 00:08:39,560 --> 00:08:44,680 Now let's try to build this page or this component which is going to look like this.