In this chapter we're going to add meeting variants. This will be cancelled, processing, active, completed and upcoming. So let's go ahead and ensure that you're on your default branch. After that go inside of the Meeting ID view, inside of Modules, Meetings, UI, Views, Meeting ID, View. And in here, go ahead and add the following constants.
And instead of using meeting, we are directly accessing the data like this. So is active, is upcoming, is canceled, is completed, and is processing. And in here, you don't have to be afraid of doing a typo because you will get an error because data.status is an enum because data is what we fresh from our database, right? So it can only be a specific thing that we defined in our schema. So just go ahead and add these values.
And now let's go ahead and use them to render the current state. So remove the JSON stringify here and check. If isCanceled, let's go ahead and render a div cancelled. Like this. And then let's go ahead and repeat that for all states.
Like this. So it's cancelled, cancelled, processing, processing, completed, completed, and upcoming, upcoming. So right now when you visit your meeting, you should see it's stayed here. There we go. Now it says upcoming.
But if I go inside of my Neon console here, inside of tables, meetings, and if I change the status to processing, for example, and click save and refresh here, it will now say processing. So let's go ahead and just quickly bring it back to upcoming so we can develop that component. Before we can develop any components, we first have to fetch the rest of our assets. So you can go ahead and visit cwantonio.com forward slash meet dash assets or you can simply use the link in the description and that will take you to the github with all of the assets. So go ahead and download all of this.
You can click individually inside of them and use the download button right here. Once you've downloaded them, go ahead and put them inside of the public folder. So we already did this with the empty SVG. And now we're just adding a couple of more. So we've added the canceled, we've added processing, and we've added upcoming.
Now let's go ahead and just close everything and go inside of source components, empty state, and in here add a new prop, which is an optional image prop, and make it a default forward slash empty SVG. And instead of rendering the hardcoded string here, put it like this. And now let's go ahead and develop upcoming state. So we're going to do that inside of the meetings UI components. Let's create a new file upcoming state dot TSX let's go ahead and let's export const upcoming state and let's return a div with a a class name background-white, rounded-large, px of 4, py of 5, flex, flex-column, gap-y-eight, items-center, and justify-center.
Inside, render the empty state from components empty state and inside put an image to be forward upcoming SVG so we just added that to our public folder and then let's add the title and the description This is what I'm going to use. You can, of course, use whatever you prefer. So let's go ahead now and go back inside of our Views, Meeting ID View. And instead of this Upcoming, let's actually render upcoming state from components upcoming state so now in here when you refresh if this is in the state upcoming you should see not started yet once you start this meeting a summary will appear here Now let's go back inside of the upcoming state here and let's import button from components UI button and let's import link from next link And let's also add video icon and ban icon from lucid react. And now we're going to go ahead below the empty state here and we're going to open a div with a class name flex flex column reverse LG flex row LG justify center items center gap to and for width and now let's render the buttons The first one will be ban icon and cancel meeting button.
Copy and paste it. And the second one will be start meeting and video icon. And this one will also be a link. So go ahead and wrap the content of the button inside a link. And give it an href to the following.
Open back takes forward call forward slash And then we're going to do meeting ID. So let's just put 123 for now, set the this to be as child and class name with full LG with auto and that would be it. And now let's go ahead to the button above and let's go ahead and give it a variant of secondary and let's give it the same class name here. There we go. And now let's go ahead and let's simply extend the props for this.
So it will accept meeting ID, onCancelMeeting and isCanceling. So we can now destructure that. Let's go ahead and do it. Meeting ID, onCancelMeeting and isCanceling from the props here. So for this button here, we can go ahead and add an on click.
And we can go ahead and add disabled if it's cancelling. And we can also disable the start meeting button as well if it's canceling so we don't accidentally start the call while we're canceling it. Now let's go ahead and also use the meeting ID here instead of the 1 2 3 so forward slash call forward slash meeting ID like that. Now let's go inside of the actual meeting ID here And let's render it properly. So I'm going to give it meeting ID, meeting ID on cancel meeting will be an arrow function like this and in is cancelling will be false.
There we go. So now we have the options to cancel or start the meeting. Now let's leave it like this and let's go ahead and let's add a new state called active state. So in order to do that, we just have to copy the upcoming state. And let's go ahead and let's rename it active state.
And for the props, it will just accept a meeting ID, let's call it active state. And all we have to do is just modify the title and the description here. Meeting is active and meeting will end once all participants have left and we can use the exact same image here and you can remove this div here, no need for it. And you can leave the class name as it is, just remove the unused imports here. And yeah, my apologies.
Bring this back, but it's just going to be a single button here. It's not going to be disabled. It will be a link to the meeting ID and this will be join meeting like that. Perfect. And I think we can leave everything else exactly as it is.
So meeting is active, meeting will end and just remove the ban icon from here. Perfect. Let's go back to the meeting ID view here and let's go ahead and let's add is active and active state meeting ID meeting ID Make sure to import active state. So now let's go ahead and let's change this to active and click Save change. And let's see this change meeting is active and we have a button to join the meeting, which is a 404 page at the moment because it doesn't exist yet.
And now let's wrap it up with the processing state and the canceled state. So let's copy active state and let's rename it canceled state. Let's go ahead and remove the props, as we are not going to need any. And let's rename this to canceled state. In here, we are using canceled SVG.
And we just have to modify the title and the description. And we can completely remove everything below that. And let's remove all of the unused imports here. So that's the canceled state. So let's go inside of the meeting ID view down here.
And let's go ahead and render the canceled state. Make sure to import the canceled state. And let's go ahead and change this to canceled. Save change. And let's refresh and see it in action.
There we go. Meeting canceled. And let's do one more, which is the processing state. So let's just copy the canceled state. And let's rename it to Processing state.
Processing state. So in here, we're going to use processing SVG, I think. Public processing. Yeah, so we have processing SVG here. But this is technically a completed state, right?
We are going to say meeting completed, because it was literally completed. We are just processing it. So a summary will appear soon. Great. And now let's go back inside of the meeting ID view here.
And let's use the processing state like this. There we go. Perfect. So the only thing left is the completed state, but this will not use any image. This will be an actual completed state with information, and we can only develop it once we actually process a meeting.
But let's just confirm this works by changing this to processing and saving it and refreshing. And there we go, meeting completed, the meeting was completed, a summary will appear soon. Perfect. So now just bring this back to upcoming or just create a new meeting it's going to have upcoming by default and in the next chapter we are going to enable this buttons right here Now let's go ahead and let's see if we've done everything. We've grabbed the assets, cancelled, processing, active, not completed yet, but we did add this.
Perfect. And now let's go ahead and merge this, so 21 meeting variants. Let me go ahead and open a new branch here create new branch 21 meeting variants and let's click plus to stage all changes and add a commit message. And let's press commit and publish the branch. Once the branch has been published we can go ahead and review our code.
This one was pretty simple so I'm not expecting much but I am interested if we missed some serious issues here. And in here we have our code summary. So as we've just learned we have introduced new visual states active, upcoming, cancelled, and processing. And we have also added the images to represent those states. In here as always we have a more in-depth file by file change summary, a diagram representing our logic to show each visual state and in here we have some comments so it recommends using ActiveSVG instead of UpcomingSVG, completely reasonable, it's not exactly clear, the component is called ActiveState but Upcoming.svg is the one we need to use.
In here it suggests adding some class names here but we don't need to do that because in the new chat-cn versions button automatically separates the icons here. And let's go ahead here. It suggests removing the meeting on cancel. We are going to have an actual action to just cancel the meeting without removing it. Of course in here it suggests actually filling this and also it suggests adding an unknown meeting status.
So that's something we might actually do even though I'm not sure how this can happen. It's good to cover this kind of case as well. So let's go ahead and merge this pull request here. Let's go back to our main branch and let's click synchronize changes, so this button right here. And let's go back inside of our source control, look at the graph and confirm we just merged all of those new images and all of those new states.
Great! That's it for this chapter. Amazing job and see you in the next one.