Create CRUD App with React Hooks & the Context API - #2 CRUD Functionality

[Music] all right so welcome back to another video and this by the way part two from create crud application using react contacts API and if you ton watching the first video I put a link description below you should click the link before you're watching this video okay so let's buddy this is the what we have from the last video and we can add user it should be good to select add we can the cancel shoot back to the home page you can click Edit should be good to add its last one alright so now inside a source folder listed let's make that bigger inside the source folder not public in here we are going to create folder call context let's do context and in here we are going to create a global state global state oj s and we are going to create another file which is to say a producer dot yes okay so that's working with global state first so in here we need to import say import react from react and we need to import another thing in here the first is creates context and use reduce turn okay so let's import the a producer in here say a producer from that's less should be inside the quote so does less a producer and in here we need to unit CL state and just creates variable call initial states and plus two users and in here I just want to create a couple user just give a name user ones I think we should give ID in here ad want and name user one cool let's copy-paste two more time and give this ID 283 and it should be user 2 and user 3 alright so on in here we are going to create context we need to say export global context set that equals to we are going to using this create context in here say create context and we are going to bring in to initial state in here to initial with what's in state like so and let's scroll down let's create provider component here let's do export cons global provider we need to import the global provider in app that yes and we need to wrap entire application with this global provider and you give a children in here it should be represent our apt at us so let's - let's say cons state and dispatch so that equals to say use reducer and we are going to bring the app reducer in here and initial state in here alright so we need to return this a global context in here global context dot provider and she should be the children and we need to send value and the value in it the same is state dot state in here dot whatever the initial state the user so we need to say where's that you need to say step dot user like so a producer is not the vine so let's to find a producer in here we need to export default state and action need to say switch tag in here say action dot type and now for the default we need to just return the state okay so now say if and what happening here I should be I pray to songwriting okay so safe now let's go to at the J s right here we need to bringing the global provider let's do in here let's say import global provider provider from dot slash contacts say contacts slash global State and if if you want using the global state we need to wrap entire app inside the global provider let's do in here just say global provider like that and we need to put our router in here inside the global provider because we need to entire our app to be available to access the global state but what happened in here wait what okay so so now if I go to just go to where is my components and user list in here I want to using the user state I just can I like I can do in here import global context from dot slash should be dot dot slash I think global state and we need to import another thing in react from react you need to import use context and inside in here we can to cons say users because remember in a global state we send the value with name user users and now we can access that in here users equals to use contacts and we need to paste in the global context in here like that now if you say console.log user we should get user state so now save and let's see I want to open my console say in spec go to console I hope we don't have any error in here here it is we have array o we have array ok and you have a three value three object inside array ok user 1 user 2 and user 3 all right this is working so winded just [Music] using map in here to showing the data in this page so we can do now let's see we need to put under the list group into user remember this is a rail right you can to user dot map and for every single user I want to just remove the this group item this and I want to put my list group item inside user dot map so I can do alt and up like that and I can to in strong right here just two curly braces and I can say user dot name because we are going to access the name right here for every single name okay so now save and I hope now we have a user 1 user 2 and user 3 in the browser them all right so this is cold ice but now if I click this thing right here should be good to edit one and if I click this it should be added why you don't need that we need to access for every every ID the object have right so we need to in here we need to in here right here just remove that and open a curly braces and we are going to using backtick and in here at to say it's last edit / and dollar sign curly braces and we - - in here is the user dot ID because we are going to access the ID yeah so safe now I hope that works so if I click the edit right here should be good to edit one scandal at the tool or king should be rt3 alright pretty awesome and pretty cool so now I want to make this delayed pan work so let's speak to global state and in here we are going to create another action ok so let's do in here we are going to create actions and the first is this basically it's just a function so we can do cons function you want to create to say remove user I think or any name you want just doesn't matter remove user should feel equals to a row function and in here we are going to say dispatch and type it should be just say remove underscore user and what we are going to send to say payload is ideas come from here and in user list we are going to import the remove user all right and we are going to where Stan to in a button in here we are going to say on click and we are going to running the function which is the function in here remove user and we are going to send the ID okay I'm going to show you in here remove user and if you add action you need to add the case in the applet a producer you need to add case in here so if case is removed should be upper case remove underscore user which is [Music] Janene here okay if we have to type remove user in here we access that alright action the type if the case remove user we need to return not return oh come on man return users and we can - we want to access the state right is the represent state right here initial State we need to obsessed state dot users you're going to using filter method in here so user and we can to return user dot ID is not equals to action dot payloads user ID it is represent user dot ID in here right and action that payload it should be represent this whatever we send in this remove user function wait what happening here say ID yeah let's try to import this remove user function to the user list in here to do that and in here remember you import you using user right of course in here you can to remove user just let's see in the Coble state value we send the user and in here we need to send a remove user can to remove user can do the same name like that short cut to do this it's just removed Oh like that and just do the same thing you don't need to be worried about that okay say and now we can import remove user in here okay so we can use that in a pattern in here so we can to unclick that's to unclick equals to and we can to remove user and we are going to send ID which is reset that to user dot int it should be uppercase anything like that yeah so now save and I hope that works so now let's try to delete user to been pretty awesome right you can do user one delete delete if I realize that it should be showing the three user because by default is set that by three user in here okay let's do something else I want to and I add user should be adding the new user in the list so in a global state we need to add another function another action another action in here okay we can copy this thing right here let's copy that and we are going to paste in here and the name let's change that to say add user add user and we don't need the ID in here we need to wait to the name and the ID all right so in it to see in here user like that and the type it should be oh I'm doing [Music] so let's give a type ad underscore user and what we are going to send in the payload not a ID should be user and just make sure if you add action in here you need to add case in app free to sir another case in here okay so let's do case and should be ad underscore user and we need to return something in here we need to see users and into action dot payload coma and state dot by default we can access that X state dot user right users this is user by default which is three user in here let's try to say that and make sure you send the function the action to this value okay so you can do it user and now you can import that to any component you want let's go to I just want to cop yeah just want to open the add user and let's try to let's just copy the import in here we need that as two right here and let's copy this thing right here and paste in here but now we don't need to remove user we need add user when it will import the use contacts in here say use context like that I think we don't need the users in here just remove that and in the form let's do on submit which is if I click the first time to submit in here I should be running so on submit so that equals two you can put any name you want but I just want to do the same name on submit and we can create on submit function in here just say cons on submit set it goes to our function and just give a space in here like that and we can do anything here but now you know what when we click the submit I want to automatically back to the home page how do we do that we can import use history in real roller tone we can do that in here say you see a story and we can to in here to say icons is 3 equals who use a story like that and if I click Submit we need to do history dot pose it's less so let's try that if I click submit should be good to the [Music] home page okay so it's working and in here for example we have a new user all right set that equals to object and we have ID for example for and we have name is a user for okay so in here we can we can call this end-user in here to say add user and we can basing the new user in here alright so let's do let's save that now if I click the submit we should have a new user which is ID for and user for for the name okay let's try to stop me BAM okay what happening here so let's see what happening here just go to components and let's see that's the problem the problem is if I click the add user is creating new object inside the new array and in here inside ray user array we have another array okay that's the problem so we need to do in here spirit operator is just three dot and let's see I started to save that and I hope that works for now let's make that smaller so if I add user and if I hit submit now we send a new user in add user and new user whether we have a value ID one and name use user for and if if I click Submit now we get the user for in the home page candelita okay pretty cool but I want to user name it should be come from the wherever we put in the input field right here so we need to create state in here so let's import used state and we are going to do in here it's a cons name set name set name set it equals to use state and by default set it to empty and now let's go to input right here and for the value that's at name and if I save and if I try to type in name in here it's not gonna work because by default we set it to and a string so we need to to on things in here into on change set it equal to function call on unchanged and we can create on change in here to say cons on change set that goes to our function and in here are going to say set name to a dot target target dot name again just given name in here we don't yet oh yeah it should give a name set that equals to name okay so now safe and we can type in name now in the input field its what can do that so what happening here well yeah why I am say why I'm to name names should be name right here I want to hit a target sorry [Music] yeah but you don't need to necessarily create the name equal to name you can do this if you have a couple input and you can put in here and just remove that you don't need that I think save and now let's try to typing name should work cool so the new user in here I want to change the name which is user for in here to the name come from here just to name or you can just remove the name and like that this is the do the same thing I think that's right to save now if I at user to say Nazi hello enter and now he hallo okay pretty cool so I want to by default we have user ID for all right to say we have this is should be ID for and we and if I add another user and this it should be ID for two and this should be a girl ever if I want to add it so that's why we need to using UUID so let's import the UUID it's a import we're going to using version 4 and let's using another name which is a UID and it should be from UID UUID like so and we need to change the ID to you you iet you ID like so now save and reload the browser and if i add user user and it should be the random ID like so okay pretty cool so now we can edit user right so let's try to create another let's go step up - yes another action which is now it should be added user so let's create the cons and give a name edit user set that equals you need to send the new user alright which is the updated user you want to send in here so save dispatch and the type let's give a type you can put I just want to say ad get underscore user and for the payload of course we want to send the new updated user name ok so just make sure you send in the value because if you don't do that it's not good it should be ever so edit user and now let's go to up to 3 reserve we are going to create another case so let's took case and should be added underscore user and in here we need to say return so before we return in here we need to create wait you need to create cons say updated user so that equals to action dot payload which is everything we sending in right here okay so we bringing that in the this variable so in here let's do cons update users and so that equals 2 state thought users and dot map for every user we need to say if why I am doing couple engine here so if user ID is equals equals 2 we need to access the updated user ID so we can copy this and paste in here I can access the ID if the user ID equals to update user ID we need to return the update user which is new user for another user is if not met with this ID we need to just return de to say return user like so and white is should be update the stream of the D right okay so in return right here we need to return the users and we need to return to update update users users like so it should be update user okay so let's try the same and go to use the release right here no we need to go to edit user let's go to edit user component and let's do I just want to copy this thing right here anything this I want to copy this for import and go to edit and we can space in here and let's just copy I think just the same thing scope is everything inside in here that's based in added user let's do that and let's add on submit in here say on submit so that equals to on submit and we are going to do in to see we need to see in here selected user selected user and just say set selected user and we need to create object inside the you step in here so it should be ID by default is empty and name by default is empty what we are going to using action is users and edit user yeah but we need to bring here if I click to add the user it should be have a parameter in here so we need to grab the parameter in here we can - we can - cons current user ID so that equals to forums no should be props to match told forums that ID okay it can access this ID right here if I if we consulted load this variable should be one and if you using props you need to pacing props in here okay for the Unitarian delayed this thing right here and for the unchanged we need to yeah for now - still ADA - worse than my input just give unchanged unchanged started to unchanged function okay save and [Music] yeah so now what we are going to do is when when for example I I click the user 1 if I add it I want to use the one it's put in the input field right here so how do we do that we can using use effect so we can import use back in here you see FAQ ok and we can - in here just say use a FAQ and what we are going to do in here and say cons user ID so that it goes to this current user ID let's put in here into cons selected user so that equals to users which is right here ok dot fine we are going to find say user say user ID equals equals to this user ID which is the parameter in here ok say user right in here so now I want to send this this should be the object so I want to set selected user in here just copy that and paste in here and we are going to send the selected user in here so now ID should be half idea should be come from here and name it should be come from whatever the ID we have in here if we have ID 1 the name be user1 if we have 82 the user the name user it should be user - yeah we need to send array in here which is Korean user ID and users if the current user ID is changing or the user is changing they use affect is running so now save and let's try to see we should have a user one in here of course not because let's see you need to bring the follow you in here and forget that sorry about that guys as you follow you so that equals two we want to access the name right here which is selected user dot name okay so let's do right here selected user dot name okay so try to save and now it should be user one in the input field right here well I hope come in hey okay beautiful error cannot read property name of and fine still they cannot read the name right here all right so what happening here just I think I want to just cut there out this value I want to just console that lock the the selected user in here just comment that all in here to see console.log selected user okay so let's try that what we have okay we get undefined why we get undefined in here all right so let's try to see user ID in here string or number just let's say console.log I say type of user ID if this string just let's see let's see I want to see acting a string okay that's the problem this is string and we said if we try to find user ID equals to one and one in here is string that's a problem by the way we need to convert that to the number we can do number user ID like so we can - you can remove the console and I hope that works for now let's try it safe oh yeah we need to uncomment this thing right here and I want to deal it the console and let's write on it's not to anything because oh my god should be in here to follow you okay let's try that again again and again and I hope that works I believe please here we go here we go I have a user one in here pretty awesome guys yeah okay so now remembering here we have one change and should be unchanged so that's good too unchanged function right here what we are gonna doing here is we can do selected user say set selected user like so you need to say spread operator which is 3 dot in here to select it user and we need to see a target dot name we are going to give a value and the value should be a daughter cat value yeah it's a target dot value Y all right yeah let's try to go to on submit right here and in here we need to call the Edit user all right and we need to send the selected user just new [Music] updated user like that all right so let's try to save and let's see what we have for now for example you have user 1 and if I add I can type in any more we have some problem again guys ok let's see what we have the problem in here we need to give a name in here a name said that it goes to the same name now save and now I should be working because in here this problem it a target name it's undefined when we don't put any name in input field right here so now if I add updated for example if I click Edit name now we have added user 1 update it you can delete delete delete add user see user 1 for example and if I want to do it it should be crass because in here let me show you right here you don't need to using you number in here because now you are going to use use UID but in here we don't need that we need to remove riu ID in here and we need to remove the default state because we don't want to using number 4 the ID you know remove that I should be empty string with that save and for the add user just make sure you using your ID for new user like that ok so now let's try to add new user and I want to back to the home page so now let's add user for example just say user 1 enter now we have user 1 let's do user - you have user - and I want to edit user 1 and this is your Pitt ID just from come from UID come to update it and if I edit name should be updated right here you can add it I can add new user to see user 3 is working just fine guys but I want to when we don't have any user it should be showing just a final project no users okay let's go let's close add user kept the producer closed their out you need to just open the user list and in here we need to just just checking [Music] - users Todd Lang is more than 0 if that's true you need to run this if false we need to run this and we need to opened react fragment in here because this is just acts you need to bringing the user map right here um we need to bring it inside right here can save that out and if false meaning if user don't have any link we need to just say h1 in here just for h1 is for and the text it should be no user and just give a styling just give a class name set equals to Tech Center and let's try to save that Oh see here we go we have new you know user if I add user for example say user 1 enter and now we have user 1 click user again user - you have user - alright so I think that's it guys but let's see in the user list in here you should put a key which is unique in here can - key equals to just say user ID okay and can save that and now our app is working just fine so if we don't have any user we have no user we can add user all right so I think that's it for this video guys and if you like and enjoy it please give give me thumbs up and just make sure stay in my youtube channel and bye

Channel: Cand Dev

Views: 52,958

Keywords:

Id: _1QtdnqHq8I

Length: 51min 58sec (3118 seconds)

Published: Sat Apr 11 2020