So now that we have our project stable, let's go ahead and implement these two methods. The duplicate method and the delete method. So let's start with the backend. For that we're gonna head inside of our source folder, app folder, API, route, projects.ts. And let's go ahead and let's chain a post ID duplicate method that's gonna be the first one we are going to implement let's go ahead and let's add the verify out method let's make sure to add a comma above and then a z validator here which will verify the param so that is a very simple object with an id which is a string and then let's add an asynchronous method which will be our controller and as usual we can go ahead and get out from C.getOutUser and we can also do a check here like this and now let's also destructure the ID from CRequestValid.param Now let's get the data using await database select from projects where let's add end and let's add two equals.
The first equal will check for the project ID. So projects.id matches the ID from our param and the second one will be projects user ID which needs to match our out.token.id and let's also we don't have to add returning because this is a select method, right? So if data.length is 0, in that case we're going to return back c.jsonError not found and a 404 status code. Otherwise, our project is the first item in the data array and then we're going to go ahead and create a duplicated data. So duplicate data will be await database insert into projects values which will have a name which will be copy of and then our project.name then we're gonna have json which will have project.json Same will be for width and height.
User ID will also be the same. My apologies, it won't be the same. It will be for whatever the person who is calling the endpoint is, right? And created at will be completely new as well as updated at. So they're gonna be initialized for the first time here regardless of what is the value of the project we are copying and let's return this method as well and then let's return JSON data duplicated data zero there we go We can also add an error here.
So if there is no duplicate data, we can return an error because something went wrong. And a 400 here. There we go. But you know to be honest we don't need to do this. Yeah let's keep it simple.
We are simply returning the first item in the array here so data will just be that newly created object. Great. We now have our duplicate method. So let's go ahead and let's create a useDuplicate mutation. So let's go inside of source, features, projects and let's copy the create project.
Actually, let's copy the use update project. Let's rename it to use duplicate project. Let's rename it to use duplicate project here as well. The reason I wanted to copy it is because I assume it's going to be simpler to copy from here. So we have an ID here and let's go ahead and let's modify the response type.
So I'm gonna zoom out so we can see it in one line so this will be ID and then it will be duplicate and it's gonna call the post method so let me zoom out so you can fully see it how it looks like in one line so client API projects ID duplicate post 200 so we're gonna have to do the same thing here duplicate and a post request and we are not looking at JSON here but we are looking at param instead so just go ahead and change this last one to param for the request type great mutation key here is not important so you can remove it and inside of here after ID go ahead and call duplicate and call post method here and we're just gonna have the param like this. This will be failed to duplicate project. This is fine. And the invalidation here will only be for projects. So we added a new project now.
So that's the query we're going to re-invalidate and this will be failed to duplicate project. I think that should be it. So now let's go back inside of our projects section where we added the use get project and have this status pending, status error, pages.length, and the table itself. And here at the top, we can now add the duplicate mutation to be used duplicate project. From features projects API use duplicate project.
So I'm going to move it here and let's go ahead. Well, we're going to have to modify this method because the hook like this expects us to pass in the ID in here immediately, which is not something we can do because we want to call this dynamically from here for example right like we want to do this make a copy we want to do on click and we want to pass in the id to the mutation so we're going to have to slightly modify our hook here So let's go back to use duplicate project and we're gonna remove the ID requirement from here. And instead we're gonna go ahead and fetch the param from here. So then we should just be able to actually use this param I believe. Yes, so we can just use this param because we defined the request type to be the param so then this mutation function will accept those instructions which are very simply an id of string or undefined because instead of asking for JSON here like we usually do, this time we specified that we are going to pass the param through the props of the mutation method.
So now we can go back inside of the project section and as you can see there are no errors here at the moment. So then we can go ahead and define our onCopy method which will accept an ID which is a string and then inside we can simply call the duplicate mutation.mutate() and simply mutate using the ID. Let's go ahead and use this onCopy now for our last table cell which has the drop-down menu item of make a copy and let's go ahead and use the on copy project.id and disabled duplicate mutation is pending. Let's go ahead and try it out now. So I'm going to refresh the entire thing.
My project is called Untitled Project. I'm going to click Make a Copy. And there we go. Copy of Untitled project. Let's see if it actually works.
So inside of this untitled project. I have absolutely nothing So let's go ahead and try drawing something inside I'm gonna increase something. There we go. This is now saved. I'm gonna go back.
So this is my most recently updated project let me just confirm again great and if I go ahead and click on make a copy now again I have a copy of Untitled Project and there we go they now have the same property inside. Amazing! So our feature for duplicating now works. Great, great job!