ReactJS CRUD Full Stack Application Using Asp.Net Core Web API + Entity Framework + SQL Server

[Music] hi everyone welcome welcome to open education channel in this video tutorial we are going to create a crude application and in this application we will use esp.net Core 5 web API as backend and react as a front end framework let me quickly show you the demo of the application which we are going to build I have named this web application Movie World here we are showing the list of movies and actors this is the landing page of the application which shows all the movies in the application at the bottom here is the page nation and Page sizes configurable currently it's two items per page just for the demo purpose so in this list in each list item there are different buttons through which we can see the detail of the movie so if I click on this C details we can see the detail of this movie like what is the name of the movie some small description of the movie The Language the release date and the cost of this movie similarly here we have edit button so that we can edit the movie record so from here like we can select any other poster for our movie and we can change all the fields of a movie record from here like movie title movie description release date and here the actors list and in this we are using multi select control to add or remove different actors so if I so if I just write Tom Cruz so you as can see we can add or remove any actor from here and we can also set the language of this movie and hit that update button and same way we have this delete button to delete this particular movie record and from here we can add a new movie record so you can see this uh UI for adding a new movie is totally similar to our edit movie record screen so actually internally we are using the same component to edit or create a movie record so here actually we are using component reusability so this was the movie screen which is the landing page of the application and similarly we have this actors screen and on this page we are listing all the actors with the same page nation and if we click on any actor it will show us the actor details like actor's name date of birth and in what movies that actor has appeared similarly we can edit the actor record delete the actor record or just add a new actor so this is our crude application which we are going to create in this video tutorial so before starting if you have not subscribed to this channel subscribe it and hit that like button if you like this video also put your questions suggestions or feedback in the comment section so let's quickly see what we will cover in this video we will cover as.net Core 5 web API development also we will use get put post and delete HTTP verbs because we are going to use these verbs to create our webp also I will be using Entity framework core for the database access and I will also show you how you can use Auto mapper which is a very nice library in your web API project I will use only very little bit of Auto mapper just uh for the overview purpose only not in very depth also we will cover exception handling and sending a very consistent response also we will see how we can upload image using react and esp.net core web API from the front end side of course we are using reactjs so we will see how we can create application reactjs also we will cover the react routing and also we I will show you how you can create pagination and also different pages like create page edit page using reactjs so what tools we will be using for this tutorial so I will be using visual studio because it's the very best IDE for creating sb.net based application also for the database we will be using SQL Server actually I will use local DB which comes preinstalled with Visual Studio but if you have SQL Server installed on your system I will also use Visual Studio code for reactjs development and for testing our web API in points we can optionally use Postman although in our sb.net core web API we will be using swagger so actually it gives you a very nice interface to test your apis right from the browser but in case you don't like it you can use postmen so let's get started so first I will create a new project in Visual Studio 2019 so I will go to file new project and here in this new project window I will select sp. net core web application click on next next and let's give it some meaningful name so I will give it name movie API demo and the location will be the same in my source Repose folder and the solution name will be the same and I will click on Create and here I will select this sb.net core web API this is the project type I will select we are not going to use authentication in this video so I will leave it as it is and click on create so this is the project created by visual studio and here's the controllers where we they have provided this weather forecast controller uh with uh some uh sample data in this so we will not use this thing actually we will create a separate API controller for our movies and the actors so before creating the controllers what I will do that I will set up our database and actually we are going to use code first approach so first we will go ahead and create our entities okay so for that what I will do is that I will right click on this project name and create a new folder so I will put all my entities in a folder and I will name this folder entities okay so let me save all this and close this thing so inside this uh entities folder the first entity which we will add is movies so I will right click again and add a new class and let's name it movie hit enter and here we will first add some properties so first will be public int ID so ID of the movie then next will be our string title so the title of the movie then again we will have some small description so public string description and and then actually we need a list of actors so let me I will add that list of actors once I create the entity for actors so here I will just put a comment list of actors okay and uh the language of the movie so one property for that so public string language then we need need the release date of the movie so one public date time and release date then we will also need a small poster of the movie so I will add a new property for cover image so that will be also type of a string because we will save the path of the image in this column and uh then we will have some uh non UI Fields like created dat and modified dat it's not required but I will add it just for showing you that how you can hide this non UI columns using view models okay so let's add it so property public date time created date okay and by default this created date time will be the time when you will create that movie record in your database so I will give it a default value which is datetime do now okay and then we will have another property related to the modified date and that will be nullable okay okay so I will give it name modified date okay so this is our movie class entity so similarly let's add an entity for our actor class okay and actually an actor is just a person so I will give this entity name class person okay so just add a new class just name it person and here in this person uh class let's add some properties also here so property int ID which is the ID of this record then we will also need uh the name of that person so public string name you can add like first name last name you know middle name but I will just go ahead and name it it just name okay just for a very basic tutorial and then also let's add date of birth okay so again date time and that will be date of birth and uh then uh we will have a navigation property for our movies okay so in what movies this person has appeared actually we need many to many relationship between a person and a movie class okay it's a person table and a movie table because an actor can appear in many movies and similarly one movie can have many actors so in this case you will need many to many relationship so for that here we are going to add a navigational property so here I will add a new property so prop double tab public I collection and that collection will be type of movie okay and the property name will be movies okay and similarly here also we will have these two uh fields which are created dat and modified it so let me put it here like this similarly save it so here we have our personal class which has ID name date of birth then navigational property for the movies in which that person has appeared and then created it and modified it and just to create many to many relationship like here we have added list of movies we also need list of actor in this uh movie class so here where I have commented like list of actors I will add a new property which will be I collection then the type will be person and this property name will be actors okay so here we have our movie class which has ID title description and the list of actors language release date cover image and created it and modified it all these things so let's save it and uh our entities declaration part is done now let's add our DB context class so for that I will again create a new folder because I will put my DB context and all the migration in a separate folder that will be called Data so right click on this project project name add a new folder and just name it data okay and let's close this file and inside this data folder I will add a new class and we will name it movie DB context okay so movie DB context hit enter and this is our movie DB context class now to create a DV context in your wepi project we will need Entity framework okay and right now we don't have any uh other packages installed on our in our project so we need to install Entity framework core in this project so for that I will go to this solution or s project right click on it and click on manage new package packages and here I will go to the browse section and here we will uh install this Microsoft Entity framework core okay this package so let's uh click on this install button and it will just show you the preview changes select okay and just select I accept so this is installed and we will also install some more packages related to The Entity framework so first one is Entity framework code. tools which should be here okay it's not here so I will go ahead and uh search it Entity framework core and uh we need two packages uh first one is this Entity framework code. tools and actually we need it for our migration purpose so that we can generate migration using visual studio so click on install click on Okay I accept it's installed and we will also install this Entity framework code. SQL Server because we are going to use SQL server in this project okay so here I will click on install to install this package too done so back to our movie DB context class let's first inherit it from DB context so I will write DB context and uh let's import its name space so control Dot and it will show us microsoft. Entity framework core just select this and uh then we need to First create its Constructor so I will write CTO R double tab and in this Constructor actually we need to pass DB context option so here I will write DB context options and actually it requires a type and that type will be your DB context Class Type okay so here our DB context Class Type is the class itself which we are creating which is movie DB which is movie DB context so movie DV context let's name it options okay and let's pass this options to our Base Class also so base and here we have this options so this is our Constructor it's done and uh now let's add our entities in our movie ding on context class so I will just write me I will add some properties so public now DB set and the first one is our type of movie m o IE and not mov DB context so here we need to import its name space so I will just hit control dot using movie apid demo. entities like this and the name will be movie okay and same way we will have another property which will be DB set of type person and in the database actually we will name this table as person there also okay so just name it person it's done and U let's add our on model creating so override on model creating this thing and let's see if in this tutorial we need to set up many to menu relationship explicitly so we can use this on model creating method but I don't think so that we will need to use but let's see so let's save this and uh this DB context options parameter actually it pass our database uh connection info into our DB context class so we need to add our database connection info in our project okay and that option we can pass through the app setting. Json file to our startup.cs file because we need to add this um movie DB context as our service in our startup class so I will go to the startup.cs class here and here I will add Services dot add DB context and that DB context type will be the same our movie DB context class let's add that name space again it's not DB it's DB okay so let's control dot import that name space and here we will write options as the parameter name and here we can write options dot use SQL Server okay and uh again again this will also need to import the name space so control dot using microsoft. entry framework core hit enter and this option actually requires to pass the connection string so if you see in the override here you can see that it's asking for string connection string and that connection string we need to pass from our app do setting dojason file because we will put our connection string in app setting. Json file and uh to pass it into our startup. CS file we will use this configuration okay so here we can write like configuration dot get connection string okay and here you can see that it's saying that string name and it's a shorthand for get Section connection string name so it means in your app do in your app settings. Json file you need a connection strings so it says that in your app settings. J file there should be a key value pair name connection strings and from the value of the connection strings key value pairer you will fetch your connection string data so what I will do that I will G give it name default okay so let's name it default and let's add this semicolon here I guess one is missing so let's add this something like that save it and if I go to this app setting. Json file so here is our app setting. Json file we can add that uh connection strings key value PA right here but actually what I will do that I will go inside this as settings. development. JSM file because we are in the development environment we can go ahead and add that connection string directly in this app setting. Jon file there's no issues in that but just for separating because in production you may have you know another connection string so just for that case I will go ahead and add that in our app settings. development. Json file so here at the top what I will do that I will add a new key that is uh connect s strings so be sure you add this s in the last okay and then it will be its value will be type of object and here again we will have another key value pair and the key name of this key value pair will be default and that is the same name which we have given here okay this is the default name and now let's add a connection string here I will name it like this so what we are doing is that server is equal to local DB SL mssql local DB so if you have SQL Server installed on your system so you can use that SQL server name here but if you don't have actually mssql local DB is by default installed with uh visual studio until you have not explicitly unchecked that with the default installation so in that case you don't need to install any other uh database server so I will use this local dbmss local DB then database name will be simple this SP net and you can give it anything you want but I will just go ahead and name it spnet movie API okay let me delete yep move API and then here we have this trusted connection true so that it will not ask any credential and this multiple active result sets equal to true so this is our uh connection string here let's add a comma in the last and let's save this so our database connection string part is done now we need to run migration for our project so that it can generate database for our project before running that migration let me show you what database I have in my system so I will go to the view and here I will select SQL Server object Explorer here it is so if I expand this and I have this local DB mssql local DB this thing okay if I expand it more here we have all the databases in my system okay so these are all other database we don't have any database which name is sp- movie API okay this one is the the test database which I was creating earlier so let's run our migration and after running migration and applying that migration we should have a database here okay so for that I will go to this tools and open Package manager console so this is our package manager console and here we will first add our first uh migration so I will write add Dash migration so this part is not case sensitive so you can also write in in small add D migration and then I will give it a name so I will just name it initial and I will name it I will name it with capital I because uh this thing will turn into a class okay so it's good to have the class name starting with capital letters and then I can go and run this but what it will do that it will just create a migration folder in this movie API demo but actually I want that migration folder inside my data folder so for that what I will do is that I will specify it a path so I will just write Dash o mean the output and then I will write data SL migrations so this uh is needed for the only the first time when you will run your migration so say after running this if I in the future if I want to run another migration because say I have added some Properties or some new uh classes or tables in that case I will just run add migration and say some other name we don't need to specify this this part because uh Visual Studio will remember it our project setting will remember that what's the path of the migration because it will you know search for class name which is your DB context name snap Das snapshot so in our case it will be like movie DB context snapshot. CCS file and it will find it inside this data/ migration so in know in the subsequent request we don't need to specify this thing this is for the only the first time you will do the migration and only when you need to put your migration in any specific folder otherwise it's not needed so I will go ahead and hit enter so here you can see that it has added a new migrations folder inside our data folder and here we have this movie DV context model snapshot sorry last time I said only snapshots so from the next time it will just search for this movie DB context model snapshots. CS file and uh wherever it will find it it will just add you know further migration in the same folder so from the next time we don't need to specify this uh data migrations uh flag now uh our migration uh file is generated like here okay now let's uh we can go ahead and uh update this update Das database and hit enter and uh it's done so let's see in our SQL Server object Explorer and let's refresh this and here you can see that you have as n- mov API and if you will expand it okay you see the tables you can see that here it has mean we have added only movie and person these two entities these two entities only in our project but it has created this movie person so actually it figured out okay there is a many to many relationship because of our Eye collection property in both of the classes and it has created a new many to many mapping table for us okay now as I was saying to you that uh you don't need to specify this uh flag you know in the sub sequent uh migration in your project so let me just show you a demo of that say for person class if I go here uh we are not actually you know right now implementing any data type or data length kind of thing in our project we are just saying okay inty framework use whatever you find it good for that but uh in ideal projects you will not do that okay so I will just go ahead and just show you how you can add something like that so say for the person class say for example name is a required field okay so I will just go ahead and add required like this just uh hit control Dot and we will use using system. component model. annotations and uh then also we are going to say okay the name would be at the max no 50 characters okay so the max length will be 50 characters okay the same way you can Implement you know the data type length or you know validation if it's a required field or not in other other properties also but I will not go ahead and add that you can if you want you can add it and now again let's run our migrations so this time I will name it you know added max length and let's hit enter so you see it has you know automatically added it inside this migrations uh folder and then again I will go ahead and update the database and it's done so our database part is done now we need to create our our API endpoints so let me close first this uh these files and uh let me go to our controllers folder and let's add a new controller for our movies in the point so I will go ahead and right click add controller and here I will just go ahead and select MVC controller inut click on ADD and uh actually this is API so I will go ahead and select this API controller Das imput and let's name it movie okay hit enter and this has created a movie controller for us so first we will create our get all movies in the point and actually we are going to fetch data from the database and then use it in our endpoints so first I will go ahead and add our movie DB context class here so I will just write private readon movie DB context okay just uh hit control dot to import that name space so that is using movie API or data and then let's name it name underscore context okay now we need to inject that service because we have a registered this service in our startup. CS CLA right here so for that actually we need to inject that service using our Constructor so I will just write C double tab and it will create a parameterless Constructor and here we will pass this movie de context let's move this rename this variable name and here I I will write this context equal to this incoming parameter context so this part is done and now here let's add our first uh API endpoint which is to get all the movies in the system so I will just write public I action result and write C and actually we are going to support paging in our web API so I will use two parameters here one for the page index and another for the page size so I will write int page index and the default value will be zero so if user does not pass any value so we'll use zero and another is our page size so page size and here the default value will be 10 and uh inside this we what we are going to do is that that we will get all the movie records and send it back in our response so this get method is our by default uh HTTP get verb so we can leave it blank because that's one is the by default attribute if we don't use any attribute so that will be by default verb but I do like to mention it every time so I will write HTTP get and here inside uh uh first we will get all the movies count because how paging will work is that from here we will send okay here are say for example user uses page size like 10 which is our default page size so in order to support the paging the end user must know that how many records are there in your system okay so that they can show the links on the UI based on that so for that I will use web movie count and uh that will be our context movies do count so this will give all the movies count in our system and then another one is our movie list okay so where mov list isal to underscore context. movie do SK and uh that will be page index okay here is some typo so this will be page index so page index into page size and so we will skip these records and then take the number of record as our page size so this will be the page size Dot to list okay so here what we are doing that say whatever page number it is so say if it's a zero page index means the first time user goes so it will SK skip only Zero Records because zero into page size so it will skip zero record take 10 records and say for the next page index like page index one it will you know Skip 10 records because page number two where page index will be one it will skip 10 records and take another 10 records and send it back in the response okay and uh in the movies list uh as I showed you in the demo we are also showing that uh What actors are in the are in this movie so we need to include the actors records also in this so for that actually we can use include this is the uh extension method provided by Entity framework code and uh here let's uh import the name so control dot using microsoft. Entity framework core and here we can just ify okay use x do actors also so it will use that and let me just uh resize this so that we can have some space so here we have this movie count and movie list and all we need to do is to send back our response so actually we will use a consistent response from our web API okay so for that what I will do that I will create a new view model which is be used as a blueprint for our responses okay so here in this movie API demo I will just go ahead right click add new folder again and here I will name it models okay close this and inside this models what I will do that I will add a new class that class name will be base response model hit enter and here we will have uh some properties so first property will be uh Boolean and it will say our status so I do like to send like a status if uh that operation was successful or not so true or false for the status and the message say if it's true then okay everything went fine so successful if there is a if it's false then we will put why it's false in the another property name message and if we have any data to send back to the user so I put it in the data field so the same way I will go ahead and add those properties so first one is the public bull status another one is our message so that will be simple string so message and the third one will be our data now actually this data will change okay say in your movie API in the point you have list of movies but when you will go and use get specific one movie you will have only one movie type so that will be not a list it will be only one object and same way if you'll go to the person in the point you have you know different structure of the person data so that data structure will change and we are going to use this base response model in every response from our web API okay so for that what I will do is that I will give this type of object so I will just write object and give it name data okay so I will just show you shortly how this will work so just let's save it come back to our movie controller and here at the top let's create an instance of Base response model so base response model and let's import name space okay and let's name is response to new base response model okay and let's uh wrap these two lines in a try catch block so I will just hit control KS and then write try and hit enter so you can see that it has put these two fields in Tri block and we have this catch exception let's name it exception variable name ex and uh we are not going to throw it because it's our outermost logic and from here we will send it back to our UI okay so once say this movie count and movie list is successful then we need to send back our response so I will first set the fields value of that response or response dot status that will be true and then response do message that will be your success and then you have response. data okay and that will be a new Anonymous type of object and here we will have say movies is equal to movie list and another one is your count and that will be movies count so this way because this is the type of object we can you know assign it any object so once it's successful we will send back this response. data and here in the last we will write return and this is is okay method okay and we'll write response and if there is any error you know when we are getting the data from the database so that will go in the catch block and here we will write just response dot status false and then we can have response Dot message and the message I will suggest to use any generic message so here like I will go ahead and name it like something went wrong this is why because to the end user we don't want to show them much more details what's going on our server side we only want to know the stuff related to the data not related to our server okay so sending back this uh exception message from here it's not a very uh good thing but yeah it's a good thing if you keep it logged on your server so in case your user comes and says hey I I am getting something went wrong every time I'm trying to access this uh Endo what's going on you will just ask him that okay what was the time you know some other details when you are getting and you can go ahead and see on your server that okay in the logs it says okay this is the exception so you know it will be like to I'm not going to implement this but uh just just for mentioning here do logging exceptions so this is our uh uh get method and it says not all code path Returns value return okay yeah here we are not sending any response so here I will just write return and actually this is uh you know the error state so I will just write bad request okay and uh then we will write response something like that and so so it's done so this is our get request and similarly we will add another endpoint where we will get a specific movie so get movie by ID because here in this get method we are getting a list of movies okay so what I will do that to save my time I will just go ahead copy all this thing okay let me just clean this and here add one more method and and I will just rename it get movie by ID okay and here we don't need all this uh page index because it will just send only one movie record so I will name it ID and uh we can use something like this to pass our ID I will just go ahead and write ID here so it will get the ID from our route so again we'll send as base response model but here uh we are not going to send movie count we are going to change this logic here okay so like movie list instead of movie list first of all I will just rename it and just call it movie and from the movie we want to fetch that specific movie which match this ID okay so context. mov and then include we will again send the actor details related to this movie record and then instead of skip and take what we will we are going to do is uh actually I will delete all after that do where okay so where condition and then X such that X such that x dot ID isal toal to ID which is our parameter and then then first or default okay now after accessing this movie it could be possible say you have only five movies and IND user sends ID number six which is not in your database so again you need to check if that movie if there is any movie record related to that ID or not so here I will write if movie is equal to null okay so say there was not any record related to this ID in our system so again we will send back send back bad request so response dot status is equal to false and uh here we will write response Dot message and that's that message will be record not exist you know you can even give it some better message however you want but here I am going to use this message that record not exist and then we will return it back from here so bad request and then response okay so this is the case when that ID is not valid but if it's valid then again we are going to send status as true message as success and then data will be our same this movie record so we don't need this okay this part and then movie and uh in this catch exception field it will be seem like that so hit save so now these two request which is get and get mov by ID actually it gets the data from our system so this is the read operation from your crude but uh we have not yet written the logic for creating the movie record okay so I will go ahead and add a new action method to create a movie record so I will just first add first of all I will add the attribute so HTTP post okay and here I will write public I action result post and uh here inside this parameter actually we need to pass the data related to the movie so that we can get the data from the user from the UI and we can create a movie record based on that data so what we can do that we can go ahead and use use this uh movie entity model directly we can use it but actually we don't want users to send this uh created date and modified date you know so in that case although we can handle it okay we will not update uh this created date and modified date in the logic but it's not a a good practice to use your entities directly in your UI side logic like here okay so for this particular example in the movies we have you know very few Fields but in many real life projects you have lots of columns and front- end user they don't have all say frontend developers they don't have to know all these uh Fields okay so for that we will use view models okay so the first view model which I am going to create is a create movie view model and that we will be using in our models folder so here I will add a new class and let's name it create movie view model hit enter and here I will go in this uh movies uh class I will copy all these properties come back to our create movie model PR it here and remove the one which we don't need so modify date created date we don't need this okay we will need the cover image what is the uh poster image we are going to use then the release date they will send us language they will send us okay uh description they will send us title and uh ID is the part which they will not send to us but why I have added this ID is that in our put request I will use this same view model if you are planning to you know keep separate the put and uh post request view model in that case you need to remove this okay and uh create a separate like put movie model okay you can create some view model like that and there you can use this ID because when you will do the put request you have to know what's the id of the movie which are which you are going to update okay but in the create mode we don't need this ID okay but because I am going to use use it in our put request that's why I have this ID in this view model okay and then we have this uh uh list of actors and uh when we are creating that movie what we are going to do is that we will pass only the IDS of the actors from the front end okay so we so we don't need this uh person type collection here okay so instead of because we only need the ideas of those actors which are the part of that movie we will replace it with the list of integer okay something like this so uh in our incoming request we will have only the IDS of the actors so this is our create movie view model back to our movie controller let me use that so create movie view model here and let's name it model and here first of all I will go ahead and copy this basis small model because I'm lazy don't want to write every time and then we'll have this try catch method okay and inside this try what we are going to is first of all I will select if model state is valid okay so if it's valid then only uh we will be creating that record and what it does that model state is valid is that in your create view create movie view model if there is any uh data annotations you have applied me data validations you have applied then it will check if those things are there or not so for example like here on this title we want users to send us title as a required field okay so I will just write it required okay just hit control dot data annotations and if they are not sending us that uh field so what we can do is that we can specify an error message like name of the movie is required okay something like that the same way with the description but we want that description to be like uh not required uh people can create the movie without any actor at the first time so it's also not required but if you need okay you can put data ntion like this on your view model okay so for example let me copy this and uh here I can write like language of the movie is required and uh release date and cover image I am keeping it optional but you get the idea that you can you know decorate all those fields which are required with this required data type and similarly like here we have this uh you know max length you can apply the same things also here but I'm not going to use that in this uh tutorial uh feel free to experiment with those things and uh here back to our movie.cc control. CS file inside here the first thing is that we need to check if the request has valid actors or not so say in your system there are only two actors with actor ID one and two and uh yeah we are sending the request from the UI but it's API okay anyone can use Postman and send back invalid data okay so what if any user is sending us ID number three and four which are not in our application so you know as soon as we are going to create that record we need to verify if that incoming data is valid or not okay so back in our movie controller. CS file let's first uh get the actors which are supplied from our request so I will write where actors and then underscore context dot person dot where X says that model do actors do contains x. ID okay do two it's not ID dot to list so what it will do that uh from this uh create movie view models list of actors it will check if that user exists in our database or not means uh what it will do that it will get all the actors whose IDs match with the incoming list of actors okay so say you have five actors means five items in your list of integer and it will check okay select all from the person where person ID in all those list of integers say for example it gets only three okay so like uh some users send you a list of integer like 1 2 3 four but you have only one and two there's no three and four okay so after after getting that list of actors we will match if that length of actor is matching with the incoming list of integers or not okay so here I will write if actors do count is not equal to model do actors.com if this is the case then we'll say hey you have send some you know invalid actor data we are not going to send them back what exactly the ID is which they are sending back as wrong you can write that logic if you want but I will just write response response dot status that will be false and then sponse do message and that will be invalid actor assigned okay and then we will return it as bad request and that will be our response and in case all those incoming IDs are valid then we will create a new record so for that first let's create a new uh movie Object so where posted model isal to new movie and we need to import this name space control dot movie API demo. entities and this is currently right now only one layer project because it's just for a very simple tutorial for creating crude application using s.net core API and reactjs but if you are working on a larger project there will be much more layers like uh UI layer business layer you know models layer and layer means actually mostly the class class Library so in that case using this movie here is not a good idea because uh that's the part of your data layer and when you have view models you can use that those view models to pass to your business layer and from ins inside your business layer you can you know convert it back to your entity object okay but here it's just only one layer okay so we are are using it directly here so new movie Let's uh map all those fields so like title equal to model dot title and then you have actors Al to we will just assign this list of person as an actors okay so actors like this okay let me put here semicolon and here I will write context do movie do add posted model and then here we can write underscore context do save changes okay um you can use Save changes sync also so uh it will give us a synchronous functionality in that case you will need to modify this uh method as as Sync here and task I action result and what actually it will do that it will make it little bit you know slower but it will be very good for the scalability of the project so if you have thousands of users for your application it will you know use the async operations to handle much more request in comparison to the save changes which is the synchronous way to do that but I'm not going to use it you can use if you want and after saving the changes what we will do is that we will send this back to the frontend user okay so for that I will write response dot again status so it's true and uh then response Dot message that will be created successfully okay created successfully and then we have our uh response do data and that will be our posted model okay so here this posted model is your movie type okay you can see this movie posted model so here we are sending back that movie record So eventually we will need a view model for sending the movie details back to the UI so I will shortly create that view model and add it in this but before that let me first uh create a put request and show you a quick demo of that so for here this is the uh we are sending back the created movie record back to the our user and uh this uh was inside this model say. valid condition if condition and if it's not valid then we need to send back some response so like response do status actually I will go ahead and copy this whole thing I don't want to write it again and again here also and here also okay and uh the status will be here false and uh respon message will be validation failed okay and the data will be our model State itself okay and in case uh there was some exception okay so we have here this this part so I will copy this thing come back here and paste it here okay so control V yep and again you can this variable is not used you can use it while logging the exceptions in your project so this was our uh post request and uh similarly we will create the put request so put request will be very similar to our post request what it says that not all code PA returns a value let me check we are returning we are not returning here anything so what I will do is that here we will say return not actually here actually um I will come to here and I will just return okay that will be our uh response and in case of validation fail we will again return bad request okay return what is this M request okay so this is uh done so this is our post request and similar way let me just uh copy all this thing copy it come back here and instead of post this will be put and this name will be also put and U here inside this try method we have model that is uh model state is valid and here we will have one more condition because this is the post request sorry put request we have already ID in our database so first we will check if model do ID is less than or equal to to zero because when we were doing post requests the created view models ID field was zero and actually we were not using that ID field but here why I am checking this ID field is not less than or equal to zero is that because here first we will get the movie record from our database based on that ID so that ID must be valid okay so again if it less than or equal to zero then we will send it a response message that in maled movie record okay Mal movie record and we will send them back bad request after that here we have our this uh actors account validation so it's working fine now here what we will do is that we will get the movie details based on that ID so I will write where uh movie detail and then that will be like context movie and um actually yeah I will do include x say that X do actors and then I'll write where condition where X says that x. ID is equal [Music] to model do ID and then we will have our you know again first or default and as I showed you earlier we need to check if that record exists in our database or not because we cannot trust the incoming data okay especially those incoming data based on which we are going to update anything okay or make a relationship between our records so here again I will write if model no sorry movie movie details is null okay soal toal to null again we will send back some bad request response so here invalid movie record also and send back that bad request response and here after all this validation if we come after this it means everything is fine so we need to update the movie details Fields with incoming data okay so I will go ahead and so I will go ahead and update each property of the movie record so movie details dot cover image that will be model do cover image so here we have updated all the fields and now there could be a case like you had three actors in your movie The First Time and when user send the update request means the request what he does that removes one actor and added a new actor okay so first you will need to find which actor was removed so that you can move remove it from the movie details actors list and then you need to find which new actor was added so that you can add it to the movie details record okay so first what I will do is that I will find the removed actors okay so let me me commment like find removed actor let me go down here and then we will write where remove actors okay and I will write movie details dot actors dot where and uh here I will WR I will write X such that model do actors does not contain okay so here I will put not okay so model. actors do does not contain so here it will be like model. actors. contains so it will become model actors does not contains because of this not sign and X do ID okay and here I will write two list so this is the uh list of actors which were removed from this uh movie details as per the incoming request so here we need to remove each of them from our movie details so I will write for each where actor in your collection is remove actors and what I will do this is movie details do actors do remove your actor okay and similarly we need to know the new added actors What actors were added so find added actors and for that we can write something like where added actors and we can do something like this like actors and this actors is the list which we have here based on this model of actors which you have find okay so actors do accept so this is the method provided by linku okay so we will we will use this except all those actors which are already in your movie detail movie details Dot actors and do to list so here what we are doing is that uh we have all the actors and this actors record is based on incoming actor IDs okay so we have list of actors incoming actors and accept those who are already in our database we are finding out which are the new one so this is the the uh Logic for that and then we need to add those added actors in our movie details also okay so I will just copy this thing uh paste it here and instead of remove sorry should be the added added actors so for each we actor in added actors movie details. actors. add okay something like this and after that here we can do like like underscore context do save changes we don't need to add or do update because this movie detail is already uh F via context. movie and it's been tracked by inty framework core okay so in case we have uh any changes like this here uh when we will do save changes it will automatically identify what are the changes and it will commit those changes in our database okay and after that we don't need this part because we are not creating anything we also don't need this part actually we copied all these things there and we will send back this movie details from here we can send it back okay and the same logic as for our post request so this is our post request let me see save this and now there's only one one endpoint left in our movie controller is the delete endpoint if we see the cude application so we are we have written the logic for the create read and update gu part is not yet done but before that let's run it and check if everything is working fine up until now okay so let me run it express and here is our Swagger UI for API project here we have all our endpoints get post put and then get based on get movie by ID there is no delete request so let's uh you know just do a quick testing using the Swagger UI also later I will show you how you can uh use Postman because I know most of the people use Postman but there's an option to use swager also so I will go ahead and uh you can see that it has already uh identified the default value for get uh page index and Page size so if I go ahead and just click on try it out and uh hit on execute you can see it says status through message success but there is no data like movies is array and count is zero so we can go ahead and create a movie okay so here it has given us a example schema okay ID title description then you have actors and you can see that here it mentions only uh zero as actor ID and right now we don't have any actors so what we will do is that we will create movie records without any actors okay and then language release it and cover image things like that so let's go ahead and click on try it out and for the title I will just uh write any movie name like die hard okay and the description will be like action movie and we are not using any actors because there is no actors in our system right now so I will just hit it put it like you know empty array and language will be English okay and release date I will keep like something like this and uh because I don't know when was that release date and the cover image will be nothing because we don't have any because we don't have any uh file upload API in our web API yet which will be creating later in this video so this is our uh request body and let's Let's uh hit execute hope working well and here you can say that it says status true message is created successfully data ID die hard you know action movie all this thing you can see one thing that you know it is sending us back this created date modified date I told you earlier that we don't want users to know irrelevant data which is on our server for that actually I will add some new view models also in this project right after that but here you get the idea that once you will create a new movie record it will send you back the data here it is as it is and the ID is one so if you go ahead and do the get request based on this ID okay let me click on trite out let me put Name ID one click on execute you can see that it is sending us back the same data here with the with those fields so here also will use view model and in the get list of movies which was you know earlier imp if we execute it again you can see that we have this movies array okay and it has one item id one title Die Hard description actors all these things and here we have count that there is only one movie record right now in our system okay so it means our API is working fine but only one thing is that uh it is sending back the response as per our entities and we need some view models for that so I will go ahead and close this stop this uh application a and here let's create some view models so at the top here we have this get request which sends all the movie records in the system so if we talk about the UI listing the data and seeing particular details of one list item is different okay because in list you have only few data but when you want to see the details of that item you have much more data so when we are sending list of movie items we will keep less data in our response okay so first let's create a movie list view model okay so I will go ahead and add a new class here and give it name movie list view model hit enter and here what I will go ahead and I will just uh copy these things okay because they are very similar and here I will we don't need any uh data annotations here because we are not you know accepting any data in the request actually we are sending back so we need ID we need the title of the project in the movie list view model you don't want the description because nobody is going to see the description in the list so I will go ahead remove this actually it all depends on your requirement then list of actors uh on the UI if you will just send back the list of actor idas they have to do you know get requests for each actor with each each ID to get their name so instead of sending back the list of integers means the the list of IDs of the actors we will send back some data of the actors so actually for that we will create another actor view model okay so here I will go ahead and add a new class that will be called actor view model hit enter and in this actor view model we will have only you know few properties so if I come here in this uh in this person class what properties do we have is ID name date of birth only these three things so I will just copy this uh three things because already in this person class we have very few so what I will do is that I will use only this three um properties and actually just like here I am making movie list view model and then again I will go ahead and create movie details view model just because we have more columns in our movies entities as compared to the person entity here in this actor view model I'm not going to create the uh details view model I will go ahead and use this Hector view model because there's only three properties but you get the idea if you have you know lots of column it's best to uh create many view models as per your requirement and use it accordingly so back to our movie list view model here uh we will send back actor view model okay so actor view model like this and then we have this language and then release date and that cover image okay so that's all we need for this uh list view hit save and we also need movie details view model okay so I can go ahead and add a new class here that will be movie details new model and what I can do is that I can go ahead and copy all these uh properties and then add one more property which is uh our this description field which is not in our movie list view okay or we I can go ahead and copy the all all these fields from here sorry and paste it like here and uh that will say list of uh actor view model okay that's fine but you know repeating the same you know Fields again and again is not a good idea so what I will do that I will use inheritance okay so what I'm going to do is that I will make this uh movie list view model as a parent class and movie details view model as a child class so what it will do that it will inherit all these properties from this movie list view model and here we need to only put the description field okay so if I go ahead delete all these uh fields from here okay let me clean it little bit like this and we can inherit it from movie list view model okay so what it will have that it will have all those all these uh properties and additional one this this one property for Movie in movie details view model okay so save it and let's come back to our movie controller and in our get request what we are going to do is that uh when we are getting the list of movie you know where we are doing this take page size. to list we are going to convert it back to movie list M model okay so what I will do is that I will it dot and then I will do select and select X such that new um movie list view model and inside here and inside here I will just uh map all those properties again so ID is equal to X do ID and then title is equal to X do title and then actors goal to X do actors and actually this actors is a list of actor view model and here this actor is a list of person so we need to convert this list of person into act view model just like we are converting this uh movie list into movie list view model okay so here again I will write actors. select okay and this time it's a different uh type so I will write y such that new actor view model actor view model and here we can write like ID is = to y. ID um name to Y do name and then we have date of birth Al to Y do date of birth and that will be to list okay and then then we will add the remaining properties like cover image so cover image equal to X do cover image language equal to X do language and release date is equal to sorry x dot sorry X do release date so that's done okay and uh yep here we are sending it back so here you can see it's Now list of movie list view model so similarly as we you know change this in this get request we can change it in our get request by ID also so what I will do is that I will go ahead and copy this thing all this part come back to our get movie by ID and here where we are doing this where request I will just write Dot and then paste it right here and actually this is you know like getting the details so what we will use that instead of using movie list M model what we will do is that we will use movie details view model okay and you remember that we have one additional property in movie details VI model that is description so what I can do is that I can just write description equal to X do description okay so you see it's very easy and the same way when we have this post request okay we can uh send it back as our movie details view model okay so here um to use that in our post request what we will do is we will create a new variable where um response data SC to and let me just copy this from here okay copy it like from here and paste it right here okay so response will be uh where response sorry it will like where response data is equal to new movie details view model and uh we don't have this x here because we have just copy and pasted it so what we will do is that will'll just use this posted model and uh I will go ahead select all this thing press control h and I will write x dot and instead of x dot what I will do is I will just past posted dot okay and I will just replace all in selection save and replaced okay let me close this and it's done and instead of sending back this posted model I will just go ahead and copy this and paste it here okay so now it will just send back this response data let me save this and same you can update the same thing in your put request also so I will just go ahead copy this and uh come back to our put method here and right now here I will just paste it and uh actually we need to replace this posted model with model details here so I will just write um um this thing okay yeah poster model with movie details in the selection and I will hit replace all something like that okay and now let's save it so it's done now uh in this movie controller we have only delete endpoint remained but as you remember when we were testing this endpoints we were not using uh actors because there's no actor in our system and the reason for is that we don't have the API end point to create actors or person in our web API project so I will go ahead and create that person controller also so that we can create actor records in our system okay so back to our uh controllers folder I will right click on it and add a new controller and again click on ADD select API controller D empty and give it name Person Okay click on ADD and here again uh we're going to do the same thing okay so I will go ahead at the top here just to save my time copy this thing and P it here and actually it's person controller so I will just name this Con ctor and hit control dot to use the name space hit control s and now we need to create our get method okay so the get method will be the similar to our movie controller so if I come here and uh let me just copy all this thing okay come back to our person controller paste it right here and it says base response model so I hit control Dot and import this name space and instead of movie count we are going to use actor actor count and the same way actor list and it's context Dot person here also we have context do person and we don't need anything because when we will be showing the the list of actors we are not planning to show them what movies they have appeared but when we will show the details we are going to show them in what movies they are appeared so here we don't need any include so I will delete this and then skip I know the number of pages you want to skip and then take the appropriate data and then select actor view model so instead of movie list we will write actor view model and actor view model we have ID then we have name so x. name and uh we don't need all these things and then we have date of birth right so date of birth equal to X do date of birth and then we have this response. status true and uh message success and then we have this uh response data so we will ose person okay and that will be actor list soor list and then count will be your actor count okay so this is our get request for person which will list all the person in our system then we need you know the similar uh get person by ID when we need to see the details of the person so I will go ahead and copy all this thing again from movie controller and put it in our person controller and I will rename this method as get person by ID okay so get person by ID and again uh this [Music] where person is called to context. person we don't need include here so I will remove this and where X is that X do idal to equal to ID and then here we have this select movie details view model but actually uh we need actor details view model and uh as I said that in actors we have only three Fields ID name date of birth so we use actor view model but in case we need to show in what movies that actor has appeared actually that that field is not the part of the entities okay so for that I will go ahead and create another view model which is actor details view model and that will be very similar to our movie details view model okay so I will come to our models folder and add a class and that class will be actor details view model it enter and that should inherit from actor view model and here we need a property to list all the movies that person has appeared okay so I will just add a new property and this time this will be array of string okay and I will just give it name movies okay something like that so back to our person controller we will make some changes here like we are not going to use uh this thing okay so I will just go ahead and delete it home and here I'm going to first check if movie is not equal toal to null okay so I will just uh sorry person is not equal to null so record does not exist and here what I am going to do is that I'm going to create a new object for where person person data okay so person data is equal to new actor details view model and here we can have like ID is goal to um person. ID then date of birth is equal to person dot date of birth and then name is equal to person. name and then you have movies okay it's called to you need context do movie where X says that X do act oh so that x dot actors dot contains what person okay and person means this person record so person then you will do that okay okay select um x s that X do title because we will display all the uh name of names of the movies because we will display the movie name list okay so select xess that x. title dot to list okay or you can say you know to array because we have array semicolon here put a semicolon here okay and here we can just send it back person data okay why is it like this okay it's not required yeah so this is person data yep so this is our your uh person controller so this is our get person by ID method so this get person by ID method is done now we need to create our post request for this uh person controller so for that I will just close this thing thing I will go to this movie controller just copy all these things again here's a copy paste going on okay and uh here I have this post request then again I checking model state is valid or not and here we don't need all this logic because we are not going to if actor is valid or not these these things were the logic for the movie post API okay so I will just go ahead and delete all the things and posted model is our new person okay and I will hit control Dot and also this thing will be not create movie view model it will be actor view model okay so I will use actor view model and that will be our person so uh that person will have only the name okay so model do name and there's only one more is date of birth it's called to model date of birth okay let me remove all this things done and context dot person do head posted model context. save changes and again after creating this uh posted model we can uh you know send it back this actor view model and for this actor view model actually you know we need to uh we don't need to go ahead and create a new instance of that what we can do is that we can go ahead and do something like that model do ID equal to person. ID sorry posted model. ID okay so posted model do ID so what we are doing that after save changes this ID field will be populated in this uh posted model and we are just assigning it back because we need to send back the data with the newly created ID okay and I will just go ahead and send it back this model class sorry model variable and the same thing here so now let's quickly again uh test this thing so I will go ahead and run it again and here if I go to this get request the try out on execute you can see that this time it has not know send us back that created de and modified de properties in our get all movies request so so that's working fine and uhu in the person we have this get post and get person by ID these three uh API end points so if I go ahead and just try to out it will send us blank record because there is no any person and let's add a new person okay so just let me try it out so name will be like Tom Cruz okay Tom Tom Cruz and date of birth I will keep it as it is okay now let's do execute it and and here we have this data ID one name Tom Cruz date of births something like that and if we come back here at the top with the API movies where we had this ID isal to one and actors were like no null okay let us uh update this thing okay so I will go ahead and use this put method okay let's try it out and this ID is now one so this time we need to use the ID one and uh title will be again die hard and uh those details like action movie and here in the list of actors we need to pass the ID so this person ID which we have right now created is ID is uh one so I will go ahead and put that as one here languages again English release date is the same cover image we will remove that okay and let's hit execute and it says possible object cycle was detected this can either be to to a cycle object dep is larger than the maximum L depth of 32 consider using reference Handler preserve Jon cizer to support Cycles so let's see why on this uh put request uh it is seeing something like that okay so if I go to our person controller sorry movie controller here is our um put reest okay what we are doing here is that we we are using actors and then the movie details uh remove actors uh actors something like that and then here we are using movie details view model okay so let's debug this application so I will go ahead and put biger here and uh let me again execute this request you see here we are getting this and if I just do F1 so here is now it's going to the uh actor person contains this thing and let's checking if it's more or not then it's uh getting the actors then it's getting getting the movie details all those things okay put request then it finds any actor is removed or not and here we can say Okay none is removed so it will get out of that and it will check if any other actors movie details uh added actors count one and why it's showing uh you know zero because what happens is the last time it actually updated it uh but after updating it's uh it sent us that uh error so okay uh let's check when did it find that issue and that issue is I guess something related to this movie details we are sending back movie details we are not sending back this response data and here movie details actors select actor view model it's coming somewhere right here okay um and then here we are sending back this movie details and let's send it back and here we are getting this okay so let's stop this and uh instead of which we are sending here movie details we will send it response data okay let me change it like this and uh run it again so let's first uh check this and uh here's the ID but here you can see know right right now it has this actors's list ID name date of birth uh language English release date and cover image all this stuff so you can see that uh now it's showing us the actor records uh with the movie list okay now if that issue is fixed or not so I will go ahead and check that so again let's try it out and ID one title is let's say die hard and description is now let's say only action actors I will just put it blank language is English and just remove this execute it hit control let just run it and here you can see that uh it has created successfully and um shouldn't be not like created successfully it should be message should be you know updated successfully you can you know change it because I believe here on that put request also we have the same method created successfully so you can change it and uh let's again run it and give it actor ID one executed and now let me show you that uh if it's detecting if any actor is added or not so there is no remove actor but in this thing we should have an added actor so you can get you can find this new actor added it's called Tom Cruise and just uh continue and here we have okay so that was the issue with this circular reference so this is our um put request for person API similar way we can uh check the know get movie by ID so let me just check the ID one and here you can see here also we are getting the list of actors and in the person list we can just try it out execute um success person ID and the same way if I put any ID here any one execute and true and uh here you can see when we are getting the details of any person okay here it is giving us ID name date of birth and also in which movie that Hector has appeared so this is Die Hard which is the movie name we have just you know added this actor in so it's working fine uh there is only few endpoints left on our API endpoint side is put and delete endpoints for your person and a delete in point for your movie and uploading an image in point for your movies controller okay so let's do that so here uh we can go ahead and add a put request uh similar to our movie controller in our person controller but before that actually I am going to use automapper because here you can see um in all these uh end points we have one thing like when we are mapping our entities to our view models we need to do this mapping every time okay so actually what we are doing that we are typing too much okay and and you can see that it's just id id title title every time we have to map this thing and it is increasing you know the line numbers in our API and that's not really required actually we can use automapper just for the mapping so that you know we can just write one line okay response data you know map uh this movie record with movie details view model and in just one line it will convert it from the movie details view model to your sorry movie model movie interview model to movie details view model okay so for that actually we need to use Auto maper uh it's a net package which we can install in our application okay so for that I will go ahead and right click on our application open manage look at packages here and I will go ahead and write automapper Okay so so we need to install dependency this automapper extension. microsoft. dependency injection and what it will do is that it will install automapper automatically as dependencies of this package okay so I will go ahead and install it yeah select okay and it's install okay so to use automapper actually uh we need to configure profiles so that we can instruct that what entities it has to convert into view models and what view models it has to convert into entities because once you are sending data from your API to front end what you will do that you will convert your entity model into view model and send it back to the user but when you will get the data from the post request you are getting data in your view model and you need to map it in your entity model so that you can sa it in your database okay so for that actually we need profiles so what I will do is that I will go ahead and right click on this movie API demo and add a new class and here I will give it name mapping profiles okay mapping profiles hit enter and first we need to inherit it from the profile type which is provided by automapper so I will just go ahead and write profile okay and hit control Dot and it will detect it's in the automapper just use just select using automapper okay and here we need to create Maps Okay and for that actually we will do it inside the Constructor of this mapping profile so I will just write CTO which is shorthand for creating parameterless Constructors and here we will use create map yes this thing so it requires type and here you can see see that it's saying T Source T destination so means What entity you need to convert into what other type okay so for example we have our movie entity okay and we need to convert it into movie list view model so I can write like movie okay just hit control dot to import that name space and convert it into movie list view model OKAY h control dot again and that's it okay once we do this uh movie into movie list M model we can come back here in our movie controller and inside our get method if we come here this get method where we are writing these number of lines okay what we can do is that we can just write what we can do is that just we can use mapper to map movie type into movie list view model so for that we need to use automapper in this class also and for that thing actually we need to register automapper as a service okay so I will go inside our startup CS class here and here I will add automapper so just below this uh addb context I write services do add automapper and we can you know register it you know on the assembly label so I will just write app domain Dot current domain do get ass simp place okay it's done so we have registered it in our configure Services method and here in our movie controller what I will do is that I will just write private read only imapper and hit control dot to import the name space and then I can just write it like mapper underscore mapper and similarly I will inject this Auto maper in our Constructor so I will just go ahead and write um mapper is equal to mapper okay so we are injecting it here and we are then assigning it to our this private read only field so back here what I can do is that I can write mapper [Music] map and what we are going to do is that we are going to make it list of movie list view model okay and then we have our this context. movie. include method which is our T and in the last what we are doing that we here we are actually converting it and actually we no longer need this so I can just go ahead and remove this okay and uh here it is so what we are doing is that now we are passing the list of movie as a value sorry as a parameter in this map method and we are instructing automapper to to convert it into movie list view model so you can see that how easy it is that uh we don't need to write those mapping manually again and again in each method okay so this is the way you use automapper so I will just go ahead and add some more uh mapping here so like here we have this movie movie list view model similarly we need to convert movie list view model into movie okay so I will go ahead and just copy and paste it in case we need this okay so I will just contr X um I'm not sure that we are going to use it or not and then again let control copy paste and here we have our you know create movie view model we need to convert into to the movie but here's the one thing that in your movie you have actor list okay that's that that's uh list of person but in your create movie view model that actors field is list of integers so when it will try to you know map it it will give us error we know that okay so we can instruct it okay leave that part actually because what we are doing is that uh when we are creating the movie here we are handling that part okay we are assigning this actors manually like this so automapper does not have to do that thing okay so for that we can just write for member you know we can instruct it like this x such that X do actors which is uh in this uh create movie view create movie view model uh we are saying that in the destination you know here it says in the destination please ignore it okay so y do ignore so here we are just instructing it that you don't have to map this actor fields in the movie we are doing it manually okay and uh the same way um we can map movie list uh movie to movie details view model OKAY movie details view model and the same thing applies to our um person class okay so create map person to actor view model actor view model and the same way to actor detail view model okay and then we need to map actor view model to our person and here actually the actor view model and person they both have the same Fields there is no any type mismatch in the fields or properties so we don't need to use for member in this case but you get the idea that if you find such uh scenarios you can use for member there are much more uh there are many more functionalities provided by automapper which we are not using in this tutorial but this is just very you know high level overview of using automapper in your projects okay so let's revisit our endpoints again and just quickly you know use automapper in all of our in points so in our get movie by ID we don't need this thing um so I will go ahead and just uh delete this okay and uh here we can just uh add a new variable like where movie list actually not movie list like movie data and that movie data will be again mapper do map and actually we are converting it to movie details view model okay and the thing which are you know the source which we are converting is movie okay and just keep this movie data as a value to our data field so that one is also done coming back to our post request just here uh instead of this new movie thing what we will do is that we will use again mapper do map and map it to movie type and we need to convert our model here okay map our model here to movie type so this is also done and then when we are sending back the response again you don't need to map it like this way so I will l in write mapper do map and I will write movie list view model details view model to and then posted model so let me revisit again here so here we have uh actors person we are validating if actors are correct or not then we are getting the posted model and actually it's the post request and uh as in our mapping profile we have said that okay when map create view model to movie don't uh handle this actors conversion because it's a type mismatch so we need to uh update here so we can write like posted model dot actors scal to actors okay then we have this save changes and then we have our posted model and we are sending back our response data similarly in our uh person controller I will go ahead here and convert this to also use to use um automapper so here I will [Music] um again uh copy this thing from here actually I will go ahead and copy this whole thing and uh paste it here just copy and and paste it here and put control dot what is this yep save it and here in this uh person list what we will do is that we will say mapper map to a list of actor view model this thing this uh personal list which we are getting right now okay in the end so I have uh added this actor model just here and U um let me change this also yeah make it again okay save it so yes so here I have uh made this change in actor model I will not go ahead and you know uh update uh each endpoint in this person person controller uh you get the idea how you can use the auto mapper so first I will go into the movie controller and update add the missing delete in point okay so here I will come and add a new method that will be public actually before adding that method let me add that verb sttp delete okay and here I will just write public I action result delete not action result delete it's the method name and then int ID okay and uh just inside this body I will again write base response model response called to new base response model and then we will have this try catch method so exception and in the try first we will get the move movie details so right movie so movie is equal toore context. movie dot where not has into the okay context dot movie dot where uh X says that x. ID isal to ID which is our incoming parameter and then I will write first or default okay so first of default and again we have to check if this uh request was valid or not means that ID is a correct ID present in our database or not so if movie is equal to null okay in that case we need to to send back invalid uh movie record something like that here we have already so I will put it like this and then here what we will do that we will do like context. movie. remove because once it's a valid request we need to remove this movie record from our database so remove movie okay and then we need to do do like and then we need to do underscore context dot save changes okay and uh then again response dot status is equal to true and response Dot message is called to deleted success F okay and then we can return okay and it will be like you know 200 response but uh if you want to give uh you know any other status code you can try that some people use to send back different status code in case it's say delete HTTP ver on success so you can use that this there is any exception we can send something like that okay so this is our uh delete inpoint one inpoint which uh we need to implement in this movie controller is our image upload end point okay so for that what I will do is that I will add one more uh method here that will be also HTTP poster type okay and uh we will give it a name because right now we are using by default know name as for HTTP verb so sp. net core will figure out based on this HTTP verb that where it has to go but in this case actually we have already sttp post for creating the movie record and for uploading API we will need to give it a route name so I will just give it name route okay and let's name it upload movie poster okay upload movie poster that's the route say public I action result and let's name it upload movie poster and we will use iform file okay and from here we will guess that uh image say image file okay now the first thing is that uh we will wrap it around try catch method because exception can happen anytime and in this try method first we will get the file name okay where file name is equal to say content disposition error value error value hit control dot so it will be used this name space do pars okay and we will use um image always typo so image file dot content disposition do file name and we can just write trim Start Trim start so you know I will just remove move if there is any sometimes we get uh quotation marks in this Soh something like that okay we will remove any quotation mark here and also if there is uh any know double quotation mark in the end also so we will need to remove that too okay so that's it and then where we need to uh store our images okay so I have my e Drive okay where I will uh store these images so I will write New Path equal to add rate I am storing it in my e Drive so I am just writing this path but you can use any path there so I will just write to delete and here's the thing that you know we can save our uh incoming images directly in our www root folder okay if we use it's not here but in esp.net core you can save uh the static files like images in www root folder but it's not a good practice to store your images inside your application application folder in your www root folder incoming request so for that actually we are using so that so for that actually we are saving it in any other folder other than our uh project folder so that you know this thing could be configurable here I am writing it you know directly here but you can also write it in app setting. Json file and you can just inject Constructor here sorry configuration here and use that uh key value to just uh get the data but here I'm just writing it hardcoded but uh it's the main idea is that we should not save our incoming images or incoming static files in our application projects it's uh not a good practice is also not very good from the security point of view okay so we are saving it in our uh this e uh /2 delete folder and let me just show you that uh folder so here is uh that folder on my system in my er-2 Das delete okay and just because it's uh folder where we are Sav saving when anyone will try to access that file from this folder they will not be able to access it because if it's in a www root folder in s sp. net core they can means uh in our startup.cs file there is a you know setting using use static files okay they can use it using that uh middleware but in case we are uh storing these images in another folder we need to configure that use static files middleware okay so here what I will do that I will just write app dot use static files okay and here we'll write new static file options okay static file options and uh it's just a class so here I will give it some B like file provider and actually this is uh stored on our local hard disk so this is a this is a new physical file provider so new file result not result actually it's a physical file provider so we will use this and hit control dot using Microsoft extension F providers okay and here again we will write that same path so I will go ahead and just copy this thing um come back to our startup.cs class okay and here we will just write the request pathal to because uh that request part path will be say something example.com SL you know say for example if you are making any uh social network site you will need you will want you would want so that people can access their profile images like example.com /user profile set as you know that guid ID or you know file name. jpg something like that so this is the request part so what I will do is that I will just give it name simple very simple static files okay here it is and just let's close this so this is done and back to our movie control class let's move ahead so first uh I will check if this Direct Dory exist or not okay if not directory and we need to import system. iio so directory dot exist and which directory exist it's actually this New Path if it exist okay then no problem but if it does not exist then create that new directory okay so directory dot uh create directory New Path okay now um we need some validation so like what uh extensions are allowed okay because we we cannot you know allow people to use uh to you people to upload uh and MP3 files okay so I will just go ahead and write string array allowed image extensions and that will be new string okay and that will be like jpg okay another form is also JPEG and uh let let add one more like PNG is also only these three we are going to allow only these three and then we are uh saying if not allowed image extension contains okay what path so that path is actually Capital path and path do get extension so here we are going to match the extension of incoming file name so file name so if this file name is not uh from allowed extension we are going to return and we are going to say bad request and uh we can use here also you know like new uh base response model and here we can say like status like fs and message like only dot jpg dot JP EG n do PNG type files are allowed okay that's it and then we can just uh we can create a new file un ID so what we will do that we are not going to save this file as its coming name okay we will give it different name okay so I will just write string new file name and that should be like guid yeah guid dot new go and then I will say Plus path. get extension and your file name so this will be the new file name okay and then we can just give it name like string full file path is equal to path dot combine and then we can see like New Path and I say new file name okay and then we need to write the logic to write this file so I will just write using uh where stream so we will be using file Stream So file stream and uh so the first parameter will be our full file path means where we want to save this full file path and then file mode will be create okay and um here you will write like await image file dot copy to a sync and then stream okay now uh this is we are using await so we need to convert this uh action method into snc so as YNC sync and it should be like using task so just sit control Dot to um s yeah we don't need to import it's already imported so I sync task I action result and here it is and after this uh what we can do is that we can just um return okay and what I will do this I will just you know send it back as you know custom response so I will just write profile profile let's write profile image okay and profile image uh scal to um I will use string interpolation so dollar first of all you know it could be sttp or stps so that's better not to hardcode so sttp uh context okay dot request do scheme and then we have also Double SL SL so we need to get HTTP context do request dot host so it will just give us that website name like U example.com facebook.com something like that and then we need to give it the path so you remember here in our startup CS file we have you know requested give this name request Parts static files okay just copy this and uh come back to here I'll post it like I will paste it like this and then here I will just write new file name okay Let's uh close this so this is our uh response here and if there is any issue so what we will do is that we will just go ahead and uh return something like that and we can save [Music] um eror occurred okay so this is our uh image API image upload API in the point okay so our movie controller endpoint is done now let's go ahead and uh complete our person controller so in person controller we have only three methods which are get get person by ID and post so first of all we will go ahead and add put request here okay I will add a new method here so that will be like HTTP put and I will write uh public I action result uh put and that will be actor view model okay actor view model just name it model and uh again base response model response called to new base response then we have our try catch okay es I only give or even I don't need this thing okay um in inside this uh try method I will just write if um model state is valid then what we will do that where posted model is equal to now we are using automapper so mapper do map and this time I write map it to person so map the incoming model into person and then again we will verify if uh model. ID is you know nonzero or not okay so model. ID is less than or equal to zero then um we will just send that invalid person data do we have anywhere okay let me just copy this thing paste it here and I will say invalid person data invalid person record and we are sending back this response and now um we need to F the person details okay so fair person details isal to underscore context do person dot where and that will be X that X do I uh x. ID is equal to incoming model. ID okay so model do ID and that will be first or default okay and again we need to check if person oh no person details isal to null you know I will again send it back you can can you know make some changes in the messages just to identify uh which thing you know cause that uh response false uh false response but I will use the same here and then I will write underscore context dot person dot update and I will just write you know posted model but here actually this thing will give us uh error because what we are doing is that we are there is you know another person details and when you f the data use using inty framework code by default it tracks it okay and what we are doing that we are updating poster model which is this thing okay this poster model in our context so it will give us here like okay it's a ID conflicting because it's it is already uh tracking an ID and you are doing update that ID via another object not with the same object okay so in that case actually we need to add an extension method which is as no tracking so it is provided by in framework core has no tracking Let's uh import the name space so microsoft. Entity framework core and now it will work fine so after update let's do context dot save changes and again if you need I think you get the idea how we do it in the upload movie poster way so you can use that same thing um uh let me copy this thing and paste it here but this time I will write updated successfully somewhere in our movie controller we had that uh thing where where we said created upd this is in the put request that should be updated successfully okay yeah so here uh it's uh like that updated successfully and uh we need to send back our posted model okay so I will just copy this and uh send back posted model and in case if uh it's not Val so what we are going to do is uh somewhere in this post request we have this thing else else you know validation failed and then in the catch request we have always this thing everywhere it's like Universal so our post request is also sorry put request is also done now uh we need delete request so I will go again in the movie controller just copy paste it again and again and again so I will just copy this thing okay come back to our person controller past it here and this time we will use uh person so that will be person and if you hit control dot actually it gives you option to rename movie to person yeah rename movie to person uh invalid uh person record and it should be not moving it should be person okay here we have this deleted successfully that part is done now one more inp point we need in our person controller is for searching the person so for example say when you're creating a movie record you will have a a search box where you can find an actor because of course you will uh type the name of the actor because on the UI you don't know the ID of the actor okay you only know their name so an IND user will just go ahead and type the name of the actor and it will hit a search person endpoint on our server and if it has some names matching with the you know your user input it will send it back to the user so that they can select okay I want this actor to add in this movie okay so for that what I will do is I will add a new um endpoint here and that will be of type get okay so I will write just HTT HTTP get okay and um it will also be a different route because we are not routing based on the HTTP verb so route and uh the path will be something like say search Okay slash then your search text okay so I will just name give it name search text okay and now let's add that method so that will be public I action result and I will again get give it name get but now this time it's uh string string search text and uh inside this again we will have this base response model response model is equal to new base response model and then we have our usual try catch and in this uh TR catch block what I will do is that I will search for that person so I will write seared person okay seared person is equal to underscore context do person dot where um X say that x. name not not capital x Okay small X I like a small x x dot name dot contains what our search text okay and if it contains what we will do is that we will use select and that will be access that new and we will know create Anon object of that so X do ID and then X do name okay and that why it's uh okay we have missed this Arrow sign so to list okay and uh why we are just uh using X idx name it's just for showing you because uh this uh I am designing it keeping our I am designing it keeping our react uh library in mind that I am going to use select list in react side to list uh all the actors when we are going to create a new movie record using UI so that's why I'm uh using this thing so this is just a way that how you can select the record without using view models so this is just to show how you can select the record and send it back to the UI without using any uh view models but uh it's not any ideal every time just for you know casual one or two in points so after uh This Record uh when we are getting this record what we are going to do is that again we are sending it back to the front end okay so here uh true success and we will say searched person it's not response model I will just name it response and and if there is any exception we will go ahead and use this okay so yep our API part is done let's once again go ahead and test it okay so I will just run it again so here we have our movie API uh get postp put delete get and again the post method and similarly we have person get post put delete get and get method for searching a person so if I go ahead and know uh just write try and execute this here you have we have Tom Cruz so if in the search text part if I just uh go ahead and write like T only okay and hit execute you see we are getting the data ID name Tom Cruz okay so this this is working fine our person uh I record was working already fine so if I just such data based on id1 we have this one and uh with a list of movies also uh put request for a person let's try this okay so uh name is id1 but uh uh that uh person ID one was Tom Cruz but um let's just uh uh name is Tom Cruz 2 okay just for testing it is okay date of birth is this um okay date of birth is say let uh let's name uh change this date of birth also so like 19 what 64 yeah something like that uh execute and it says updated successfully and you can see here that okay it's name uh CL 2 date of birth here you are you know getting the created dat modified dat and movies uh null and the issue here is that in our uh put request we are not uh using uh view model okay so here is our uh put request and here we are sending back our posted model which is just a person okay so that's why it's uh sending back your created date and uh updated R record and uh coming back to our uh API we have uh uh this uh movie API also so like uh Delete and get request so let me [Music] um let me try to add add a new person so if I go to this person record post uh try it out we'll just name is another person okay execute it and uh we have this ID number two and if I go ahead and get all the person apis sorry person records we have this ID one and two and and also you can see the count is two and uh in the delete method if I come ahead and if I go ahead and try it out and write number two hit on execute it says Let It successfully come back to our person list executed again and here you are getting now only one so delete part is also working fine um for your uh uh API part uh we have already uh uh used uh the check the P post and uh get request so but again let's add a new movie okay now this time I'll say another movie and description is no actor is say one and say this time I am sending back two uh which is already deleted okay and language is say uh English and uh cover image there's no cover image and if I hit execute what it says invalid actor assigned okay means this actor is not there so let me delete remove that uh invalid ID hit execute and here you can see that it's created successfully and if I go to our movie try it out again here we should get ID number two here with uh you know updated uh actor name Tom Cruz with 1964 um and in the delete part let's just remove or delete that newly created movie so if I just put it number two it on execute it's deleted successfully and uh let me again check it here we are only we have only one ID and the only one thing which is remaining here is this post method okay so here is our uh uh post meth let me try if if we okay yeah we can we can try it from here so if I just uh choose that file okay let me just show you that uh to delete folder So currently it's uh it's empty okay now let me choose a file so here is some movie records uh let me check select this Batman Begins click on open and uh finger crossed if it works fine or not let me execute this oh wow so it has executed this thing okay and uh if I come here to this delete to delete here you can see this is this image and if I try to access this try it okay let's copy this and put it right here hit enter and here you can see that we can see that at poster so it means this thing is working fine so this was uh so this is so this was our esp.net core web API part and uh in the next part we are going to create UI using reactjs so in this part we will create front end for our project using reactjs so for that I will create reactjs app so let me open command line so here's the command line and I will go to to different uh folder location where I want to create my project so I will go to my e Drive and then I will go inside demo folder and there I will write command to create a react CHS project so I will write npx create react app and I will just name it react crude app so this will be the name of our application react crude app so after that I will hit enter and and it and it will inst start downloading uh the required packages and create a react GSB project for us so this may take some time depends on your internet connection so here you can see that it has uh created a react project for for us so uh we will just follow an instruction it's saying just CD to your new react app so I will just WR CD react crude app and uh here we can go ahead and just write mpm start okay but before uh starting this I will open it in my choice of code editor which is Visual Studio code and I will run it from there using integrated terminal okay so I will just write code space dot so it will open this project in Visual Studio code so here it is and uh let me close this and maximize it so this is our uh this is our project and uh here is uh the default abjs appjs index.js and other files here we have this package.json file and it has already uh installed some of the dependencies which are related to the react and just to run this project actually I can go ahead and open integrated terminal here so I will just press control backtick or till sign and here I can write npm start and it will run our reactjs project so this is our by default uh reactjs app here and if I open our project here is this app.js file which is is having all those UI related things which is currently rendered on our application so I will start with this app.js file and first I will start with installing some npm packages which will be used in our project so the first uh thing which I'm going to install is uh bootstrap so that we can put style in our reactjs front end so what I will do that I will just first stop this okay and I will just install bootstrap so I will just write npm install and the package name is react bootstrap and then boot strap at rate 4.6.0 and actually I found it uh from the reactjs website so if I go here and if I write react boots react boot strap and here is that side and if I open this up in the get started section you will find this here okay so npm install react bootstrap and bootstrap 4.6 let me just copy this thing okay and come back here and because many times there is typo so I will just write this down and hit enter and it will download and install this react bootstrap package for us and after that actually uh what I will do that I was uh previously planning to install the libraries as we will use them but I think uh it's good to install it in the starting of the project so I will just write npm install and I will install react router Dome so that we can handle the page routing in our react GS uh application so I will just write react Dash router Das Dome and then also uh we will will be doing pagination on our UI so for that actually I will use a package name react pagate so react Das paginate and then uh I will also use a package react select just for selecting uh for showing multi- select list in our UI so I will just write react as select and hit enter so yes it has installed all these packages so if I go to package.json file okay here we can see that it has bootstrap react react bootstrap react Dome react Page net react router doome react scripts react select and the web vitals all this package installed in our project so let's start by changing app.js file so in this app.js file what I will do is that I will just delete everything from here and actually before changing this thing let's run our project so npm start let's close this these two earlier Windows because we don't need that and actually I will just go ahead and detach this thing from here because uh this uh window is using asp.net core and as soon as we stop the debugging this window will close and I don't want to close my react GS app so that's why I have to test that so here is our uh react app running in browser and now if I open and our Visual Studio code here uh let's delete this thing okay and we will start with header and content area of our app so let's start from adding a container so container and it says Auto Import from react bootstrap so yeah actually we need need to import it from react wstra because that container is from there so I will hit enter and you can see it has imported it from there and inside this container um actually we will uh put everything in browser router okay so I will just go ahead and write and uh this browser router actually that should come from react router Dome okay so here I will do import browser router from react router Dome here it is okay and let me change it in case it's misspelled so here it is browser router okay and inside this actually I will go ahead and add a nav bar using react bootstrap okay so I will write nav bar hit enter and uh sometime it doesn't takes it so I will have to write here also no many times it gives you suggestion to use Auto Import this thing but sometime it doesn't so kind of inconvenience but yeah okay so PG background will be our dark so dark color and let's put variant is also dark and where do I get this thing is actually from the react strap website okay yeah actually it's seems like very slow and inside this nav bar actually the first thing will be our nav bar brand so I will write nav nav bar dot brand and that will be as link okay so I'll link and here it says Auto Import form react autome that's correct we need to import it from react aome why it doesn't imported okay here it is it say already imported as link link and then to our homepage okay so this slash and let me give this name Movie World okay so the name of uh the page will be movie world and then again we will have some links here so I will write nav yeah to import it also from react bootstrap and the class name class name will be mr- Auto and actually why I am using uh this thing class name Auto is because I have much more experience using uh react Bo stab on normal you know without react GS Library websites means without using react bootstrap package you know using directly bootstrap on normal websites so that's why I use them and this is the way you know here you you need to use class name instead of class when using you know General CSS class from boot strap Library so you can also use it that way so this is one of the example of that and inside this na bar item actually we will have two links uh one link for opening movies page and another link for opening actors page okay so I will just write nav dot link okay and that will be also as link yeah it's Capital link and uh it will be to that will be homepage so our idea is that on the homepage we will list all the movies so that's why uh we have this brand going to the homepage and on the homepage we will just list movies all the movies so I will give this link name movies okay and the same way I will just copy and paste this line we will have another link for actors so I will just name it actors and just display text will be actors so this is our header and in the body part actually we will display different pages and those pages will be handled by routing so our header is stationary on all pages it will be shown but all the other data will be dynamic and will be be based on the route as displayed in the browser address bar okay so here I will use switch so I will write switch yep and that should also say Auto Import for react router Dome yeah so hit enter and here the first thing that we need is the component which we will render for our homepage okay so that should be our landing page so for that actually I will go ahead and write route so we need to import it from react autome yes route and that path name match exactly okay so I will just put this exact and then path is our homepage so slash and then we need to mention the component okay component and that component should be your landing page so one way to write is like this way and then your component but what will be our component that component will be a landing page component okay so let's do some uh you know ation here so the main idea is that I will create two folders one folder will be called Pages another folder will be called components so components actually in react everything is a component okay there is no difference in a page and a component but it's just for organization purpose so that developer can find those codes easily okay so here we have a very small application you know like you know like up to 10 components but say if you are a very bigger projects where you have like 50 60 components there so at that time it's very hard to find where that component is okay so for that uh I will do project structuring here so I will just go ahead and create a new folder so I will hit this icon new folder and I will give it name pages okay and then I will have another uh folder components uh not not here in the SRC uh folder and how can I delete this thing delete yeah it has deleted okay so I will again select this page H app.js file and then hit on new folder and give it name components okay so in this Pages folder I will go ahead and create a new Js file okay and I will give it name landing. JS know you can give it name anything you want but it's just uh my choice of name to use landing. JS okay and I will go ahead and and add a new component named Landing okay so I will just go ahead and write import um react [Music] from react okay and here I will just create a functional component so const landing and it will not require any props because it's the main component root component and uh here I will just uh go ahead and right now just return okay return a simple um text okay and that simple text will be like say div uh hello from landing page okay and here I will say export default Landing okay and back here we need to import this so I will just go ahead and write import Landing from Pages slash Landing okay and I can go ahead and write Landing here something like that and let's close this so this is our first um route and similarly we can have another page for our actors because we have this uh actors link so in this Pages uh folder so in this Pages folder I will go ahead and create a new Js file that will be actors. Js enter and what I will do is that I will just go ahead and copy all this thing paste it here and just name this actors okay and same way here yeah actors let me save this save this also and here as we are getting Landing we will get actors actors and just copy paste this line and exact path slash actors and here uh we can write it like this way also we can write it you know just just write it simply actors like this okay so this is one of the way of writing this route okay so we have only these uh two in uh two routes and they are calling first one is calling the landing page another one is calling the actor's page and let me just change this just to figure it out that yeah it's working fine or not so I will write hello from actors page okay and inside this app folder we have this actors here so let's save all so here we have this save all option I will hit save all and it will again compile everything and again now if I go to app.js file here you can see that we have our movie World movies actors and uh here we cannot see see anything uh but it's changing okay right now right here so why our styling is not working for our styling to work we need to add boot strap in our index.html file okay so like here if I go to our public folder here we have index.html file okay and if I go ahead and uh open react bootstrap again here uh it says um that you need to uh include this uh CSS in your index.html file okay so I will just go ahead copy this thing and I will open our page here and after the title somewhere here okay I will go ahead and paste it okay let me format it like this way let's save this and now if I see our project here you can see here we have this is styling applied but still we cannot see any of our text here okay so let me check if I come to this Landing let me close this thing so here is our app.js file here we have our switch uh switch element and it's calling our landing page and actors page but here the problem is that I have written compo dou nent it doesn't work this way so actually we need to correct it so component it'sit save okay and now if I go here you can see here it says hello from actors page hello from landing page okay so these are our uh actors and landing pages now we will work on listing all the movies in our uh landing page so for that actually I will first uh I will add some rows in our Landing component I will go in landing. JS file and here instead of uh returning help from landing page first I will create this uh fragment and uh inside it I will just add one row and that row is from react bootstrap okay and inside this Row the first will be our column so I will just write call that is also from react bootstrap and for very small screens it will take whole screen like 12 columns and for medium screens it will take like 10 columns and here inside this column I will give it a heading s to movies okay and similarly in another column what what I will do is that I will give it full length or for smaller screen will be 12 sorry 12 and for medium screens it will be like only two and what we are going to put here is a button to create new movie record okay so I'll just give it class class name and that class name will be um align self Center and align self Center is because we need that uh button to be aligned in the middle okay so inside this I will add a button so I will use button and that will also from react boot stra so I will use the second one button and that class name will be float right and on click we will uh handle create movie functionality okay so for now actually what I will do is that for now I will keep it as blank because I will implement this uh functionality later and just give it to give this button a name add new movie add new movie and after that uh here we will have we will actually create a new component to list all the movies and also we will reference another component to create new movie okay so for that I will go ahead in the components uh folder and here I will create another component which will be called movie list.js okay so let's add that component it will called movie Das list.js okay and I just go ahead and copy with this thing paste it here and I will give it name movie list something like that and just P it here also save it and back to our landing. JS file I will import it okay so import [Music] movie list from double Das double dot means in the parent folder components slash movie list okay and uh we will use it right here so that will be like uh movie list something like that and also we will have another uh component that will be create movie model so for that I will add another component create movie model so I will go ahead here and add a new component [Music] create movie model. JS okay hit enter and just like movie list I will create another component and give it name create movie model okay let uh save this also and in this our landing page we just copy and paste it and let me just copy it again and here I will just name it something like this and here I will write create movie model and again here I will write create movie model okay this is our basic landing page let me hit save and let's see what's our changes so here's our changes okay so here it say written this this movie heading and here I we have this uh add movie add new movie button and here we have those two components so back to our code now we will add some logic in our movie list so this movie list will actually fetch our API and get all the movie list from there so actually we will call the get all movies in point from this component so here in movie list first thing that uh we will do is we will use some state to store our uh uh movie items okay so I will write const uh movies and another will be set movies and here I will write use state so it's saying Auto Import from react yes US state and that will be null okay so so once we get the movies list from our API endpoint we will save it here in our movies uh State variable okay and the same thing is uh with the movie count that we will save what's the list count of this movie so that we can you know use it in our pation so I will just go ahead and copy and paste it and I will write movies count and here set movies count and by default its value will be zero okay and similarly we will have another state variable for page that on what page number we are currently okay so page and set page and that will be also by default zero so this is uh the state variable that we need in this and after that we will use use effect so what we will do is that as soon as this component is called it will call our API end point fetch all the movies list data and update it okay so I will write use effect and inside this the first parameter will be your function and actually this function will get all the movies okay so I write get all movies and to get all movies actually we will create another function and uh after this first parameter as a function another parameter is on what variables actually it depends so actually if we put this second parameter as inut array this use effect logic will run only the first time that component will be loaded so once it's loaded it will be there but actually we are going to use pagination okay and when we will change the pages we want that list to be updated okay so what we will do is that we will set it to change when our page number will be changed okay so it will actually track the page variable so I will just write here page and we will use a function get movies to get all our data okay so here I will write const get movies and that will be F function and inside that we will use fetch okay so I will write Fetch and then the UR URL of our backend API okay so we can go ahead and write it here hardcoded but actually say um it's in our development time but say when you are going to the production we will need to go ahead and find that URL and change everywhere that's not a good thing so it's good to use some environment settings or environment related files to manage this information okay okay so for that actually we can use EnV file and create react app has already support for EnV file okay uh so I will go ahead in the root of our project so I will just select package.json file and here I will add a new file EnV okay and inside this EnV I will go ahead and write some key value pairs so first I will just write node path that is m is not required but I will write it anyway SRC and then um I will uh put our API URL okay so in this actually all the environment variable names should start with react app okay so I will just write react underscore app and then our you know enir variable name so I will just write API underscore [Music] URL okay so this is the one thing one environment variable that we need and second thing is that actually for the paging that should be configurable we will add another environment variable here okay so I will write react app API URL but here it will be paging size so paging underscore size okay and for this tutorial actually I will just keep it to because I'm not going to create too much data okay so I have just uh set the paging size to two and for your react app API URL what I will go what I will do is that I will just go to our application here Swagger and I will just copy this thing okay so here you can see that uh this is the uh request URL https Local Host 44302 API movie so actually I will copy this whole thing from this to API and uh because in every route we have this API added okay so I will use it in our project I'll post it right here here it is save it and actually it will require to restart this thing I will just stop it yes and uh then run it again because uh if we change anything here we need to restart it because it's environment variable and this one is Ed at the first time only okay after that I will come back to our movies list here and it has again started here and it is also here already taking so let's reload this okay I will detach it same way and I will will close that earlier one okay so here um in our movies Des list.js file I will use that environment variable okay so I will write here [Music] process. EnV dot then this uh I will use this thing um react app API URL okay and then I will write movie okay and then we have this page size okay so I write page size is equal to because if we go here in this swager you can see here we have our uh get all movie get all movie in point and here we have this page size equal to 10 and actually uh this page index is by default zero so here they have not sent it okay but from our front end we will send them okay so back to here I will use again our environment variable so I will write process do EnV dot react app paging size so this will be react app paging size and then in the last uh we will add page index so I will write and page index and that page index will be sorry I miss this equal to sign will be page which is your this current page number so in case your page number is one you know the first page this value will be zero if you are on the second page that page value will be one okay so after that uh this request if there is any response then we will first convert that response into Json so I WR rest do Json and then what I will do that I will update our state variable movies and movies count according to our response okay so if now here rest. status so remember in our API we have status message all these fields as response coming from our front end okay so if rest. status triple equal to True okay and rest dot data dot count is greater than zero then we will do set movies to rest. dat do movies okay so it will update all the movies here and another thing which we which we will update is movies count okay so I will right set movies count and actually that movies count number is the all the movie records like say there are say if there is uh 100 movie records okay and your paging size is 10 so you need to say show only up to 10 numbers in your paging so that you know a person can go ahead and click on number 10 and it will show the movies from list number ID 91 to 100 okay so you will need to you know calculate that paging number based on the number of movies okay so for that I will write math dot s and here I will write response rest. dat. count and then again we will divide it by this page size okay so I will just copy this paste it here okay and in case um if data. count is zero it means there is no record in our system so we can write rest dot data Dot count if this is zero okay so I will just go ahead and show an alert okay so alert and here I can show there is no movie data in system there is no movie data in system okay and in the last if there is any error okay so that do catch and if there is any error I will just alert hit alert you're getting data so yeah this is how we are right now uh catching an error you can you know handle it as per your requirement you know there are multiple ways to handle it some people show the exact error on the UI some people only show the generic message like here I'm showing only the generic message so it's up to you how we will uh show that and then I will just call this here in our use effect so I will say get movies like this okay so once we get the movies actually we need to show them in our in our UI okay so I will go ahead in [Music] our Return part and here I will just write this thing and it's fragment and here I will first check if movies is not null and it's not inut okay so I will just write if movies and movies is not is equal to empty array in that case let's map it okay so I will let's you know let's render each movie data so I will just write movies dot map and uh inside this I will use m m is that data element and then uh I for the index and here I will render it in a movie list item okay so what I will do is that I will create another component for movie list item mean I can go ahead and you know add it right here but it's just for demonstration purpose that how you can use that okay so here when I have selected this movie list I will add a new uh uh file movie item movie Das item. JS and again here in this movie item JS let me uh copy this thing and in movie list movie item I will first um update its name so movie movie item let's copy this here again and uh actually what we will do is that here we will pass uh the data related to the movies means this m to our movie item so that it can render that data okay so here I will use props okay and uh inside our um return method you know again I will use um this fragment I will use row and row [Music] from react boot strap okay and that row will have some columns so column and that column this will be uh type of item okay and on the small screen its size will be 12 means full and on the medium screen its uh size will be two only and why to because here we will only show the image so I will write image and uh then SRC and here we will write the cover image okay so I will write SRC sorry uh props dot data dot cover image so how I am getting this uh these values is based on this data okay so here you can see you have ID title actors language release date and this cover image okay so I am using this thing so cover image and in case there is no cover image we need some placeholder for our image right so what I will do is that I will uh use an image and paste it in our public folder okay just like here we have this logo uh PNG files we will add one uh placeholder image to show uh okay there is no image something like that so that is one of the way you can use public folder but also you can you know uh put that file in your you know SRC folder also like here you have logo. SVG file right now here right okay so I will go ahead and put it right here so let me um copy that image and if I come here to our SRC folder um come on right click here and reveal in file explorer if I go inside here okay and I can paste it right here so this is uh this no image.png file which I have okay I will just close this and it should be showing here yeah here it is no image and here at the top I can just write import and I will just go give it any name like no image simple it doesn't need to match with that okay no image from dot dot no Dash image so this is your folder okay currently you are going to the parent folder in the SRC directory and you have to get this file okay so I will write no image no image. PNG and in case this cover image part is null it will use this no image file okay and then let's uh put some Style on this so I will right Style Just For You know the width and height of this image so for um width actually I will use 150 pixel and for height again I will use 150 pixel just to show this as you know a square so this is uh our uh First Column let's copy this and paste it here and let's add our second column so that will be using this medium size will be 10 and here the first thing which I will add is a div element and inside this div in bold we will show the title of the movie so I will write props dot data do title okay and uh then there will be another div and that div will actually actually list all the actors in that movie so I will write actors and then I will write props dot data dot actors so if we go here and see this we have this uh actors key in our response so Props do do do actors and then again I will write map and uh in not amp map and here I will fetch only the name of the actor so x. name X do name so this name is this field and uh after that actually uh say there are four or five actors we want to show them in a comma separated way okay so I what I will do is that I will just write dot join and in join I can just specify a uh separator like this and that's it so this is our actors part and then we can have some buttons for showing details or edit that movie record or delete that movie record so for that we will have some buttons okay but I will add it later and then after that actually I will add one more column and that is just for showing a horizontal line HR okay like this so this is our uh movie item here let me save this and uh it's not used in the movie list yet so that's why this application not refreshed so here I will just write import um movie [Music] item from movie item okay and here where we were um mapping all all our data I can go ahead and write this movie item then we can use key because react says if you are looping anything always give it a key so that it can give a key and then our data because in our movie item you know from the props we are checking this data value okay so we need to pass the data here and in the data actually we will send this movie item itself okay so yeah that's it this is [Music] our movie item and if that uh movies list is null or impy so in that case um actually we need to render nothing like this okay so this is our listing of that movie Rec s so let let Let's uh save this and let's check if it's uh still working fine or not so it says use effect is not defined because we need to use use effect from react save it okay now if I come back to our spage here it says use effect is not defined okay and if I hit refresh it says error getting data okay let me open my developer console here let me check uh what's going on okay so I hit refresh it says ER getting data okay I said yeah and here said cuse error okay so what is happening that our application is running on Local Host 3000 okay but our API is running on Local Host 44,000 300 02 okay so it's not allowing it it's saying okay this uh origin is something different from this web API origin and it's not allowed so for that actually we need to set up some course policy in our application Okay so what we need to do is we need to add course policy in our web API okay so let's open our uh web API project here and let's um let's close this okay after closing this if we open our startup.cs file here we need to add a course policy so for that after this rollers okay I will go ahead and add a course service so I will write service Services the dot add course okay and uh here and here I will give it value like options oh no options such that options do add policy okay and I will give this policy a name like allow all and then I will set it up like it will allow any origin okay so P dot allow any origin okay and allow any method so allow any method and allow any header okay so dot allow any header so this is our course policy which we have uh added here and after adding it actually we need to use it in our middleware so here after authorization what I will do is that I will write app do use course and we need to give it that course policy which we have defined in our services so its name was allow all okay so here we have allow all and let's put a semicolon here and save it and then run it again again so here it is and uh let me check again it's working [Music] fine or not yeah it is working fine okay and uh back to our react app project if I just refresh it again here you can see got it okay and here it is uh movies uh and we have currently not set up any image you remember that if if you see this uh preview of this data okay um on this first one this cover image is inut okay that's why it's using this image and it's the name of the movie and it's the actors so if you see here in the actors you have this Tom Crow 2 okay and here it's Shing like actor storm cruise to so our fetch API is working fine okay so now we need pagination and UI for creating a movie record in our front end so for pagination I have actually already installed react Paget library in our project so for that I will go ahead and here add a new div okay and uh let me give this a class name and that class name will be deflex and that will be justify content Center okay so deflex uh justify content Center and inside this actually I will use react page it so I will write react page it so this is the library which I have already installed uh but it's not showing here so no problem um I will go ahead here at the top I will do board react Pate home react pagate here it is okay and uh now uh below here we need to some we need to set some uh Fields so here um I will write previous level so here it is previous level and that previous level will be called only previous and uh for the sorry and for next field will be next level and that will be also call next simple and uh the the break label will be break label will appear when we have you know say 1 to th000 so be so in between we will show dot dot dot like one two three dot dot dot dot 99 100 something like that okay so break label will be triple Dot and then uh break class name page link then page count so page count will be our movie count okay so movie count then margin page displayed will be two page range displayed will be five you can find all these fields and their values on uh react Paget documentation so most of them are uh by default values where which I am using here so on page change here we will actually I will go ahead and create a new uh uh function that will be handle page which I will be creating shortly then container class name so container class name will be page nation and then page class name will be page item as item and these are bootstrap classes and page link class name is just page T link and uh also previous class name will be also page link and next class name also page link and active class name will be active so I have added all these uh Fields here okay now I need to create this uh on page change event handler so I will copy this and on top before this uh return method I will put it here handle page link it will be const handle page click and actually uh that method will pass page index okay so I will write page index and here we can say set page and uh we will say page index Dot selected okay you can console log this uh variable to know what more Fields it has so you can use console.log for that but here I'm just using this number selected to set our page number and once this will be set our page value will get changed and it will again go and press the data based on the page index okay so that's the idea so let's hit contr s to save this and let's see if it has added pagination here here you can see that it has pation right now here so it's working fine and now we have to add create movie UI so for that I will go in our create movie model this component here and in this component first thing is that uh we will use a model popup to show create movie dialogue on our landing page so here what I will do is that I'll just um delete this thing and uh let me remove this also and here um I will go ahead and add model okay and that's this model is actually from react bootstrap so I will use this react bootstrap and it has a property named show means if you want to show the model popup or you want it to hide okay and actually when we will click the button then we will when we will click the button show create new movie then we should then we need to show this model so if I come here if I click on this button then only that model popup should open here and it should give us option to create a new movie okay so back here what we will do is that we will pass that variable value via props in this okay so I will write here props and and in the props we will have a value show okay so I will just write props dot I will show you uh how we are going to handle that thing or yeah just let's uh let me do that okay here so like here we have create movie model which we are actually uh creating here and here what we can do is that here we can write show equal to um let's uh set a variable State variable show okay so for that I will add here a state variable const so and we will say set sorry set show and by default it will be false so use State yeah import it from react and by default it will be false okay and then here we will have some event handler okay so for example here we have this button add new movie and here we have on click nothing okay so on click of this new button we need to open open this mov model dialogue so for that actually we need to set this so method as true right so here what we can do is that here we can use set so to true and that's it so this will set it to true and actually here this is just one liner so you don't need this if there will multiple line then you will need these uh curly Braes but just one line so we don't need that so here we have the set show true and it will just uh set the value of this show State variable here and this is passed uh via this props and uh this key name will be show okay so that's how we are getting this prop show here and uh also we need to handle when we will you know close this uh popup okay so back on our landing page here we can add a method okay handle close so I will just write handle close and actually that will do something like this set show to false okay uh I just forget that fat Arrow function yeah so this handle close field will also be passed via props in our create movie model so I will just copy this and in here uh inside this create movie model or JS I will write onhide I will do props props do handle close and then we have this uh I will add a field backdrop and uh why I am using this back backdrop is because uh I don't want that model to be to be closed when we click outside that model actually I will you know add it later I will not use it right now I will just show you how then I will write centered because I want this in the center of the page okay and uh then we will have model do header and it this will also have a close button okay and it will have model dot title and that will be add new movie then we will have model. body OKAY model do body and here we can have any our body so I will just write this is body okay and then you can also have model. footer but here I'm not going to use footer so if I just know save all of these and let's view our page here and if I click on this add new movie you'll see here add new movie and this is the body and here we will have all that data related to creating movie record sorry and here we will have all Fields related to create movie record but here you can see if I close here if I click here you can see it's closing that's why I was saying to add a backdrop here so I will just write back drop and that should be static and then also we don't want it to close by keyboard so I will write keyboard equal to false okay yeah just save this and back here if I click on this here you can see it's not closing until we click here so that this was our uh model popup and now I will add all our controls here but here I want to use a component which I can use for creating the movie record as well as editing the movie record so that we can reuse this uh component at two different places okay so for that actually I will go ahead and create a new component component as edit movie okay so here I will add a new Js file that will be edit Das movie. JS and in this uh let me again copy this thing uh paste it here and in the edit movie I will first update it name so I just write it edit movie and I will copy this and paste it here also edit movie okay and now as we are going to use it for creating a new movie record as well as also editing a movie record first we will see how we can use this for creating a movie record so in this return method first I will go ahead and remove this thing okay and nope move this thing and here first of all I will use form and that form will be from the react bootstrap so enter form okay the first item will be form group so I write form dot group okay and also we will have a class name because we uh here we will put element for showing the movie poster or uploading a new movie poster okay so class name d flex and then it will have name justify content Center okay and then inside this we will have an image okay so I write image and this image will be from also react bootstrap and its width will be 200 and its height will be also 200 and the SRC will be from our movie Object okay so here I have not uh created any movie Object so first of all I will go ahead here and write const and then write movie and then set movie and we can and say use state that will be null back here in the SRC I will write movie and if movie is not null then I will use movie dot cover image okay otherwise we will use no image and this no image will be the same thing which we are using in our movie list so I will go here um oh sorry it's in movie item okay let's copy this thing come here and paste it here okay so this is uh if there is no cover image we will just use no image and let close this image tag and another part is that mean if there is if this is a create method or in edit method if we want to update that image we will need to upload a new image okay so I will just go ahead and duplicate this and here this time I will use a div inside this div actually I will use input okay input stml tag and this will be type of file okay and on change event actually what we will do that uh we will create a event handler for handle file upload okay handle file up upload okay and let's close this thing so let's you know create this uh event here sorry event handler here so I will just write const uh handle file upload and here you will write event okay and uh then inside the body what we will do is that we we say event do PR default because we don't want uh this to do the natural thing of uh input file event okay so that's why because we are actually handling this thing from reactjs and uh fetch API okay that's why we are using event. prevent default and after that we will get the file so I write F where file is called to event dot Target do files and we will take the first one because we are only uploading only one file at a time okay and then we'll write const and we will create an instance of form data so I will write as new form data okay and and here what I will do is that form dot append and here I will give it name image file okay and that image file you will find here okay if I go to our movie controller [Music] and here you have this image file okay so this is matching with that name and here I will add this file so this is our uh form data instance and after that we will use that fetch API to post this data to our API okay so I will do Fetch and uh here we will write um process. EnV dot let me use this thing process. EnV react app app URL plus movie SL upload actually I will go ahead and uh copy this from here okay so where is it it's here I will just um copy this thing come back here and paste it okay so this is our URL and then we need to put our request parameters okay so here first option is the method so method is type of post okay and then body so body is our form data which we have created here okay so form and then if it's uh successful then we will do convert it into Json format so I will write just rest dot Json okay and again then I will do [Music] rest and I will use where uh actually I will get the current movie State variable and put it in a local variable so just just a random name say Where Da is equal to movie which is our uh State variable and uh what I will do is that I will just update it uh cover image image is equal to rest dot if you remember that it's a value was profile image which I have used in the code so here here this is profile image okay so let me just copy this thing similar yeah that was the same and and after updating this uh I will use this set movie and I will [Music] use uh say old data such that um I will use return and I will just use all data our new data and it's will be triple dot okay so what's going on here is that uh this cover image is not the uh element itself we are updating you know the inner child that's why we need to uh write it in this way so you know when we update this way and this old data is the you know the the earlier value of this movie Object movie State variable object okay and this is the one which we are updating the da so what we are doing that we are updating updating the old object with the new object here so that's it and after that let's do catch to handle if there is any error so I will just write alert and I will just write error in file upload okay let's select everything CR a androl KF to format this thing so that yeah it's looking fine um sometime it's just like this I will just hit control sorry shift Tab and it will come here so this handle file upload part is also done I will add other fields also here so let's uh at this form group here I don't need this uh class name uh but I need control ID okay so I will write control ID and this will be form movie title okay form movie title okay and here we will have a form dot label and label for what movie title okay so movie title and then form control me that input control so form dot control and then name will be title okay value will be if movie is not null then movie do title okay otherwise blank this thing uh also it's uh required fill from our front in and uh also its type is text and also what I will do is I will just write aut to complete off because I don't want it to you know show different suggestions and then we will have placeholder okay and here we can enter movie name okay and the most important thing is on change so on change method we will uh create a new Handler for uh handling field change okay so I will write handle field change and actually we will be using this same Handler for each of the input text type in our form okay so I will just copy this thing and come here uh before this uh return method I will just write const no handle field change and here I will write event and uh again uh we need to update the records inside our movie State variable so what I will do is that I will just go ahead and poopy this thing okay past it here and let me put it like this and here instead of cover image we don't know which field we are updating if it is title field if it's a description if it's a release date or if it's the language of that movie we don't know so we will use the this thing which is event Target name okay so event. target. name and here if you see that we have this name property and this is set as exactly as it will have in this movie State variable okay that should be exactly same so what's what's the variable name that should be exactly the name okay so when it will go here it will just find this uh variable name and it will update its value with this uh uh event value so here uh we don't need this rest. profile image here we will write event dot Target dot value okay so this is it our handle field change event handler is completed and here in our movie title field uh we will add an area so that if there is any validation message related to this form control we can show it here okay so I will go ahead you know um remove this thing and here I will write form dot control dot feedback okay and feedback will be type of invalid okay here I will write please enter movie name okay and for that actually uh we will use a form validation so here I will go ahead and add first of all no validate and uh if that form is validated or not so I will just write validated validated and we need to uh create this uh State variable okay okay so here top I will go ahead and write validated put it right here and set movie Set validated and it's uh value the default value will be false okay so I will say false yeah um and here I will also use form on submit but I will use later okay so this is uh form label form control form control feedback which we are showing right now here same way we will need fields for the description um Feld for the movie release uh Feld fields from the you know language and all these uh thing so I will go ahead and copy this whole thing and put it right here and the second thing is that form movie that sorry the second control is for form movie description okay so I will write description and actually it's not a required field okay so I will just remove this thing also we will remove uh this whole thing and in fact actually uh this is not uh a text type control actually it's text area okay so I will write text area and what will the by default uh height of that so that will be like uh three rows so I will write rows three okay and the name will be description uh and the same way this value will be description and I will say enter movie description and this will be not autom dat will be not used here and it will have that same handle field change event okay uh same way like here we will add for the release date so I'll just copy this thing and put it here form movie release date and uh here we have Humanity name only title just name let's CH let's change this so movie description and here uh let's name this release date and also name of this field is date let's copy this again put it right here uh it's uh required but it's type of date we don't need aut to complete here placeholder we also need don't need that because it's uh dat control so remove it and handle field change will be same as it is and we will need to change please enter movie release date so release date okay that's done um then we will have uh form we'll have then we will have form control for uh movie actors and actually that will be a multi select list okay so I will just go ahead again copy all this thing um and here I will write actors and we didn't need all these things so I will just remove this and here I will write async select okay and actually we need to import this Asing select from uh react select so what I will do is that I will import a sync select from uh react select okay and back here um in the sync select part I will first uh used uh Cassy option and uh we need to instruct it that it's a multi select so I will write is is multi and then value and value for the value actually we will use another state variable called actors and why actually we need another value for actors is because uh the structure for the sing select and the data which we are getting from the actors from our Wei is different okay from there actually we are sending ID and name but in Asing select these values uh Fields values are like value and label okay so that's why uh I need another state variable so I will go ahead and uh um here add a new state variable and I will call it first one like actors and second one is set actors okay and back here I will set it to use actors then uh we use load option okay so load uh options and load options means what options this SN select or multi select control will show the thing is here is that we need a functionality that as soon as we type okay it should get the data from the back end and show those records in our multi select okay so for that actually I will create another event hander and I will just name it promise option okay why I am uh naming it promise option because uh it will wait for a server response as soon as we will write okay so I will use promise options as that function name so you can name it anything okay so I will just you know like go ahead copy this uh I will just I'm just naming it promise options because uh once we get the data from the server I will send it back to async select as a promise okay so I will write cons uh promise actions and then what's the input value which we are typing okay and then inside this we will return a fetch call Value okay so here I will write uh process. EnV dot um yeah let me copy this thing and then we have this uh person search so if I go here you can see here we have this uh person search thing we'll just copy this come back to our code and I will just um we don't need this API part okay you need only this person search and then our search text and that search text is our input value which we will be typing in our input field in our multi select and then we will write then if this is response is successful then just convert it into Json and then again response F function and here I will write if rest. status same stuff as we did before if that is true and rest. data dot length is greater than zero then we will return rest dot data. Map X such that return an object and that object will be named like value x. ID because from our response we are getting ID and name and uh let me show you in our code if I go here on person controller okay here we have this uh person search and here you can see that we are sending back ID and name okay so that's why we are assigning this ID to value and then we have label and we are assigning x. name to it okay this is it and in case there is any ER not here say if there is imputed response if rest DOA do count is zero okay we will say alert there is no movie data not mov there is no actor match this name okay and in case uh there is any error so I will say [Music] here getting data okay so this is our uh promise options which we are using here in as sync load options you will need on change event we will use uh another event handler at multi select change okay I will just get give it name multi select change and that's it I just uh close this up and let's uh create this event hand also so so here I will use cons multi select change data so that um what we will do is that we will say set actors okay and uh we will set the data which is uh coming from our multi select list and also we need to set the actors uh field of our movie State variable okay so for that first let's convert it back to ID and name format as our movie State variable have so I will write where um say people okay I will just name it [Music] people and I will say data do Map X such that you know return ID s that X do value and name s name's value is X do label okay let's close this and uh here again what I will do is that uh I will copy this thing same thing and we'll put it here but this time it will be do dot actors and this value will be your people okay and this will be the set movie part so our multi select change is also done and after uh this multi select option change uh one thing is remaining which is movie language okay I will go ahead and um copy this thing okay and it's saying test area it's not test area it's text area that's a typo and this type type will be your text and it's a movie language and also this name will be also movie language and this variable name will be language okay um let me update this we don't need this thing and uh interent movie language something like that and handle field change it is ADD as it it and in the last we need a button okay so I will write button import from react bootstrap right and then I will write type is submit and the value will be if movie is not null and movie. ID if it's greater than zero okay it means this form is used for update purpose right now so I will write update okay otherwise is I will write it create okay just let me format it again and on submit actually when we are submitting this form actually I want it to do a post request on our API site okay so here I will write on submit just call this uh handle save event handler okay which I will be creating so I will write hand handle save let me copy this and here um at the top you know handle after handle file upload event I will just write cons handle save and then we will have event and on that event first we want to prevent its default Behavior and the default behavior is that it will that it will submit that form but actually I want we want it to just post on the web API side and then JavaScript will handle everything so I will just write event Dot prevent default okay and then um we will check if this uh form is valid or not and will check the validity of that form because we are using some Fields where we have set it as required so I I write const formal to event dot current Target okay and we are checking if form dot check validity is equals to false if it's not valid so we will say Okay event stop propagation and after that we will set set validated which is the state varable call back function and it will set it to True okay and then we will return so in in that case if uh that form is not valid uh we will say okay hey there is some error and we will stop the execution right now here okay and then if it's valid we will move ahead and we will create first uh we will copy the state variabl so let's write let movie to post go to movie and uh as you know that uh when we are posting a movie record we are sending only the IDS of the actors okay so here we will write that's why actually we are copying this movie variable into a another variable movie to post okay so here I will do movie to post dot actors is equal to movie to post dot actors do map and we will take only x. ID we are only interested in ID so that's it and now we need some decision making that if it's a put request or P post request means if it's update request request or it's a create request so here I will write if movie and movie. ID is greater than zero then it's a update method else it's a create method so here on the up method what we will do that we will again use Fetch and in this uh fetch part actually we will just uh copy this thing this uh root URL of our project our sorry web API and here I will write plus movie okay and then we need uh some request parameters which is uh method is put and then we need some headers okay so in the headers part we will say accept application slash Json okay and then contrl C control V and then content Dash type is also application SL Json okay and then we will have our body so our body will be converted into Jon stringify so [Music] Dot stringify and we will stringify this movie to post object okay and then let me just uh copy this whole thing also here paste it so after that response Jon then if response do uh response do status triple is equal to uh true and it has some data okay so response. data in that case actually we are going to update the movie record so I will just go ahead and set it like set moving to our rest dot data okay and here I will add an alert alert will be updated successfully okay otherwise uh you're in getting data so this is uh our uh poput request and similarly we will have our um post request if it's a create method so the only uh difference is that you know to write it like post and here we can write create successfully so this is the part of uh creating the movie record so um let me save this okay and now we need to use this uh edit movie component in our create movie model okay so here uh I will go ahead and uh use this so I will copy this elit movie and uh if I come here and I if I write import edit movie from edit movie and instead of this I can just write here like edit movie okay that's it let's save this and it's uh restarting and let's see our UI front end UI and if I click on this add new movie let me um close it like this way here you can see that we have this add new movie choose file enter movie title movie description release date actors and movie language and this is uh you know like uh with a create button so let me just uh select a new file and uh I will select this batment begins okay and it says error in file upload what's the issue in the file upload it says 404 and what we are doing actually uh we are doing API / API movie upload movie poster so yeah uh let me go back to our edit movie in point and here we need to remove this API part save it again come back here so uh let me close this and ref again and yep let's create add a new movie so I will select Batman Begins again and uh This Time Again saying it's uh eror in data but here you can see that it is fine okay um doing correctly but why it's not working here so when we do handle file upload what we are doing is that here uh it has come successfully profile image but here it's not updating it this part okay so there must be some issues related to the response. Json so there is no any uh error here but if I go to the console window here okay let's uh return it down what's going on here so here here I will write console DOT log uh response okay and then I will return this Json okay let's save it again come back here okay let me refresh this clear everything from here click add a new movie uh select this Batman Begins and it says ER in file upload so if I go to console here it says type course URL reor for status 200 okay you're getting data but the status is 200 200 okay it's uh request is also okay so let's go ahead and uh do the same thing here okay in this part and here I will just tag it uh something like this I will just write it like rest again response save it come back here uh refresh it I'm just go ahead and clean all the things and uh select Batman Begins and says error in file upload in the console we are getting this response it is here it is coming here okay and if I just go ahead and copy this thing put it here you see you can see this but somehow it's not uh rendering it here it means there is some error going on here at that part to rest. profile image set movie so um let's try just uh comment out this thing and uh let me save it again go back to our UI just wait for the compilation done disconnected let me press this again uh add a new file sorry add a new movie and add a new upload a new file click on upload uh Yep this time this error did not occur so it means uh the issue is with upload updating this uh set movie record so somehow it's not allowing us to update this uh movie record here why uhhuh so maybe um it's say null and it's trying to update a null value so let me uh change it to a empty object okay just let me change it to empty the object and I will leave it as it is where it is where is it gone yeah here it is okay so let's uh save this again come back to our uh page here and I will select that Batman Begins again ah and now it works okay so that time it was uh uh because of of that null value so it was that issue and now let me just make this part small and movie title is like Batman Batman Begins uh movie description is the cryo for Nolin okay and release it so maybe maybe say let's say uh it's January okay 2005 maybe and actors so here let's type Tom and uh it's not working why is it like this so did it fire any request here sir no okay as soon as I am typing it's doing nothing okay it's actually it should uh do a web API request let's see what's the issue this time um async a sync select which is cash option it's a multi uh value is also actors load option is promise options on change is multi select okay multi select change that's fine and in our multi we are doing is the we are setting the actors but here this is not the issue the issue is this uh promise options okay so promise option actually takes input value then what it is doing that it's returning the Fetch with the person search input value then it's uh going for that just Jon and then doing all this stuff uh the problem is that uh it's not triggering this request here and what's the issue for that okay so um here we have our uh sync select okay and we have this ASN select react select Let's uh let's check the the uh website of uh react select okay so I will just write react s e l c react select enter and I will go here here on this react select page if you go to the sync um here says import a sync from react select a sync okay and if I see here okay we don't have this a sync part here so we need to just put it right here okay that may be the cause of why it was not running at that time okay just save it and uh um let's come back to our react app okay so here we have all these fields and if I go to the actors if I write Tom so you see see it's doing Fetch and here we have the storm Cruise too okay we can select it like this so looks like it's working fine and the language of this movie is English okay and I can go ahead and click on Create and it should work fine yeah created successfully click on okay and here you can see now it's uh as update okay and if I go ahead and click on movies again again or refresh this page here you can see that we have this die hard and Batman Begins okay so uh that was our add new movie uh model dialogue in which we are using edit movie as a component and in that edit movie component up until now we have only added the create movie support okay but we have not added functionality to edit the movie okay and the main thing in editing the movie is that first we need to get all the details of the movie okay then populate it into our component which is edit movie and then make some changes and post it back to our server as a put request okay so we have actually already added that uh put request here if you see this code here this put request so we have actually already added that code for updating the movie record but we have not any uh call here at the load time to get the movie details if this component is used for editing the movie okay so first of all what I will do is that I will go to to my movie item. JS file here and here I will add some buttons okay buttons for seeing the detail of the movie editing the movie and deleting the movie record okay so here just after this uh div section I will add a new button and that will be using react bootstrap okay and on click event we will use we will send to our movie Details page okay so here I will just write an event and here actually you know we need to you know change the page okay and so for that I will use react router Dome okay and for that actually first of all I we need to import a with router here okay so I will just write import um um with router from react router Dome here it is okay and if we want to access the history okay uh history means uh what pages user has visited in that open browser or if we want to uh navigate the user to any other page without using link we can use history okay and that history is automatically injected when we wrap uh that particular component with with router from the react router Dome so for this example like in this movie item what we can do is we can wrap this uh movie item inside with router okay so here I will come and uh add with router something like this okay and here at the top now in the props you will have another field called history available because we are using with router okay so here I will write props dot history Dot push okay and here we will need to uh push to the specific page where we want to navigate so in this uh case actually uh we will use a URL like you know example.com SL details slid for that actually I will just go ahead and write it like this details okay let me put slash here slash details slash then we have props do data do ID okay and after that here we can see it like we can give this link uh some text like C details okay and similarly we will have the same thing for the edit one okay so for this thing actually I will write edit and I can just write name like edit and I will also use another button just copy paste this another button where we will have this buttons uh class as danger means it will look like a red because we are going to use it for delete option operation okay so I will write variant variant danger okay and on click actually we are not going to use push because we don't we will not have any you know like uh dedicated page where we are going to delete the movie we will just click this button and that movie record will be deleted okay so we are not going to use uh this uh props here and here actually I will just change this to delete and also here uh let me give this danger okay so on click method actually what we are going to do is that we will do a API call and we will delete this record okay so what I will do is that I will just use props and actually from the caller component you know for so in this case like movie item is called from movie list.js you know this thing here and actually here we have get movies you know and other event handlers so what we will do is that we will Define that uh Delete movie API call here and we will pass it to our movie items. JS file okay so here I will use props dot uh let's give this name uh Delete movie okay and uh we will just pass this ID props do dat. ID here okay so uh this will be uh a button for deleting the movie record and our this component is done so back to our movie list let me copy this thing back to our movie list we will come uh here and uh add that event handler so I will write cons delete movie and here actually we are passing ID so ID such that and here we will call the sech option okay so what I will do is that I will just go ahead here and I will just copy one from here like this me copy this and here in the delete movie part I will just paste it here okay and here we need to pass the ID okay so movie to ID and is equal to and then the ID which we are passing here as a parameter and then method will be delete okay headers will be the same and there is no any body okay so we will remove this thing and then when this uh response status is true and actually in the delete option we are not sending back any data okay if it's true then we are going to alert it is deleted okay deleted successfully or in our delete operation if I go and open our code here so in our movie controller here you can see on delete method we are sending back message deleted successfully okay so actually we can use that same thing here so I will just go ahead and write rest. message so you you can write your message directly here or you can also write the incoming messages so in case like here we are just simply showing error and getting but uh in case uh you need to show the server side messages so in case you know there is a and you want user to know what went wrong because you have you know multiple conditions like validations on that side so you can show those messages like this as I am showing you here okay and uh uh we are not setting any movie because delete record and after that actually what we will do that we will run that get movies uh method again to get a new set of movies from the server okay so here we will write get movies okay say let me save this thing and back to our UI here we have uh this Fields like C details edit delete C details edit delete and you are seeing that you know it has these buttons are too much you know these buttons don't have any space in between so let's change that thing let's add that so here in the movie list um sorry in movie item so for that actually what we will do that we will just add some space here okay so me move this cursor here so some space here and then we will have some space here and in the delete button we don't need any space so back to our page here you can see that now we have spaces in between these uh buttons now let's uh add this edit and C details part so for that first uh I will go to I app.js file and here we need to add some add some paths for our edit and uh uh movie details routes okay so for that actually what I will do is that I will just copy paste it and here the first thing is that we need details okay so this Details page and then here we will give it some ID so I will write colum movie ID and you know when we will uh work on this page to get this ID actually we will request the request params with this uh identification so uh when we will uh visit this page we will just uh check if there is movie ID in the request params and then based on that we will get the movie details okay so that's why uh we have named it like colon movie ID and then in the component actually uh we will create another component named movie details okay which will be uh actually movie detail which we will be creating shortly and then we we have edit edit route okay so I will just write edit and the same way that I will have this movie ID here also and here in the component actually what I'm going to do is that I will use this component directly so as I I have shown you like we are using this component inside this uh create movie model but also we can use it directly as a route here or page here okay so I will just use that thing I will use edit movie okay and actually here we have edit movie already uh imported okay so these are two uh Parts which we will need we don't have movie details right now so what I will do is that here I will just create a JS file simple and I will give it name movie details not JS and uh inside this actually what I'm going to do is I will just copy this thing paste it here and from app.js I will just name it same as it is just for the case just if you refresh it will not give us error that mov it does not exist so that's why I created that I will work it later after completing that edit movie part okay so let's save this it should not give any eror okay movie detail is not defined okay yeah it's not defined because we have not imported it okay let's copy this thing here and I will just write movie details save it yep fine so here on edit movie ID part if I go to movie item here you can see that this is the same thing is uh edit and we are just passing this ID and uh for this edit movie part we need to make some changes in our edit movie component okay so back here what we are going to do is that as soon as this page loads we are going to check if there is movie ID in the request params or not if there is no movie ID it means it is a create request okay so at the very top of this page here after all this state variable I'm going to use use effect yes and in this use effect I guess it has already imported it yeah it say imported it first parameter will be our function which will do some stuff stuffs like it will check if there is ID if there is ID sorry movie ID then it will go and get the details of the movie otherwise it will do nothing okay so here here and uh yeah it should run only the first time as soon as it loads so I will just add empty array here okay and uh inside this use effect the first thing which I'm going to do is I am going to check if there is ID in the request perms or not okay so I will just write if props dot match sorry it's props okay here we don't have props here so I will just write props here okay and then here I will move this and write props do match so we are checking if there is this match a field in our props object or not so if this is not undefined okay and if props not match do params dot then that ID okay so here in the appjs actually you can see that we have given it name movie ID okay so we will just copy this thing and we will come here and we'll use this thing so if there is movie ID in the request params so means if that movie ID is not undefined okay undefined then go ahead and get the details of that movie okay so here we will write a fetch method so fetch and and uh then here there should be yes this URL so fetch URL plus movie and then plus we will use this movie ID here okay movie ID do then same thing rest rest convert it to Json okay and Dot then rest so that if response do status equal to True okay then we are going to set the movie okay so we are going to set movie to the rest. data okay and also we need to set actors but before setting the actors uh we will need to uh convert those you know ID and name value to value and label just for our multi select list okay so uh one way is that you know like here if I show you um somewhere here here what we are doing that we are converting it in this format you know ID and name and not here actually here yeah actually here we are converting that ID and name to value and label okay the same way we need to do here okay so what I'm going to do is just I will write set actors okay and inside this I will just write rest. data dot actors do map and inside this I will use x as that then we will return an object where object is object's value key is X do ID and label is X do name okay and add this semicolon in the last and if there is any eror so catch eror we are going to just show alert and I I'm just going to write the same thing here in getting data but you can use anything as per your business requirement okay so this is the uh update part here let's save this thing back to our UI now if I go ahead and click this edit button you can see here it has shown us that same thing and here you can see that it is showing us this uh uh mean it has already populated all these things like saying movie title is Die Hard its action movie and also you can see that it has now populated this uh actor and it populated its name that's because we have converted this you know value into value and label here and set it as actors okay and then we have this movie language English but here you can see uh it has not uh populated this release date part and the issue is let me show you what's the issue is so if I open this uh console window here and if I go to the movies list again and click on edit here you can see that we have this U edit request and here in the in this time here you can see this time is like you know uh year month date then T time part where it has all these uh things and here we have specified in this uh control that is this is type of date only okay so in that case actually we need to remove all this time part and we need to just uh keep it only this format and that should be like you know year Dash you know month Dash date if if for some reason your release date is coming you know somewhat different you know like uh month uh date then year it will it will not work okay this uh control requires the the date part in this format only okay so we need to convert it and so for that what I will do is that when after getting the movie data successfully from the server we are going to just take the date part from there okay so what I will do is that I will come here and I say okay let movie data Al to rest do data just copy this data in a local variable and do some validation okay valid why validation because that release date maybe it's Im so in that case we need to verify if uh release date is not empty then only we are going to take that uh date part okay so I will just go ahead and write movie data dot release date not equal to null and uh movie data dot release date is not equ equal to undefined okay in that case what we are going to do is that we are going to again set this release date as movie data dot release date dot split okay and split by this character t Okay and then take the first part okay so what we are doing actually here is that we are splitting this uh date by this thing this uh separator which is T and then this will be the zero and this will be the one because it will just you know convert this thing into array so this will be the first item which index will be zero and this will be the second item which index will be one so we are just taking the first item which index is zero okay so that's why we are uh setting it as split T and taking zero and again assigning it to release date and after that um what I'm going to do is that we are going to set this thing here okay so movie data and also movie data. actors let's save this come back to our UI and here you can see now it has successfully uh updated this okay this release date part so that will be the same issue everywhere so in case like here when we are doing put request we are again getting the data back from the server okay so in that case again we need to uh handle that date part okay so I will go ahead and copy this thing uh this thing let's copy this come back here in this post success part sorry put success part and then I am going to just remove this thing okay and same way here the set movie part we are just going to use it like this so let's save this and now let's try to update this thing okay so here uh we have move description action let's change this to action move movie and uh let me just put it right down here and let's change this release date to somewhere like um you know 1 June okay and die hard let's give it name two and let's change it from English to Hindi okay and yeah again we need to update this uh file name okay so let's uh just choose any know file here so I will use this um miss an impossible one okay okay and let's update it and here we have this thing here let's remove this thing and it says updated successfully click on okay and now if we go to the movies here you can see that it has successfully updated and also it has successfully updated the movie name okay so our delete and uh add movie part is done uh let's uh change this let's work on this uh C details movie part so back in our code we have this movie details component so in this movie details component what I'm going to do is that I'm going to use first a state variable so I will write const and that will be movie then set movie and then we will say use State okay and that will be by default null okay and then also um as from here if I go to the app.js we are passing this movie ID here okay so we will try to get that from the uh params so I will just write cons uh movie ID and then we can use props and actually we need to pass the props here okay so Props dot match dot parms so this is the way you know just like here on this uh edit movie part as you can see that here we are using this uh whole thing like props match params movie ID we can use it like like this way and it will actually you know by automatically extract that movie ID and assign it to a movie ID variable okay and then after that we can use use effect from react and uh again the first part is your calling method and second part in second parameters means what it will track and we actually want it to just run only one time so component will Mount lifetime cycle we want to execute so I will just use empty array okay something like that and here uh we need to just uh write that uh fetch request so here in this edit movie part I will go ahead again copy this whole thing come here in the movie details and we are just going to use this movie ID which is this this parameter sorry this constant and then we are not going to change the release date here because we are not binding it to any input field okay so we don't need this thing and we also don't need this uh set actors record we need only set movies okay so I will just go ahead copy this thing put it right here and remove this okay and now in this uh render part here we need to uh just display the incoming result so here I will just use a row from react bootstrap and inside actually I will first write if there is movie okay then only go ahead and render it okay so so that's why I'm writing movie and then I am going to and then I'm going to write the render part so here uh I will just um go ahead and put it again in another fragment because we will be using columns here two columns so I will just WR call from the react boot strap okay and it's item and it's on the small screen it will be full width and on the medium screen it will take like four columns okay and I guess you get the idea that here we are going to show the image so image and uh you can use you know the bootstrap one or you can use the you know the normal HTML image tag so here I am using normal HTML image tag and here I am just going to write movie do cover image cover image otherwise you know use no image and we are going to to go ahead and get that no image from here there should be yeah here it is let me copy this thing come here at the top let me put it here and so yeah the S will be no image and then let's put some style so style only for you know setting the width and height so the width not Windows width will be 3 and height will be also 300 okay and in the last let's close this IMS tag and same way I will just copy this thing put paste it here and instead of four we are going to use eight because in bootstrap we have you know 12 columns in a row so 8 + 4al to 12 so here um actually I'm I'm going to uh display all the fields so I will start first by a heading so I will just put S3 and uh in the S3 I will just put it right movie dot title okay and again you can uh you know get this all Fields uh from your response okay so if I come here in our UI and if I you know try it out execute it you know you can find all these fields from these uh Json from this from this uh Json response so you you will find all these keys from here okay so movie. title and then again and then we are going to show the movie description in a paragraph so I will say movie dot description description and in case movie description is null or empty we are going to show it na okay not available something like this then we are going to use a div div tag and then you know I'm saying this I'm just going to use uh bold tag and inside this I'm going to say language so language one part is language another part will be our release date and then we are going to show cost so I will just copy and paste so in the last line in the last of this line I will just go ahead and click and hit contrl C and then control V two times okay and in the first one I will use use um release date release date and here the second one I will use cost for the actors appearing in this uh movie and for the language I will just write div and then I will write movie. language and then for the release date actually I am going to use another div and here we can write movie dot oh I forget the curly BR so right movie dot release date and actually again it will show you the the the time part also so I will just go ahead if that release date is available okay then again split it okay so movie dot release date dot split and uh again you can go ahead and put the validation you know in many parts as I have shown you you know some in some places how to do validation on the UI just like I showed you for the match params you know you can apply the same way on another areas where I'm not implementing those uh validations okay so here I will just go ahead and write split by T and then just take the Zero part for the first part here and then let's close this and after that in the last uh we will use another div and here we will you know uh print all the actors in a comma separated value okay so I have actually written it here in the movie items I guess yeah here it is so I will go ahead and copy this thing and come back here in the movie details part and here I will write movie and then I will paste it movie. actors. map and let's close this thing okay and in the last actually uh I will put ahead I will go ahead and add one more column okay and here actually I'm going to use a link so link yeah from rect rou doome link to uh Slash okay and here I will say it like go to home homepage okay so let's save this um come back to our UI and here if I click on click on this C details here you can see that it is now showing us the high Hard 2 action movie language Hindi it is not showing us the release date and Tom Cruz the cost and crew why it's not showing us the release date is there release date here yep here is the release date I guess there is some typo so okay here we have written release data okay so it's release date that's the some know you get the issues because not on this thing inlin sense is not very good okay so just save it again come back here and here you can see that it is the release dat right here so back to the movies we have completed our edit and C details now we need to uh do our delete part okay so for the delete part actually we have uh um Define delete method in our movie list so if I go here and if I go to the movie item here we have delete movie and here we have a movie list for this uh no delete movie call actually we have added but we are not using it anywhere okay so we need to pass this uh Delete movie to our movie movie item okay so I will just copy this delete movie come back here and in this movie item what I'm going to do is just I will paste it here and then here I will again paste it but here this thing is indicating this thing and this delete movie is indicating this delete movie part okay now let's save it now let's save it and back to our UI if I go ahead and click on delete it says deleted successfully click on okay and here you can see now it has only one delete only one movie so if I refresh it again you can see we have only one movie so our movie part is done now let's uh focus on our actors part okay so back to our code here is our uh actors component and uh the first thing here is that we will add uh we will add our actor listing here so we are not going to use any uh State variable here I will just remove all this thing and I will just go ahead also remove this thing and inside this let's first add a row okay Row from react bootstrap yes and inside this row uh I am going to use two columns as we are you know it's very similarly we are using it here in this landing page okay similar to this I will just copy this thing actually and uh come back here in the actors part and I will paste it here Tab and here I will write it actors actors and then we will use here add new actor and here actually on landing page we are using show model dialog but here we are we are not going to use so model dialog okay actually um here I will use uh a page for creating an actor so before adding all those things let's let uh let's add those uh components routes here okay so we have already this actors part here and uh then uh I will add another another route and then I will add another route for editing or creating Del in actors and another route for seeing the details of the actor and as you see we don't need any route for deleting deleting the actor or movie actually I'm going to just copy and paste it two time okay here in the actors actually I will go ahead and uh add a path create edit okay create edit and actually I'm just trying to show you the different different ways how you can achieve this things you know just to give you an idea of you know you can manage it differently it all uh depends on you okay so actors uh create edit and uh after that actually I'm going to create a new um component which will be called create edit actor similarly to our edit movie component where we are uh creating and editing the movie we are going to create create another component create edit actor to create or edit an actor and then here in this part we are going to use a route for seeing the details of a particular actor so I will just write actor/ details slash and then identification for getting the ID of the actor means param match params ID okay so I will use actor ID here and the component will be actor details detail okay I'm not going to hit control s because otherwise it will break and um now I am going to create these two components okay so first one is uh create edit actor so here in this component I will go ahead and add a new file give it name create edit actor. JS and then again also we will need actor details actor details. JS and also we have not you know created uh movie just like we created movie list and uh movie item we have not created actor list and actor item I will go ahead and create it at the same time so I will just write actor list.js and then actor item. JS and uh for the actor item. JS actually uh let's leave it I will see if uh I can show you just to because I have already shown you how you can you know put list an item in different component but I will just I guess show you how you can use it in that in the same component okay so I will just D it as it is and uhu coming back to our um actor. GS file okay I I will just drag it somewhere here um why it's not dragging yep here and uh let me just control all control C and uh let me paste it here remove this thing okay all control C control V here and paste it here okay and in your app.js actually this thing create name is create edit actor so here I will give it name create edit actor save it this thing and uh actor details so details is here save it and then we will go ahead in our actors. JS file here and uh here on click uh we need to send it to our create edit actor component route okay which we have added here so I will just go ahead and copy this and here in this actors part we are going to use props do routes props sorry props do history okay so I will write props here and here I will write um props dot history dot push and I will paste it like this sorry uh put it inition and paste it like this okay now uh as we are using history here we need to use with router okay so I will use import with router home react router Dome and then you know R put the actor inside this uh with router okay and now we can save this thing this uh thing okay saying call is not defined because here we have not imported it it's saying button is also not defined that's good save it okay so um if we come back here on our UI you can see we have this actors and we have this add new actor but we don't have the list of actors here so I will go ahead and add a means uh just similar similar to our uh uh landing page here where we have this uh movie list we are going to use actor list here okay so I will just write it actor list okay and I am going [Music] to import it here so I will write import actor list from in the parent folder so double dot slash uh components slash um actor list okay and here in this actor list part I will go ahead and name it as actor list and in this actor list we are actually you know going to do the same thing as uh we are doing with our landing page so I will go ahead here in this Landing not in the landing actually movie list okay I will come here and I will just copy all this thing let me just copy all this thing from here to here and put it here in our sorry put it here in our actor list okay something like that and instead of movies we will have uh actors okay and set actors user state is null so what I'm going to do is that I will just go ahead actually um copy these two lines otherwise it will give us error I put it like this actors and then we have actor count actor account and we can say set actors count say actors count and the page will be the same and on the fetch actually um what we are going to do is that instead of uh movie we are going to fetch person okay so we are going to use person let me double check our um UI sorry back end uh API end point so here it is yeah API slers so come back here so person page sizes this thing page index will be the same way and we need to set actors okay and that will be rest data person okay and then set actor count okay so I use Set uh actors count and that will be rest data account and then your paging size okay and in case there is no uh actor data in system get uh then we are getting you know we are catching the error if there is any error and actually uh this thing which we are calling get movies it should be called get person okay so get person and that should be called here at this uh stage okay and um after this we are handling the page click so we are setting the page selected then we have this delete movie which should be called delete person because now we are dealing with person so delete person and then person and after that again we are doing get movies so we will do get uh person and down here in this uh Return part actually we are going to check check if there is actors and if actors are not just input array in that case we'll use actors. map and here actually at that time I was using you know movie item but I'm just going to show you how you can you know put it right here without using any other component so that's uh kind of easy and uh what I'm going to do is that I am going to use the row from react bootstrap okay so in this case like if actors is not null in that case we are going to put it inside a div okay so here I'm going to use a div and again um here also just closing div okay and put at carra here remove this thing and yep okay so this is our row and in react it says if if you're looping anything just put the key so I will just use key and uh this part the second uh parameter is the index okay and then we are going to use column okay so in this column we will have one div okay and on on this div actually we are going to say that on click okay just go to the uh movie um details okay so I'm not actually going to use on click here right now um just show you why I'm going to use on click is because inside this div we are going to show the actor name okay so I will just make it bold and also make it underline okay simple STL stuff and I'm going to use M do name okay because for the person we have only three Fields you know ID name date of birth okay so um in movie uh list components we had a button I'm just going to uh use a way that if user clicks on this user's name they will be sent back to the details page of the actor or person okay so that's why I was adding this on click here so I will write now go ahead and add on click and uh on click again I will use props history so for using props history actually we need to use um with router okay so let me copy with router from here because I'm lazy I don't want to type too much and from this with router I will go ahead and uh wrap it around this thing with router okay and here we can write um is there props here no there's not props so I will just use props here so here in this thing uh in this area I will write props dot history and I will write dot push okay okay and then and then I write slash actor actually I will go ahead and uh copy this thing okay this um SL actor/ details then actor ID okay so I will just um write it like this and then we will pass the ID so that will be m. ID Okay so uh this is the uh name part and then we will need two buttons and those two buttons will be for editing the person record and deleting the person record okay so um let me go ahead and copy that those two buttons from movie list like here somewhere um is this in movie item I I guess this is in movie item yeah your movie item here we have okay these two things let me copy this thing and back in our actor list I will go ahead and put it right here so in in the movie uh edit page actually I showed you how you can you know pass the ID and you know use the match location uh to get the ID but here I'm going to use you know something different and this time instead of just passing this ID this way I will use an object okay so first let me uh just uh get this uh URL from here okay so just copy this thing back here I will put it like this okay and now instead of just adding it here like this I am going to use comma okay and I will use an object and here the key will be data and then we will pass the [Music] whole you know person record as a parameter okay like this and here we have this uh edit button okay and then we will have this uh delete button and actually this is our actor list and here we have this delete person directly here so I will not go ahead and uh because here we were passing it into another component that's why we using props but here we are using it in the same component okay here as delete persons I will just copy this thing and uh paste it here and I will remove this props okay so this is our delete button okay and in the last let me put a horizontal line here so HR so uh this is our um actor list let let me save this thing and also know save this thing also and here say it is saying use effect is not defined in actor list okay uhuh use effect is not defined react Pate is not defined okay um where what where was that uh movie list should be here reate yeah let me copy this thing put it here and it's saying movies count is not defined what okay somewhere we have movies count where is this movies count let me this is what happened happens uh when you have okay here it's not movies count actually it's uh actors count so this will be your actors's count and there is again somewhere like movies okay it says get all movies get all person okay save this now back to our UI you can see here we have actors uh Tom Cruz edit and delete okay so back to our code we have our uh actors landing page and actors listing Pages done now we need to work on getting the actor details creating and editing the actor and then deleting the person actually deleting the person is already done here so we need need to work on getting the details of the actor and creating and editing the actor so I will first go ahead with the actor details because it's pretty easy all we need to do is get the details of the actor and put it right here and actually what we can do is that we can use the uh movie details of it it will be similar to this thing okay so I will just go ahead and um copy this thing from here to here come back to our actor details paste it here and it will be actor and then set actor use State null and then we are using actor ID that should be right now here so here you can see we have actor ID here so that's why we named it actor ID and here I will say person and then I will use actor ID and then we will say set actor response data and then here we will say actor if actor is uh available then actually we don't need any uh we are not using any image if you want you can use the image in that case you will need to add the image upload API also for actor or you can use the existing one and you know use it to send that image URL with the post or put request of the actor you will need you know all in all you will need one more property for saving the actor's profile image which we are not using here so here we are just going to use actor do name okay and uh then we have only date of birth of actor date of birth so actor Dot date of birth and then [Music] um here actually need to update this thing okay it's not released yet so date of birth is actually also will be the same so um we are going to remove these two things Okay so date of birth is here and then what movies that actors has appeared so movies and as you can see if we come here in this person uh detail so if I go ahead and just try it out person ID one hit execute you can see that it has this movies uh with an string array with a string array okay so come back here and I will just write actor do movies okay map x. name and do jooin but we are not going to join it actually we will uh show it as a list okay so I will remove this thing and instead of div I will just use another list ul ul and this x will be X do name will be replaced by only X because here we are getting only the string and that should be inside your list item Ali okay so um let me delete this and put this x inside cly okay something like this um remove this thing and here I will say go to actors page actor page and here I will write actors so that should be uh enough let me save this thing go back to our um page means our UI and if I click on this I should get I did not get anything here why is it so actor details is actor details um and what on actor list on click we are doing history. push m. oh here it is because we have not saved this part okay so I will just save it and it says that create edit actor is not defined yeah we need to import these uh these fields so I will just copy paste it two time first one is uh create edit actor so created actor from components created it actor and another one is actor details and that will be your actor details save it and in now in our actor retail it's saying too much things are not defined okay because here we don't have props we forget that props then we forget to use State and use effect so I will go ahead and copy this two things and in the bootstrap it will say call and Link all these things are not defined um we just go ahead and copy paste this and with router we are not using here but we are using link here so I will use Link from react router save it y it's working fine now if I come here you can see that it's saying uh Tom Cruz date of birth and Batman Begins and it's coming here let me check why it's coming there so we are saying um go to leor space and actually the issue is that here we have is md8 should be 12 yep and here we have okay so name of the person date of birth movies you know he has appeared in Batman Begins and go to the actor page if you click on this you will come back to the actra page so now only uh one thing remaining is to just create this edit or you know add new actra page so back to our code create edit actor page here what I'm going to do is that I'm just going to create a new form and that form will be very much similar to our um edit movie so what I'm going to do is just that first I will just select all this thing because every time I get you know this thing is missing that thing is missing so createed actor um let's paste it here and back to our movie. Js from our return method I will copy all this thing of course we are don't need all of them so I will delete them so but first let's paste it here and let's review it okay so in the form no validate yeah we will use it we validated we will also use it hand I'll save from the from group image and upload image we are not using in the form so I will remove this thing and from this uh title actually we are using name okay so I will use name and I will just say not person title just name okay name and um then we have this uh movie okay so I will just write it like actor actor Dot and Hector do name okay and here at the top I will know first uh use some uh State variable so I will write validated then I will reuse set validated okay I will use set State and that will be false okay another thing is that we need actor and set actor so I use cons actor comma set actor okay and you know last time I was using null or you know uh imput object so you can use it the same way or you can can uh use a kind of you know uh some default data so like here I know the actor entity has ID name and date of birth okay so I can just give it you know by default ID zero You Know Name by default is uh you know like null and date of birth date of birth by default I can give you give it you know undefined okay so in this case if we set it like this we don't need to you know check it like this if actor and you know actor. name so if we just put it like this it's fine okay because we have now you know a default value for all these fields so like here after that I can give it the name same as the property or field name okay and it's required type text and to complete off enter name okay and on change is handled field change okay so I will go ahead and uh actually I have to come here again and again again I will just put it somewhere here and I will copy this handle field change thing just copy this um put it here and instead of movie we are going to use actor and we are going to use sorry set actor okay and uh now here uh please enter name I will use only this thing and then uh we have only one field remaining is uh date of birth okay so form actually I have form not movies form actor okay so form actor name from actor date of birth okay and I will just write date of birth okay and here uh in the name part actually its name is date of birth so I will write date of birth this field name is date of birth and value will be actor dot date of birth it's required type is date handle field change again only these two things and please enter date of birth I say please enter date of birth and I will just remove these two Fields because we don't need that okay and on submit if there is actor and actor. ID is greater than zero then update otherwise create same simple thing we need to use the handle save event so um in the edit movie there is is handle save event that should be here yeah here it is so let me copy this handle save event copy and uh paste it here so let's uh review this so here at the top it says uh uh handle save means passing the event then we are preventing default then we are uh getting the current form and checking its uh validity okay and um then uh here we don't need uh this thing because at that time in the movie part we need to post only the actor's ID but here we don't have such uh requirements so I will just go ahead and remove this thing and here I will say okay if there is actor and uh actor. ID is greater than zero then it's update request so it will the same and instead of movie it's uh person okay method is put same thing uh but in the body we are passing actor okay and after we get the response from there um we will need this uh really uh this date logic because also in date of birth we are getting the time part so but yeah instead of movie data we are going to use uh person data okay and let's uh copy and paste this here and instead of set movie actually I'm going to use set actor and instead of uh release date we are going to use date of birth okay so I will just copy this and put it here like this okay and let's copy this again here in this part in the create part again I will write person okay and then the post and then your actor object and then in this uh success response we are going to use this person data okay and instead of set movie we're going to use set actor and uh did I change it here yeah person data and then we have this date of birth so I will put it like this here okay so that part is uh uh handle save part is done now uh one thing is remaining that uh as uh this is fine this is work uh very fine when we will do create but in case we are going to edit it you know we need to get the actor detail from the API but this is actually a little bit different from the movies API uh uh uh movies create edit UI if you remember in the movies create edit uh uh movies created component we are passing uh the ID only okay so here if you see um at this place we are only passing movie ID okay but when we are uh creating the person okay so let me check it here it's in the actor list I guess I sometimes forget yeah so here actually we are passing that whole uh person object which we got from the API okay you see here we are passing this m okay and M is the one item in the actors okay so and actually this m contains all the fields which we are going to update you know it contains uh name and ID only oh sorry name and date of birth only so instead of you know here getting the data from the API you know we can set that incoming uh person data to our uh set actor okay although it's not a good idea but just giving you uh although it's not a a uh good way to use uh the in memory data you know maybe uh it could be like uh someone uh added that record and he spent like 10 minutes without refreshing it okay and then he clicks on the edit record and actually we are not getting the data from the API and somewhere you know some other users change its uh record there okay so you will not have that uh you know the present record from the uh API okay this is the drawback of this uh method but I am just showing you that that how you can do this okay so I will go ahead and use use effect okay so I will use use uh effect and the first parameter will be your uh method and here we are going to say okay props and I always forgets to use props here okay so Props dot location now this time we are going to use location because we are passing that as a uh value sorry as a object when you're using props do history and the ideal uh you know situation will be like when you are uh you know say you have done some uh operation and you now you're navigating to any other uh um component okay and you need to pass some message okay so you can use this way okay when as I am passing the person object you can pass some messages and you can you know check if that message is here or not and use it that way so Props do location do state if it is there okay and uh props dot location dot state do data is present and data means this thing so if I come here um that was movie details uh sorry actor list okay data means this part okay this data so if it is present and if that data ID is greater than zero okay in that case we are going to um set that actor record else okay else uh we are going to set actor and uh in the set actor I will just set ID as zero comma name as inut okay otherwise we are going to use the same thing where it is um we are using the put uh put request something like that yes let uh this person data and I will come here paste it like this um shift tab two times and see in of uh response data we are going to use this state data okay so I will copy this and I will use it here okay so yeah um that's it looks like uh fine we are we don't need all these uh things so I will just remove this we also don't use this image uh let's save this do we do we have any button here yeah it should we should have button here yeah so let's save this and it says prop is not defined where I have written prop okay it's prop here so Props and movie data is not defined in line number 16 line number 60 so line number 16 we have movie data no it's not a movie data it's uh person data okay and where do we have movie data here we have movie data do we have movie data here also no save it yeah it's done so come back to our UI so if I click on uh details you can see here's our detail let me just make it smaller go to the actors page uh click on edit so here's Tom Cruz 2 I will say Tom + 22 or just name it like Tom Cruz okay and then the date of worth of Tom Cruz uh change is date of birth so here actually I will write it's like uh thirr of July okay so 07 03 and it's 1962 so 1962 okay and let's update it it's say says updated successfully okay if I go to the actors page uh see the details here we have this uh record uh mean this date of birth is updated also name is updated I go to actor's page again click on add new actor and here I am going to uh add uh Christian Bail Okay Christian but you can see here I cannot write anything okay I'm trying to write but I cannot write anything why is it okay so if I come here um in my code create edit here we have uh that uh form actor name name equal to name uh value equal to actor do name otherwise you know like null this thing and then we have on change handle field change okay and actually it was working fine on when when we were editing the record okay so it was working fine let's see oh here you can see it's going on like crazy okay if I go ahead and maximum update depth exterior this can happen when a component called set State inside use effect you know lots of time I will go ahead and stop this okay come back to our code and here at the top you see here we are using use effect but you we have not you know said then that when it will run so what is going on is that it's running you know at every update so that's why we need the second parameter okay if you don't give it the second parameter it will think that it has to run this method on every time this component is being rendered and here actually we want this code to render this code to run this use effect to run only only when this component is mounted so I will use an utty array like this okay save it again come back here and click on add new actor and this time let's write uh uh Christian Bill okay so I will write you know now it's working fine okay so I will write Christian nail and uh his date of birth is uh uh actually it's January 30 1974 and actually I have this date of birth written okay so 1974 and let me create it so it says created successfully okay come back to actors here we have so our um this create functionality is also working so if I go ahead and see Christian Bill records so here it's Christian bill but he has not appeared in any movies I will go to to actor F uh now let's add another actor I will just you know add something you know any any any name and I will just give it any ID and you know just let's give it actor one okay and create it do okay come to the actors and here you can see we have you know page number two so we can go to this page number two because uh in our code uh here you can see in our environment we have set up the paging size to two so I have just put it right here you know you can use it on your component itself it all depends on you how you want to design it okay so this is our paging working fine and uh let's delete this sector so if I click on delete it says cannot read property ID of undefined every time it happens okay so it says props do dat. ID and this is the issues when you copy and paste the code from one component to another component you just forget this thing okay so I will go ahead and uh uh I where that component is actually it will say actor list okay so actor list we have this props do ID and it should be m. ID okay save it come back here and just click on delete and say deleted successfully and here if I go to page number one it is showing Tom Cruz and Christian Bill okay so looks like uh our uh front end part is also done let me close this thing okay come back to the movies and let's add a new movie or you know just let's uh edit it because I just showed you uh one how to you can add one actor okay now if I go ahead and click on edit and um uh we have Tom Cruz here but here we have also Christian bill so if I just write Christian bill here you can see we have Christian Bill we select this click on update it says updated successfully come back here in the movies list here you have Tom Cru Christian Bail or if you see the details you will have Tom Cruz Christian bill and if you go to the actors and see Christian bill here you can see it has Batman Begins okay now let's add a new movie um select uh The Dark Knight okay and let say The Dark Knight description movie is a second discussion of the movie is second movie in series and uh release date is I don't know when where it's delet delete Sorry I don't know when it's released dated so I will just write now January um 1 January what 2011 yeah and actors Christian Bale and movie language is English and I will just go ahead and create it click on okay and close this and if I refresh it again here you can see the Dark Knight so as you as you saw that um um when we created this uh new record this thing was not automatically updated because we need to run that uh get movies uh function on the homepage okay so one thing is just a homework for you know just you can do some R&D and U find a way you know using the tricks which I have shown you here and uh trigger the refresh of this page okay so uh this was a very simple crude application using uh esp.net Core 5 web API and reactjs and uh if you like this video uh hit that like button if you have any question just put it in the comment section or if you have any tutorial request do let me know in the uh comment section I hope this video was uh helpful for you and thanks for watching and I will meet you with any other tutorial next time have a good day

Channel: OpenEducation

Views: 5,711

Keywords:

Id: L7Y6g6x6ZuQ

Length: 416min 32sec (24992 seconds)

Published: Tue Dec 26 2023