So far, this is what we have in the meeting page.
And let me show you the demo application.
In the meeting page we're going to have basically two different UIs.
One to be able to set up the UI to set up the call.
And once we say join meeting, this is what we're going to get.
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.
Right.
So let's try to keep this in mind and start with this UI, where we will have the camera display on
the left hand side and then our options on the right hand side.
Okay.
So I'll shrink the left hand side.
Let's say we would like to use this use params hook.
And since we're using this hook this should be a client component.
Okay.
Now we're going to go ahead and just say const.
Grab the ID.
So we are destructuring this as ID because this is how we called our folder name.
Right.
And then we will say to get the use user hook because we would like to get this is loaded state.
Then I would like to get a state let's say const.
This is going to be equal to use state let's import use state and we'll say is setup complete.
And by default this is going to be false.
Then we'll say if it is not loaded or if we will have another state called is called loading.
Let's try to create this for now.
Like this.
As a as a hard coded value.
Let's say true call is loading.
If you are in this state, we would like to return a loader UI.
This is something that we have already.
So let's import it and try to use it.
And we can say now in the return statement instead of this meeting page div, we'll have a different
component which is going to be stream call.
This is coming from our SDK.
Make sure you close this off.
So this want you to pass a prop called call.
And we're going to get this just in a second.
For now leave it as empty or let's delete it so that we don't have any errors.
So stream call to be able to get some theming to some styling from the stream.
We can say stream theme, wrap our application with it as well.
Wrap this page with it.
then we'll say if is set up, not completed, we can return this part.
Else we can return this part.
Okay.
Now let's go ahead and try to first build this one.
We will say we would like to return a component called Meeting Setup.
And here we would like to return a different component called meeting room.
So we're going to create both of them in a second.
And here we would like to pass this function called on Setup Complete.
Basically we will set this state to be true.
And once this is true we will see the meeting room.
So first let's go ahead and try to create this component.
I'll copy the name go under the components dot TSX.
Okay.
Save it.
Close that.
Let's try to import it and do the same thing for this one.
Okay, so TypeScript complaining for now.
Just ignore it.
We would like to get the current call and pass it into this stream call component.
So we would like to pass the call that we are having in this page.
But how can we get this call.
We can put the logic inside of this page.
But I think it would be much more cleaner if we create a custom hook.
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.
And here this is going to give us two different values.
Let's say call.
And it will give us this state that we have created above.
So instead of this hardcoded value we'll say is call loading will be coming from this hook.
And we can take it above just like this.
Okay.
So now let's go ahead and try to create this custom hook.
Um, under the hooks I will create a new file and let me walk you through this entire file.
So as always we are going to start with our imports.
Let's go ahead and grab them which is use effect use state call type as well as this hook coming from
stream SDK.
Then we are going to create our hook which is going to take an ID that is type of string and we will
export this.
So here we should pass the ID as you can tell.
And then we will have a state which is a call state.
Initially it will be undefined.
And to make TypeScript happy we will pass this type as a generic.
Then here we'll have this loading state.
Initially it will be true because we would like to immediately fetch this call.
And once we fetch it, we will make will make this to be equal to true.
Then we will get the client from this hook.
Then we'll have a useeffect that will run whenever the client or ID changes, right?
As you can tell.
Then we will have this if check if there is no client return immediately out of this function, then
we will have a function called get call that is async.
It is going to have a try catch as well as a finally block.
In the try we would like to fetch the current call right?
This is the point we would like to get call by ID so we can say const calls.
We are destructuring this from the client dot query calls.
This is coming from the stream documentation.
Once again you can take a look at it where we can add an object with our filter conditions.
And we would like to pass our ID that is coming from as a parameter.
This will give us the current call.
Right?
And then if there is a result, you would like to set the call with the first one, which is going to
give us our call.
In the catch, we can handle this console log as well as setting the call to be undefined because it
means we got some errors.
Finally, voting state will be false regardless of the success or false case.
And we're going to call this function inside Useeffect and finally return two different functions or
two different states I should say, which is the call state as well as the loading state.
Okay.
So that's it for this entire hook, which is around 30 lines of code.
And there isn't anything complicated, right?
We just have a useeffect that is going to run to get a call with this filter conditions.
Now let's try to call this.
We're going to get the call that we are passing it inside.
But now um, so here it says string or string array.
Okay.
So maybe we can just copy this, paste it inside here as the type.
Now that this is happy we're going to fix this typing error as well.
And I was going to say now let's say if call is undefined in this case we can put a fallback UI.
So I will just get this if check if there is no call, return a div with a p tag that says meeting not
found.
Let's save and try to maybe just see the output.
So I will visit my browser let's say start a meeting.
Okay, so we had a brief loading state.
If you have realized I'll refresh like just for a second.
We have it.
Then we got into the meeting setup.
Okay.
Now let's try to build this page or this component which is going to look like this.