Full Stack React and ASP.NET Core 3.1 Application | Notes

hey guys welcome on this video i want to show you how to build this application which keeps up track of your notes or you have any notes you can save notes you can edit them you can delete notes so the purpose of this program is to basically get you into that full stack mentality and help you to learn um how to connect front-end with back-end and also how to work independently because sometimes it may be hard when you're starting up starting out to know how to make progress without the back end or vice versa so i will split the course so that at the beginning we work on the front end without starting the back end and then we can work on the back end and then connect everything at once so if this is something you're interested in we're going to be using react redux dot net core 3.1 we're going to use nt framework score and sql server stick around and i hope you enjoyed so prereqs for this video is to have asp.net core 3.1 you know visual studio and be able to start with react and that's about it okay so the first thing we want to do is open up your browser type redux and go to redox.js.org then we click on get started and we're going to copy this which this is the template we're going to get this template has you know it's react and it has redux and all the stuff we need for our project okay so now what we want to do is go back to your computer open bash and paste that command we just copied in here let's rename the project to notes dot front and hit enter and it should take about a minute or two before it completes successfully so we can see that it has finished and if we scroll up it says success so it has created our project cool so let's go inside that folder and if we hit tab it auto completes and if you're using visual studio code like i am you can do code and then do a dot and hit enter and it should open that directory so here it is here is our project so i'm going to expand source and then we'll see everything that got created for us so we have app we have feature and app so let's hit right here at terminal and let's do an npm start let's make sure that this is actually working so it should take a tiny bit of time and it should load up okay it's loading right now it's taking a few seconds and there you have it okay so back to visual studio code let's let's delete some of the stuff that got created for free for us so i'm going to highlight all this stuff and i'm going to get rid of it i want to get rid of that because we don't need it and then i'm going to change syntax here because i like better to do it like this feel free to the function if you want it's really personal preference and then i'm going to clean that up we're going to get rid of this directory yes yes okay that was weird okay so we got rid of that now we have store and i like to organize my things a little differently so i'm going to create a redux directory and then i'm going to move my store inside there move inside there and i'm going to get rid of app or actually i'm just going to rename it to components components there you go and then that's it for right now it's looking good one thing we have to update since we moved this thing out of the way and actually this thing this one doesn't exist now so let's create a our first reducer and i'll explain a moment what that is for those of you those of you that don't know so i'll call it notes reducer js and that's what we need notes reducer notes and that's right here in nodes reducer perfect okay and then i'm going to call this notes user this way notes reducer okay i want to put a capital and before i forget we have to change this from app since we moved the store inside redux we have to put it as redux right now okay so okay everything should be fine now so we just move stuff here since we got rid of the other reducer we created this one which we haven't implemented yet so we can start with this one and we'll go from here so before we start writing any code in here in the reducer i want to go over what a reducer is for those of you that are at new to react and don't really have a grasp of this yet so reduce a reducer uh basically specifies how the application state changes in response to actions being dispatched meaning some actions get triggered and the reducer changes the state and what is the state state you can think about it as basically a place where you have like think about it as like global variables so it's like place where you have like information that you need so what tends to happen in real life applications is like people tend to put too many things in the state and you should run away from that because you don't want to have just like in a regular program you don't have to have you don't want to have like global variables to say the same thing so you only need to put there what you need but not more and it's tempted it's very tempting at times to put things a lot of things in the state but you should you should not do that so in our application what we're going to have is we're going to have a state for our note all the nodes are going to go in the state all other stuff that we need we're going to have local state to the component which does not go to the global state so keep that in mind so now we're going to start writing the reducer and what i want to do is i want to combine the action types and action creators with the reducer there's different ways you can organize a project you can pull this out into like an actions js file something like that but that tends to get tends to get messy my opinion and then you have you have a lot of these and you have a lot of files so what i like to do is i like to combine these so let's start with um oops where am i writing okay let's start writing the initial state and like i said before the initial state would only have a notes array okay next let's write the action types and for right now what we're going to do at first is we're going to be able to display a list of notes that we already have so we only have one action which is set notes so we're going to set notes okay and now we're going to export the action creators and then this will be set notes and then this would take a payload which payload is basically any anything you're passing to this function so this is types that set notes payload okay so now we're gonna write our reducer producer and then state is going to be equals to initial state and then it's going to take an action so now depending on the action we get which right now we only have one what we want to do is we want to switch through action that type and then in case types is set notes we want to return what what do we want to return here so basically what we want to do is we want to create a new array with all the notes and then set it as setting the state so we'll do state notes and it's going to get assigned the action that payload and then if you do alt shift f visual studio code helps you to reorganize your your code okay so cool we have this we're basically creating a new array and then we're assigning it to a state and that's the only case we have and then let's do a default case in default just return the state so to iterate real quick we have a initial state which is this is what we're going to have we're going to have an array of notes action types is set notes action creator is set notes and then we get you know we pass a payload which is going to be an array of notes and then when the reducer sees this type of action set notes what it's going to do is going to create a new array and assign it to notes out of it so it that's it that's nice and simple so this is our first action we're gonna have three more we're gonna have one action to set all the notes that's when we're pulling the first time and getting all the notes from the web api the second action is going to be to create a note so meaning whenever we create a new note and and we basically uh you know make a request to create that new note that you know is gonna the response to that is gonna have an id of that note and then we're gonna append that note to this array right here we're going to have third action is going to be edit a note and then that's going to get a response and if the response is successful we're going to edit in our state as well that specific note and then last one is going to be delete note and we'll make a request to delete a note if it's successful then we go ahead and delete the note from the state so we'll have four and then we'll go a step at a time okay so now we have first action but how do we use it so what we have to do is and what i want to do first is create a new folder directory and i'm going to call it services and in here we're going to have all the files that will make our request to retrieve notes create new nodes edit delete etc so we're going to create a new file here called nodes note such as yeah that's that sounds good to me okay and in here what we want to do is retrieve those notes right so what we're going to do is export get notes this guy and then async because it's going to be asynchronous and then we're going to pass it at this patch and then we'll have a try and a catch then i'll do a console log here error and in here we're going to have the request basically to retrieve all the nodes since we don't have a web api at the moment setup what i'm going to do is fake a response so i'm going to say response equals it's going to be an array and then i want to say this is a value and i'll say study for exam in three weeks let's say and this has an id of one and i want to copy this thing okay and i have some more notes so this id2 ipd3 ip4 so at this rate i will be a master in no time build more full stack applications i love writing notes okay so pretend for a second we made the call to the api and this is a response we got and then what do we do with that response well we're passing this dispatch and like i said before you need to dispatch an action and then that would trigger a sequence of things and then eventually the reducer will change the state right so we'll we'll do dispatch and then we gotta specify what are we gonna dispatch so we're gonna dispatch action creators that set notes and then we're gonna pass the response so one thing we need to do is we need to import this so we are able to use it action creators from redox slash notes reducer alt shift f if you need to and all right we have our first service cool now we are able to get notes so since we have this all we got to do now is call this method this method will set the notes in state and then we should be able to use that to display the notes so before we can write our first component we want to do is we want to install react bootstrap so that we save some time without having to come up with this nice looking forms and buttons and whatnot so type react boost trap get started and then we're just going to use this guy and we're going to run that and we're going to import this bad boy as well so back in via scope what we want to do is we're going to click here new terminal this will open a second terminal so if you click here you can switch between the first one and the second one in case you didn't know this and then we're just going to paste this npm install react bootstrap bootstrap this will take a minute or two and then it should install successfully all right now that it finished installing we want to go to index and we want to paste that import so now we are able to use bootstrap so let's go ahead and create that new component we're going to call it notes notes table dot js and this component will have the table with the list of notes so that's what it's going to display so we'll need to import port react and use effect this is a hook react we need to import the use selector oops selector this is another hook from react redux we're going to import use dispatch actually let's put it in here use this patch and we're also going to import get notes from service we just created services slash what did i call it all right all shift staff and nice okay so let's export const notes table and then this will have a variable selector and then i'll explain what this is so right here this is a use selector from react redux and what this does is basically it accesses the state and then gets whatever it needs to get from the state in this case we have notes reducer and then the notes reducer has notes inside so it's going to grab those notes and store it right here in this variable so let's go ahead and have it dispatch ready okay we have that now let's do the use effect and i'll explain what this is in one second so the use effect is used for well effects so what we want to do here in this case is retrieve when the app loads we want to retrieve the notes and just be be able to you know display it so remember when i said we had to [Music] make a call to this guy and actually make the api call and request the notes well that's essentially what we're doing here we're going to make the call so we're going to say get notes and we're going to pass this batch and what we want to do is use effect takes two parameters the first one is a function and second parameter takes is an array of dependencies and basically every time whatever you put in that dependency every time that changes the use effect is going to run that function is going to run so since we only want we only want it to run once which is the first time right and that means that all we got to do is leave it blank and that's that's all there is to this and then last but not least we're actually going to create a table so let's say class name equals table table dark and then let's do a t-body and then in here we're going to say notes that map and we're going to go through all the notes basically iterating and since i don't have any curly brace itself it's just going to return whatever i put in here so what do i want to return i want to return a table row with table data of basically we just want the end dot value and that value and let's give it a little style just to make it look a little better and i'm going to do it right here in line and i'll do the left and this is all we have to do for now in note stable we have our first component and all we got to do now is go to app and we just gotta display it so why don't we do that right now and see if it works or if we missed um something along the way all right so one thing i want to do is i want to have maybe an h3 or something same my notes and in here i'm probably going to make it a little smaller because that's going to look too wide if i leave it like that so i'll say max with of say 70 and then i'll do a margin of auto so it's in the center and okay all right and yeah all we got to do now is do notes table and let's import that import notes table from component slash node stable okay so it seems like we have an error it says modular found can we solve nodes reducer and okay so notes yes don't reducer cannot find it so yeah we're missing a force there and if we go back to the app now we're able to see all the notes and if we check the state we click on this little dev tools redox thing go to state open this up you see notes open that up and then we'll see all the notes that we just typed earlier sweet so let's recapture what is going on so we have app.js app.js as table if we hit f12 on that it will take us here nose table is a component and is iterating through the array of the notes and it's just displaying them as a row and a table right so how is it getting that note so there's this use effect hook that calls get notes and it passes the dispatch to it and get notes is the service that we're fakely making a request right now which is just a hard-coded response and we're dispatching an action with that response and then we set the state once the state is set then this refreshes and that's when you see the um the list of notes show up so now let's add a delete functionality all right so to do that let's go to notes reducer and let's add a new action will be note delete note and i'm going to copy this thing delete note delete note there you go and then this will be a new case action types that delete and then you start you're going to start seeing the pattern here right so the difference for this case would be that we have to iterate through the array of nodes and delete the one we want with that id essentially and just return a new array with it so let's do a for loop i mean not a for loop but just afford did i say 4h just a for loop and equal to zero i equals is less than state that notes that length okay all right plus plus oops okay and in here let's do an if statement if state that notes i id equals equals action payload that id then we're going to do state that note that supplies or however you pronounce that i won and what this is doing is just removing that element from the array and it's not leaving any gaps in the array and then let's just break so after doing that all we got to do left is return state state notes and state that notes and that's all we gotta do here so essentially we add a new action and we're just removing that limit from the array last thing we gotta do or i mean this is the first thing second thing we got to do is do another of our services fake api calls kind of thing so well actually in this case i don't think we need it so let me just remove this for a second so i'm going to do delete delete note we're going to pass a dispatch and then we're also going to pass the note we want to delete so we're just going to pass the note inside there for now and instead of set nodes will be deleted note okay so we have this new function or service so now let's go to the table and let's add a new actually i'll put it right here on top let's add a new one and i want to change the style so i want to change it to actually want to make it smaller make it smaller and then in here what i want to do is i want to have a button class name equals button button danger and then on click i want to call the delete note and pass this patch and pass the note itself and then we got closes and like delete or something like that sounds good to me and delete note got automatically added here so they found it that's perfect and the only thing we're missing is button from react bootstrap okay let's take a second to compile but let's check it out so now we have our delete button next to each one of the rows so if say we want to delete this guy actually we're only deleting no we're deleting each id so it should be fine it should delete the one that we want cool and if we refresh page it should come back up so let's say i delete at this very i would be a master in no time if we check our state we'll see that that one is missing it's not here and then if we see the actions we'll see that first set the notes with all this stuff all the notes we had and then it deleted this one so nice way to debug so up next we're missing the add a new note and edit a new note so let's go to the reducer again and let's add those in so this would be new notes new notes and this will be edit note edit notes and i'm going to copy this too and then this will be new note edit notes so this would be a new note edit note perfect so as you know the pattern already we're gonna do case and then we're gonna do new note and a new note is just going to return state notes and then we're just going to append that new note to the existing notes so this is a way to just append the upcom incoming note to the list of notes pretty much the array of notes next let's do the case for edit note and then actually this guy we do have to check the id so let's just copy this because we have to loop through the array and then check the id if the id is equal then what we want to do is we want to do state that nodes at i that value equals action that payload that value because we want to set the new value coming in to that specific node and then last but not least let's return state state let's just return that out all right okay so for right now we are done with the reducer um and action we have our set notes to set all the notes delete a note oops new note new note edit note and we set up the reducer to take care of the state changing so this is really good progress so far so next we're gonna we're going to build a model and the model will be used to create a new note or edit an existing note so let's create a new component let's call it note model dot js and what we're going to do is we're going to go back here to react bootstrap and we're going to search for modal and this one looks good to me so we're going to copy all this code so let's paste that code in here and what i'm going to do is i'm going to create a node model and we're gonna be passing stuff to this but for now i'm gonna leave it empty and then let's get rid of this guy actually let's get rid of this too guys there you go so we should be inside now nice okay cool so [Music] we have this now we need to have a add new entry not new entry add new notes and edit new notes so let's create those two components and that's where we're going to be exporting so you see i'm not exporting this thing so we're going to be exporting new note modal and edit note model so let's do that export const new nodes model and we're going to export edit notes nice okay so these are the ones that are going to trigger this model to pop up show up and and disappear so we need this thing here and i'm just going to have a little duplication code but i think that's fine because it makes it really clear what each thing is doing and we're just going to return div and we're going to do a button and on click we want to handle show and i want the class name to be button button let's say success make it green and i'll do new note cool and next we want to do note modal and okay so here's where it gets interesting because we'll have to pass a note model we'll have to pass a handle form submit we'll have to pass a show and handle close so this thing needs handle close and it needs handle show right by default so we have to pass this in here so let's let's type it right now to get those out of the way so we need show and we need handle close now why do we need why do we need um note and handle form submit because since we're calling this thing from two different options edit a new note we need to pass a note so if it exists by passing the note in here we're going to be able to we're going to be able to show this note so that's why we need to pass a note and why we need to pass a handle form submit because depending depending on who's calling this if it's new note or edit note it's going to do different things so those two different things so basically this is a function we're passing in a function that we're gonna be calling and maybe i'm ahead of myself so don't worry about it if it's not clear yet it's gonna make a lot of sense in a moment when we when we get to this so for now let me finish uh writing this thing so we're going to be passing note to this guy which for a new note model is just going to be null there's not going to be anything in there we're going to pass handle form submit and then this is still we haven't created this yet we're going to have past show and then we're going to pass handle close okay cool so let's do the same thing now for the for the edit note model so actually let me close this real quick so all right i'm closing this i'm missing equal sign here okay sweet so i'm just going to copy this thing and then the difference is this is just going to be an edit and then this is actually going to pass a note which in here meaning needs to take a note okay so what are we missing we're missing the function we're going to be passing in here to this guy and we're missing putting the information we need right now for this thing to show what it's supposed to show so let's let's write some stuff in here so let's get rid of this thing because we did that already okay and let's get rid of this guy because we don't need this guy cool and now in here what we want to do is we're going to have a form to take input from the user or to to be able to write a new note or edit that note so right here and we can do it just below header we'll do form and on submit we're going to get an event and that event we're going to prevent default and this is used to prevent refresh on the page and now we're going to call handle form submit which is a function we're going to create and we're going to pass the dispatch and some note let's call it like model note say which is the note that is being edited or created in this model and we're about to create that variable so hold on for a second so let me close this form let me close this form right here and what i need what we need to do to is get rid of this message which is which is hardcoded right now and let's do an input group and i'll explain how everything works as soon as i'm done typing here all this stuff down form let's control so this will be a value of that thing we called a model note which is no if it's null we're just going to do an empty string meaning if it's a new note it should be empty shouldn't be anything written in there else we're just going to show the moto note meaning it's a note that is being edited so that's for this thing and then unchange we're gonna pass an event and then we're going to set a model note to event then target that value okay and this is okay cool and then you you may be asking but what is this model note and set model note for those of you that are not familiar with react this is just simply a this is from the use state hook this is a way to have like remember when i was saying like state in the uh component itself so we're about to create that right now so this is just models of note and then set model note and then this will be from the use state hook so this is essentially the variable so this will have a value which in our case would be whatever notes we write or whatever note we're adding it and then this is a way the way to set this value so set modal note is right here and we're setting it to the event target value which is the value of the user is typing so whenever we change it which we're keeping track with this and then we're making sure we have the user's value so this is pretty much it for the modal on handle form submit we're going to pass this patch and then we're going to pass the moto note which is the note itself and there's one thing or a couple of things we're missing let's add the dispatch here's this patch and it always auto completes when i don't need it to okay okay and then why do we need this because we need to set the first time or whenever this node changes we need to set this internal node so let's let's for that we're going to use a use effect which we have used before it takes a function and the function what it's going to do is just going to set this model note and then we're going to set it with that incoming note we're passing and we're going to execute this every time note changes meaning if they click on a different edit we're going to pass a different note into here so this thing is going to execute and it's going to set the modal note and then with that modal note it's just gonna um display this in the as the value itself nice so let's see what are we missing we're missing some imports because sometimes it imports by default like some of the stuff and then sometimes it just kind of slacks on me for some reason okay so let's import react and then use state use effect use effect from react nice let's import use dispatch from react redux okay and from this guy we're missing a lot of stuff we're missing the form we're missing the modal button and input group we have that last thing will be form control okay so i think we have everything we need right now so things we're missing is we're we need to pass a handle form submit when it's a new note and edit note to this guy so this guy can actually execute something and where are we going to do this so if you remember this is a this is going to be a request to our backend which goes into our services so with that let's head over to notes right here and let's do a couple of these we're gonna do one for new note and one for edit notes edit notes and this is going to have some kind of response which i'm just going to copy this thing okay oh i didn't copy it wow okay so i'm going back here paste in this thing okay response it's not an array it's going to be some kind of object so basically we're going to make a call and then we're going to receive the value and the id at the minimum initiative created so with that we're just gonna have a new note and pass in the response and then let me copy this thing and then this will be edit note and we pass in the response and instead of having this message we can have just notes here and we can have note here as well so cool we're passing notes into this thing and we're calling new note i think that's what we call it yeah new notes and edit notes so we're dispatching this action with the response we're dispatching this action with its response so now we're ready to go back to the modal and so this thing the handle form submit for this guy is going to be new note and the handle form submit for this guy is going to be edit so we got to do is we got to import this thing new note edit note from services slash notes don't see any errors yet so that's a good sign so now let's head over to notes table and let's add the edit note model here so i'm copy and pasting this thing but what i want to do is i want to add this guy and then i'm going to pass it the i want to pass it the note so i'm going to pass n that value to this guy okay i think we're looking good here so let's head over to app.js and add that here so we want to add it at it and probably on top of the table um yeah we'll put it here and then let's move it to the right text line right and let's add it in here new notes model and let's check it out okay okay change the colors from that but let's try it out and it didn't work see the actions new notes please write in the note but it's not in the state so something went wrong there let's try to edit okay close build more full stack applications cool it's opening the right one and if i open this one now okay so let's try that change this test okay that one also didn't get updated and the action didn't get triggered so let's go back to the app okay so there seems to be something wrong with the form apparently so [Music] check spelling looks good this looks good let's go back to modal new note edit note those are getting passed in here on form submit we are calling the function looks good uh-huh but this guy it's not type submit so let's change that type submit since we're here let's also change that color of the edit note to warning okay let's try it again this is a test note okay it didn't seem to have updated the state and in fact it's not here let's see if the edit works i love writing notes too and that also didn't do it okay so let's go back to the app actually let's test the delete works delete still works so let's go back to the app and keep debugging see what else we can find okay so let's double check the reducer making sure that we don't have any other typos ah okay i see i totally mistake this so action types that's why i was never making the change so let's go back and let's test this now all right let's close this thing this is a test edit this was a test cool okay so it seems to be working and the reason why the first one when i clicked that one is because this one we hardcoded a id value of one okay so this is exciting because we are about to start writing our web api and why do we need this so think about it as a web api is it's like an interface that we programmers use to um access data or modify it or you know some some interaction with data so it's an interface and it does the rest for us so we hit those endpoints and inside that service does whatever it's meant to to do and be done right so just think about it like this and as we start working on this you will feel more comfortable with it okay so now let's go to visual studio and let's create our backend projects so we're going to select asp.net core web application click next let's name it notes notes web api select the location where you want that project to be created and then hit create okay now we're going to select api okay so now we should have our 3.1.net core application if we double click here we're going to see that created that that net core app 3.1 so if we run this right now by default it has a controller and it goes directly into this guy and we're gonna change that in a minute so let's get rid of this guy let's delete that we don't need that okay and let's rename this to notes controller yes let's open properties launch settings and launch url is set to this guy weather forecast let's change that to notes and let's do the same thing for this other one so if we go back here the route is set last square brackets controller and what this means is it's going to get the name of the file except the controller part and then name that the route so in this case the route will be notes let's clean this up a little bit let's delete this stuff let's delete this stuff and let's get rid of this this one action result and let's return okay let's get rid of this things that we're not using as of right now and let's see if it builds and runs successfully all right so it's opening up notes that's what we want and then we have my first note okay so this is really good progress next let's create our database so let's right click here let's go to add new project so let's create a class library let's call it notes that create we can rename this class to say notes that's yes yes and this is what we want to do we're going to create a model and then we're going to do a migration to create basically our schema and if we go to microsoft documentation we can see how to do this and this is to create the model basically we have a class specifying what is what tables look like and we need this configuration in order to create the migration and create our table our table is going to look like just an id and a value for that for our note so let's let's copy this thing right here because we need that let's go over here and create a another class let's call this one app db context or something like that let's make this public let's paste that code in there um let's reuse this let's get rid of all this stuff perfect and then if we do alt enter it's going to give us some intelligence of like what to use and if we go here we want to install package microsoft entity framework score find and install latest version so let's click on that and that automatically gets imported for us so it's using that and instead of blog we want to use this model so let's use note and let's call this notes let's get rid of this one because we don't need this guy and right here this is fine okay we'll have to install that in a second and i think we are pretty good one thing i want to do is go right here to note and let's create our key which is a public int id this is called a property and let's create one for value okay so we have this created there are a couple of things we're missing so we need this guy so let's right click on this project and let's go to manage nuget packages and right now we only have microsoft entity framework core installed and we're going to need a couple more at least so we'll need microsoft sql server so let's install that one accept now let's install we need tools in order to do migration let's install that guy and this should be good for now now this is recognized and this is all good let's change the database name to notes okay now let's go to tools nuget package manager package manager console and let's try to create our first migration if we click here we want to pick notes db so let's pick that one as our default and to create a migration we just got to do add migration and let's call it sum name so we can call it initial for example let's hit that see what happens okay so it's saying your startup project notes web api doesn't reference microsoft offensive framework framework core design so let's let's install that in this guy so let's go to manage no good packages browse space that in there and let's install this guy let's go back to package manager console if you click the up arrow you can run the command again let's reference it so if we right click here you add a reference to notes db project let's do that let's go back let's try to run it again okay and this generated our migration and i wanted to go step by step so you guys see these errors in case you run up to them so that you know what to do okay so if this looks all right which we have a primary key of an id and that looks good and then we have a value this looks good to me so now what we're going to do is we're going to write update database and build success so now if we go to sql object explorer or you can click on view and then sql object explorer this should pop up you open this up and this one and then databases and then you'll see notes right here then you can open the tables and then you'll see the table notes and if you click view data you can see that we have an id and value so now we have a database set up and ready to use so now that we have our database set up we can go ahead and create our first endpoint or maybe our second endpoint because the first one was given for us by default so let's do a post and post is used to um every time you're gonna create something so whenever you're gonna create something new you do a post and we're keeping the same route meaning it's gonna be localhost whichever port this is running on slash the name of the controller which in this case is just note and that's it let's rename this method to say create note and instead of returning okay what we're going to do is we're going to create a new class library because you shouldn't have access to your database directly in the controller that's not good practice so right now we have our notes web api and we have our notes database we're also going to create a notes dot core which is going to have for business logic and it's going to have the connection to the database so let's right click on our solution add new project class library next and let's call it notes that or create and now we have nodes.core all right let's right click on web api real quick and add a reference to it now right here we can rename this to say note services okay so right here the first thing we're going to do is in the constructor we're going to get an appdb context let's just call it context and then this is garden this is going to be getting the uh so we we need to so you see what i did what i just did there i added a reference from core to database so if we right click and we go to reference we'll see that i added a reference here because i need reference to this project which has app db context okay so let's declare this private app db context context okay so let's set in the constructor context context so what this is gonna do this is gonna whenever a project is running and we need a app db context whatever we need to access this class dependency injection is going to provide a app to be context for us and dependency induction is more of an advanced topic and i don't want i don't want to get into this topic right now but basically we're going to get an instance of our context when we need when we need it so let's create that method let's call it public and let's say it's going to return note and i'm going to call it create note and we're going to pass in a note and now with that we can do context that add notes and then this should add that note coming in and in order for this to take change in the database we have to save the changes and then and then all we got to do is return that note and with this we are pretty much done for this part there's a couple of things are going to happen and it won't work until we um add some configuration we're missing some tiny configuration that we haven't yet created so let's let's um let's do that next so for this to be able to access our the app tv context let's head up head out to startup and here's where we configure our services and let's configure our db context to be db context now it should be able to access the activity context right now so there's one more thing that we gotta add and it's a tiny change but first i'm gonna run it without adding it so you guys see what it looks like and if it happens to you in the future you know what it is it's a tiny configuration so let's save this right now let's go back to our controller and we set we're gonna call create notes from note service so like i said before we're going to inject that via dependency injection so let's do that here so we're gonna do oh one more thing we're missing before that let's go back here to [Music] note service and real quick create an interface because we need an interface to properly do our dependency injection so let's do notes services and then c-sharp is is good too it's a good practice to put the eye for interfaces and then in here let's make it public and all we got to put is this little thing and let's put that one thing to note is that i'm using the model as what is being transferred to back to the ui and that's not good to do because the database may have other fields that you don't want to expose say you have like social security number for someone you don't want to take that out what you should do is you have a dto in the core project which is a data transfer object and you map the fields that you need between the dto and the model itself right now this is really small so i'm just going to leave it like this but just keep that in mind in future applications so let's head back to our controller and let's inject that guy so this is an i notes oh and i forgot to implement this actually five notes service there you go sorry about that so let's head back to the controller now and get an inode services notes services perfect and let's include that okay and then i'm going to copy this thing this guy and then i'll do underscore service so now all we got to do is essentially make the call here to notes that services create notes and pass in a note meaning we have to get a note from the outside and i'm missing parentheses now let's make sure is building perfect so let's give this a shot now so to test this uh change we're gonna use postman postman is free to download and feel free to feel free to download it or use whatever tool you you want to use or you're used to so one thing i like to do is change this to notes web api because it yes because yes because it gives me this nice console and i can see any errors that are happening or whatnot so this will not be able to do a post request so that's why we need postman so in postman we're going to do is we're going to copy this path put it here click add let's add it here and post and send so we get this error back we get a 500 it says unable to resolve service for type i node service while attempting to activate and this is what i was mentioning before that we're missing a tiny configuration in order for this to work and i wanted i wanted to make it fail on purpose so that you guys remember next time it happens to you you'll be like oh yeah i'm missing this thing so let's let's fix that real quick so we're going to go to startup and we're going to go to services add transient and we're going to have i notes service com comma node service services and this is all we need for it to be able to inject that into our controller and there's different types there's transient there's scoped in singleton a single tone would create only once one instance through the life of the application scope will create an instance per request and transient will create an instance every time it needs to use it pretty much so we're going to go for with transferring for now so let's run this again open up postman let's hit it see what happens once unsupported media type so now we need to pass in the object that we want so it was we don't need to pass the id we just need value and we'll put a value of this is my first note and let's hit that and i'm missing quotations here this is json format keep that in mind okay so we received an okay received a id of 1 and this is my first note back and if we minimize this and we go to sql server object explorer and we open notes and then we open notes table and it's empty so let's refresh it here and there you go this is our first note so looking back at our controller we saw that we got a 200 instead of a 201 when we create something and it's good practice whenever you're creating something to respond with the tool on because that means create it instead of okay so for us to do that we need to we should create another endpoint that will be get and we're going to pass it an id in the route the public my action result get note and it will be an id and then this is going to return okay it's note service dot get note and let's pass in the id this doesn't exist yet so let's go back to this guy and add that so we want to use what we're going to do is it contacts that notes that first and that's link using link you're going to pass a note and then check that id if file id equals this id coming in then we have ourself a note and that's we're going to return so let's just return that so the difference between first and first and default for first or default is first we'll throw an exception if it doesn't find anything and first for default will return a null value and then you can do whatever you want to do with it in our case just throwing the exception is fine so we have this implemented so let's make sure it builds all right built successfully let's start it up and i want to pull up postman let's copy this guy actually we don't even have to use postman we can just do four slash one and there you go this is my first note and just to use it in postman you can just copy this thing and use postman as well and you send it and there you go we get the response now coming back to the controller what we can do is fix this okay to return instead not this one this one to return and set a created at route and let's let's move this out of here still var new node and then it will need a address so get note it would need a new node that id and then the new node itself now this will return a 201 if successful so let's test that so i'm going to copy this paste it in here post body actually i'm going to copy this guy save time and i'll do raw is fine give me the value and the id i mean this is my other notes and let's click send and we get an unsupported even though we have i believe we have everything right oh we need to change this to jason okay let's test it now all right and we're getting no route matches to supply value so we'll have to go back and fix the route because i guess we didn't put the correct uh we didn't put the correct route there let's go back here and get note oh okay so i called it by the name that i will give it you can put the route or the name so if we just wanna be uh more fancy or lazy whatever you wanna call it i will cut this just get notes and then that way oops that way we can just call it by that reference and let's try it again and if we hit this now what do we get sweet id7 this is my other notes and if you see right here we get a created suite so let's go ahead now and implement the other endpoints were missing so we can do a an http get public my action result get notes this is to get all the notes and this is going to return okay another way to implement this is to combine this one and this one it's really up to you it's personal preference so i'm going to save this and i'm going to go to the interface right here i'll call this get notes okay and then this will return um a list of notes and oops okay so let's copy this thing all right so this is going to return context.notes and let's import this okay and then what we can do here is to list and then this should return all the notes we currently have and we can test this let's try it out and we see all the ones that we have created we have some duplicates ones but these are all the notes we have so far okay so now we want to add the delete endpoint and i'm going to start pinning these because we're not using the other one so far so i'm going to close these i'm going to keep this three and the rest i'm just closing right now okay so let's do http delete public i action result delete note and let's get an id so we're gonna do is we're gonna get an id right here and then we're going to call no service that delete note and we're going to pass on an id and then we're just going to return okay so we need to implement this so that's right here get rid of that space this would be void delete notes and we're going to get an id copy that public and now right here what we want to do is we want to look for that note and just remove it from [Music] the array that's pretty much all we got it all we got to do and i believe it will work if we pass in the note uh just the no because we gotta find it right because we're not passing the note so let's let's just search for that so let's do note so it'll be context that notes that first and then end where end that id equals id so if it doesn't find one it's gonna explode and it's gonna throw an exception pretty much so if it finds one there's gonna be a note and what we want to do is we just want to do a context that notes that remove this note and like always we want to make sure we save the changes and that's all we got to do let's um head over to let's run this and head over to postman and check this out all right we created seven last time so why don't we delete this guy now delete seven none right here and let's see okay we got two hundred what happens if we hit it again okay exception here it is invalid operation exception contains no elements meaning that one doesn't exist anymore cool now let's do our last endpoint which is a put this is uh used for modifying uh data pretty much so let's do http put and let's pass in a an id and call this public i action result edit note and we're going to pass in int id and from body we want to pass in a note so basically we're passing the id of even though we don't really need that id so we can assume that the id of the note is enough so yeah let's do that let's get rid of this guy then let's get rid of this guy let's get rid of this guy okay so now we're going to call note services that um edit notes and let's pass a note and then we just return okay it's all next go over here yeah it's fine we don't need to return it edit notes and it takes a note copy this guy and then we stop the project too that's why you see that uh purple line meaning uh changes are not taken into account so let's do public void oops i write it twice and here we want to get the note and update that value context that notes that first id needs to match the incoming note id oh okay edit note it's good to me d and then what we want to do is have this edited note that value equals the notes that id i mean denote that body and like always we need to save our changes save changes there you go and let's test this out so oh i didn't run it let's run it first okay it's running so i'm gonna get the first value the id number one it says this is my first note and now i want to change that i'm going to copy this actually and i want to do a i'll do it put delete this stuff and then i'll go to body and do raw json insert this in here and change this thing to be this is looking amazing let's run this hopefully we get a 200 we got a 200 now let's do a get of this and indeed it got updated so sweet we have all the endpoints and we're ready to jump back to react and just finish hooking everything up together okay so now we're back in the front end and we're ready to connect the front end and the back and this is really really exciting so okay so what we're going to do is we're going to install axis which is an npn package and access is going to be make our life a lot easier by making requests building a request for us really really simple so let's do npm install access and then this should take i think a minute or probably less so i'll show it up right when it's done all right so it finished installing that was pretty fast let's import now um let's go to services and here is we're going to make our we're going to make our http request so let's import access from axis and let's create an axis instance and right here we're going to set the base url and in our case well at least in my case which probably is going to be the same for you guys it's going to be localhost 5001 um notes and this is essentially the url that shows up when you run when you run the web api what we're testing in postman and whatnot so that's what you got to write in here so we have our instance and then we're ready to basically get rid of this and do const data because it returns data and we're going to await this and instance that get and replace response with this thing and that's pretty much it now let's let's pull it up let's see if if it works so i'm going to start the web api and it should there you go and this is the url i was talking about the base url maybe it's the same for you maybe it's different so make sure you copy yours and let's start this bad boy up too let's see what we get here now okay so the page pulled up but we don't see any notes and we know we had some notes right from earlier so what's going on here let's hit f12 and as we see right here we have a course policy error and what is what is this thing this is a cross-origin it happens when there is like cross-origin requests made between like a web browser and a server so when there is uh different like when they're different like for example this guy is localhost 3000 and our web api is running in localhost 5001 so you will get this so i'm not going to go in detail of like what it is and and all this stuff instead what i want to do in this video is i'm just going to show you how to fix it and if you guys need me to go over it i can make another video about it and just just go over this but for now i'm just going to show you how to fix it so to fix the course issues issue we're going to go back to our web api we're going to stop it from running and we're going to go to configure services in startup and we're going to add a policy so we're going to do services that add course options or you can name it whatever you want and then we're going to do options dot policy and then we're going to name it something in this case i'm just going to name it notes policy and then we're gonna do builder and curly braces there you go you want to do builder that with origin and this specifies the origin and for right now we're just going to do star you should be putting wherever you are expecting the request but i think it's fine for right now then i'm going to do allow any header and allow any method okay and i'm missing semicolon here semicolon here semicolon here and perfect okay cool now we add it now we got to put it in the middleware so to do that we just need to add it let's add it after routing use course course and then let's put that same name let me actually copy and paste it so the order right here does matter in the configure method because this is a middleware so this the order matters how stuff is executed and this is more details into how that neck core works i'm not going to go into this those this right now but just know that in here it does matter the order of how you put stuff in here it doesn't really matter but in here it does so keep that in mind so now let's go back to our localhost and it already refreshed i think oh i think if that was cash or something okay let's let's start it back up because i did not do that okay so let's run it again minimize this minimize this f5 and here you go we have all of our notes show up which i have a bunch of duplicate ones but there is this is pretty pretty cool i am very excited to show you guys this all right so let's keep uh hooking the rest of stuff up okay so we're back to our service class let's continue we did get notes let's do delete note now so we're going to do const data equals a weight axis instance that gets and we'll have to we'll have to have um i think it's slash yes and then we need the note that id i believe so we set it up and all we have to pass back in this case is the note because we're not returning so when we did the web bi we didn't return anything so we're just going to get a 200 so if this passes we just pass the note here and it gets deleted so i think this should work so let's pull up the application and we'll see that's not it where are you here okay so okay let's try to delete one of these okay gone cool cool okay so so far it looks like it's deleting properly i'm going to refresh page so it didn't actually get deleted okay so let's do f12 see what happens when we do this thing okay we're getting an error so a little debugging let's put a breakpoint in here and let's hit that again okay so we're getting the error way before that so okay i see so i forgot to change this it should be delete all right so let me pull up the app again let's refresh this close this stuff okay now we hit the break button cool so we're now we're here with id5 so i'm going to let that oops i should have let that go i want to continue that continue and gone so i'm going to delete all this stuff and now i'm going to refresh and we're going to have one nice okay so now we're back to our service and actually let's delete this because we don't need this we're not using it and let's go to the next one next one is new note so that's what we're doing before let's do data and do await axios instance axis instance that post the first parameter you can see it right here is a url so we're just gonna leave it empty and then we're gonna pass note but note right now is just a string so we got it make an object with the value and then note that way it can be parsed in the c-sharp side and let's pass in the response so it's data so we save this and let's pull up the app and see if is working so this is my first note written to the database from the ui we save this and sweet we have the option to write notes now so this is this is really cool so next stop is just edit that's the only thing we're missing all right so on to the last connection so remember um when we were writing the front end that i think we were passing a note what is a string same as this guy and by doing that what was happening is that if we pass a string to the request that we're about to write it won't know which id it is so we have to fix that in a minute but first i want to write this little template thing real quick i'm going to do a weight axis instance that put and this uh yes it doesn't take any other thing it just takes the note itself which we will have to fix that because right now we're just getting a string there and probably we'll have to need to update this guy as well so if we go back to the modal we'll see that the handle form submit is passing a modal note which is a string so it's not an object that has an id so we won't know in the web api which node to update if we don't have an id so since this passing just a string we got to make this an object instead and then this guy is being set by this note which is getting passed in by these two guys new note it doesn't matter because it's null but edit note is getting past this string and it's getting passed into it as well and who's passing this edit note and that's notes table so notes table is passing and that value meaning it's passing the string and we don't want that instead we want to pass a whole note that way we have the id and the value so now that we have and i hope this makes sense but now that we have the note we're passing the note here which is getting passed into the note model which we're setting the notes an object now and that's where we're dispatching right so we got to take care of how the actual form looks like so if the moto note is null just display empty i think this is fine else display modal notes well we have to do more note that value so we display the actual string and on change then what we want to do is keep modal notes the same so we're gonna do the spread operator and keep the modal note the same and then we're gonna set the value to this new value being set right here and i think that's all we got to do for this right now just close the curly brace right there and unless we have some kind of issue somewhere okay it went away cool so it's looking good and then that's it let's pull up the app and now let's try to edit something so let's add a number say two i'm gonna save it nothing really happens maybe if we refresh okay so it did update the note on the on the back end it's just that the front end is not refreshing and i bet it has to do with that change we just did let's try to add a new note see if this one works and this one also broke so let's let's fix that real quick so the new note now is getting the whole object so we don't have to do this anymore we can just pass notes and i think that will fix it and let's test that right now this is a this is an amazing experience is that amazing there you go cool so that worked so now let's let's fix the other stuff okay so we're back here and we want to fix the edit notes and you guys remember when we were doing the controller the endpoint for the editing a note and we actually didn't return anything so the problem is that this is most likely getting nothing so what we're going to do is if this thing is successful we're just going to set notes instead of data and i believe this should fix our issue let's check it out so i'm going to fix this all right so it updates on the spot so with this we finished the tutorial i want to congratulate you for watching this and i hope you got something from it i know when i started it was you know it was hard to learn all these concepts and seeing how one thing uh works with another remember this is this is practice you gotta learn and then you gotta practice if you wanna be like mike and jordan you need to practice every day and and repeat don't be intimidated by how things may look and it may be uh you know very uh overwhelming at times um i think we all have felt that at some point so all you gotta do is like keep at it you're gonna get you you'll get good at it you just need to learn more and do as many projects as you can practice watch more videos learn from different people um and then just just keep keep improving um yourself so i believe in you i know you got this if you have any other questions feel free to leave it on the comments and i'll try to answer them i know i didn't go into details on some areas because this will make this video a lot longer this tutorial so i wanted to keep it more light and something that is hands-on and you can just go ahead and do so so please if you got anything from this video i really appreciate if you liked the video and subscribe it will really help me out and uh that's it you guys have a great one

Channel: Asiel Alvarez

Views: 36,307

Keywords: React, ReactJs, Redux, ReduxJs, ASP.NET Core, .Net core, .Net core 3.1, Dot Net Core, FullStack, Full-Stack, Full Stack, Full Application, Complete Application, React and .NET Core, Entity Framework Core, Migrations, Postman, SqlServer, WebApi, .net core Web api, ASP.NET Core Web Api, Endpoints, Axios, Full Stack Development, Application Development, Full Course, Computer Science, C#, bootstrap, Http Requests, Software Engineering, Computer Engineering, Visual Studio, Visual Studio Code

Id: JW44lrsCkUM

Length: 123min 26sec (7406 seconds)

Published: Wed Oct 07 2020