Next.js 14 Server Actions: Edit Post (CRUD) | MongoDB | UI Design | React Hook Form

Hello friends get ready for coding Adventure because today we are diving into the dynamic world of Nexus 14 and its revolutionary sub action feature in this video we are not just comparing the classic API Style with the new hotshot on the Block we're taking it a step further remember when I spiled the beans on implementing the basic like Gate Post delete with loader even you remember already have shared the error handling confirmation function before deleting uh and the revalidate features if you're new on this video I recommend you you can watch my previous video you'll find everything over there but now in this video we are diving into the NR I'm breaking it down for you step by step and unveiling the magic behind the post edit and the sear function using Dynamic routes and more few cool features even that's not all I have a bonus for you guess what I will guide you how to move this site shamelessly from local development to the production I'll deploy this side this project on versel so time is taking and we are not here to waste our time so let's dive straight into the coach and uncover the awesomeness of nexus4 server action together don't blink it's going to be wild right this is Shand andash a full web developer signing off until we unreveal the owners of Nexus 14 so dear friends uh let's let first organize our code for example very first I will create a separate route for the users okay and we'll polish I mean Ras on the UI then we'll move it for the first uh step how you can edit a user by Dynamic route so I'll create a folder over there and the folder name call user and inside the user we will copy the layout file sorry paste file now this super easy if you go to the user route you'll find over there there same but not yeah perfect you can delete everything from [Music] there okay so perfect if I go to the user Pace here I can see everything is perfectly working great now let's go our main page layout we will not need everything over there we'll remove everything from homepage because homepage is not for the users we we will show the users in a separate pace and insert the layout here's the main okay okay so if I you can see this content is left side so let me move it to center it's just simple right here the MX Auto so now if you check over there sorry MX Auto okay perfect and I will change 5xl to 3XL and we will apply a padding over [Music] there okay so the this is the user registration and uh this is not a UI design course so I'll not invest a lots of time to design UI just what it's mandatory to be most needed to complete this project this is the things we will apply because uh to design the UI we will discuss about the separate video but not on this [Music] video [Music] [Music] [Music] n [Music] [Music] a [Music] [Music] so I have Pras the layout especially the I've created a simple menu over there to navigate between the home and user so now let's uh move to the user pae right there here you found the user list and we'll apply a padding five b slate 200 okay that should fine looks good okay or we can little lighter and we can move it more left side this looks o now let's go to the single user pacee okay we don't need the Explorer here I can see name email so what I can do uh so now I can change a few thing like we don't need the capitalize here we'll create a few individual deps for name email and the ID because we need the ID in future use but for the production level I don't recommend to use [Music] ID [Music] [Music] if I save it refresh the space you see just look not looks nice I'll make it little lighter so that should be looks more beautiful because on name there especially in this list what is priority for user so from mind I think the name is first priority and this is for purpose of development if developer need this then uh the developer can print and this is for quick action and here over there we'll create a button so we'll use the link for the [Music] button this is must be next link okay and we don't need the button over there perfect link and this St we'll keep it as empty we don't we are not going to change anything and let's move the delete user form or let's go to the action button here is our action button let's use a class name this white full that should looks good okay and the same way for the link we can add a class name over there and busy [Music] [Music] sled okay that's fine so I will change it because this is for three uh yeah so change it to [Music] five change it to three six and here I will apply a gap the Gap should be five for M I think this is good practice Yeah edit and delete okay and let's add a more few classes text Center rounded MD and apply a shadow MD over Shadow LG RXL okay so that's good you see the water Shadow over there that's nice and uh I don't know F text Center is not working right [Music] it's fine also I will use another hover busy SL little [Music] lighter okay that's fine so we can change padding y to padding two I think that should be okay for now [Music] okay perfect so our edit and delete button is looking so [Music] beautiful so you can see the edit and delete button it's really awesome and so let's move to the Explorer here we will create a dynamic route which is called user ID and the dynamic route will from bracket user ID okay yes and insert this Dynamic route we'll create another folder same way p. DSX okay this is the edit [Music] user B now what we will receive over there let me print print something this is uh the edit is a place if it go over there and write something hdf you see this is the edit user base now the question is how we can cast this patterns inside our code okay it's quite simple and especially the Nexus 14 made this very very easy for us so we can write over there PMs and what we receiv receiving we are receiving the params right and we have we are passing the user ID as we write over there the user ID now if I console the params over there I can see the result you see this is the parameter we have found but I want to ensure you this is not a video what is the dynamic route or something else so we will create another video if you want about the dynamic routing but this video for the next server action so this is the simple way we are going to use over there the dynamic routing so that's why we are just talking about this but this is not a tutorial for the dynamic routing of nexus4 so we have received the PMS over there now we will get the ID user ID by the parents so it's quite simple if I use this let me check and again parameter we have found so now our next Target is by using this parameter get the user information from the database of Mong obb so obviously this is not a accurate parameter or this is not a user ID we have to submit the perfect user ID to get the user information right okay so let's uh move over the user Pace if I go over there here is the correct user ID right so to find this let's go again this what the single user P here you remember we just leave the the link empty so we'll put the name over there as you have seen we have write the URL which is called user right user and after that we will print the user ID so we will found the user ID from there okay this is our user ID so we print the user ID here okay now if I move out the edit you can see on the bottom of the space the user ID is appearing if I hit on the edit the ID is appearing over there also in our console log we are getting the parameter now let's move in the pacee again using this ID we will search the database to get our data but before that can you make like this yeah user ID s string because we are receiving this as a string now we are moving over our sub production file so what I do inside our action folder can we rename it user to sub action I think that will be better right no problem just keep it user because already we have named this actions so insert the action this is the user So This Server action file only for maintenance the user create user edit user delete user or get users okay so here first we have to get a single user okay let's um what is the name show all user oh sorry this is the type of mistake maybe my show all users or show users right so I have to change the name where I have added the name show user okay let me check it's not a big deal for us right inside the user list here is the show user show user so you fixed it sorry for the type of mistake my dear friends so go again inside the user yeah so I can copy this nothing issue is the G user this is the gate user that means we will retrive from data only a single user or to make it more beautiful we can write get user by ID because we're sending the ID from our pace and uh we are receiving the user information based on ID so I think this is a good naming for our function get user by ID so we don't need anything over there or we can comment out if in future needed we will execute this okay now it's quite simple just uh insert the response and which user find we'll write just simple find one or we can write find user by ID no problem so we'll write find one and also you receive the string over there string by the ID so here I will write like ID and ID okay and everything is perfect if I console this let me console if I refresh over there it will not work because we have not connected [Music] right this call user information okay get user ID and we have passed the ID by there okay so now you can see that data is appearing over there that is the real magic and game changing it's because of you know in past days I have to write API I have to create a individual API for individual request so but for now if this is small project this is the perfect user use even we can use the perfect time management by This Server action feature okay so that's cool you know so if I console over there save okay user okay fine right we don't need the response there so fine now let me so here what I am [Music] receiving that should be perfect okay fine fine fine okay fine here's the information okay okay response I response fine okay now if I refresh this there [Music] are we're receiving the error why BCE user ID yeah everything is perfect nothing to worry we will fix everything yeah right so what we we mistake uh you see here we are using the sing function right but we have not used the a over there so we have to use the a over there and here we have to call the async so the issue is fixed yeah you see our data is available inside our server side component this is not a client side component right because we have not write over the top of the line use client so that means by inex just 14 feature this is a server site component page so that's fine we received our uh data no issue now we will print it so before print let's write a past title so I think yeah we have the paste title we can copy from the paste from there user registration here we can write user edit that's quite easy right okay so now we will create another component for the editing user because it's a form so we are going to um add a few client side feature so that's why we will use another component which is called editing user form or what you can do as you know we have a form new user form so inside the new user form already we have created the input buttons everything ready so why we are not using this we can just copy this and paste over there and [Music] rename it to update user form right because we are going to update a user information so update user form fine let's close the Explorer yeah this is our update user form right and we will change the name over there name okay fine so now we have to call the update user form inside our base so let's call the up user form so there we'll do some validation like we are not going to print the form until we get the user information like if he does not get the user information then what should be form the print right so to avoid the error we can apply a wall until we get the user information the form will not available so here if I found the user [Music] information sorry for the type of mistake if I found the user information then the update user form will be available ler okay fine now we have to pass the user information what you receive by the gate user ID we have to pass this user information to our child component so here you'll pass over there right user there information so there will be a Twix will face an arrow in this video you will learn once again the how you can handle the errors so go to the user form we're going to call interface interface which is called [Music] iops uh user and should be I user I hope you remember we have created this interface as a global user very fast [Music] so we'll call react. FC I user I props and here I will get the user information now let's check the [Music] magic the error magic so if I conso this very soon we are going to receive an error in our terminal nothing to worry about that you see there is a warning only plain object can be passed to client component as you remember in our first video I have shared to pass the data to child component uh we can convert the data into a string and then we can pass but you know here we have found the ID name email so better we can convert it and pass to our child component okay to avoid this kind of error so once again go to our pace so inside your pace we will create another user and here we are if the user information is found we'll convert it to just just string frame and the data and this data once again we will pass to [Music] Jon so I trashed the error is gone okay see the error is gone okay that was nice there is no error so I've have seen a few of my friends asking me how we can fix it so now you can fix it over there just convert it to parts and string of file so the error is gone this is the magic right so we don't need the new user form up user form that's perfect now our next task we have to print the exist user information on the username and user sorry username and user email field and we have to pass the data uh to the API sorry the server action to update the user information so here we will be update not submit update right so this your name email everything perfect so what I can do this is the client component so inside the client component easily we can write the US [Music] state [Music] and inside the user State as a default value we can pass the name and the [Music] email if name not found then it should be empty in string right and same way we can write over there email okay so now uh we have the current or exist information inside our user state which is name and email so now here is our input field so we have to print there our user information so to print it we can write the value okay and regarding the value we can write name and there will be another conflict how you have to fixed you can see you can write the value email right everything is perfect but this not editable you see we cannot we are not able to edit anything so edit the data we can use the on SS no set [Music] name okay so perfect even we can do same thing over there input value and this should be not name set email yes now if I refresh the pace yes send P do okay perfect so now we have to call the function this is not this is a create user we are not going to use the create user because this is for updating user right let's create a function called update user inside our server action file so this is the create user or is yeah this is the create user so we are going to use the create user I mean not not using we're going to just duplicate this so very first we will apply a condition there just remove everything I don't need this yeah we don't need this function anymore so very first we will apply a condition over there like a additional Val validation uh we'll pass the user ID by using user ID uh before updating a user our function will check if the user exist then it will update otherwise not so let's move to the update user form here we will create another input which is a type hidden hidden and name is like ID okay and value should be user ID now if I move over there update user and we will use this the update user okay we can import this update user right perfect so from the top we don't need the create user function here we can remove it and if the update is done we will write like user update St successfully user updated [Music] successfully now let's move over again the user update user function so here first we'll cast the ID and using the ID uh we'll verify the data exist or not yeah form data G ID if I conso this let me check what we are receiving by ID okay yeah so hit the update we receiving ID okay like you can see this ID and this ID yours match so that means no issue we are receiving the ID first we will try to find if this user is available or not so what we can do we can use this method here's the find one and write is user exist okay now check over there let's go to the update and okay so that means the users exist we are receiving the user [Music] information you see a perfect that means user we have found the user inste of database so if user not found we will share a notification over there if is is not exist then I will return return there is no user font no user exist okay else we move it need the console now we have to cast the name and the email ID so constant name form get name and also email form data email okay so we have received the name and email for sure let's go to the mongus update function so we'll use the constant response here is a response okay F yeah yes no I don't need yeah we we need to this constant response because we have to share a uh response to user the user is updated or not so response we write aage user here we'll use the find by ID and update method of mongod DV find by ID and update so so what is our ID our ID is there and we'll use the set method name and email to make sure this update is really working uh we can write the new true now we can SE the response or or the response we're getting okay so click on update let me check response response okay s do yeah you see so our data is up it perfectly no issue found there even if I go to the user Bas you see even I can edit one more time to more verify edit and let's hello add let's change to Shand and. def [Music] okay refresh this oh I see it's working fine so okay fine you see the update sometimes not affecting instantly so to do to fix this error as we can do like as before we have done the revalidate path we can use the revalidate path so here I can write the revalidate path revalidate path user is it working or not I'm not sure okay let me check edit and shandas update is it so update is really working or not we can check by using the revalidate path method revalidate path you can write over the user and you have to write it dynamically here's the ID okay so San Dash okay everything was working fine right now we can apply a uh we can apply a validation over there if no response found there should be error return error user not upd okay okay so everything is fine fair and lovely okay so now let's move over the user again and let's create a user brand new user [Music] what is your name you can tell me your name I will put over there or better you do this quotes and Write Your Name by yourself that will be good practice for you okay so sorry man just a fun okay so let's write a name like Sami do this is my cue Little P name I mean my daughter more precious uh child Sami at gmail.com submit it's working wow okay so it's appearing perfect let's edit this Su do okay so we can use his personal website I personal domain sam.com and update okay so if I refresh it I can see everything perfect fair and lovely if I move to the user you can see it changed so for now that's it in this next video we will implement the search feature if you have not subscribed my channel this is my highly request to you please subscribe and don't forget to hit a like that will be a great great pleasure for me to get your like subscribe and your comment you know you can see my other videos I reply every comment as soon as possible so if you have any question any doubt or anything whatever on your mind about this coach you can ask me in comment so please please please don't forget to leave your comment at least just leave a hi or leave a thank you that will be a great pleasure great pleasure from me and you know uh your like comment and share even every Tas or every like or every uh subscribe that is really encourage me to create and more and more video for you guys so thank you guys thank you so much have a great day love you bye-bye take care

Channel: Sandipan Das

Views: 360

Keywords:

Id: AzBhHi0Kadc

Length: 43min 47sec (2627 seconds)

Published: Tue Jan 09 2024