So this is where we left.
We have built a dialogue component in this interview schedule UI file.
Now after this dialogue and after this step, we would like to render out our meeting cards.
So I'll go ahead and add a comment which is going to have our loading state as well as the meeting cards.
Now let's say we'll have some conditional rendering.
So we'll just say if interviews is undefined in this case we would like to return something.
But in the else case we'll take the return something else.
So here we will have some loader component.
So I will go ahead and copy this.
Paste it.
We have a div with a loader to icon coming from react.
And in the else case we'll just check for something.
Let's say if interviews dot length is greater than zero we would like to return this part.
But else we would like to return this part.
So here we can basically map through the interviews.
use.
Um.
Let's go here.
I'll just say I would like to have a div with some classes.
Such as, let's say space Y of four.
Then I'll have one more div.
Let's say class name grid.
Gap of six and then medium screens.
And above the grid columns will be two larger screens and above grid calls of three let's say.
Then here we would like to basically render out all of our inner views in a meeting card.
So I'll say interviews dot map.
And we would like to show you can call this as inner view card as well.
But I think I'll just go with a general name.
So I'll just say meeting card.
This is going to take the key as well as let's say the inner view.
We're going to create this in a second.
And this should be underscore ID because this is how convex stores it Okay.
So after this let's go ahead and add the else case.
Basically we'll just have a div that says no interviews scheduled or no interviews found.
I would like to give some classes, such as text of centered padding y of 12 and text muted foreground
color.
Okay.
Let's go ahead and create this component.
Under the components.
Let's try to import it.
And we have some TypeScript errors.
Let's go ahead and fix it.
So I'll close these and let's try to build this component.
So first things first we would like to get the prop which is the inner view.
And let's say this is the type inner view which is the type of interview right.
But how can we get this in a real type?
Well, just like previously, we can say type interview and we're going to use the document coming from
convex.
And we'll put the table name which is the inner views.
And now we can see the inner view type that we just have.
Then here we'll go ahead and use an action.
Or I should say we're going to be using a custom hook.
Which is going to be this use meeting actions.
And this is going to give us some values.
And we would like to get the join meeting function right.
So I'll save get this formatting.
And we would like to grab the status of the meeting.
So I'll just say get meeting status.
This is a function that we have under the utils file.
So let's just see which one is it.
Okay.
It is this one we pass in a view and it returns us the uh the status.
Is it completed?
Is it upcoming?
Is it live or is it completed?
So okay, with that in mind, let's try to call this pass the inner view as an argument.
Then I'll just get the formatted date.
Not data but it should be date.
We're going to call the format function coming from date fns.
So for some reason I cannot get the Autosuggestion.
So let's say format coming from data fitness.
And we're going to pass the new date inside.
And I think I can copy this and paste it.
Okay.
So we are formatting the start time with this format.
And in the return statement we're going to return a card.
So let's say we'll have a card.
Just like this inside we're going to have a card header component.
And this card header will take the class name of space Y of two.
And inside we'll will have a div with class name of flex item centered and justify between.
Then inside this we'll have one more div where we'll just basically put the formatted date as well as
an icon.
So it's going to it's going to look like this.
Let me just save.
So this is what we have so far.
After this div we would like to have a badge component which is going to be coming from CDN UI.
So let's double check this.
So this is a badge component that you can have by installing it.
So I'll just clear up my terminal and paste this in.
There we go.
Just got that component and we can import it coming from the UI folder.
And this is going to take a variant.
So let's say variant which is going to going to be dynamic.
So we'll say if status, let me give it space.
We'll say if status is equal to life.
Then this is going to be default variant.
And this should be string just like this.
Default.
And in the else case we'll say if status.
Is equal to upcoming then it will be secondary.
And in the else case we can go with the outline.
Okay.
So we just make this variant to be dynamic.
And in the same way we'll change the text.
It will be dynamic.
So we'll just say if status is equal to live.
We're going to get live now.
And in this case we'll say if status is equal to upcoming.
We'll like to see upcoming text.
And in the else case that means it has been completed.
So this is exactly what we would like to have for a batch.
After the batch.
After this div, we would like to have a card title component.
Okay, so here I'll just put the inner view title and that's it.
Finally we'll put the inner view description so I can say our description.
Import it.
And this is going to take the class name of let's say line clamp of two.
And for the text we'll say inner view dot description.
Okay let's save.
But now this description could be undefined right.
Because this is an optional field.
So we can wrap this with.
Curly braces.
And we'll say if inner view dot description only then actually display this card description component
and after this card header, let's go outside.
We would like to have a card content component.
I can type.
Okay there we go.
This is going to take the button.
Let me just copy it and paste it.
We'll say if status is equal to life we should be able to join into the meeting.
And if status is upcoming we'll see a different button which is disabled.
So you cannot join.
You just have to wait.
Okay.
So this is everything that we would need for the meeting card as well as this part that we have just
built.
Let's save and test this out.
So that was the inner view that we have created a couple of seconds ago.
Or maybe in the previous section.
Right.
It is in the upcoming state.
Let's create one for right now.
I'll say schedule interview.
Let's say test.
Test description candidate is going to be this user.
Let's just add it right now.
And we don't have the current time which is almost 1 a.m..
Let's try to add it into the time slots under the constants.
So I'll just add the midnight as an option here.
Okay.
Let's select it and just say schedule the interview.
There we go.
It is live.
We can join into it.
Let's click to it and I will go ahead.
Select this one.
Okay.
Let's say hello while visiting site or maybe just this time and we can do the same thing for the camera.
But I have disabled it so we can go ahead.
Everything is working as expected.
We can change the speakers, microphone and the camera.
Let's join.
Okay, so everything is working as expected.
And now we can see this button because the inner view is in the database right.
It is this one that is live status is upcoming.
But if we end this now it should be completed as you can tell.
So everything is working as expected so far.
And also if you visit the schedule page, we should be able to see that this has been completed, because
this is the state that we have in the database which is ended that call now it is completed.
So with that, I think that's going to be it for the schedule page as well.
This is what we have built.
The entire model is working and we can join into the meetings if it is live.
And now as the next step we can build the dashboard page, which is going to be our very last page.