Material UI Tutorial #9 - Using JSON Server

Key Takeaways

okay then so now we're at the point where we want to start working with a bit of data notes in our case now we could just work with local state in our components but that means that every time we refresh the page it's going to reset our data to that initial state from our component so instead what we'll be doing is working with a json file to store our data and using json server to interact with it so json server basically wraps a json file with rest api endpoint so that we can fetch data inside that json file using a get request or add data to it using a post request etc so it's really good for testing and prototyping so that we don't have to worry about server side logic or databases now i don't want to get bogged down with the ins and outs of jason's server in this lesson so if you want to learn more about it i've got a mini playlist on this channel all about jason's server the link to that is going to be down below so feel free to check it out but the first thing we need to do is create a new file and that is going to be the file to store our data in it so it's going to be a json file and typically what i do is create a folder in the root directory called data and then our json file is going to go inside here so i'll call this db.json db stands for database but you can call it what you want it really doesn't matter and this is where all of our data is going to be stored now rather than me write out all of this json from scratch i'm just going to paste this and you can get this from my repo by the way and woohoo all you need to do is select the correct branch which is lesson 9 from the branch drop down and just find the db.json file so you can grab it all from there but anyway now we have our json and the way json server works is that it looks at this json and any top level property it sees as a resource so in our case we have one top level property called notes and it sees that as a particular resource in our json file and it sets up end points to interact with that resource so i could get all of the notes for example or i could add to the notes so inside the notes array we have three objects each one is a note and each one has a title it has details which is just dummy text it has a category and this is one of the categories we set up before it could be reminders work to do's or i forgot what the other one was let me have a look money so they're the different categories and also each one has a unique id and this id is going to be used by react when we cycle through this data later on and output it to the screen so that is our data file right there the next thing you need to do is install json server onto your computer for this to work so in order to do that you can type npm install hyphen g to install it globally json oops if you can spell it that is json hyphen server and press enter this will install it globally on your computer for you i've already done that so we don't need to do it again but once it's installed the next thing we want to do is run json server and tell it to watch this file right here so we can interact with it so to do that we say json hyphen server like so then double dash watch and then we need a path to this particular file from where we are right here so that's into the data folder forward slash db.json and then i'm going to specify what port to run these endpoints on so i'm going to say double dash port and then we'll run it on port 8000 so press enter and this is hopefully going to spin up this server right here where we can access these different resources so if i control click this now and view it right here this is a simple get request but in a browser and we receive this json data back an array basically of these different objects okay so this is all working now we have json server up and running and we can interact with those resources from our components now the first thing i want to do is retrieve all of this data right here from our notes components and this is where i want to list them so we can see them on this page so the way we're going to do this is by using the use effect hook in this components now if you don't know what to use effect hook is or if you want to learn more about it definitely check out my full react playlist there's videos about use effect in that so the link to that is going to be down below but basically in a nutshell use effect is going to run a function for us when this component first loads and inside that function we can then use a fetch request to grab the data using the end point that json server provides us with all right so i'm going to say use effect like so i'm going to click on the second one to auto import it at the top so inside here we pass a function this is the function that's going to run when we first load this component if you like in the browser now as a second argument i'm going to pass in an empty array and what that does is basically say look only run it once don't run it again every time the component renders because i only want to get this data once okay so inside here i'm going to use the fetch api and the end point we want is this thing right here so let me copy that dude and close this off and i want to paste in right here so this is the end point to grab those notes now this is asynchronous this request it takes some time to do and it returns towards a promise so in that case we can tack on a then method which fires a function when it's done and this function gets access to this response object this is what comes back from this fetch now this response object doesn't contain the data directly and what we need to do is pass it into some kind of form that we can work with and to do that we say response dot json that is a function and what that does is take the json and passes it into a javascript object or a javascript array in our case because it's an array of objects that we're getting back now this is asynchronous in itself and we return it right here so therefore we can tack on another then method which is going to fire a function when this is complete and this time inside this function we get access to the actual data that this gives us and that data in our case is going to be an array of objects these objects right here okay so with this data what do we want to do well we want to store that data in some kind of state so i'm going to say const notes and then set notes and set that equal to use state i'm going to click on this to import it right here the initial value is going to be an empty array but once we have this data right here we're going to update that by saying set notes and passing in the data and that data is just the array of objects that we need okay so now we have that data we want to output it to the browser so we need to cycle through it now the way we do that in react is by using the map method so curly braces because we're using dynamic code then we'll take the notes and we're going to map through those so this file is a function for each item inside our notes and for each item we get access to that individual notes and all we want to do is return some template so inside parentheses for the template and then i'm just going to output a paragraph tag for each one now each one needs a key this is a react thing and it needs to be unique for that particular note so we can grab the id property from that note so let me say note dot id to do this and then inside the paragraph tag i'm going to output the note.title remember all of these are properties on these objects the title so i could output the details as well if i want or the category the id cool so hopefully this all works if i save this and come over to the browser and go to just forward slash the homepage and now we can see all of these notes we just get the title for each one so now we're fetching the data using this endpoint provided to us by json server we're getting that data back and updating the local state with that data then we're cycling through that data and we're outputting a paragraph tag for each one and just displaying the title for each one as well later on we're going to display more details for each one but for now i just wanted to get up and running with json server and grabbing the data cool so this part of everything is done there's one more thing i want to do and that is to send a post request to add data to this file every time someone submits the form and we're going to do that right here so instead of logging this to the console instead i'm going to make a fetch request and it's going to be to the same end points when we're making a post request it still goes to forward slash notes only this time we add in a second argument which is an object and this object is going to have several properties inside it now the first one we need is to say that the method is post this tells fetch that we're making a post request to add data the second one is going to be the headers property and this is to say basically what type of content is going to be sent now the content type in our case is going to be json so i'm just going to paste this in it's an object the property is content hyphen type the value is application forward slash json thirdly we have the body which is where we send the actual json data now what we want to send is basically an object which includes the title the details and also the category so i need to first of all stringify this into json because we can't just send a javascript object when we're transferring data using fetch it needs to be in json format so we say json using the built-in json object dot stringify to do this and then we pass in the object that we want to stringify now the object is going to contain the title the details and also the category so it grabs all of those values category title and details adds them to this object stringifies that and then we're going to send it in the post request and then when json server does this it's going to add this new value to the notes array and it automatically adds a unique id for us we don't have to worry about that property it's going to do that without us having to do anything which is pretty cool so next time we add one it will add an idea 4 or the next id available so this is also asynchronous and once a user has submitted the form i ideally want to redirect them back to the notes component which is just forward slash so what we're going to do is tack on a then method to fire a function after this fetch is completed so this function inside it is going to redirect the user now how do we redirect a user well we can use the use history hook built in to react so up at the top let me do this below classes i'm going to say const history is equal to use history like so click this to auto import it has it done it yep from react router dom and then down here we need to invoke that so we can just say now we want to take that history object and make sure you spell this correctly history dot push which is a method to push on a new route and it's just going to be to forward slash so that redirects them to the home page all right so let's give this a whirl i'm going to go to forward slash create and i'm going to add in a new note so i'll say mario's birthday present and load the details we'll just do a lot of rubbish like this this is going to be a reminder and then i'm going to submit this so now we go back to the home page and we can see that new data right here because remember when this notes component first comes onto the page this function files right here to fetch that data and since we just added that data it's going to include the new one we just added awesome so i know that was all a bit long-winded but now we have json server up and running we don't have to keep revisiting it we have the data we need and we can just now concentrate on material ui again now the next thing i want to show you in the next video is how to display these things in a grid so we're going to have a look at the grid system in material ui