So let's go ahead and let's implement a board limit. In order to do that I want to visit our convex board.cs file right here. And first Let's go ahead and at the top of our file define a constant org limit. Or you can be more specific and name it organization board limit. And in here place a number of how many boards you want to limit the free organization to have.
So for example, I'm going to add two simply because it's faster to demonstrate that. And let's go ahead now and go inside of our create method here and I have this console log left over so I'm going to remove that. And here's what we have to do. Before we create a new board I want to load all of the existing boards so let me just turn off my copilot here so it doesn't mess with the code. So we're gonna write const existingBoardsCount and that's gonna be awaitContext.database.query we're going to query the boards using the index not with, with index, by organization.
We're going to get the query and then we are able to do query equals and we are going to compare organization ID and the argument organization ID. Args, not arg, like that. And we're going to collect all the elements. So it's actually not a count by default, it's just existing boards. And now let's go ahead and let's write if existingBoards.length is bigger or equal than our organization board limit.
In that case, we're gonna go ahead and throw new error organization limit reached. So let's try this out now. In here I already have more than two boards so if this is correct once I click here there we go. I now get an error failed to create board and let's confirm that we get that inside of our logs here in convex. We can select a method board create so I'm gonna deselect all and then I'm just gonna select the board create and let me zoom in right here there we go you can see that it says organization limit reached so our code prevention is working.
So now let's go ahead and let's create a Pro Model which is going to pop up to tell the user that they need to subscribe to a premium feature. So in order to do that I want to go inside of our hooks right here, my apologies, store and I want to copy the useRenameModel. We're gonna call this useProModel. So let's remove default values and let's change this to be an interface iProModel. It's going to have an isOpen value but no initial values and we are not going to need these props inside of the onOpen.
And let's go ahead and let me just expand this so we can see the code better. So this is going to be IProModel like this. OnOpen is going to be much much simpler. Simply setting the Is Open to be true. It's not going to accept any props here.
And same is true for the On Close. Is open is going to be false and there are not going to be no initial values here There we go. And let's call this useProModel Great. And now I want to go ahead inside of our models right here Where are they? Components, Models.
In here we have the Rename model. So let's copy and paste this and let's call that ProModel. So let's quickly just change this. It's going to be just ProModel here. We are not going to need this API mutation here, so we can remove this and we can remove these two imports for the API and use API mutation.
We also no longer need this set state, We don't need the use effect here. We don't need the onSubmit method either. So let me just remove the entire onSubmit method. And we don't need the form at all. So we can remove the entire form like this.
There we go. So we can also remove all the unnecessary imports here like clothes and footer and we no longer need those imports at the top. Let's now switch this out to use use pro model and import use pro model and in here use pro model which means initial values are no longer going to exist in this scope. And now let's just change this to say ProModel and we are going to change this to be this is a pro model. There we go.
And now we have to add this new model of ours inside of our providers model provider. So I'm going to copy and paste this and change this to be a Pro Model and let's import that from our Components Models Pro Model here and let's simply add that right here. So by default if I refresh here nothing should happen But if you go inside of your store, use ProModel and change the isOpen to be true. There we go. The ProModel appears right here.
So now we have to programmatically change this logic from false to true when we get an error on creating our board. So let's go inside of the app folder. Let's actually find out all the places where we use that. So we use APIBoardCreate, I believe. So we need to do that in two places.
In a component called empty boards and new board button. First, let's do it inside of the new board button which is inside of our dashboard folder underscore components new board button. So in here if we get a catch we're gonna go ahead and open this up. And we are going to throw an error. But we're also going to add our Pro Model here from Use Pro Model.
So you can import this from Store use Pro Model like this. And if you want to, you can destructure on open like that. And then in Catch, you can call on open. So let's try it out now. So make sure that inside of your board, you have this error being thrown because of the organization board limit.
So if I try it out now, there we go, the pro model is now open. Perfect. So I'm going to wrap up the chapter for now and then in the next chapter We're going to style this Pro model and we're gonna go ahead and start connecting to Stripe. Great, great job!