In this chapter, we're going to prepare our app for deployment by fixing the last of the bugs we have left. This will include implementing the proper dashboard command, adding proper meeting account to agents, and testing the build. Ensure that you're on your main branch here and let's go inside of dashboard command and in here let's go ahead and let's add the following imports use router use query and use state from react And then let's also add use TRPC and generated avatar. Let's go ahead inside of the dashboard command and let's prepare use router and search state. In here let's go ahead and create TRPC instance and also immediately query meetings and agents using meetings.getMany and agents.getMany.
Make sure to pass the search prop and increase the page size to 100 for both of them. Now in here add should filter to be false like that. In here you can add three little dots here and go ahead and give it value search and on the value change to modify set search. And then let's go ahead and let's add a command group item so you can import this from the actual components UI command and give it a heading of meetings and inside add command empty no meetings found and you can import this from the same folder now let's go ahead below the command empty and let's go over meetings data, question mark, items, map, and then simply add on select to be a router push to the individual meeting and set open to false and render the meeting name like that. Let's go ahead and let's remove this test items here and now let's go ahead and do the exact same thing.
So I'm going to copy this command group here, paste it below and in here the heading will be agents. This will be no agents found and this will use agents data. And this will redirect to agents like that. What we have to do now is besides the name also render the agent. Whoops, let's change this to agent.
So this is then agent ID, agent ID and agent name. Like that. And I'm pretty sure that is it. We can now query for both of them. So let's quickly check inside of our app.
Make sure you have your app running here. And make sure to have, you know, some data. So let's see if I have the agents. Here I do. So if I go for a specific agent, I can, I found it?
And when I click it, it should redirect me to it. There we go. And the same is true for meetings. I just happened to not have any meetings here. Let's go ahead and create one.
And once you do so, you will be able to find the meeting here. There we go. Amazing. So we completed that. Now, if I go inside of my to-do, I have added this inside of dashboard meetings, meeting ID, prefetch meetings, get transcript.
We don't need to do that because in the actual transcript, we decided to use use query instead. Now let's go ahead and handle the actual count of the meetings that the agents are used in because this currently always displays the number six. So what we are going to do is implement the proper meeting count using database dollar sign count and simply import the meetings schema and look for meetings agent ID which matches the current agent ID so make sure you imported the meetings schema here and you will have to do the exact same thing in the getMany procedure. So let me scroll down here, find getMany, and I have the same thing here. So let me just add it here, and I will move it after getTableColumns.
And in getOne, I'm pretty sure that I also need get table columns here to give me the entire agent. There we go. So now, as you can see, this says one meeting simply because in here I have set it to this meeting right here. This one says zero meetings and it's the same information if I go inside. You can see it just refreshed to zero meetings.
Great! So I think that's it. That's all we have to fix here. And you can remove the SQL from here now. And now let's go ahead and let's do, actually, there is one more thing we have to do.
And that is the ability to cancel a meeting. But truth be told, I have no idea what's the point of canceling the meeting. Initially, I thought this would be a great idea, just keep it canceled. But you can't really do much with it. You will eventually just delete the meeting, right?
So that's why I don't see much point in giving the user an option to cancel the meeting, right? Now in HintSite, it just doesn't make sense. Like what does the user do with it then except delete it, right? So let's go ahead inside of Upcoming State here, and let's just remove this button. And let's remove OnCancelMeeting.
So you can just start it. So then find where you render upcoming state, which is in the meeting ID view, and remove on cancel meeting and remove is cancelling. We don't need is cancelling either. So remove this too. And remove the ban icon.
I think this makes more sense because what's the point of cancelling a meeting, right? You can just delete it if you don't want it anymore. And I'm pretty sure that is it. I might have left something out, but I think after almost 13 hours of a tutorial and there we go some error but I think this is just hot reload happening here now after 13 hours of tutorials I'm pretty sure if you find a bug you will be able to resolve it yourself if you do find something serious feel free to leave a comment or send me an email so I can take a look. Amazing, amazing job.
And now let's go ahead and let's do the following. You can shut everything down here, including this. And let's do npm run build. So let's just check if this throws any errors. Now I don't seem to be having any errors, so this completely worked.
If you do have any errors, you will have to resolve them before you can deploy the app. Perfect. So now let's go ahead and let's merge this. So I'm opening a new branch here. 28 bugs.
I'm going to go ahead and stage all changes. I will commit 28 bugs. Commit, publish the branch. And since this was super simple, there's really no need for any review here. We're just going to go ahead and create a pull request just to be consistent with the rest of our pull requests, and let's immediately merge this pull request and then you can go back inside of your main and you can click synchronize changes right here and in a second in your graph you should see 28 bugs right here.
Perfect. So in the next chapter, we're going to go ahead and deploy.