Complete CRUD Operation With Next.js & MongoDB - For Beginners

hello everyone and welcome back to daily tuition in this course you'll be able to learn next year's crude application i'm gonna make this employee management system to create read update and delete records you are about to learn how you can create this beautiful application with nexus and redux we are using redux library to share the data between different components as well as we are using react query to fetch the data from the backend and cache that data we also going to make our own middleware and create a mongodb connection and store all the records in the database so let me first demonstrate this application i'm gonna first create the title employee management and inside that we have here a table inside this table we only have one record let's suppose that we want to create another record here so we create add employee button when you click on it you will have here a form that will allows you to insert a new record inside a database you can see the default active check to this form you can easily change this default check if you want now let me specify the first name to the employee the last name then i'm gonna specify the email and then i'm gonna specify his salary in numbers and then i'm gonna choose his birthday so let's suppose if i choose his birthday and then i'm going to leave this active as it is when i click on the add button you can see you're going to get here a message added successfully and then you're going to have here your new user with a new profile icon we are adding this profile icon randomly if you want you can choose your own profile icon as well now let me add one more record here i'm going to click on this add employee this will remove this bom and if you click on the add employee again you will get your new form let's suppose if i specify the first name the last name then i'm gonna specify the email and the salary and i'm gonna choose the random date and this time instead of active i'm gonna choose inactive status when i click on the add button you can see i'm gonna have this message and we have the inactive user here now what if you want to update this data you can just click on this button right here you can see we have the update button here let's suppose that i want to update the second employee i'm going to click on this update button when you click on it you'll get your form and now you can update any value from this form let's suppose if i change this salary to 20 000 and i'm going to change the status as well to inactive when i click on the update button you can see the salary and the status is now changed now what if i want to change the status of this third record i'm going to click on this update button and now i can choose and change its status i'm going to active this user so i'm going to click on this active and click on the update button you can see now the third user is active now what if you want to delete this data if you want to delete your data you can easily click on this delete button when you click on it application will ask you a question are you sure you want to delete this data if you click on no it will do nothing but if you click on yes it's going to delete this data from the boundary of database so this is what we are going to create in this project this looks easy but when you start building this application it will add more challenges i hope you will learn many new concepts from this application so before wasting your too much time let's get started so i'm going to open the visual studio code which is right now the most popular editor and inside this i'm going to open an empty folder i'm going to name this empty folder project inside this project directory i'm going to create a new nexus application so let me first open the terminal so you can see we are already in the project directory so now here i'm going to create a new project to create a new nexus project you have to say npx create next app and then you specify the app name i'm going to choose app name crude underscore app so when i press enter this is going to create a new nexus application inside this project directory it will take about a minute to create this complete project once you have your project you have to press enter into your project directory so just press it by here cd then specify the project name go to the app and here you need to say npm run there and this is going to start the development server on localhost 3000 when you click on this link you can see you're going to have your nexus application now what i want i want to set up the delve in css in this project so we can easily style all the html elements so i'm going to open a new tab i'm going to search for delvin css and click on this first website here i'm going to have the turbine css.com just click on the get started choose the framework guide and then choose the next shares once you create your project you have to install the television post css and auto prefixer so let me copy this first command in my project let me stop the development server and here i'm going to execute that command npm install iphone d to install these packages as development dependencies and then i'm going to specify telephone css full css and auto prefixer and after that we need to execute this command npx delvin init iphone p i'm going to execute this command inside this terminal you can notice inside this project when i execute this command it's going to create a new file delvinconfig.js and postcss.config.js this will initialize this project with television css so just not that you have to just configure your template path so just copy both the statements and open the delve in config.js file here inside this content right here you have to specify both that statement something like this so if you are just informing lectures that we might have js ts jsx and tsx files inside the pages and the component folder so using that file we are using the television css in the project once you've done that just save the changes close this file back to the project and you have to just add these three directives inside your global.css file back to your project and inside the styles folder right here you're going to have your globals.css file just specify all these three directives right up here so you will have all the tailpin built-in classes inside your nexus project back to the tailwind and now you have to just execute a command called npm run tip so i'm going back to the terminal here i'm going to execute npm run there so this will just start the development server you can see i'm going to have the nexus project with television configuration you can just add this statement and check your television is successfully initialized or not so you just have to back to the pages folder open the index.js get rid of all this code right from here i'm not using this default code so let's get rid of it and add here the closing main first and then i'm going to add here h1 heading tag something like this and you have to close this div as well so down here you have to say save this file back to the project and you can see you're going to have your hello world now once we set up a television css let me just change both things inside this index.js here let me get rid of this image because we are not using it and we are not using this import statement of this styling and then i'm going to get rid of this styling from here just after that i'm going to change this title so we specify here crude application and then i'm going to scroll down and here instead of this div i'm going to specify here section change this div with section something like this and inside this main right here i'm going to get rid of this styling post because i'm not using any styling because we are using kelvin css so we first add here h1 heading tag and then specify some text to it so to this h1 we're simply going to specify employee management save the changes and back to the project you can see you're going to have your title just out of that let me center this title and specify some delving classes to it so to specify television classes to this h1 heading tag we specify class names text excel so this will just increase the size of the text then specify md text five excel so after medium size of devices i want to increase the size of this font and then i'm going to specify text center to center all the text then i'm going to specify font bold and then i'm going to specify padding by 10. just out of that this mean here let me specify some class names i'm going to simply specify here padding by by so this will just add top and bottom padding to this main section back to my project and now you can see i'm gonna have the result something like this now what i want i want to change this font family so i'm gonna search for google font and click on this google font dot com website i'm gonna search for my favorite font which is pop-ins you can choose any font that you like and then i'm gonna choose the regular styling so let's choose this regular 400 and i'm going to choose this import statement let's copy this import styling and in the project you have to paste that import statement inside the global file so right up here you have to paste that import statement just are that let me get it off this html and body and right here i'm gonna say select all the elements and select all the descendant elements and then specify bond family pumpings so let me copy this font family and then specify that here so we are just specifying only the pop-ins found family to all the elements of html save this file back to the project and you can see i'm gonna have my pop-in spawn family to the text let me just zoom this out a little bit just out of that close this global file and inside this main right down here just out of this h1 heading tag right down here i'm going to create a container a television container class and then specify here mx auto so this will just center this division tag and then i'm gonna specify flex justify between and then i'm gonna specify padding by five so this will add top and bottom padding and border is going to be bottom so this will add only bottom border to this dick inside this div right here i'm going to create a div with the class left so this will just specify this division tag on the left side and then i'm going to specify here lex gap is going to be 3. so this is going to add a gap between all the flex item so inside this div right here i'm going to add my button so let's add here a button to this button we specify text add employee just for that let me add some classes to it to specify styling so to this button we specify flicks let me just toggle this window on the right side so you will see everything clearly so this is the button so we specify first flex then i'm going to specify bg indigo 500 this will specify background color to this button then specify text y after that we specify padding x4 so this will add left and right padding and padding by two this will add top and bottom padding then i'm gonna specify border after that i'm to specify rounded md so this will specify about the radius to this button like this and then i'm going to add here power attack software is going to be bgray 50 and our border is going to be indigo 500 as well as i'm going to say our text is going to be indigo 500 let me change this color to gray 800 so when you hover on this button you will get this gray 800 color to this text so this is a very simple add employ button now just out of this div right down here i'm going to create the collapsible form and after that i'm going to create my table so we'll look at that later just for now to this add button let me add an icon so let me first save the changes open a new tab and search for react icons i'm going to click on this react icon website and from here you can choose any icon you like i'm choosing this box icon so we need to first install react icons so just copy the statement back to the project open the terminal clear the screen and execute a command called npm install react icons when you press enter you'll have this library inside your project just after that once you have that you have to use that icon so to use that icon you need to first import that icon using the import statement and then use that as a component inside your react application at the top right up here you have to say import in the object you specify the icon name from in the single code you specify react icons and from the react icons you specify the icon name inside these curly braces so if you're back to the box icons here you can see you have different icons here what i want i want to get the plus icon you can see when i scroll down here i'm gonna have the user plus icon i'm just going to click over this icon this will just copy icon name and then i can specify that icon name inside these curly braces something like this just copy this icon name and here i'm going to paste that and create a component so i'm going to press tab now what you have to do is because you're using box icons you have to import these icons from the bi directory so just copy this import statement and specify that right up here replace this icon name with your icon name save this file back to the project and reload it you can see you're going to have your icon here just out of that if you want you can specify the size to this icon so just back to your project and specify your size so just specify here 23. so this is a 23 pixel size for this icon you can see i'm gonna have my icon here if i want to add some space i can easily do that by wrapping this icon inside a spawn tag i'm going to say here spawn specify class name here padding x1 and then paste my icon save this file back to the project and you can see i'm going to have my icon inside this add employee button now if you want to follow along with me from this section you can easily do that with git branches you have to switch your main branch into section one to switch that you specify a command called git switch and then specify the branch name zero one and press tab you're going to have your branch name when you press enter you're in the section 1 branch now you understand how you can create the title and the add employee button inside the application let's take a look at how you can create this table here inside my project let me first create a new folder inside this crude app inside this application i'm going to create a new folder and i'm going to name this components and inside these components i'm going to create a new file and name this file table dot js that's upon you can specify any name to this file here i'm going to export a default function and i'm going to name this function table in this function i'm going to simply return jsx inside the written statement i'm going to create a table so we call the html element table and to this table we specify some telling classes first is minimum width which is going to be full then specify the table auto the turbine css class and inside this we have table head and inside this t head we have different fields of the records just down here just out of this table here we are going to have the table body you all know this is a very simple syntax of table now inside this table head to add a new field you have to create a new row and inside that row you have different fills so you first add table row this is going to create a new row and inside this row we have here table data so inside this th we create a spawn tag and specify name text let me say this back to the index.js and just inside this index.js right up here i'm going to say import table from the component table file and then i'm going to import this table right down here just out of this division tag right here let me grab this command and specify that right down here so i'm gonna have this table just out of this division tag save this file i'm gonna have this field here name after that i'm going back to the table.js and here i'm going to specify some dillon classes to the spawn tab so specify class name text gray 200 then i'm going to specify some padding to this th tag so we specify class names padding x 16 and padding y to this will add text color and padding to this field just after that to this table row we specify class name bg gray 800 save this i'm gonna have this row with the background gray color just out of that let me copy this filled and specify that here and change this name to email save this let me duplicate this let me copy and paste that right down here i'm gonna change this name to salary duplicate the statement two more time this became birthday this is going to be the status and i'm going to duplicate this one more time and i'm going to change the status to actions i'm going to have these fields over here you can see i'm going to have these table fields what i have to do is i have to grab this table and put that inside the container so i'm gonna grab this and say here container paste the table here like this i'm gonna have this table inside a container to start that let me add here mx auto to center this table so we pass here mx auto now using mx auto we horizontal center the content to start that inside this table we need table data so inside this table body right here we add the table data so we first add here a class name so we add class names bg gray 200 this will add a background color to this table body and inside this we create a new table row every time you add a new data you create a new table row and inside that table row you have your table data so this is what the table head and inside this table body we have table data so we add here t d just add that to this table data before specify some class names so we first specify here padding x 16 so this will add left and right padding then add padding by two this will add top and bottom padding then i'm going to add flex likes row and then i'm going to say items center and inside this td right here i'm going to add the image tag later i'm going to convert this img tag into the nexus component just for now i'm going to leave this as it is and then i'm going to specify here hash because i don't have any image right now just out of this image right here i'm going to add a spawn tag with some class names so we add text center to center this text then margin left is going to be two and is going to be semibolt and inside this pawn we specify the name daily tuition save this file you can see i'm gonna have my first name here just for that to this table row we specify some class name of delvin so we specify bg gray 50 then specify text center to center all the text save this and this will just specify gray color to this background once we have this table data we need another data we add here table data and add a span tag inside it and the email is going to be daily tuition at the date gmail.com this is the email let's start that to this table data we specify some classes here padding x16 and padding y to save this file so i'm gonna have my email and i'm gonna do the same for all the fields so let me copy this table data paste that down here change this email and this time i'm going to specify here salary so we first add here a dollar dollar sign and then specify here salary after that i'm going to paste the table data again and then get rid of this email and then specify here date so just for now i'm just going to specify here date 10 0 5 20 20 duplicate the table data again get rid of this spawn tag now i'm going to add here a button so we add here a button for active and inactive status so i'm going to add here a button and inside that we have a spawn tab and to the spawn tag we have active or inactive user just for now i'm going to add active user so i'm going to add here a small tag and to this button before specify class cursor so when you hover on this button you will get the hand icon and after that we specify some classes to this spawn tag so to the spawn tag we specify bg green 500 this will specify a green background to this button you can see just after that we specify text white then specify padding x5 and padding y1 and then i'm going to specify rounded pull you can see i'm going to have my active button here just out of that just after this table data i need to add my action so i'm going to copy this table data specify that right down here and to this button instead of this smart tag i'm going to add here an icon as you know inside this index.js at the top we already have here an icon you can see we are using these box icons so let me just use this import statement and import few icons here inside this table so at the top right up here inside my table.js i'm going to say import in the curly braces i'm going to import bi edit icon and then i'm going to import bi alt icon from the react icon bi just out of that i'm using this icon right inside this table data so when i scroll down here i'm going to have this button and here i'm going to add this icon save the changes you can see i'm gonna have this icon here now to this icon let me just specify size size is going to be 25 pixel and then i'm going to specify some color to it so color is in the rgb value so i'm going to copy rgb value and specify that inside this double quote something like this save this file you can see i'm going to have this icon here with the rgb value and the size let me do the same for this trash icon so if i copy this scroll down and create a new button here with the class name cursor and inside this button here i'm gonna add this trash icon copy both the statements paste that right down here to the second icon and instead of this rgb value now i'm going to change this value and specify different color to it like this save this file you can see i'm going to have this button here now what i want i need to add some space so to this dd this one to this td we specify flicks justify around and gap is going to be 5. save the changes you can see i'm going to have some space between these icons so this is how you can simply create a table inside this application let's take a look at how you can create a form inside this application so when you back to your application right here inside this index.js you can create a new form just out of this division tag let me grab this command and paste that right down here so before this table we create a new form so i'm going to open the explorer tab and inside these components we create a new form so we add here form.js file and inside this form.js i'm going to say export default function form and then i'm going to say here return statement to print jsx here i'm going to simply add a form like this and save the changes back to the index.js at the top right up here i'm going to say import form from the component form file and then i'm going to copy this form and then specify that right down here so this is going to add a form inside this table and i save the changes you're not going to say anything because inside this form we don't have any content so just out of that let me get rid of this action and to this form right here i'm going to add a division tag with the class input type that's upon you you can specify any name to this class and then i'm gonna add here input text box so i'm gonna say here input of the type text and then specify name to it name is going to be first name this input text box is for first name just for that i'm gonna add here placeholder which is going to be first name save this file you can see here i'm gonna have my text box what i want i want to grab this form and put that inside a container so inside this index.js i'm going to grab this form and say container and put that form right inside this container just after that once i have this form inside a container i'm gonna say mx auto to center this container now i'm gonna have my form centered at the document after that i'm gonna open the form.js just sort of that once we have the input text box let me specify some classes to it so here i'm going to specify class names so i'm going to first specify border to it so we specify here border then specify width is going to be full then add padding x5 so this will add left and right padding and add top and bottom padding three then add focus focus is going to be on the outline so when you focus on the input text box i'm going to specify outline none so you're not going to get any gray border to this input text box just for that we specify here rounded md save this you can see i'm going to have this input text box here just after that i'm going to create another input text box so let me copy this input text box paste that right down here and change this placeholder to last name save this this will add another input text box you can see now just out of that what i want i want to grab this input text box and put that inside a dedicated division tag so i'm gonna grab this input text box create here div right down here with input type class and then specify my input text box here something like this save this just out of that let me copy this div paste that right down here and this text box is now for email so we pass here email then i'm gonna duplicate this div copy and paste it again and this time this is for salary so we pass here salary just out of that let me save the changes so here i'm going to have four text boxes after this div right down here i'm going to add here active status radio buttons so i'm going to add here div and inside this div we have another leave for form check so we add here another div with the class bomb check and inside this div we have input type radio and then specified name to it name is going to be status save this file you can see we have this radio button here just are that we specify some classes to this input text box so we specify here class names form check input appearance none rounded is going to be full then specify height which is going to be 4 and width is going to be 4. then i'm going to specify border to it so we pass here border class something like this when i save the changes you will get the result something like this just out of that i'm going to specify border gray 300 just for that i'm going to add here bg white so background color is going to provide then i'm going to say here checked if the user click on this radio button if it is checked then we specify bg green 500 just out of that we specify checked border green 500 we also going to specify grain border when the user click on the button so we pass here border green 500 after that we specify focus focus is going to be outline none so i'm going to just remove the outline when the user focus on this radio button just after that i'm going to add transition and add a duration duration is going to be 200 millisecond after that i'm gonna add margin top one align top bg no repeat then i'm going to add bg center vg content load left margin right 2 and cursor pointer so there is lots of classes we specified to this radio button if you want you can grab all these classes and specify that in the global.css file that's upon you so once we have this radio button to this radio button we specify value value is going to be active this is the active radio button then i'm going to specify id and id is going to be radio default 1 so this is the default id to this radio button just out of that just out of this input text box right down here we add a label and this label is for this radio button so we copy this radio id and specify that inside this html form right here and this label is for active for active users you can see you have the result like this just sort of that to this label we specify some telling classes so classes is going to be inline block text gray 800 and save the changes that's it so we have this active user so let me copy this division tag this one and specify that right down here and this is the inactive user so i'm gonna say in active save this file you can see we have this inactive user i'm gonna change this id to radio button 2 copy this paste that here and change this value to inactive something like this so now you can switch between these radio buttons now just not that just out of this div right down here inside this form we have a button to submit this form so we add here a button with the text add save this file so we have here a button let me specify some classes to it so class names is going to be flex then i'm going to specify justify center text md width is going to be 2 by 6 so this will add 33 width to this button after that we specify bg green 500 just after that we specified text white adding x4 and padding by two so this will add top bottom left and right padding after that we specify some border then specify rounded md and after that we specify howard effect so we pass here over bg gray50 and our border green 500 text green 500 let me save this whenever on this button you can see i'm going to have this result just after that at the end i want to align this form properly so what we need to do is to this form right here we specify class names so class names is going to be grade we specify grid layout to this form just for that we specify lg grid calls to i want two columns to this grid so we pass here create calls to save the changes i'm going to have the results something like this just are these calls i'm going to say bit 4 by 6 so this will add a 66 percent width to this grid just after that i'm going to specify gap which is going to be 4. here i'm going to have the result what i want just out of that i also want the date input text box right down here i'm gonna add this input text box but before that let me change this name this is for salary this is for email and i'm gonna copy this division tag paste that right down here this is for date and then i'm going to specify your input type date name is going to be date and then i'm going to specify class names to it so let me get rid of all the classes first from this date and specify first border padding x5 padding by 3 and focus is going to be outline none rounded md and save the changes you can see i'm going to have this date input text box so i'm going to have the result what i want just after that to the steve to this div we specify some class names we specify flex gap is going to be 10 and items is going to be centered save the changes here i'm going to have the result what i want now just out of that if you want you can add some padding to this form right here you can add here padding five five so this will add top and bottom padding to this form you can see so this is the simple form we are using in this application now once you understand how we can create this form inside this application let's take a look at how you can get the data from this form when you click on this add button so what we need to do is we need to get the data of these input text boxes in the form of object so we can pass that object to the back end and store that data as a new record in the database so i'm going back to the project and here inside this form i'm going to grab the data of this input text boxes and return as an object there are different ways you can get the data from the phone using react state or using use reducer or using some external libraries here in this project i'm using use reducer hook use reducer hook allows you to get the data from the form very easily so what we have to do is we need to first import here a statement so we need to say here import and we need to import here use reducer from the react library then inside this form right here we need to say constant in the array this use reducer is going to return two variables so we're gonna structure that variables inside this array so here i'm gonna say use reducer and this reducer hook is going to take two arguments first is the reducer function and second is the initial state the hook then return an array of two items the current state and the dispatch function so i'm going to pass here a function like this and as a second argument you need to specify the initial value of this reducer i'm going to specify initial value and object now instead of creating a function inside this reducer let's create a function at the top right up here here i'm going to create a function so i'm going to say here constant form reducer is equal to and this function is going to take two arguments first is a state and second is event inside the state variable you get the previous state and inside this event you have the current dispatch function value don't forget to specify here an arrow like this and then i'm gonna pass this reducer function right here something like this just for that this function is going to return an array of two items we are going to destructure that values inside this array so here i'm going to say form data and set form data now this is the state and this set form data is the dispatch function using this function we can set a new state to this reducer and using this form data we can get the current state just after that inside this form reducer i'm going to return an object and inside this object what i want to do is when i call this set form data i want to update the previous state whenever the new state comes in i want to update my previous state so to do that i'm going to say here spread operator and call a state and then pass here comma and then here i'm going to pass an object with a new state value so i'm going to say here name then specify event dot target dot value so now when you call this set from data function to this input text box it's going to return the value to this event dot target dot value so the name value became the value of the input text box so this property is going to get the value of this input text box but what i want to do is instead of just specifying this hard coded name property here you can see we have different values here first name this is the last name then we have the email salary and so on so instead of this name inside this array we pass event dot target dot nip so using this statement we can get different properties with different values now just for that to this input text box here we pass on change event so whenever we change anything i'm gonna pass and call a function set form data so i'm gonna call this dispatch function whenever i change anything inside this input text box and i'm gonna do the same for all my input text boxes so i'm to copy this and paste this statement to all my input text boxes and don't forget to do the same for these radio buttons something like this now let me explain this statement let's suppose that you type something inside this first name input text box that is going to call this set form data function and this set form data function is going to create a property called first name right here and then it's going to get the value of this input text box and pass that value to this property using this statement and using this state and this spread operator we are going to override the previous value now just for that inside this form i'm gonna call a function to get the submitted data so at the top here i'm gonna say constant handle submit is equal to i'm gonna call here a function like this and to this form we call here on submit event and to this on submit i'm gonna pass this function handle submit and just out of that right inside this handle submit i'm gonna say console.log form data save the changes back to the project and open the console reload the browser and now when i type something here let's suppose if i type daily tuition and i'm gonna pass the email and here is the salary when i click on this add button you can see i'm gonna get my data here and the form quickly reload this is because this is the default behavior of the form so we need to solve this problem by adding here the event parameter and call here event dot prevent default so by adding this function you can prevent the default behavior of the form and now when i click on this add button you can see right now you're not going to get anything because this is the initial state of this form let me reload the browser and add something here deletion email and salary when i click on the add button you can see you're going to get the data as a response you can see you're only going to have four properties here because you only change four input text boxes let's suppose if i change this date and this active user when i click on the add button now inside this object i can get the status and the data as well now just for that let me add an icon here to this add button so scroll down to this button right here i'm going to add an icon so let me first add here add and in the spawn tag i'm going to add an icon so let me first import the icon at the top here i'm going to say import bi plus from react icons bi and i'm gonna use this box plus icon inside this spawn tag don't forget to change the style so i'm gonna say size 24 picks up and to the spawn tag i'm going to specify class paddingx 1 this will add space between this text and this icon so this is how we can simply get the data from the form let's suppose the user tried to submit the empty form if the user click on this add button this is going to return the empty object what i want to do is if the user try to submit the empty object or without submitting any data i want to return a console message here i'm going to say if we don't have form data so i'm going to pass here form data and pass here exclamation mark then i'm going to return console.log with the message don't have form data back to the project reload it and when i click on the add button i'm still going to get the same result this is because this statement is not equal to null or undefined to check the object is empty or not you have to call here an object so you have to say here object dot keys and inside this you have to pass your object bom data and then you need to say dot length if it is equal to zero then return this console message so if we don't have any value inside this form data only then return this console message let me save these changes back to the project and reload it now when i click on this add button you can see i'm gonna get this error message don't have the form data if i add something here i'm gonna get that data as a response now just for that let's suppose the user specify all the values of these input text boxes and click on this add button after that i want to submit that data to the backend and display a successful message so let me just first create that successful message so when we connect the backend to this application so we can easily get that successful message so what we are going to do is inside these components right here i'm going to create a new file name this file success dot js this component is just for the successful message here i'm going to say export default function and the name of the function is success and then here i'm going to say return in this parenthesis i'm going to say deep inside this div we create another div and inside this div i'm going to say form data added and just add that to this first div i'm going to specify some delve in classes so we pass here success the custom class then specify container and mx auto delving class to center this success message to start that here i'm going to specify class names links justify center mx auto then i'm going to specify border then specify border colors so we pass border yellow 200 then specify background color yellow 400 then specify width width is going to be 3 by 6 so this is equal to 50 then i'm going to specify text gray 900 and text md that i'm going to specify margin y 4 this will add a top and bottom margin padding by 2 and then i'm going to specify text center to center the text and just out of that i'm going to specify bg opacity 5 so i'm going to specify opacity 50 to this message let's start that let me save this back to the form and what we're going to do is when we have the data inside this form instead of this form i'm gonna display that message so just out of this handle submit here i'm gonna say if object dot keys form data dot length if it is greater than zero then return this success component let me save these changes back to the project and now when i click on this add button i'm gonna get this error message but if i have a value inside this xbox you can see i'm going to get this success message as a response whenever i type something inside this text box i'm going to get the success message just for that i'm going back to the success.js instead of this hard coded value i can just get the value from the parameter here i'm gonna say message copy this and then specify that right here something like this as well as i'm gonna add here an icon so i'm gonna say here import statement so let me copy the import statement right from here this one paste that inside this success and change this icon name like this and use that icon right here don't forget to change the size so i'm gonna specify here size which is 25 and specify some color so i want to specify here some rgb color so i'm gonna copy and paste the rgb color here save this file back to the form.js and to this success now we need to pass message it's going to be data added back to the project and reload it now when i click on this add button i'm gonna get this error message but when i type something inside this input text box i'm gonna get this message data added successfully just for now let's understand how you can create the same thing for the errors so if you have any error you can display that error instead of the form so let's create a new component for the error i'm going to say here component and create a new file bug.js let me copy the code from the success copy it and specify that inside this bug instead of success now i'm going to pass your bug the function name and i'm going to leave everything as it is just change these colors of this error so instead of border yellow now i'm going to pass border raid 200 bg raid 400 and just out of that i'm going to change this rgb value something like this save this back to the form and import this component so i'm going to say here import on the bug file copy this and instead of success right now let's suppose if i print this book back to the project reload it if i type something in this text box you can see i'm going to have this message if i want to change this message i can say here error and save the changes don't worry later i will show you can use this component in this application now let's make this form collapsible and create another form to update the data of the employee so when you click on this add employee button we're going to display this form create a new employee and when the user click on this update button i'm gonna display the update form with the employee value inside these text boxes so i'm gonna just back to the form.js and inside this component i'm gonna create two files first for the add user and so i'm gonna name this file add userform.js and i'm going to create another file and name this update user form.js now i'm going to copy all the code of this form and paste that inside both these files now inside this form instead of all this data now i can get this data from this add and this update form dot js file and i'm going to get rid of all the code from this form and get rid of this bomb reducer something like this now inside this form just for now i'm going to return this add user form so let me just change this name of this to default function i'm going to say here add user form let me copy this and change this name as well this became update user form save this file back to the add user form save this file back to the form and here let me get rid of all this import statement and here i'm gonna say import add user form and then i'm gonna copy this component and inside the return statement i'm just going to return that component something like this you will have the same result back to the index.js right up here so if you create here constant i'm gonna say visible set visible is equal to use state i'm going to call the react hook use state from the react library so when i press enter this will import this statement and now i'm going to call this hook and the default value of this hook is false just sort of that i'm using this visible property to toggle the form this one so i'm gonna grab this form and specify that inside a curly braces and here i'm gonna say visible if it is true then display this form otherwise don't want to display anything so i'm just going to return here empty element i wanted to change this value when we click on this add employee button so to this add employee i can create the on click handler function so at the top here we need to say constant handler is equal to call here and handler function something like this then specify here set visible is going to be true just add that to this button we specify onclick handler this function so when you click on this add employee button you will get your bomb back to the project and now when you click on this add employee you can see you're going to get your form but now what if i click on this add employee again this is not going to do anything this is because we set this value to true now what i want when the value of this state is true and then if i click on the add employee button i want to make this value false so we can easily hide the form from the ui so to do that here inside this set visible you can simply say here visible if it is true then return false or return true back to the project and click on the add employee you can see i can toggle this form this statement is a valid statement but you can simplify this statement by adding exclamation mark to this visible so instead of this statement you can simply say here visible and before this visible you add exclamation mark something like this and now when you click on this add employee you'll get the same result let's do the same thing for update form so i'm gonna back to the form.js and here i'm going to create a simple variable i'm going to say constant flag is equal to true the default value of this flag is true right now i'm going to change this black value later in this course just for now i'm going to leave this as it is and here i'm going to say return now when the flag is true i want to display the add user form otherwise display this update user form so inside this return statement i'm going to create the wrapper first so i'm going to grab this division tag right from here this one this container grab it and specify that inside this form something like this and get rid of this division tag right from here so you only have the form inside this index file save this file back to the form and here you have to say if the flag is true then i'm going to print this add user form or you can self close this component like this and then if this flag is false i'm going to import and display the update user form so i'm going to copy this and paste that right here both forms are identical so let me change a few things from the update form so i'm going to back to the update form scroll down and instead of this add button right now i'm going to change this to update then i'm going to change this plus icon and i'm going to convert this icon to bi brush icon this one don't forget to import this icon at the top right up here you have to import this icon like this save this file and back to the form now if i make this flag false i'm gonna get this update button let me change some styling of this update button so i'm gonna just back to the update button and here instead of bgreen i'm gonna specify here yellow and this is going to be 400 let me save this now you can see i'm gonna have this update form now if you change this flag to true you'll get ad employee form so using this technique you can toggle between update and add new user form now let's understand how we can get this table data from the json file so when we connect the mongodb database we can easily get the json response and display all the data inside this table so i'm going to create a new folder inside my project let me close all these files right from here and then inside this project i'm going to create a new folder and i'm going to name this folder database and inside this database folder i'm going to create a new file name this file data.json now this is a mimic of my backend data don't worry in this project i'm going to connect the mongodb and get this data from the mongodb database just for now to mimic a backend server i'm going to just copy and paste some json data inside this data dot json file so i'm going to create here an array of object and inside this object we have the data of the employee we have the employee id name author is email salary date and status don't worry if you want to get this data you have to just check in inside the 007 database branch when you check in inside this branch you can easily get this data.json file now once you get this data just back to the table.js and here instead of this hardcoded values i can iterate over this area of object and display all the data so what i'm going to do is instead of this table i'm going to grab this a table row and iterate over this area of object so let me create a new function for that so we can iterate over this table row i'm going to create here a function and i'm not going to export this function this function is useful only inside this component so i'm just going to say here function dr means table row and then here i'm gonna say return inside this return statement i'm gonna return the table row so inside my table right here when i scroll down here i have the table row of this table body i'm gonna grab this and paste that inside this tr function something like this and don't forget to print this function right here here i'm going to say tr like this but if you duplicate the statement you can see you will have multiple records now what i want i want to iterate over this area of object and pass these values to this table so right here is inside this parenthesis i'm gonna pass all these properties this one the id name altar and so on so inside this parentheses here i'm gonna call an object and then i'm gonna pass here first id then pass name altar email salary date and status i'm gonna have all these properties inside this data dot json file just for that i wanted to pass these values to this hard coded data so instead of this image right now i can specify here in the curly braces altar and if this value is undefined then i'm going to return hash means return nothing then to this deletion here i'm going to return the name so in the curly braces we pass name and if this value is undefined or no i'm going to return unknown as a response just out of that i'm going to copy this do this for this email so paste this code here and instead of name i'm going to specify here email the same for the salary paste the statement and this is for salary this is for date so we pass here date like this and just out of that i'm gonna do the same for this status as well so instead of this active i'm gonna pass here cuddle presses and pause status something like this right now when i see the changes i'm gonna get error this is because the id is not defined inside this table row so we need to pass values to this data when we call this function so here let me just pass values so as you know inside this data.json i have all the values of these properties so inside this table at the top here i'm going to first say import data from double dot forward slash then specify the database folder and then i'm going to specify this data.json file from this file i'm going to get this data and right down here inside this t body here i'm going to add curly braces and then i'm going to iterate over this area of object so we pass here data dot map and using this map i'm going to iterate over the area of object so we pass here two parameters first is object and second is the index of that object and from this function i'm gonna return the table row function this one so here i'm gonna pass t r like this i can self close this component something like this and then to this tr we need to pass values so inside this obj inside this object i have all the values of this properties so here i can say curly braces call the spread operator and pass object and make sure you pass the unique key to this parent component so we pass here key is equal to and pass the index value this one so the next chairs won't return any warning let me see these changes back to the project and you can see you're going to get the data what you want now once you understand how we can get this data from the dot json file let's take a look at how we can get this data from the mongodb database i'm gonna search for mongodb and open the mongodb.com website once you open it you have to just sign in with your google account or with your username and password once you've done that you will have the windows something like this right here you have to create a new project you have to click on this drop down menu and click on this new project button once you click on it you have to create a new project i only have a project here this store so i'm not going to create any project so once you create your new project you have to build your database so just click on this build a database button once you click on it it will ask you to choose the cloud database i'm using the free version of mongodb so just choose the shared version so we're going to choose this free shared server and click on this create button now just for that you can choose your provider then you can choose your region i'm going to leave everything as it is and then at the bottom right down here i'm going to choose the cluster name called next.js crude and then i'm going to click on this create cluster once i click on it this is going to create a new cluster inside this database it will take about three to five minutes to create a new cluster while it's creating you have to create a new user and pass the database access to the user so just click on this database access you can see i already have a user here admin to create a new user just click on this add new database user then choose the username and password then just click on this add user button this is going to create a new user inside this database using this user we are going to access the database just out of that you have to click on the network access and then add your ip address here so just click on add ip address and then click on this add current ib address and click on confirm once you've done that just back to your database when you back your database you can see you will have the cluster with the name next year's cloud now once you have your database let's connect this with next nature so just click on this connect button and just choose this connect your application to your cluster using mongodb native driver so i'm going to choose this second option and i'm going to copy this link and i'm using this link to connect this mongodb cluster to my nexus application then i'm going back to the project and inside this database here i'm going to create a new file name this file con dot js and inside this file here i'm going to create a new constant variable and i'm going to name this uri is equal to and then in the double code i'm going to pass this link what you have to do is you have to get rid of this password and specify the user password here so get rid of it and i'm going to pass my user password which is admin 123 that's it just for that you have to just pass this uri to the connect function of mongoose now instead of using mongodb i'm using here mongo's driver to connect mongodb with nextgear so let me first save this file open the terminal clear the screen here i'm going to say npm i for install iphone d save this package as development dependency and then i'm going to say here mongos when i press enter this is going to install this package as development dependencies inside this nexus project once i have it let me just start the development server again in pm run there this will start the development server just out of that right inside this connection file here i'm going to create a constant function so i'm going to see here constant connect is equal to and then i'm going to pass here a sync function so we'll have the asynchronous data just sort of that you need to add here try and cache so we can catch the error as well so we pass here try and after this try we have the catch to catch the errors inside this catch we are going to return a promise with reject function so this is going to reject the promise and then i'm going to return errors with it just sort of that inside this try we have to connect the mongodb to the nexus so we have to call the mongoose connect function so at the top here i have to say import mongoose from mongoose so the mongoose library is going to return a default object called mongoose and using this you can connect your database so i'm going to say here mongoose dot connect this is going to return a function called connect and using this function we are going to connect the mongodb so the first thing we need to pass is the uri so inside this connect as you know at the top here we have the uri so we pass here uri something like this and this is going to return the connection object so we can get that inside a variable so let me just pass here a constant in the object we destructure a connection object so we pass here connection so this statement is going to return a property called connection i'm going to structure it with javascript restructuring and here i'm going to pass away so we'll have all the data asynchronous just for that right down here if the connection dot ready state if it is equal to one then i'm going to execute this if statement and here i'm going to say console.log database connected and we need to call this in the api out so let me copy this and right down here we need to just export this so i'm going to secure export default and then specify connect so we can get this function in the other files as well let me save this file back to the pages and here i have api inside this api we have a default route called hello.js right inside this i'm going to call here my connect function so we first need to say import connect from double dot forward slash and then i'm gonna specify double dot forward slash again and then i'm gonna specify the database and the connection file from this i'm gonna call this connect function something like this let me save these changes back to my project and then i'm going to type here api hello this is going to call the hello route of the nature now i'm going to have this response now if you back to the terminal here you can see you have your console message database connected so now you can see we successfully connected the mongodb database with next years now once we successfully connect the mongodb with nexus let's take a look at how we can create this api now inside this api folder we only have one api called hello.js this file is going to create an endpoint api hello and this endpoint is going to return this data now what i want i want to create the user endpoint and return all the data of the users as a response when we make a get request as well as we need to make post put and delete request to manipulate that data so inside this api folder i'm going to create a new folder and name it users this is going to create the endpoint path user and inside this i'm going to create a new file name this file index dot js this file is now represent the user endpoint means if i return something from this file you have to call this a user's endpoint to get the data of this index response inside this index.js i'm gonna call this export statement so i'm gonna copy this and pass this function right inside this index and at the top here i'm going to call this mongodb connection so here i'm going to say import connect from double dot forward slash double dot forward slash again and then i'm going to specify double dot forward slash then i'm going to select the database and the connection file inside this connection i have this connect dot now just out of that i have to make this function asynchronous so before this function here i'm going to say a sync so this will just make this function asynchronous just for that inside this function i want to check the method so let's suppose the user make a get request i want to first validate that request and return a response according to that method let me show you what i want to say here i'm going to create a command and say type of request you all know there are different type of extradite request like get post put and delete these are the http requests i want to check that if there is a get request return a different response if it is a post request return a different response and so on so from this request i can get the method object right down here i can say constant in the object i'm going to structure a property called method from the request object just out of that let me get rid of this command and here i'm going to call the switch statement so i'm going to say here switch method and then i'm going gonna pass here switch cases so let me first add here case one which is if it is a get request then return this statement something like this but with this statement instead of this name i'm going to return method name so we pass here get request then i'm going to pass the method as well so here i'm going to say method so this object is also going to return the method name let me do the same for the other http request here i'm gonna say case if it is a post request then i'm gonna return the response so i'm gonna pass here post let me do the same so copy this paste it right down here and this is a boot request so we pass here put let me do the same for delete request so let me duplicate this and instead of put here i'm going to pass delete something like this and now at the end we need to pause here default kits so we pass here default and here inside this default we passed the header first so we first say response dot set header allow in the array i'm going to pass get post put and delete so we are only going to allow this request from this user's api endpoint just out of that right down here i'm going to say response dot status which is 405 and then i'm going to say end and inside this i'm going to say method dollar sign and then call this method property and then i'm gonna say not allah so this statement is going to return an error with the http request now let me get rid of this and now at the end you have to just break all these cases so if this method matched with this first case we need to execute this response and break this switch so i'm gonna say here break something like this let me do the same for all the cases let me copy this and paste that right down here save this file and then i'm going to scroll up and here i'm going to say connect dot mongo's dot cat if there is an error inside this mongodb database i'm going to catch that error and return response so i'm going to say here response dot status which is 405 and then i'm going to say dot json and inside this json i'm going to return a json object so i'm going to say here error and i'm going to specify an error error in the connection so if there is an error inside a connection you will get this response from this api input let me save this file and open the postman api testing tool now i'm going to open the postman api testing tool to test this api so i'm gonna just first specify the localhost 3000 api users this folder name now this folder is now the api endpoint now when i make a get request i click on the send button you can see i'm gonna get a response here method get and name is get request if i make a post request here and click on the send button now this is a type of post request and i'm gonna get the name post request do the same for the put and if i select the delete and make a request i'm going to get here method delete with the name delete request so this is how you can make the http request inside your api now instead of having this response we are going to make a controller to handle this response and return a response what we want now once you understand the type of request from this user endpoint let's take a look at how you can create a controller for all these http requests so let's suppose that you make a get request return a different controller on the post request we return the post controller and so on so inside this database i'm going to create a new file controller and create all the controllers inside that file but before that let me just open the con.js file and instead of having this uri inside this file for the security reason i'm going to grab this url and then specify that inside a dot envy file so inside this project right here i'm going to create a new file and name this file dot env dot development and inside this file i'm gonna grab this uri this variable specify that here and i'm going to specify equal to sign and in the double quote i'm going to specify this uri so i'm going to grab this and specify that inside this file right here now let me save these changes close this file and back to the connection get it off this first constant variable and instead of this uri now here you have to say process dot env dot the variable name which is uri that's it this is going to return the uri to this connection close this connection file and back to the users right here i'm going to create a new controller for this get request so once you put your connection string inside your dot env file back to the database folder and here i'm going to create a new file and name this file controller dot js that's upon you you can create all the controls inside this index.js file as well so inside this controller right here i'm gonna first add a command controller and right down here i'm gonna first say export a sync function and i'm gonna name this function get users or you can specify name to this function get employee now this function is going to return a response to this endpoint so what we need to do is we need to pass both these parameters to this controller right here request and response back to the index.js at the top right up here i'm going to say import in the object i'm going to say get user from the database controller file and copy this get user and specify that right here something like this and don't forget to pause request and response parameter now let me get rid of this statement save this file back to the controller inside of this gate user i'm going to say try and catch so i'm going to call here try and catch syntax and inside the cache i'm going to say response dot status which is going to be 404 dot json and inside the json i'm going to return error and then i'm going to specify the error error while fetching data or you can specify here employee data and inside this get user i'm simply going to say response dot status 200 which is the okay status and then i'm going to say dot json and inside an object we pass user and just for now i'm going to say here get request now let me save this js and open the postman api testing tool and just out of that i'm going to select the get method and i'm going to make a request to localhost 3000 api users when i click on the send button you can see i'm going to get a response user get request now what i want instead of getting this response i want to get the data from the mongoober database so to get that you need to create a mongodb schema so you need to first specify structure to your mongodb database so what we are going to do is inside a project i'm going to create a new folder name this folder module and press enter and inside this model folder i'm going to create a new file and specify name to it user.js and here i'm going to create the mongodb schema so what we need to do is inside this file we need to specify the structure of the document you have to first import few objects here from mongoose library so we need to say here mangos and from mongoose you need to import schema the schema class then you need to import models and then you need to import model we imported models and model from this mongoose don't try to confuse with these variables you saw that here i'm going to say constant user schema is equal to and then we need to create a new object or you can say a new instance of a schema class and inside this you need to specify the structure to the document so inside an object we specify first name inside this name we specify the user full name so we pass the type of it which is string the type of data we are storing inside this name property is string then i'm going to say author inside this author i'm also going to insert a type of string data then i'm going to specify here email which is a type of string then i'm going to specify salary which is type of number then i'm going to add here date date is a type of string and status and this is also a type of string so this is a simple structure of my mongodb document now just are that with this structure you have to create a new model in mongodb to create that you need to say model variable and then inside the parentheses you need to specify the name for this model i'm going to specify name user and then here to specify structure as a second argument so we pass your user schema here this one so this statement is going to create a new model inside a mongodb now what if you already have the existing model in the mongodb database in that case you can specify here models this variable dot user your model name if we have this user model inside a mongodb database then return that or create a new model so we pass here r just after that we need to store this data inside a variable so i'm going to say constant user is equal to and then right here i'm going to say export default user or you can specify here users something like this let me save this file close this user model and inside this controller right here you need to import that so here i'm going to say import user users from single quote double dot forward slash then specify the model folder and then specify the user.js file and using these users you can access the mongodb database so right inside this try here i'm going to say constant users is equal to user this mongodb schema and then i'm going to say dot find now this find method is going to find all the document from this user document so here inside this you need to pass empty object so this is going to return all the documents as a response and now we need to specify here of it so we'll have all the data asynchronous just sort of that here i'm going to say if if i don't have the user's data this user's data inside this variable then i'm going to return a response dot status which is 404 dot json inside this json i'm going to return error and then i'm going to specify here error data not and after that if we have data inside these users i'm going to execute this user dot status 200 and instead of this object i'm going to just specify here users this variable save this file open the postman api testing tool and click on the send button now when i make a request you can see i'm going to get an array as a response this is because inside my mobile database i don't have any record that is why it's going to return the empty array next we need to add a new record inside the mongodb database and get that using this get user so let's see how to do it now once you understand how we can get the data from the mongodb database using this get user controller let's take a look at how we can post the data or we can say how we can create a new employee so just before this function let me specify the endpoint path right here and right down here i'm going to do the same and specify the endpoint path and this is a type of post request so i'm going to say here post and i'm going to make a request to these users just down here i'm going to create a controller so i'm going to say here export a sync function the function name is post user and then we need to pass request and response parameter and inside this function here we need to add first try and catch block to try and catch the errors and inside this catch here i'm gonna say return response.status is going to be 404 dot json and inside the json i'm going to return an error so i'm going to return this error as a response from this function just not that inside this try we need to first get the data from the user and then throw that data inside a mongodb database to get the data from the user you need to call request dot body using this request.body you can get the data from the user so let me store this data inside a variable constant form data is equal to i'm going to store this data inside this variable and then right down here i'm going to say if if i don't have this form data then i'm going to return a response so i'm going to say here return response dot status which is going to be 404 dot json and inside the json i'm going to return a response so we pass your error form data not provided that's upon you you can specify any error inside this response just out of that if we have data then we can say here users this user object dot create this create method is going to create a new user and store that in the mongodb database this method is going to have two parameters first is the form data or you can say the post data and second is the callback function so as a first parameter we pass form data this variable and as a second parameter we pass a function so we call here a function like this and to this function we can get two parameters error and data now this function is only going to execute when the data is successfully inserted in the database so here i can say return response dot status and status is going to be 200.json and then i'm going to specify this data here this one and if you want you can return this user that's it now let me test this post request save the changes back to my postman api testing tool i already have this post user inside this api testing tool so let me just insert this value inside my mongodb database so what we need to do is we need to first select the post http request so we first select that then the end point is going to be the same localhost 3000 api users and then we need to select the body and inside this body you need to select the raw data and select the json format we are returning the data as json format so we need to pass your json and inside this json right here i'm going to return this data to the post request so i'm going to specify this object here and click on the send button when i click on the send button i'm gonna get a response here method post name post request this is because in the index.js i didn't call this post request so at the top inside this import statement we specify post user copy this function get rid of this response and specify this function here don't forget to pass a request and response parameter save this file back to the postman api testing tool and now when i click on the send button you can see i'm gonna get the response from the mongodb database here i'm gonna have all my data but you can notice you will get id with this data mongodb is going to create and specify unique id to all its data so this is the unique id to this object now let me just make a get request and get this data from the get user endpoint so i'm gonna click on this get user and make a get request on this api users when i click on the send button you can see i'm going to get a response from the mongodb database and now if you want to add another record you can just click on the post user make a post request and inside the json you have to just replace this data with the new one so inside this data.json file as you know you have the data of all the users let me copy this and specify that right here and then i'm going to make a request so when i click on the send button you can see it's going to create this data and return the response and now we go back to the get users click on the send button you'll get two records as a response you can see and now you can iterate over this array of object and display all your records in the ui creating a new data inside a mongodb database using this post user controller is easy now let's take a look at how we can update this user using a put request of http so right down here i'm going to put this command and space over here put request we need to specify this http url and we also need to call here an id for example if we want to update the first user we specify the id of that user so i'm going to specify that id here with the url so let's create this update controller so we need to first say here export a sync function and the function name is put user and we need to pass request a response parameter with this function and then we need to add pri and catch block and inside the sketch right down here i'm going to say response dot status which is going to be 404 and then i'm going to say dot json and inside an object we pass error and inside this error i'm going to say error while updating the data and inside this try what we need to do is we need to get the updated data as well as the user id so let's first get the user id so to get the value from the url you need to call request dot query using this query object you get the url id so we need to say here constant in the object i'm going to structure a value user id when we make a put request i'm going to pass this user id value inside this url just out of that right down here we need to get the user data as well so i'm going to simply say here constant form data is equal to request dot body just down here i'm going to say if we have user id and we have form data if we have both these variables and if we have values inside both these variables then i'm gonna say await users the schema and then i'm gonna call here dot find by id and update i'm gonna find the object and update that with its id so we need to pass here user id as a first argument so this will just find this object with the user id and update that with the form data so as a second argument we pass the form data this variable just out of that right down here i'm going to say response dot status which is going to be 200 and in the json i'm going to return the form data the updated data as a response and if this if statement won't execute then i'm going to say here response dot status 404 dot json and inside an object we specify error user not selected or you can specify your own error here that's upon you now let me save these changes so i'm going to open the postman api testing tool and you can see inside my database i'm going to have two objects now let me update the second object this one so we need to copy this id and open the update user and we need to make a put request so we select the put http request then we need to pass value to this user id so we pass here an id so we copy this second id and then pass that right here just out of that i'm gonna select the body select the raw data and inside this i'm gonna specify the updated data so we need to first select the json format then specify the object with the updated values and if you back to the get user then you can see we have the salary 21 000 but when i make a put request and update the data i'm going to change the name author email and salary when i click on send button you can see i'm going to get an error message this is because we need to specify value to this user id instead of just passing this value right here let me get rid of this id right from here and then i'm going to specify here user id and then we pass this id here something like this a send request i'm going to get a response from my endpoint so if you're back to the index.js you can see this is a response from this put request now let me get rid of this and pass the put request controller here so i'm gonna say here put user call this function so i'm gonna copy this and specify that right here with request and response parameter let me save the changes back to the postman api testing tool and click on the send button again when i click on it you can see i'm gonna get the response back from the postman api testing tool so this data is now updated if i back to the gate users click on the send button you can see now the data is updated now if you want to get the data from this function then you can do that as well so if i say here constant user is equal to and then i'm going to pass this user to this form data save this file back to the project and instead of 12 000 right now i'm going to say here 11 000 when i make a send request you can see i'm gonna get the complete id means the complete record as a response from this controller now once you understand how you can update the data of the mongodb database let me show you how you can delete the user now let's take a look at how you can delete the record from the mongodb database so if you're back to the controller then you can notice here to update the data we need to get the user id as well as the form data but when deleting the user you don't need the form data or you can say the posted data instead you just need the user id so let me just copy this command and write down here let me create the delete user so i'm going to put this comment here and say this is the delete request and the url is going to be the same right down here we need to say export a sync function then i'm going gonna name the function delete user and then we need to pass request and response parameter inside this function we need to call try and catch like this and inside this cache here i'm gonna say response dot status 404 dot json and inside the json i'm going to return error if there is an error inside this delete request then i'm going to say here error file deleting the user and just out of that in the try block here i'm gonna say constant in the object because user id is equal to i'm gonna get this user id from request dot query when you make a delete request to this url you need to pass a user id with this url just sort of that right down here i'm going to say if we have user id then execute this if block and inside this if block i'm going to say constant user is equal to await and then say here users dot find by id and delete using this method we are going to first find the record using id and delete it so as a first argument we specify the user id like this that's it this function is going to take only one argument user id and this statement is going to delete the data from the mongodb if we successfully delete the record then we are going to return a response so we say here response dot status 200 and then i'm gonna pass here dot json and inside an object i'm gonna say deleted user id this one i'm going to pass this variable to this object if i delete the record i don't want to return the complete data of the user as a response instead i'm just going to return the user id so i decided to add here a property called deleted and then specify this user id here just how that if something went wrong and if we don't have user id then we need to take your response.status which is going to be 404 and then specific here json response so inside the editor i'm going to say user not selected let me save this file back to the postman api testing tool if you make a get request you will get all your objects so i'm going to copy the second object and make a delete request so i'm gonna click here and make a delete request so i'm gonna select delete then specify my uri right here get rid of this id and inside these params here we need to pass user id and the value is going to be id of the object then when i click on the send button i'm going to get this response method deleted this is because inside this index.js right here you can see we just response this delete request so we successfully make a delete request so let me just get rid of this response and pass here delete controller so here i'm gonna pass delete user copy this function get rid of this response and to this function we pass request and response parameter let me save these changes back to the postman api testing tool and now when i click on the send button you can see i'm gonna get a response deleted with the id now when i'm back to the get users and make a get request i'm just going to have only one record now what if i print these users get rid of this object and just print this user let me save the changes and now let me delete this record as well i'm going to copy this id open the delete request and specify that id here something like this and now when i click on this send button and make a delete request you can see i'm going to get the complete data as a response from the delete request and when i make a get request again you will not get anything this is because i deleted all the records from the database if i want to make a post request again i'm going to back to the post request by selecting the http post and click on the send button when i click on the send button it's going to create a new record inside a mongodb database when i back to the gate user click on send here you can see i'm going to have one record inside my database now let me just copy this data this fourth data and make a post request again so let me get it off and change this data like this and then i'm gonna make a post request when i click on the send button this will insert this data in the mongodb document so now i have two records let's suppose you want to get only this object as a response you have to get only this object as a response from the get request in that case you have to pass id in the url and make a get request so let's see how to do it now as you know using get users you get all the data of the user but what if you want to get only one record from the database you might have more than thousand records inside your mongodb database in that case you won't grab all the records and then filter only one record from the list instead you're going to make a request and get only the record what you want so let's take a look at how you can get the individual user or you can say the individual employee using dynamic api routing so inside these pages as you know we have the api and this api route inside this we have users now let's create another file here and i'm going to name this file in the square bracket and i'm going to name this file user id dot js now you can see the name of this file is user id when we call this api we need to pass the value to this user id parameter just for now i'm going to just open the index.js as you can see here i have the mongodb function and this import statement i'm going to copy this paste that right down here and then i'm going to copy this handler function this one and then paste that right down here i'm using the same handler function for this dynamic api file inside this we need to check the type of request so let me copy this and specify that right here and we also want to add here a switch statement so we pass here switch method and inside the switch we can add different cases so on the first case we check for the get request if it is get request then i'm going to return a controller from this first case so let me create a controller inside this controller file right here i'm going to create a new controller so just out of this get user i'm going to say export a saying function the name of the function is get user instead of get users now i'm going to create a function called get user with request and response parameter and then inside this get user i'm gonna first call the try and catch block and inside the cache simply going to say here response dot status 404 dot json and then inside this object we pass error which is cannot get the user just sort of that inside destroy we need to first get the data from the url let me first copy this uri and paste that here and now if you want to make a get request for the individual data you need to pass the user id with the uri so after the users right here you have to pass the user id so inside this try we need to first get that user id to get that i'm going to say constant user id is equal to request dot query so using request.query we get that user id and right down here i'm gonna say if we have the user id then i'm gonna say constant user is equal to await and then we need to say users the schema dot find by id and inside this find by id you need to pass the id so here you need to say user id just for that you get the response inside this user variable so let me just return that so we pass response dot status which is going to be 200 dot json and then we pass this user variable this one and if something went wrong then i'm going to return a response dot status 404 dot json and inside an object we pass error which is user not selected to start that let me save this copy this gate user and we are using this get user inside this api out so here i'm going to call this get user at the top inside this import statement and then call that inside this case and we need to pass here request and response parameter after that we need to break the statement so we pass here break and we need to call the default statement as well so let me copy this default statement and specify that here just for now i'm going to leave everything as it is save these changes just after that i'm going back to the index.js here i'm going to copy this connection this statement and then i'm going to paste that right inside this file just for that let me save all the changes and then i'm going to open the postman api testing tool to test this api so let me first get all the users so i'm going to select the get users and make a get request when i click on the send button you can see i'm going to get the data from the server so i'm gonna have two records inside my database now what i want i want to get only one record as a response from this get request let's suppose i want this second record as a response i'm gonna copy this id and then specify that id right here when i make a get request again you can see i'm only going to get that individual record as a response now you can do the same thing in the browser as well if you open your application and if you type that url right here when you press enter you can see you're going to get the response inside the browser as well so this is the individual data you can get with the api route so you just need to pass the id of the user in the url if i copy post id this one in the url right here then i'm going to get the data of the first user when i press enter you can see this is going to return the first user as a response now let me just back to my application now if you want you can do the same thing for put request as well so if you back to the controller then you can notice inside this put user inside this you can get the user from the user id variable as you know the name of the file is user id so when you pass id in the url this statement is going to return that value to this user id and you can also do the same for this delete user we are just getting the value from the user id so we can call both these controllers inside this user id api out so let me just copy this delete and this put case and then specify that right down here and then we need to input both these controllers right up here something like this let me get rid of this post user because you are not using it let me save the changes and now you can test both this request and check the result now once you understand how you can make the api for your application let's back to the front end and access this api and get all the data from the mongodb database instead of getting the data from this data.json file so let me close both these files minimize all the folders and you can see inside this table i'm getting the data from the data.json file and we iterate over this data using this statement now what i want i want to get this data from the mongodb so what i have to do is i have to fetch that data and then return it for that we can use a fetch function of javascript so instead of adding that function inside this component i'm going to create a new folder for that inside this project i'm going to create a new folder name this folder lib and then inside this folder i'm going to create a new file helper.js and here i'm going to create that function so i'm going to say here export constant get user is equal to and then i'm going to pass a function here inside this function what you have to do is you have to fetch your api data so we need to call the fetch function of javascript and this function is going to take the url as a first argument so here we need to pass the url so if i open the postman api testing tool then you can notice this is the api for getting all the data of the users as a response when i make a get request i'm going to get all the data of the user let me copy this url back to the get user and here i'm going to pause that url something like this but now what if you change this url when you deploy your application in that case you have to change all these page function values individually instead of doing that you can store this base url here i'm going to create a variable called constant in the capital letters i'm going to specify base url is equal to and then i'm going to grab this http right from here cut that and then specify that right here and instead of this api users right now before this api here i'm going to pass dollar and in the curly braces i'm going to pass this base url now this fetch function is going to return a response so we have to get that response inside a variable so before this page function right here i can see here constant response and this fetch function is going to return a response to this response variable just for that let me make this function asynchronous by passing here a keyword called async and we need to pass here await so now this is a complete asynchronous function just sort of that when we have the data from the database inside this response variable we need to convert that into json format so i'm going to say here constant json is equal to await response.json now once we convert that data inside the json format we can easily return that so i can say here return json this data now let me save the changes and call this gate user inside my table so let me just open the table at the top right up here i'm going to say import get user from the lib helper file and then right down here i'm just going to say console.log then i'm going to save the changes and you can see inside the console we get a response so the function is going to return a promise and this promise is now fulfilled and inside this promise result you can see we have two objects now just for that if you want to print this data inside a console you can just get rid of this console and then specify here dot then and then specify here response console.log response save the changes i'm gonna get the response as an array here i have two records you can see now let me just get this data and display it inside this table but before doing that let me just change this image let me space our styling to this image so i'm going to just scroll down and to this img tag i'm going to specify some classes some television classes so before specify height which is it width is also going to be eight then we specify rounded full and then specify object cover let me save the changes back to the project and you can see i'm going to have the response what i want next what we're going to do is i'm going to get the data from the mongodb database using react query now once we get the backend data on the front end using the statement let's take a look at how we can add a react query and paste this data and make this data asynchronous and cache these back-end data using react query i'm going to first open my terminal and here i'm going to say npm i4 install and then i'm going to specify react query this statement is going to install the react query as a dependency inside this project just for that i'm going to say npm runtive to start the development server close this file just for that instead of this get user i'm going to pass this gate user to the react query so the react query can cache the data and return the data from the cache memory instead of making request every time it's going to return the cache data so here instead of this get user i'm going to get rid of this statement and at the top here we need to first say import we need to import use query from react query and once you have this use query hook you need to call that use query hook right here so you need to say here use query and inside this you need to pass options so the first option is the key you specified to the cache memory so inside a single code we specify user so this is the tag for the cache memory data so whenever we make the get request the use query is going to get the data from the cache memory instead of making the new request every time if the data hasn't been changed then this is going to return the cache memory data so once we specify the tag to this request we specify the gate user asynchronous function so here i'm going to say get user now this gate user is going to return all the users if you open the lib helper file this get user is going to return all the users as a response so once we return that response i'm going back to the table and here this use query hook is going to return some data i'm going to get that data inside a variable so i'm going to say here constant in the object we destructure all this data so i'm going to specify here an object and then say is loading is error data and error now this use query is going to return all these properties from this use query book just after that inside this data you're going to have your response data inside this is loading you will get the loading message inside this is error you will get the boolean value of error and then inside this error you will get the actual error so what we are going to do is right down here i'm going to say if if it is loading then i'm going to return a division tag with the text employee is loading just sort of that if it is an error so i'm gonna say is error then i'm gonna return a division tag with got error message and then i'm gonna print the error this variable and if both the statement return false then i'm gonna execute this return statement and inside this i'm gonna pass this data to this map function we already have this data variable to this map so we don't need to add this data variable to it let me just get rid of this data.json file right from here and now just out of that you need to back to the pages and inside the app.js file right here you need to add a query provider you need to create a client so the react query can store all the cache data inside that object so at the top right up here you need to import two objects first is query client provider and second is query client and you will get this from react query now just start that you have to create a client so i'm going to add your comment and say create a client and here i'm going to say constant query client is equal to new query client like this and right down here inside this function i'm going to get rid of this component and i'm gonna grab this query client provider and specify that here so i'm simply going to say query client provider something like this or i can just wrap this inside a parenthesis and inside this query client provider i'm going to paste my component and to this query client you need to pass your client so specify the property call client and then specify your client here you can see you already have here a new instance of the client query client so just pass that here that's it as you can see you're going to get the data from the mongodb database as you know in the mongolia database you only have two records so we are going to have both that records as a response inside this ui now let me just change this color of this inactive status if the status is inactive then instead of this green i'm going to return the background color red so to do that i'm going to wrap all these classes first inside inside the template string something like this and then instead of this pg green here i'm going to say dollar in the curly braces i'm going to the status if it is equal to active then return this class bg green 500 or if it is inactive or something else then return vg rows 500 this one now let me save this back to the project and you can see for the inactive user you'll get this rose red background color and for the active user you will get this green color so this is a simple way you can get the data from the backend now the react query will automatically cache this data and only execute the api request when the data is updated otherwise it will return all the cache data as a response i have a complete course on react query as well you can check out that course from the top right corner of the screen or from the description now once you understand how you can display all your data using react query let's take a look at how you can consume your api using helper functions so inside this helper.js file let me create few more functions here so we can consume the api let me change this function name to users because using this function we are returning all the users save this file copy this get user don't forget to change that right here as well inside this table it's users save this file back to the helper.js and right down here i'm gonna say export constant get user and this time i'm only going to return a single user from this function so i'm going to say here a sync and pass here a function like this and then i'm going to pass here a parameter called user id and right down here i'm going to say constant response is equal to await and then call the fetch javascript function and inside this we pass the backtick operator pass the dollar sign in the curly braces we first pass the base url and then pass the api and the user's endpoint just after this user endpoint we need to pass the user id so here i'm going to say forward slash and then specify dollar curly braces and then i'm going to specify this user right here so this statement is going to return the single object as a response just so that means we have that data we can just say here constant json is equal to await response.json and right inside it here i'm going to say if we have json so if you have data inside this json then i'm going to return that json otherwise i'm gonna return nothing so i'm just going to return an empty object as a response from this get user this function is going to return the single user and this function is going to return all users just out of that let me just scroll down and create a function for posting a new user so i'm gonna say here posting a new user and then i'm gonna say here export a sync function add user and using this function we are going to add a new user so to this add user we need to pass the form data we pass your form data so when we get the form data from the user we pass that to this form data and inside this i'm going to say try and cache like this and from this cache i'm going to return the error if anything went wrong i'm going to return the error and inside this try here i'm going to create a variable called constant options is equal to and then pass an object here now because when we're posting a data we need to pass some values to the switch function we create here a variable call options and right down here i'm going to say constant response is equal to await patch and inside this page we need to first specify the base uri so using template string we pass in the curly braces base url then i'm going to specify the api and the users then you need to convert this data into json format so i'm going to copy the statement and paste that right down here we need to make a post request using this fetch function so every time when you execute the fetch function with the url it will going to make a get request so get is the default method of fetch if you want to make a post request you need to inform the page function to make a post request so here we need to say method we need to pass here property call method and in the single code i'm gonna pass the type of method which is post then we need to pass headers as well headers and inside an object we need to specify first the content type so i'm gonna say here content type and this is going to be the application json type and then i'm going to pass my data so i'm going to say here body json and using this json object i'm going to first stringify the data using stinkify function and then i'm going to pass here form data so i'm going to convert this form data into stringy5 format and then return that to the body just after that you need to pass these options as a second argument to this page function something like this and just for that you need to return this statement so return json now let's consume the update api so let me copy this command paste it right down here and say here update a new user so let me first say here export a sync function update user and here you need to pass two parameters first is user id because when you update your data you need user id and the updated data so we need to pass here form data as a second parameter just for that i'm gonna copy all this option parameter right from here and then specify that inside this function or you can just call here try and catch block that's among you if you want to write a safer code you can add here try and catch block just for now i'm going to print this option and instead of post right now we are making the put request so we pass here put everything goes the same i'm not gonna do anything here instead when i make a request so let me copy both the statement specify that here when i call this fetch function i'm gonna make a request to this user endpoint but this time i'm going to pass the user id so just out of these users i'm going to pass forward slash and then pass here dollar in the curly braces i'm going to specify my user id here so we are going to make the dynamic api call using this function to start that you need to return this json so just say here return json and now you can do the same thing for deleting the user right down here i'm going to specify delete a user so we need to first say here export a sync function which is delete user and we only need one parameter here which is user because when deleting the user you only need user id so i pass your parameter call user id and inside this i'm gonna first copy this option specify that here copy all this statement specify that right down here and we need to make some changes here this is a type of delete request so we pass here delete we are not posting any data so let me get rid of this body right from here you can get rid of this header as well but i'm going to leave this as it is and just out of that inside this page function you have to pass the user id which you want to delete and then pass your options get the json response and return that that's it now you can see using all these helper functions you can access your api very easily now in the project inside this index.js file here i'm using the handler function to display this ad form but what i want i want to use this visible inside this table component so what we can do is we can pass this variable to the table component and then get that inside a table but that is going to make your application more complex this is because you're passing all the values from top to bottom means from parent to child and this maybe add many problems inside your nexus application so to solve this problem we need the central store so we can access all the data from the central store and pass that to the different component so for that we are using redux toolkit so if you just search for redux toolkit then you'll have here redux toolkit.js.org website and right from here you can get redux toolkit library just click on this get started and here you can get the basic documentation of redux toolkit i already explained how we can use redux toolkit in the next year's application if you don't know anything about redux toolkit then i have a dedicated video on redux toolkit you can check out that video from the top right corner of the screen or from the description so to install redux toolkit you need to install two libraries redux toolkit and react redux so let me first copy this statement stop the development server and here i'm going to say npm install redux js toolkit and then i'm also going to install react redux now when i press enter it's going to install both these libraries inside the project if i open my package.json file you can notice here right down here here i'm going to have two packages react redux and this redux toolkit so once you have both these packages you can create a new store inside your application so inside this cloud app here i'm going to create a new folder name this folder redux and inside this folder i'm going to create three files because inside redux toolkit you're going to have a store so we create a file called store you're also going to have reducer so we create here a file with the name reducer.js and we also have the action but we're going to add action inside this reducer file using redux toolkit you don't have to create a separate file or a dedicated function for actions you can add all the actions inside the reducer as well i will show you that after a few seconds just for now let's create a store first back to the store.js file to create a new store you have to first configure the store using react toolkit so you need to first call import in the object you have to say configure store and you have to get this from redux toolkit and right down here you have to export a store so say export constant store is equal to configure store this function and inside this you have to pass an object and this object have different arguments so we create here a reducer like this so this is a property called reducer and inside this we pass an object and to this object i'm gonna pass my reducer so we first create a key app and pass my reducer so i'm gonna say here reducer now this is a function and this is a property of the configure store so at the top right up here we need to first import the reducer as you know we have this file here reducer.js so i can say here import reducer from dot forward slash reducer so i'm going to import this reducer function from this reducer file save this file back to the reducer.js and here i'm going to export that reducer function so we need to say here export constant reducer slice that's upon you you can specify any name to this variable and then i'm gonna specify here create slice function so we need to first import that function so at the top i'm gonna say import create slice from react js toolkit and we need to pass that here create slice and this is going to create the reducer here we pass different options so we pass here an object and inside this we first specify the name to the reducer so i'm going to say here name which is going to be crude app then i'm going to specify the initial value of the store so what you have to do is you have to just pass the initial value of the store as a second argument so here i'm going to pass initial state and then and then i'm going to pass here comma and then pass reducer functions so we pass here reducers in the object you pass all your reducers now what you have to do is you have to initialize this initial state property you can say constant initial state is equal to client i'm going to create a property called client and then pass an object here the first property i'm going to specify here is toggle pump which is going to be false now this variable is going to create this object with the property called toggle form with the value faults just are that inside this reducer function right here i'm going to create a reducer function so here i'm going to say toggle change action now you can see i'm going to create a function with the name toggle change action here i'm going to pass colon and pass function to it something like this so now this is a type of function just sort of that to this toggle action change we pass the current state so we pass here state now inside this state variable we have the current state of the store just out of that here i'm going to say state dot client this property dot toggle form this property is equal to state dot client dot toggle form now this statement won't make sense this is because we just specify the equal value to both these variables so what we're going to do is we're going to pass here exclamation mark as you know inside this index dot js file right here to convert the visible into invisible or you can say to convert this false value to true we pass explanation mark here so this is what we are going to create inside this reducer we're going to first get the current state and return the opposite state so if we have false here then i'm going to return true to this current state just after that we need to get the actions so we can call that actions inside the dispatch function and pass values to the store when you create a reducer the action creators are generated for each case reducer function so for this reducer there is an action so right down here i can say export constant reducer slice dot actions now this property is going to return an action so we're going to get all that actions inside an object using javascript destructuring so i'm going to pass here object something like this and inside this property here i'm gonna get that action so the name of the action is the name of the function so the reducer name is toggle change action so the action name is toggle change action we are just going to export that action using the export statement after that i'm going to just export this reducer slice as a default function so right down here i'm going to say export default reducer slice and this object is going to return a reducer function so we pass here reducer let me save this file back to the store save this file as well and open the app.js file and right here you have to call the store you have to wrap this component inside a store so we can access the store value in all the components so at the top right here i'm going to say import in the object i'm going to say store from the redux store so from this file i'm going to call this store.js file and from that i can access this store variable you can see i just exported that store variable just out of that once i have the store you need the provider as well so i'm going to say here import in the object we pass provider from react redux so from react redux library we get the provider component using this provider component you can pass store to all the components so let me grab the statement here i'm going to say provider this component and specify the component here and to this provider we pass store store this variable that's it now the redux store is successfully initialized and now let me check the react store is working or not so at the top right up here i need to say import in the object we need to call a hook use selector and this is from react redux oops i think i misspelled here use selector so we're going to call use selector hook from the react video and right down here let me just call that inside this function inside this table i'm going to say use selector call the callback function here with the value state and then i'm going to return that state and you can get this state inside a variable let me create here a variable constant state is equal to and then i'm going to console.log this something like this let me save these changes and open the console oops i think i misspelled something configure store is not a function let me just back to the store yeah i just misspelled here let me just change the spilling now you can see the redux store is now successfully initialized in this application and as a response you will get here a state the current state you will get app inside this app you have client and inside this client you have your property called toggle and now you can change this property value from any component of your app so let's see how to do it now once you understand how you can initialize your app with react redux let me show you how you can update this store value now in redux you're not able to change this value by specifying a new value to it instead you need to call a dispatch function to change the value of this state so let me show you how to do it so what you have to do is you have to first grab this app inside that app you have client and from the client you have to grab this toggle form so inside the project let me just specify here state dot app dot client dot toggle pump let me save this back to my project and now reload it you can see i'm going to get false as a response so the value of this initial state is false you can notice now what i want i want to change this value when i click on this update button and after that i want to open the add employee form so to do that let me get rid of this console.log and right down here inside this table you can see when you scroll down inside this tr here you have this update button you can see here you have to call on update handler function to this button so when you click on that button it's going to call that handler function and we can update the state of the store to this button we specify on click so when we click on this button i want to execute the handler function the name of the handler function is on update now as you know we don't have this handler function so let me just create that inside this function i'm going to say constant on update is equal to and then i'm gonna pass here the function something like this and just sort of that when i click on the button i want to get the console.log message click save this and when i click on this button you can see i'm gonna get this message click so this handler function is working completely fine inside this what we have to do is we have to get the current state when i scroll up you can see to get the current state we use here this statement let me grab that and specify that inside this tr function right here just out of that inside this state as you know we have true or false value instead of state i'm gonna rename this to visible or flag that's upon you you can specify any value to this variable just after that you need a dispatch function to change the value of this variable so at the top you need to import here a hook call use dispatch and using this hook you can call the action so right here i'm going to say constant dispatch is equal to call the use this patch hook something like this so we can execute the action using this dispatch variable so let me copy this dispatch instead of this console.log here i'm going to call this patch and inside this parenthesis we pass the action as you know inside the reducer here we exported this action i'm gonna get that inside this table so right up here here we need to say import in the object toggle change action from double dot forward slash then specify the reducer folder and inside that we have the reducer file this one inside this file we have this toggle change action function so let me just import that inside this table like this copy this toggle change action and pass that right down here to this dispatch function right here you have to call this function inside this dispatch so if you have false to this toggle form when you call this toggle change it's going to change that to true and if you have true here it's going to change that to false just out of that let me save this file back to my project and reload it when i click on this update button you can see it will not going to do anything this is because we are just going to update the value of the state so let me just display that value so right down here i'm going to say console.log visible i'm going to grab this value and specify that here reload the browser and when i click on this update button you can see now i can update this store value now what i'm going to do is i can use this update button to open this add employee and instead of this add employee form i can display the update form so let me show you how to do it now we successfully dispatch an action and change the value of the redux store next let's take a look at how you can add your employee using this add employee form so as you know we only have this add add-in platform inside this add user form.js file what i have to do is i have to get values from this form and specify that to the backend so at the top right up here as you know we are using use reducer to get the value from the form and store that inside this form data variable now once the user fills the form and click on this add button i want to store that data in the backend and update this table so what we need to do is we need to use react query to insert the data as well as to prevent the query and update the table so at the top right up here i'm going to say import in the object i'm going to say use query client from react query as well as i'm using use mutation using used mutation hook you can delete update and create a new data so just down here right here just out of this bomb reducer i'm simply going to say add mutation so i'm going to say here constant add mutation is equal to use mutation now the used mutation is a hook of react query and i'm using it to posting a new data to the backend so as a first argument you need to specify the callback function which is used to post a new data to the backend so i'm going to call my helper function here so if i open the lib helper.js file here you can notice i have here a function for posting a new data this one add a user i'm going to use this function and specify that to this use mutation so inside this used mutation you have to pass your helper function so right down here i'm going to say import add user from the helper file copy this add user and specify that to the used mutation just out of that as a second argument you call an object and inside this object you can access the different options of used notation just for this example i'm using an option called on success there are different options you can access with this used mutation i have a dedicated video on it you can check out that video from the description just for now i'm using here on success so when we pass the data and the data successfully inserted in the database use mutation is going to call this on success function and inside this function i'm going to say console.log data inserted just out of that right down here as you know on submit you will call this handle submit handler function this one and inside this function we get the data inside this form data variable so what we need to do is right here i'm going to say if we don't have the form data then i'm going to print this console message if we have data then i can destructure it and specify that to the add mutation i'm going to get rid of this console.log and here i'm going to select in the object i'm going to restructure all the values of the form data so i'm going to say here equal to sign and say form data from this form data you can access all the values of your input text boxes so i'm going to structure that inside this object here i'm going to say first name then i'm going to call last name then we have email salary date and status as you all know we created this form in the previous lecture now we can access all these properties from this form data now once you have all this property we need to first combine this first name and this last name now because in the model here you can see i'm using first name and last name and store that inside a single field so i'm gonna combine both this first name and last name and store that inside a name field and then i'm gonna store all these values to the corresponding fields so here i'm going to create a variable constant model is equal to and in the object i'm going to say name name is going to be i'm going to pass here template string and then specify dollar in the curly braces going to first say first name and here a space and call here dollar again and then specify last name so i'm going to store first name and last name inside this model as a name field just how that pass here comma and then i'm going to pass here alta now because i'm not getting the value of the author from the user i'm just going to pass this altar url right here that's upon you you can allow user to upload a new author and specify that value without our property but that would be a completely different tutorial so if you want me to make a video on uploading a new avatar and specifying that value to the backend database then i will make that video for you let me know in the comment section just for now i'm gonna specify this hardcoded url and instead of the same altar for all the users i'm using here math function to specify different images to the different employees so instead of this four here i'm gonna pass dollar curly braces and i'm gonna call here math dot floor and inside this i'm gonna say math dot random i'm gonna call here random numbers and inside this random numbers i'm going to just multiply it by 10. so this is going to return random numbers from 0 to 10. now just out of that once we specify that here i'm going to say email i'm not going to specify any value to the email because i'm getting the value from the form data then i'm going to say here salary and date and after that i want to specify status now here what i'm going to do is if the user won't select the status and i'm going to specify the default value to this status so here i'm going to pass colon and pass value to the status so if the user select these check boxes then i'm going to specify that value to the status if the user select any of these radio check boxes then i'm going to specify that value to this status but if user won't select anything then i'm going to return the default value active and then what you have to do is you have to pass this data to the add mutation as you know to this add user if you back to the helper.js file you have a parameter called form data you have to pass data when you add a new user inside a database so you specify that right down here so you call add mutation dot mute it so to the mutate function you pass all the values of your form so i'm going to pass here mod now just are that using this add mutation you can access is loading is error and is success properties so right down here before this return statement here you can say if add mutation dot is loading if it is loading then return a division tag with loading message if add mutation dot is error if it is error inside this add mutation then return that and i'm going to return that with this component so i'm going to copy this bug component specify that here and instead of this error right now i'm going to say add mutation dot error dot message so using this add mutation you can get the error message and specify that to the component just after that if it is successful so if the data is successfully added you call add mutation is success and return a success component if you scroll up here you have the success component i'm going to use that right down here so i'm going to say here success and to this success we specify message which is going to be added successfully back to my project and now let me specify some values to this input text boxes if i try to type something here i'm going to get this error component this is because we have this statement here i added this statement at the beginning of this project let me get it all the statement right from here save this file back to the project reload it add a new employee so i'm going to specify the username first so i'm going to specify the first name then specify the last name then specify email salary status is going to be active and then specify the date when i click on the add button you can see i'm going to get here a message data added successfully and when you open your console.log you'll get this data inserted message but when you reload your browser you're not going to get this updated data inside this table the problem might be in this add user this ad user won't able to insert data inside the mongodb database so what we have to do is we have to back to the helper.js and let me check this add user yeah right here i have to pass on the forward slash or i can just pass this forward slash right to this base url something like this and let me get rid of this forward slash right from this gate users let me save this file and i have the same url to all my helper functions you can notice now let me save this back to the add user form and now instead of this console.log i'm going to update the table data instead of reloading the browser i want to update the table data so at the top right up here i'm going to say constant query client is equal to use query client i'm using my query client data so right down here i'm going to say query client dot prefetch and i'm going to prefetch the users and then i'm going to call get users function this one so we need to import this so let me just import that right up here get users and call that inside this on success let me save this file back to my project reload it and let me specify values to this text boxes so if i specify the first name last name then specify the email salary then specify the date and the active status and i click on the add button you can see now my data is successfully added you will see this message added successfully and we have three employees inside this table now you can see we successfully added a new employee inside this project let's take a look at how we can update this user what i want before we understand how we can update the user using the update bom let me show you how you can open the update form using this button as you know when you click on this add employee it's going to open a new ad employee form but what i want when i click on this update button i want to open my update form so let's see how to do it we have to pass it back to the form and here you can notice i have here a flag with the value true i'm going to just change this value if i specify here false when i click on the add employee it's going to open the update form but instead of changing this value of this flag every time when i want to update my record i can get this value from the redux store so what i'm going to do is when i click on this update button i'm going to pass the id of the record to the redux store and when we have that id i'm going to open the update as you all know when you click on this edit button you're going to call this on update handler function and this is going to dispatch an action toggle change action and this toggle change action is going to change the value of this toggle form if i open the console and reload it when i click on this edit button you can see it's going to return true and false values i'm going to specify this toggle form value to the add employee button so when i click on this button i can toggle the form like this so let me just back to the index.js and right down here you can notice i'm using here the handler function and you can see we specify here a value false and i specify this handler function to the add employee but now instead of setting this value using this use state i'm going to call use selector and get this value from the redux store so to get this value at the top i need to say import use selector from react redux as well as we need use dispatch to dispatch a new action so just for that instead of this use state here i'm gonna say use selector inside it i'm gonna call the state like this and then call here a callback function and to this callback function as you know inside this table you can notice we just return this and toggle form so let me copy this and specify that inside this index.js right here so now i have this toggle value inside this visible variable so instead of this array i can just simply specify here visible just after that when i click on the add employee button i want to change the value of this visible variable so i can do that using dispatch hook so right down here i can say constant dispatch is equal to use dispatch and instead of this set visible here i'm gonna say dispatch and call an action which is this one toggle change action so let me just import that right up here i'm going to say import toggle change action from redux reducer i'm going to import this toggle change action and specify that to this dispatch function something like this so now using this handler function i'm going to change the value of this visible variable save this file reload the browser and now when i click on this update button now i can toggle my form using this update button now once you understand how you can toggle this form using this update button let me show you how you can open the add form when you click on this add employee and when you click on this update button i want to open the update so as you know inside this table you use this on update handler and call the dispatch function and inside this dispatch function i'm using here toggle change action this action is going to change the value of the store and then i'm going to get my form if you back to the form.js here i used a flag to open the add or update form i'm going to create a new action and store the user id inside the store so when the user open the form using this button using this update button only then i want to open the update form otherwise i'm going to open this add employee form so i'm gonna back to the redux store so let me click on this redux open the reducer and just out of this toggle action right here i'm gonna create a new action and name this action update action and then i'm going to specify function here with state and action parameter and just out of that here i'm going to say state dot client dot form id now as you know i don't have this form id to this initial state so let me specify that so just started this false here i'm going to specify form id and then i'm going to specify value to it which is undefined the initial value of this form id is undefined i'm going to update the value of this form id when i call this update action so i'm going to specify here equal to sign and then specify here action dot payload now inside this action.payload we pass a value to this form id so when we call this update action we need to pass value to this payload so let me just copy this update action and then specify that right here so we can access this update action inside the component let me just save these changes back to the form at the top i'm going to say import use selector from react redux and then i'm going to say here constant form id is equal to use selector and i'm going to call here a callback function with the value state and from this state i'm going to get the current value of the user so i'm going to say here state dot app dot client so i'm going to access these properties this one inside this form app.client and then we specify dot form id now once you specify that to this form id i can simply specify this form id right here so if we have value inside this form id i'm gonna just print the update form otherwise print the add employee form so let me first specify the update form and then i'm going to specify the add employee form let me get it off this flag right from here so i'm going back to the table and here when i click on this on update button i'm going to call an action so here i'm going to say if visible so if the form is visible then i'm going to execute this if block and here i'm going to say dispatch and inside this dispatch i'm going to call update action so at the top of this table here i'm gonna call update action and scroll down and then specify that right here and as you know you need to pass value to this update action so instead of just passing any string i can pass here this id so let me copy this and specify that id here as you all know i don't have this id inside my mongodb instead you get the id something like this from the mongodb so let me rename this id like this back to the project reload it when i click on this add employee i'm gonna have this add employee form but when i click on this update button you can see i'm gonna get my update form now what i want when i click on this update button i want to fill this text boxes with the record so let's suppose i click on this first update button i wanted to fill all these values in this text boxes but before i show you how you can update your record let me first grab this statement right from here and then specify that inside this update user form you can see i already have the same function in both these files so instead of having this function right here i can specify that inside this form.js file right up here and then specify the same function to both these components so i'm going to copy this function or you can cut this function right from here and then specify that inside this bom and just out of that i'm going to grab the statement from this add user form and then specify that inside this form right here and now you have to just pass both these values to this add here i'm going to call a function add user form and inside this parenthesis i'm going to pass an object and pass form data and set form data and you can just specify the same thing inside your add user form right here inside this parenthesis so we are just going to get these values from the parent component and now i'm going to do the same thing for this update component as well so let me get rid of this and then i'm gonna specify here update user form and inside an object i'm gonna specify form id this variable then specify form data and set form data now because i want to get the value of the input text boxes i specify both these variables to this update user form now just after that you need to import this use reducer from react so you have to say here import use reducer from react just hold that back to the update user get rid of this function and as you know from the form you can get all these three properties so let me copy this specify that in the update user form right here inside this parenthesis get rid of the statement and now you can get all the values of your input text boxes using this form data variable and you can set a new value to this form data using this set pump data function now let's suppose that you click on this update button what i want to do is i want to fill all these values inside this input text boxes so we can easily update the user without specifying the same values again inside these text boxes so what we need to do is we need to first get the values from the database and then specify that to all these text boxes so inside this update form right here let me close all these forms now inside this update form here at the top i'm gonna first get the data from the database i'm gonna get the user with the user id as you know when you click on this button it's going to pass the user id to this form id variable i'm gonna get that user using this form id so before this handle submit right here i'm going to say use query and i'm going to import that use query at the top right here and inside this parenthesis i want to call this helper function get user this get user function is going to return a single user as a response from this function and this function is going to take a parameter called user id as you know inside this form id we have the user id so using this use query i'm going to fetch that value and store that in the variable so inside this use query i'm going to first specify the tag name which is users then i'm going to pass here comma and then as a second argument i'm going to call here a function get user from the helper file so from this lib helper file i'm going to get this get user and then pass here as a second argument something like this and then i want to pass this form id something like this but this statement won't execute this is because if you want to pass any external value to this use query you need to pass that value as an array to the first argument so if you want to pass this form id to this gate user you have to wrap this statement inside an array something like this and on the second index you specify this form id now instead of this get user you call here a callback function like this and call get user now this statement is going to return the single object as a response and we are going to get that object by destructuring it so i'm going to say here constant in the object here i'm going to say is loading is error data and error so you can get all these properties from this use grid now just out of that right down here i'm going to get rid of this object and here i'm going to say if is loading if it is a loading message then i'm going to return division tag with the message loading and if it is an error so is error is going to be return and then space over here deep with that error you can specify your own errors here that's upon you at the top i'm going to say constant in the object from this data as you know inside this data we have an object so i'm going to structure all the values here i can see here data inside this object i can say name from this object you can get name author salary date email and status so we are destructuring all these values from this data variable let me just grab the statement and specify that above here and just after that as you know instead of just name here i have two values first name and last name so we need to grab first name and last name from this name property so right down here i'm gonna say constant in the array i'm gonna say first name and last name and i'm going to get that from the name property we need to call here a function dot split this function is used to split string and return as an array so i'm going to pass here empty space so this statement is going to return an array of first name and last name and i'm going to store that values inside this variable now what if i don't have any value inside this name in that case i want to get these values from this form data so let me specify here name so let's suppose that if i have name then i'm going to execute this statement otherwise if i don't have this name then i'm going to speech over here form data so i'm going to get this name from this form data just after that i want to specify these values to the text boxes so right down here on change so the set form function is going to specify all the values of this input text boxes to this form data now what i want instead of on change i want to get these values from the database so as you know we already have these values inside this variable so right down here i'm just going to specify that to this input text box so i'm going to say here default value is going to be first name so the default value of this input text box is this first name let me copy this specify that here so i'm going to specify here a variable last name then specify this to this email here i'm going to say email then copy and paste this default value here this is for salary do the same for this date here i'm going to say date and do the same for this active and this inactive radio buttons so instead of default value here you specify default check so i'm going to say default check is equal to in the curly braces i'm going to say if the status is equal to active then i'm going to check this input text box otherwise written false so this statement is going to return true or false value to this default check i'm going to copy this and specify that to the second radio checkbox and here i'm going to say if the status is not equal to active then return true back to the form and now when i click on this update button you're not going to get anything but if you click on this update again you can see you have all the values of your database inside this text boxes if i click on the second record you will get all the values of the second record inside these text boxes so you can easily update your record by clicking on this update button so what i want when i click on this update button instantly i want to open the update form and specify all these values to this input text boxes so we can easily update the user so we are going to achieve this using redux middleware so let me show you how you can use redux middleware in this application now let's take a look at how we can create a middleware inside this application as you know we already have the redux store in this app so using the redux store we can create our own meter web when you click on this add employee it's going to call the toggle change action and i'm going to do the same when i click on this update button but you can notice i need to click on this update button twice to get the result now i'm going to solve this problem so just back to your application and inside the direct store here inside this folder i'm going to create a new file name this file listener.js that's upon you you can specify any name to this file here i'm going to create a mirror this middleware is listen to the toggle change action so whenever you call this toggle change action i'm going to call this update action so i'm going to create this middleware inside this listner.js file so here we need to first call the createlistener middleware so here i'm going to say import create listener middleware from redux.js toolkit and right down here you need to import your action so as you know we have toggle change action in the reducer as well as i have update action so i'm going to call both these actions inside this file right down here you need to create middleware instance so here you need to say constant listener middleware is equal to and then you specify the create listener middleware something like this so this is going to create an instance of this middleware just out of that right down here you need to call this listener middleware instance and then call the start listening function or you can say method inside this method you pass an object and listen to the specific action so we are listening to the toggle change action so we specify here action creator a property and then specify the toggle change action to it so whenever we call this toggle change action i want to execute the callback function or you can say i want to execute an effect so we pass that effect as a second parameter right here so we pass here effect then specify function to it and the function is going to be a synchronous so we pass async function something like this and to this function you can access two properties action and listener api using this action parameter you can get the payload and using this listener api you can dispatch an event so inside this function i'm gonna say listener api dot dispatch i'm going to call a dispatch function from this listener api and then specify the update action here and as you know to this update action we have a payload so we can access the payload using action dot payload that's it a very simple middleware is now ready let me just export this so we need to say here export default listener middleware save this file back to the store and here you need to configure this middleware so at the top you have to say import listener middleware from the listener file and just out of this reducer here you call comma and then specify middleware and to this property you specify a function and inside this function you can get the default middle error so you can get here a property called get default middleware and using this parameter you can prepend or you can say combine your middleware with the redux middleware so you call here get default middleware call this function dot prepend inside the split band you specify listener middleware dot middleware so we call our middleware here and call a property of it which is middleware so this statement is going to initialize our middleware let me save this file back to the project reload it and now when you click on this update button it's not going to work this is because in your listener you're using toggle change action and you don't have any payload to the toggle change action if you can check this table.js file then you notice to this toggle change action we don't have any payload we don't have any value here so this property won't return anything to this update action so what we have to do is inside this table to specify here id so this id is going to be passed to this action and then pass to this update action let me save this back to the project reload it and now when i click on this update button you can see now the update button is working completely fine i don't have to click on this update button twice you can see so i hope you understand how you can make a simple middleware inside the desktop let's take a look at how you can update the values of this form now let's take a look at how you can update this data using this update button so when you open your update form and click on this update button i want to update these values so let's suppose if i click on this inactive and click on this update button i want to update this status so to update the record let me just close all these files and as you know inside this table you have this update button this one when you click on this update button it's going to call the update form and inside this update form you have all the values of your database i want to get the database values as well as the user input values and then return to the react mutation so we can store that or you can say so we can update that value in the database open my application open the console reload the browser and now when i click on this update button i'm not going to have anything this is because now this form data is going to return nothing because we haven't changed anything inside the form let's suppose i change the salary if i specify here one five triple zero and click on this update button i'm going to get only the salary property inside this object what i want i want to combine these values as well as this property and then return and update the backend we need to first combine this first name and last name and specify that to the name variable and also we need to get the form data so let me first get it off both the statement and here i'm going to say let user name is equal to and inside the template string here i'm going to pass dollar curly braces and then i'm gonna pass here form data this variable dot first name if we have value inside this form data dot first name then return that otherwise return this first name variable this one so we pass your question mark and specify here first name i'm going to do the same for this last name so here i'm going to pass space and pass here dollar curly braces form data dot last name if we have value inside it then return that otherwise if we have undefined here then return this last name value so now inside this username variable we have first name and lastname just how that we need to combine this username this form data as well as this backend data and create a new object so we can return that object to the backend and update the values so right down here i'm gonna say let updated is equal to object dot assign using this assign method we create a new object and combine multiple objects so here i'm going to create a new object so we pass here empty object and then pass data as a second parameter now inside this data as you know we have all the values of the database just out of that we combine form data if we have the same property in both this object then the assign method is going to override both value with this second property value so let's suppose to this data object we have name property and if it is equal to admin and if inside the form data we have the same property name with the value client then this assign method is going to override this value with this form data value something like this so just out of that i'm going to specify here a comma pass an object we need to pass this username as well so here i'm going to pass name property and pass this username this one now if i console.log this update if i say here console.log updated reload the browser click on this update button click on this update you can see i'm going to have all the values as a response if i click on this active button now and click on this update you can see i'm gonna have here active so this will return the updated values as a response now what i want i want to store these values inside a database so what we need to do is we need to use react query mutation to update the backend data so at the top right up here here i'm going to say use mutation so right inside this use query here i'm gonna say use mutation as you know using used mutation you can post delete and update data of the backend so right down here i'm gonna say constant update mutation is equal to use mutation and inside this you call a callback function and then you specify your update user helper function if you open the lib helper file then you can notice here you have the update user function i'm using this function and pass that to this mutation so at the top we need to say comma and pause here update user and then i'm gonna pass that right here and then to this update user as you know we need to pass values so the first parameter is going to be the user id and the second parameter is going to be the form data so i'm going to call this form id right here and as a second argument we pass form data we get this form data from this parameter so here i'm going to say new data and then pass this parameter right here when i call the mutate function of this update mutation i'm gonna pass this value i'm gonna pass here comma and pass the second argument inside this object and here in the second argument we specify on success function so this is going to be the async function with data and inside its own success i'm simply going to say console.log data updated and just out of that when you click on this handle submit right here i'm going to call await now because this is not the async function we need to pass here a sync we specify update mutation dot muted here we need to call this update value so this value is going to pass to this new data and then pass to this update user now what i want i want to change this active status click on this update button click on this inactive and click on the update button you can see i'm going to get here a response data updated and this object is going to return the status inactive but inside this table you won't get any result this is because we didn't inform react query to update the table when i click on this update button but when i reload the browser you can see that this third data is updated so what i'm going to do is install this console.log i'm going to inform the react query that using this on success update the table so at the top here i'm going to say use query client and then at the top i'm going to say constant query client is equal to use query client i'm going to create an instance of query client and then here i'm going to say query client dot set query data and inside this parentheses we first specify the key which is users and then i'm going to pass your comma and then pass your callback function and inside this callback function you can get the old value so you can pass your old and inside these parentheses right here you get the updated value so i'm just going to return that updated value instead of returning the old value back to the project i'm going to click on this update button and click on this active button now when i click on this update you can see i'm going to get the record which is updated and you will get the status inactive now if you want to get all the data when you click on this on success you can comment this statement and here you can call query client dot prefetch query and here you need to pass users the tag name and get users you can see i'm not calling this get user function this is only going to call a single user but using this get users i can call the area of object back to the project reload it click on this update button and now when i click on this inactive and when i click on this update you can see i'm gonna have inactive as a response if i change this to active click on update it's going to change the value now let's suppose i want to change this salary of this first person click on this update form specify salary which is going to be 18 000 click on update button you can see now the salary is 18 000 now you can update any value of your form by clicking on this update button now let me show you how you can delete this user when you click on this delete button i'm using the same update technique to delete the record from the mongodb database so what i'm going to do is i'm going to open my reducer and create a new reducer to delete a record so when i click on this button i'm going to pass the current id of the user to the reducer and using that id i'm going to delete that user so here inside this reducer i'm going to create a new action so i'm going to specify action name delete action that's upon you you can specify any name to this action and i'm going to specify here a function just add that to this action we specify two properties state and action and using this state you can get the current state so i'm going to say here state dot client and then i'm going to access a new property so let me specify that new property to the initial state here i'm going to pass comma and specify delete id and then specify here colon and then specify here now the default value of this delete id is now so let me just specify here client dot delete id is equal to action dot payload now when you call this delete action i'm gonna pass value to this delete id and when we have value to this delete id then i'm going to delete that record let me first save the changes back to the table here you can see right down here we have the delete button let me call here on click event to this button so we pass here on click and inside this here i'm going to say on delete let me create this handler function so at the top here i'm going to say constant on delete and then i'm going to pass here the handler function and then here i'm going to say if the form is not visible then execute the delete action so i'm going to say here if if the form is not visible only then delete the record i'm going to say here dispatch and inside this dispatch function you call the delete action so at the top here you need to import that first you call this delete action right here but wait you need to first export this data action right down here you need to call comma and pass delete action save this file back to table call import this delete action right here scroll down and then specify that delete action inside this dispatch something like this and then you pass your id to this delete action now this is going to change the value of this delete id and here you have the current user id when you click on this delete button i want to ask the user that really want to delete the record if he click on yes then we delete the record otherwise cancel the transaction so i'm going to open my pages and here i have the index.js file so inside this index.js right here i'm going to create a new component so scroll down right down here i'm going to say function delete component and then i'm going to pass here return statement and using this written statement i'm going to return a div with some television classes so we specify here plex gaap is going to be 5. inside this div i'm going to first add a paragraph and then say are you sure and then create here two buttons so the first button is yes and then second button is no let me save this copy this delete component and specify that just after this division tag right down here something like this save this file back to the project and you can see you're going to have this question here let me specify some styling to it so to this button we specify class name flex bg read 500 text is going to be white padding x4 padding by two then i'm going to specify border rounded md and i'm going to add some power effect so i'm going to say here hover bg rows 500 and when the user hover on this button i'm also going to change the border color border red 500 and over text gray 50 let me copy all these classes and then specify that to this second button so we specify your class name and specify all these classes here but what i want instead of specifying this red color now i'm going to change this to green so instead of bg red we pass here green let me do the same for this colors so here i'm gonna pass over bg green border is going to be green and i'm gonna leave everything as it is let me save this back to the project and you can see i'm gonna have this result oops i think i misspelled something here it's green you can see i'm gonna have the result now instead of this paragraph is if i specify here button then i don't have to specify any space to this question now once we have the ui when the user click on this yes button then we are going to delete the record when the user click on this no button then we are going to cancel the transaction but before that let me add an icon to this yes and to this no button let me just click on this yes and no here i'm going to add a spawn tag to this yes with some classes so i'm going to specify class name padding x1 and inside this spawn tag right here i'm going to specify the icon i'm using here bi x icon let me import this icon at the top so let me copy this and specify that at the top right here do the same for this second button so let me copy this spawn tag and specify that right here and instead of bix i'm going to specify here bi check and then import that right up here you can see i'm going to have these icons here what i want when the user click on this yes button i'm going to execute the handler function we are going to create these handler functions inside this parent component so to this delete component we are going to pass that handler function so here i am going to say delete handler and we are also going to say cancel handler now when the user click on the snow button i'm going to call this cancel handler when the user click on this yes button i'm going to call this delete handler and we're going to create both these handlers inside this parent component let me pass this first to these buttons so here to this first button we specify on click delete handler and to this no button we pass on click cancel handler and at the top right up here you need to pass both these handler functions to this component so right up here i'm going to say constant cancel handler is equal to and then i'm going to create here a function something like this and then you also need to create a delete handler so right up here you need to say constant delete handler is equal to and then pass the function here and then you have to pass both these functions to this delete component so i'm going to just copy this object and then specify that right here so inside this delete user i'm going to call my helper function this one delete user if you want you can call here a mutation as well and then specify your delete function to it that is the exercise for you you have to call this delete user inside a mutation and then specify to this delete handler just for now i'm directly going to call this function so here i'm going to first say async and inside this delete handler i'm going to say await delete user now because i don't have this direct user we need to first import that so i'm going to first import this and then here i'm going to call this daily user but as you know to this dated user we need to pass the user id so to get the user id right here at the top here as you know we can get the user id using the statement so i'm going to say here constant delete id is equal to use selector and inside this i'm going to say state and return state dot app dot client and using this client i can access this variable delete id so i'm going to just pc over here dot delete id so this statement is going to return the user id to this date id and then inside this delete handler i'm going to say if we have this delete id only then execute this if statement and once you delete the user i'm going to update my data at the top right up here i'm going to say use query client from react query and then i'm using this use query client right here so i'm going to say constant query client is equal to use query client and using this i'm going to update the records so right down here inside this delete handler i'm going to say await query client dot prefetch query and i'm going to preface the query users and then here i'm going to specify my users function this one get users so let me pass that right up here get users and then i'm going to pass that to this query client and after that i'm going to say await dispatch delete action so we need to first import the delete action so at the top right up here i'm going to say comma delete action copy this delete action and then specify that right here and then specify value now so i'm going to just specify the initial value to this delete action once the data is successfully deleted just out of that to this cancel handler here i'm going to say console.log cancel and then i'm going to say await dispatch delete action and then specify here now don't forget to specify here a sync because this is the synchronous function back to the project and reloaded now what i want when i click on this button only then i want to display this message so inside this project right inside this return statement here instead of this delete component i'm only going to display this direct component when i have value inside the delete id so let me first cut this statement and here i'm going to say delete id if i have value here then return this delete component otherwise return nothing save this and now when i click on this delete button you can see i'm gonna have this question are you sure you want to delete this record when i click on this no it's going to hide this component and inside this console you can see we have this cancel message but if i click on yes it's going to delete this record let me show you when i click on this build button i'm going to have this component and when i click on this yes oops i think i misspelled something yeah i forgot to specify here user id as you know inside this helper function here to this daily user you need to pass the user id you're going to have this user id right here so you pass here delete id here something like this let me save this reload the browser and now when i click on this delete button and click on this yes you can see it's going to delete this record when i reload the browser now i'm only going to have two records inside my database so this is going to delete this record completely from the backend so now i hope you understand how you can read update delete and create a new record using the mongodb database if you have any question related to this topic don't forget to comment if you find anything useful don't forget to press the like button share this video with your friends subscribe for more latest videos that is all for now i will see you in the next one do you

Channel: Daily Tuition

Views: 45,565

Keywords: Complete CRUD Operation With Next.js & MongoDB - For Beginners, nextjs crud operation, nextjs project, next project, nextjs project with mongodb, mongodb and nextjs, react with mongodb, react project with mongodb, react with mongodb tutorial, mongodb project, mongodb tutorial, mongodb, next.js framework tutorial, nextjs, next, js, react, tutorial, crud, operations, make, exiting, making things, more easiy, how to, daily tuition

Id: RKDfKbLJkZQ

Length: 188min 23sec (11303 seconds)

Published: Sat Jul 30 2022