Django & React Tutorial #6 - Material UI Components

Key Takeaways

[Music] hello everybody and welcome back to another video in this django and react tutorial series in this video what we're going to be doing is creating the create room page so we'll actually be filling out all of the annoying html that we need and all the components to make this look half decent we'll then be hooking this up to the back end and making it so that the user can actually you know press a button deal with some nice front-end ui and form and then have a room created based on the information they give to the form so that's about it i will mention that i'm gonna go slightly fast through the actual kind of html creation process because that just takes a really long time and it's really annoying to explain every single possible kind of attribute and thing that we can pass to all of these components i will note right now we are using material ui for pretty much all of this creation so if you have a question about something that i'm using or why i did something you can probably find it online really easily just google material ui plus whatever the question is that you have or whatever the i guess component is that i'm using but to start we're going to import all of the components that we need to use so we're going to say import button from and then we're going to say at material ui slash poor slash button there's quite a few here so i will just type them all out but let's go import grid from and then at material ui core slash grid we also need typography so we're going to import typography from and then at material ui slash core slash typography next we're going to import text fields we're going to say import text field from at material ui core slash text field we then need form helper text we're going to say import form helper text from apps material ui core slash you guessed it form helper text and we have to keep going we're going to import form control from at material ui core form control and then we're going to import link from react router dom this one is different make sure you catch that we've used that before and then three more left we're gonna import radio from at material ui slash core slash radio and two more imports radio group from at material ui slash core slash radio group and finally we are going to import form control label if you spell label correctly from ats material ui core slash form control label okay so now we have all of our imports those are always annoying to type out but usually you don't do them all at once like i just did either way now let's actually go ahead and just start creating this web page uh the reason for that is we'll just make all of the actual like html dom components i'll kind of show you halfway through like refreshing the web page and all of that and then we'll hook up all the logic in the back end because it will make more sense to do that once everything is created although the first thing i am going to define and we'll use this in just one second is default votes equals two the reason for that is we're going to need a value for the default amount of votes to show on the ui and it just makes sense to make a variable for that so now we're going to return from our render a grid and i'll discuss how the grid works once i finish typing this out i'm going to say that's a container and spacing equals one so a grid is kind of the standard thing used in material ui to actually align items either horizontally or vertically if you know anything about css it uses the css flexbox and essentially by default when we define a grid like this it's a container and it will hold and align things vertically in a kind of column structure the spacing says how much space should we put between the items in the grid 1 means 8 pixels 2 means 16 3 means 24. the formula is you multiply this number by 8 and well that is how many pixels of spacing you're going to have in the grid so you'll see how it works when we start going through but that's the basics of the grid now the upper level grid is always a container and then you have grid items within which will be aligned based on what kind of properties you give them so now we're going to make a grid item so i'm going to say grid item xs equals 12 which i'll describe in a second and i'm going to say align equals center and then we end the grid like that so there we go we just created our first grid with an item now this item is actually something that will be inside of the contained grid right or the grid container xs equals 12 essentially there's a bunch of break points on our grid so there's extra small small medium large and extra large what that defines is the width of the screen so when we take an html window i guess or take like a web browser and you shrink it and make it bigger notice the elements on the page move around this is pretty much just telling us what the width of this grid should be when the size of it is extra small now since we're not going to define a small which we could with i think sm and a large and all these other ones that we could do this just means that at all points in time we're going to make this grid item as wide as possible so if you wanted to fill the entire width of the grid you make this 12. 12 is just the maximum number that you can put for these values i know this is probably not totally clear for you guys but just experiment and make this value six and you will see the difference versus twelve six will make this half of the width of the grid where we want it to be twelve so it fills the entire thing uh this is useful if you're trying to align multiple things on the same kind of row i guess you can have you know say xs equals three and then you have four items that will be perfectly aligned together because they only take up three grid spaces where 12 is the maximum that you can have so anyways you'll see that as we go through but that's the first thing next we're going to make a title so we're going to say typography it's not going to be component i don't think actually sorry yeah it is going to be component component is going to be equal to h4 and the variant is going to be equal to h4 typography is just like a nicely styled header essentially from material ui then inside of here we'll simply type our header which is going to be create a room like so there we go that's our first grid item let me go to the web browser i will refresh and show you what it looks like so i am in my web browser but what i'm showing you is not the website we just created instead i am talking to you about the sponsor of this video and this series which is algo expert now as i've mentioned many times algo expert is the platform that i use to ace my technical coding interviews at the time of filming this it has a hundred coding interview questions and you can see i have completed 56 of them most of them being in the medium and easy category but some of them in the hard and some in the very heart algo expert is a great platform to just brush up on your coding skills or again prepare for the coding interviews and if you want to get a discount on the platform then check it out and use the discount code tech with tim from the link in the description so there we go we have create a room that is what the typography header looks like that we just created notice it's not centered or anything like that don't worry about that i'll show you how we can get that to work in one second so actually that reminds me i forgot oh no i did add it here align center we do need a line center i forget if i mentioned that but this is pretty much just telling us hey take all of our grid items and align them in the center pretty straightforward so now we're going to copy this grid item and we're going to make another one so that we'll have something that goes below it so grid we're going to leave item xs equals 12 and align center we're not going to use typography though what we're going to have here is radio buttons that will allow us to select the control of the playback state for our guest so whether they can play the music or whether they cannot play it right or so is play pause or no control so to start we're going to say form control and we're going to say component and no it shouldn't be equal to h4 it should be equal to field set like that and then we're going to close the form control tag this is where we're actually going to put the form funny enough and then we're going to start with some form helper text so we're going to say form helper text we will close the form helper text we'll then make a div in the div we're going to say align equals center and now we're going to put some text which will be kind of the heading of this section so i'm going to say guest control of playback state let's save that and now let's just do a quick refresh and see what we're getting we get create a room and then guest control playback state and notice this is like kind of nicely it's more centered now than it was before essentially and this is centered within the grid so is this all right so now that we have that uh let's make some more things inside of this form control so that's obviously the header now we want the radio buttons so to make the radio buttons we're going to make a radio group so we're going to say radio group we're going to say row meaning we want our radio buttons to be aligned in a row i'm going to say the default value is going to be equal to and we'll make that equal to true there we go we'll close the radio group and now we're going to define two radio buttons inside of this group so to define a radio button what we're going to do is we're actually going to say form label control and the reason we're doing this is because we actually want to have a label for our radio buttons and by default they don't have a label so we're using this kind of wrapper almost uh for our radio button but anyways we're going to say form label control and then we're going to say value equals and we're going to set the default value or the first value to be equal to true now what i'm going to do here is have two radio buttons one with the value of true one with the value false true denoting yes the users will have control and false denoting no they don't have control then i'm going to say control funny enough is equal to and this is going to be equal to a radio button tag so i'm going to say radio color and color will be equal to primary like that so let's save that and this is pretty much saying okay we're gonna have a form label control this is actually what the component is that we're gonna render and then we'll have a label either below or some orientation around that so now we need to define the label we're going to say label equals and this will be play slash pause so that's the level of control the guest will have and then we'll say label i believe it's uh placement yeah label placement is going to be equal to bottom like that alright so now that we have that let's simply copy this radio button and paste it below so now we have another form control this is going to be a value false like that instead of play slash pause we'll say this is no control and we can even change the color of our radio button to be the secondary color not the primary color primary is kind of like a nice blue secondary is almost like a red you'll see it when we actually render this so now let's just refresh the browser and uh what is happening here form label control is not defined so i probably just typed it wrong uh form label control form control label oh well that would be why so i guess it is form control label not form label control so form control label i bet some of you guys probably caught that when i was typing it out and form control label okay so let's refresh now and there we go we got our two radio buttons notice that we can only select one of them at a time and those are the two colors this is primary this is secondary okay now that we have that what we're going to add is a text field and the text field will be where we can actually insert the amount of votes that we need to move on to the next song so let's copy this header of the grid tag or the beginning of the grid tag i guess should automatically close it for us nice now inside of here we'll add that text field so we'll start with form control then inside of here we'll create a text field so we'll say text field like that and text field is as it states just what we can use to type in text now i don't need to actually have like a separate closing tag i can just do it like that i'm going to say required equals true so yes we do need to type something here we will define an onchange event for this but we're not going to do that right now we're going to say type equals the type of this field is a number field the default value is going to be equal to this dot votes our default votes like that we already defined that above and then i'm going to pass something else in here which is kind of unique but i guess it's good to show and say input props and input props is going to be equal to min colon one what this pretty much says is that the minimum value for this text field is one uh the reason for that is again we don't want votes that are negative right or votes that are zero we only want to have that you want to have a minimum one vote to skip so we put min like that this is just sending in extra props where i i can't just type like min equals one that does not work i need to pass it in the input props uh the reason for two squiggly brackets here is that this accepts an object so we need to pass an actual javascript object all right so now that we have the text field uh let's just add some i guess like a label for it cause we don't have any label so we'll say form helper text like that and then inside of here we'll do a very similar thing we did before we'll say div we'll say a line equals center we'll close the div and then here we'll simply type votes required to skip song all right looking good let's refresh and there we go we get a text field we have these two things here we have you know our labels and all looks nice i do want to align this to though in the middle of the text field so let me show you how we do that inside of input props we're also going to pass a style tag we're going to say style colon that's going to be equal to an object and then inside of here i think i can say text align colon center so let's refresh and let's see and there we go there it is nice and centered so just to remind you that's what i typed right there and that aligned the text in the middle all right now we have that we are getting very close to being done at least for the styling aspect let's copy another grid tag and inside of here let's create some buttons so we want a button to actually you know submit this form then we want a button to go back to the previous page at least i would like that button so we're going to use that button that we already imported above i will say button for this one we'll say create a room for the color of this button uh we'll make this one equal to the secondary color that kind of nice red you'll see that in a second we're going to say the variant of this button is equal to contained and then we will have an on click event uh but we're not going to implement that quite yet so now let's just simply copy that whole grid thing that we did and let's make another one for our back button so now we will simply say back and for this one we can actually implement the logic right now to make this go back to the previous page or go back to the home page so rather than having the color be secondary i'm going to make this color be primary i think that's the color i want at least yeah let's go with primary and then we have variant equals contained yep that's fine then we're going to say 2 and this is going to be the url we want to redirect to when we press this button so i'll say that's equal to forward slash and then i'm going to say that the component for this button and i'll discuss this in a second is actually no come on give me the autocomplete component equals and that's going to be equal to link that's why we imported link from react router above pretty much what this is saying is that this button will act like a link that's why the component is equal to link and we will redirect to slash if we press this button so let's have a quick look at our webpage and see if we messed anything up and there we go we have create a room and back now that i'm looking at it i kind of want to switch the back and create a room color because i just like the created room to be the other color so let's go ahead and do that let's make that primary and let's make that secondary like that okay so there we go now those are switched up my opinion that looks better let's press the back button notice it brings us back to the home page all right so that is it for actually styling and creating kind of the ui we will make it look better later but that's like all i wanted to do for right now and now we will implement kind of the back end logic and all the on click events and all of that so there's many different ways in react that we can pretty much press the create room button grab all of the information from our form and then send it to the back end the way that i'm using is pretty conventional we're going to use react state to keep track of pretty much what is in our form and then whenever we press that button we'll look at the current state that we have up here which we'll define in a second and we'll send that information to the backend so to start i'm going to say this dot state and we're going to set some default state so to start we're going to say guest can pause that's going to be equal to true and then we're going to say votes to skip and that's going to be equal to this dot default votes all right so that is our default state i think i've used state before in this series i might not have though so i will kind of explain as we go pretty much we have this state in react uh if we ever change this state or update the state it automatically refreshes and forces the component to update so what we're gonna do is pretty much say okay when you you know change the radio button or you change what's in that text button we will update the state and then we will show whatever the state is in that text button or sorry in that text field or in that radio button and then when you press create button we'll just create room sorry we have miss speaking all over the place here when you press create room we will look at the current state and we will send that information to the back end to create the room so we need a few methods the first one that i'm going to do is this one is going to be called handle votes change so i'm going to say handle votes votes changed or yeah i guess change changed i don't know what we want to do let's go handle votes change and then this will simply take e which will actually be the object that called this function and then inside of here we're going to say this dot set state this is the method we use when we want to modify the state and react inside of here we open up these curly braces and then we simply just type the i guess key of what we want to update so here we'll simply say votes to skip and that will be equal to this or sorry not this e dot target dot value now in short what this will do is get the object that called this function which should be in our case the text field it will then get the value from that text field and just put that here for votes to skip okay so that's pretty straightforward hopefully that makes sense now let's have another method and this one is going to be called handle guest can pause change so kind of a mouthful but handle guest can pause change and we're going to do literally the same thing inside of here we're going to take e and we're going to say this dot set state and inside of here we're going to say guest can pause and this is actually going to be equal to a little bit of a different one that we just wrote where we say e dot target.value equals equals equals true because remember the default values are strings and we're going to say question mark if that is the case we'll make that true otherwise colon will make that false so pretty much this is saying hey if this value is equal to the string true then make what is here true otherwise make it false so this is just i actually don't know the official name of this but it's like an inline if statement in javascript so now that we have these two things let's hook those up to actually our appropriate things inside of here so let's go to our radio group and on radio group let's go on change and that's going to be equal to this dot handle and i believe this should be guess can pause change i don't need to add the brackets because it will just call that function when an on change event occurs an on change event will just be you press the other radio button essentially all right so we have the on change there now let's go to text field and let's say on change is equal to and you can probably guess what this one is going to be it's going to be this dot votes handle votes change so i even typed around but this dot handle votes change so whenever we modify this text field we will update the state and now what we're going to do since that should be good is add actually an event for when we press this create a room button or add a function i guess that we can call so now another one we'll say handle room button pressed in this one we're actually not going to take e and i'll show you why in one second and we're going to go here and actually bind this method to the class now you don't have to really know what that means i will explain it though we're going to say this dot handle or is it what did i even type here handle room button change handle room button clicked or was it pressed pressed come on i can't even remember two seconds ago so handle room button pressed is equal to this dot handle room button pressed and that's going to be dot bind to this now this seems strange but all this is doing is simply binding this method to the class so that inside of this method we have access to this keyword if you don't do this and you have a method that you're calling from inside of your dom elements here it won't have access to this keyword so if you ever want to have access to this keyword from any of these methods you're using as like on like event changes essentially i need to bind them like that so anyways now we have handle room button pressed it is binded to the class with this so i'll have access to that from inside and now we're going to need to call that method from the on click of that button so let's go here to our button and let's go on click and that's going to be equal to this dot handle room button clicked or why does it keep giving me the clicks i just assume that that is correct but no it should be handle room button pressed all right now for now inside of here just make sure this is working we can just console.log this dot state and that should just show us our current state and then we can see if everything's working fine so let's go to the browser let's refresh all looks good let's so create a room and we get guest can pause is true votes to skip is 2. let's modify this and oh we got something wrong cannot read property set state of undefined interesting so what does that mean oh so this is an interesting one so inside of handle guess pause can change and handle votes change i'm trying to use this keyword now notice what i just said we're not going to be able to use this keyword unless we bind the method to the class and guess what i didn't do bind these two methods to the class so actually a good error to run into a rookie mistake so let's fix this i'm going to say this dot handle votes change equals this dot handle votes change dot bind this okay and then we'll do the same thing this dot handle that equals this dot handle guess pause change dot bind to this okay so let's go to the browser now let's refresh all right let's go to four create a room and notice votes to skip is four and the value is true now let's go and do this to be seven boom that's true let's make that there there we go we get false so our state is updating fine all seems to be working well uh and now what we need to do is just hook this up to the back end so now let's go inside of handle room button pressed instead of console.logging let's actually send a request to the endpoint we created previously that will allow us to actually create the new room with the information from this form so this is going to be a little bit of stuff just follow along with here we're going to say const request options is equal to and then inside of here we're going to say the method is equal to what is it well it's going to be equal to a post method we're going to say headers and that's going to be first of all as a string content i think i had that spelled right actually content hyphen type and that will be colon and equal to application slash json so this is pretty much just telling us what type of content is coming in this isn't always required but in a post request usually it's a good idea to add it so we're going to say we're sending application json content and then we're going to say the body of our request is going to be equal to json dot stringify like that and inside of here we're simply going to put a javascript object that will be converted into a json string that we can send so first we'll say votes to skip and that will be equal to this dot state dot votes to skip and then we'll say guest can pause and that's going to be equal to this dot state dot guest can pause all right so now that we have that this will pretty much just take from our state whatever the value is and send that uh we'll it'll be part of the request option so we'll send it when we send the actual request okay so hopefully that's all good uh now what we're gonna do is first of all add a semicolon there and we're gonna make a fetch request so we're going to say fetch and we're going to fetch this to where well it should be to slash api slash create room i believe that's the end point i set up we're also going to pass the request options in this fetch request and then we're going to set a dot then i'll discuss what this does in a second we're going to say response and that's equal to response dot json so pretty much what i just did here is i said okay i want to send a request to localhost right or whatever this is running on whatever react is running on to api create room i'm gonna send it with the request options which is gonna have the payload which is my body it's gonna have the type being post and the headers of the content type and then i'm going to say okay once we get a response that's what this dot then is saying so once we get a response essentially let's take that response let's convert that response into json and then after that we're going to say okay now let's take the data and let's do something with the data well what are we going to do with the data for now i'm just going to simply console.log it just so we can see what it looks like but pretty much we're saying take the response convert it into a json object and then take the data which will be this response.json object and print it out but you'll see that we'll get all of the things relating to the room in this response and then well we can do something with it but that's probably going to be in the next video anyways let's have a look here let's go ahead and refresh this and let's just send a create room right now so we send that and 500 internal server errors let's see what the error is here let's go have a look at our server all right so having a look at this error here i've just poking around to make sure i wasn't getting too lost on the video um it's saying not no constraint failed uh room guest can pause so pretty much what this is saying is that we didn't get the information that we needed in the request and so not null constraint is not satisfied because well it was null when we tried to create the object uh what that means is that we just have to rename this these fields right here to actually have underscore so i'm going to say votes underscore 2 underscore skip and then i'm going to say guest underscore can underscore pause the reason for this is that these field names need to match what i'm looking for from my server so here if i go to views.pi oh it actually it should be getting yeah just getting the underscore version so guess can pause in votes to skip so i need to make sure that my data is is matching that essentially before remember i had the camel case instead of the snake case so i just switched it to snake case now hopefully this should work i haven't tested this but let's give it a shot let's refresh and let's go create a room and notice that works so we actually get a room now and says okay the code is this that's the host and guest composite is true votes to skip is 2 dot dot all right now let's try to do it again with 4 votes when we do that have a look we actually end up if i can make this full screen we have the same code same host votes the skip has changed and guess to pause is what it was before all right so that is pretty much it for this video so that will show you how to send a post request from the front end so now we're going to communicate with the back end doing something similar to this how we actually make kind of a nice looking ui in the next video we'll clean this up a bit i will actually talk about what to do next so now that we have that room created kind of how we can redirect the user around and yeah that will be what we're doing in the next video so hopefully you guys enjoyed if you did make sure you leave a like subscribe to the channel and of course i will see you again in another video