How rest API internally store updated employee data into MySQL database?

Update, I am going to update post name from tom to john and last name from Cruz to Cena and also email id from tom gmail.com to cena gmail.com and clear the console and just hit save button and yeah look at here we got updated employee from data here all right we have successfully updated the employee and in next video we make our htp call and we send this updated employee data through the rest API and internally rest API will throw you know put this data into a database.

We have added an update button over here I click on the update button so this makes a rest API call to get an employee object by id and that object will be populated in the form for editing, we will make a rest API call to send the updated employee from data and rest API internally store this updated employee data into MySQL database all right guys let's head over to vs code id and let's write a code to make an HTML call to send the updated employee data to write a rest client code using Axios library open employee service.js file within a js file go to the class and inside a class.

We are going to create a method called update employee and then we are going to pass the parameter called employee comma employer id within update employee method just we are going to return a promise object of auction's put method just type return and then adjust and then call put method so we are going to send an HTTP put request for that we are going to use put method here and then base URL followed by a slash and then concatenation operator and then employee id comma employee object so look at here the order so first, we pass a base URL as a post-argument and the second argument is employed object to the method put all right so this base URL should look like this, for example, localhost 8080 API v1 slash employees slash one.

This is the employee id that we are going to pass all right we have created a rest client using Axios now we are going to use this method in a component let's go back to update the template component and go to the update employee method over here and look at here this is the employee object that we have prepared and this employee object has all the employee updated data employee service and then call update empire method and then pass empire object comma mid.

How we can get the id just type this dot state dot id okay great and ArcGIS returns a promise object so we can use then method here and inside then method we can use we can call a response object and then let arrow syntax once the employee successfully updated then we should navigate to the employee's list page right for that let's write the router here this dot props so from the props we can get history object and then call push method and here just pass the router its path that is slash employees it's pretty simple.

I have already explained to you how the history object associated with the router that you can understand by visiting previous videos all right guys pretty much let's save the files and let's go back to the browser and let's see how it works go to the browser and just refresh and let's go ahead and let's update one of the employees so I'm going to update the employee called Ramesh this one let's change from Ramesh to ram and also the email id from Ramesh to ram at the gmail.com and hit save yeah here we go we have successfully updated RMS employee from rammus to ram and email address also from amateur.gmail.comgmail.com alright guys we have successfully made our HTTP call.

We have sent employee updated data through rest API and we have successfully completed update employee implementation in the next video we will see how to reuse the same component to perform add and edit tempo operations so now in this approach we have created a separate update employee component right and update component has almost same code as we have implemented in creating employee component so it's the common requirement to have us reuse the same component so ideally, we should reuse the existing component right.

I'm going to show you how to reuse the same component to perform both add and edit employee operations alright guys I will see you next video in this video I want to show you how to reuse the existing react component to perform add and update employee operation in the previous video we have created separate update employee component to perform update employee operation right so in this video I want to show you how to reuse an existing that is create employee component to perform add and update employee operation.

This is not a good idea to create a separate component and copy the existing code all right so we have replicated the same code almost same code in update employee component from creating employee component right so now what we can do is we can just perform add and update employee operation in a single component so let me show you how to do it and this is one of the common requirement to you know to implement add and update operation in a single page or in a single component.

Let's see how to do it just follow the steps go to the app.js file and inside a dot app.js file we have configured a routing so in case of update operation the route looks like this we have to pass slash colon id to get the aid of the particular employee so, first of all, let me comment out this line of code because we are not going to use update employee component we are going to use create employee component to perform add and update employee operations here create employee component should need an employee id to perform update tempo operation for that.

Let's copy this code this id here and let's add it so now look at here this is how the path looks like to perform add and update operation now the important thing is we need to have a player to distinguish whether we are performing add operation or update operation so we have to maintain a black let's say we maintain a minus one let's say so whenever we pass -1 here it means that this is the request for add employee operation.

Let's say if we pass any positive number one two three four so on then we can consider it as it the request is for update operation so because employer id is always a positive number if you go to the database a database will automatically generate an id for each employee right in a database table so the id is always gonna positive we can have a minus one as a flag or a value to distinguish between add and update operation otherwise you can also use underscore id so you can use this value to distinguish between add and update employee.

Whatever the flag you can use but make sure that the plan should not be a positive number because employer id is always a positive number and which you use to perform update operation all right so configure route like this so this is the first step and second step is going to the update employee component so this code we have understood in previous videos and to perform update operation we should have an id right so we can get idea from the route so look at here we have added id property to the state object.