So we left off at completing the import functionality and giving our table the ability to select a date, a payee and an amount and to click continue. So now we have to go further and we have to go back inside of our dashboard, the transactions, specifically page.tsx. So inside of here we have this onSubmit method which instead of importCard is used right here. So we have handle continue method where we worked last time. We created this mapped data, then we created the array of data and then we created the formatted data and last thing we did was we passed it into the on submit formatted data.
But our on submit here is empty So let's change that and write onSubmit import. And let's go ahead and write this method right here. So I'm going to do that right here at the bottom. OnSubmit import is going to be an asynchronous method which will accept the values and the values are going to be a type of transactions dot let's import transactions first let's see transactions do I have oh so I'm using this as transactions. Alright.
So this is what we are going to do then. Let's go inside of here. And let's import from at slash database schema. Let's import the transactions as transactions schema. So we have to add an alias here Or is that not working still?
Let's see. Oh yeah, so I have to open this method here. Basically the problem is we cannot have a transactions import because we already have a constant here named transactions. So that's why I'm importing transactions as transactions schema right here so let's go ahead and make this a type of transactions schema dot infer insert but make it an array of items like that. So those are the values and then inside of the method here what we would do is we would submit this to bulk create mutation right But we can't do that yet.
The first thing we need to do is we need to open a model and confirm the account where this is supposed to go. So for that what I want to do is I want to create a hook similar to my use confirm hook. So let's go ahead inside of hooks use confirm and let's copy and paste this and let's call this use select account. But what I'm going to do is I'm going to move it out of hooks here. So I'm going to cut it and I'm gonna put it inside of accounts hooks because it just makes more sense to be in here for this entity.
So not here Let's go inside of the use select account and let's go ahead and modify it so first of all, this use confirm will be called use select account and we are not going to have any props in here, right? But our return method will stay the same. So JSX element and promise unknown right here. And now let's go ahead and let's just add some slight changes here. So let's add const account query here to be used to get accounts.
Let's go ahead and add const account mutation to be used create account. And let's define const onCreateAccount to accept a name which is a string and pass in the account mutation.mutate and pass in the name so that's going to be our method here and const account options here are going to be a check of account query.data or an empty array.map, get the account and return an immediate object with label account.name and value account.id. So we are preparing for our select component here. Now let me go ahead and just use this to imports and move them above all components because they are features and I'm going to change the imports to stay consistent. There we go.
So use get accounts and use create account. You don't have to of course change that if you want to use dot dot feel free to use dot dot. Great! So now I'm gonna go ahead and do the following. So just below the const promise I'm going to add a control for our value But I'm gonna use a ref for that and I'm gonna explain why So let's add select value to be use ref from react With the default value of string well with an accepting value of string right and make sure you've added useRef from React here so that's going to be our select value here and now let's go ahead and let's go inside of handle confirm and instead of sending true we're gonna send select value dot current because we're using the ref right so let's go ahead and also modify this so our promise inside of we have this type here So let's just go ahead and slightly modify the value here.
So it's not gonna be a boolean. It's gonna be either a string or undefined. Right? Like this. So now you should not be getting an error here.
And now let's go ahead inside of here and let's send undefined if we cancel. Great, and instead of having a dynamic title here, we're just gonna render select account. And instead of having dynamic description here we're just gonna have please select an account to continue like this and this can stay the same but we are going to modify one thing. We're gonna leave the footer but just in between the header and the footer we're gonna add a select component from components select. So not from components UI select.
From components select. This is that component which we created which can accept the onCreate method so that we can search and create new ones. So that's the one we need. So make sure you've added an import for that. Components select.
Let me move it here. Alright. And now let's go ahead and pass in everything we need. So placeholder will be select an account and then options will be account options and on create will be on create account and on change is going to be a method which takes in the value and is going to use the ref select value.current to be the value and disabled is going to be if account query is loading or if account mutation is pending. Not isPaused is pending.
There we go. And I think everything else can stay the same. So the reason we are using a ref here and not a value, not a use state is because changing the state causes this hook to re-render which will cause the flashing effect over this dialogue. Right, so every key stroke would cause a flashing effect. So that's why we are using this in a ref.
Great, so we have the use select account and now let's go back inside of our transactions page here and let's go ahead and let's use this use select account. So I'm gonna go ahead and find my hooks here and I'm gonna go ahead and use, use select account from my features account hooks. So let me go ahead and add this here. So I only have this feature. So there we go.
I'm gonna separate the features for accounts here because all of these are transactions so we now have use select account and from here we are destructuring the account dialog and the confirm method So now we have to render this account dialogue and we can render it here in the variants import because it's only going to be used here either way. So account dialogue added inside of this fragment here with the import card. And now inside of the onSubmit import what we are able to do is we are able to request the user for the account by doing const account ID await confirm like this and then if we don't have an account ID we are going to return so we break the method and we are going to return a toast from sonar with an error please select an account to continue make sure you've added an import for toast so I'm going to add that to the top here Great and otherwise let's go ahead and let's get the data to be values.map. We get the individual value, we spread the value and we attach the account ID as string to all of our data and now we are ready to create a bulk mutation.
So let's go ahead here, below use new transaction and we're going to add bulk create mutation. So that's going to be use bulk create transactions here. Make sure you've added an import for useBulkCreateTransactions. Right here. Alright, so again this is some TypeScript weird bug.
When I refresh, there we go, No errors here or there are errors. All right, so let's see what's going on here. Use bulk, create transaction. Features API, use bulk, create transactions and this is bulk, delete transactions. Inside of here, it looks like we are having some circular references here.
So let's see why that is happening. Use bulk, create transactions. Okay, let's go ahead and see if I made any mistakes here. It looks like my use bulk, create transactions is incorrect. And all I did was restart my VS code and the TypeScript errors went away.
So it looks like it was the TypeScript server. Okay, so I didn't change absolutely anything. Let's go back instead of use bulk create transactions here. And now we will be able to do that. So we have bulk create mutation, or we can call it create transactions.
So it matches the delete transactions here, right? So what we're gonna do here is we're gonna do create transactions that mutate. We're going to pass in the data and on success, what we're going to do is we are going to call on cancel import. So we close this view. So I want to test this in the following way and I recommend you do the same thing.
So don't rely on the transactions table because remember we only loaded the last 30 days. So go ahead and run a bun database Studio here. So this way you will be able to track all the data. So I'm gonna go ahead and open my Drizzle Studio and I'm gonna go ahead and remove all of my transactions so it's easier to look at. So now my transactions are completely empty.
So I'm going to import a statement. I'm going to select this for a date, this for payee and this for amount. And if you want to, you can also open the network tab so that you can keep track of what's going on. So let's go ahead and let's click continue. And there we go.
We have an account. Let's select this into a new account. Let's click confirm. And there we go. So it works flawlessly.
Bulk create, sent the data with an ID of all of our items. And we got back a response of those created items. So as you can see, I only have three of those here. You might not have a single one because you can see these are in April. So a lot of those from my import are not here because I only load the last 30 days.
So I'm going to go inside of my drizzle studio instead. And there we go. So in here I can see all of those elements. I think it was 23 of the 21 of them. Great.
So we just wrapped up the import. Great, great job. And now you can go ahead and categorize these if you want to. There we go. So now they work much much better.
Perfect. So what we're gonna do next is we are gonna go ahead and finally work on the overview page because we now have transactions with categories so that we can create some statistics and then we are going to add the filters which will then be used for this page as well, so that we can change the date if we want to increase from just 30 days and also load only a specific account, for example. Great, Great job.