Django CORS Headers and Next JS Form Submission. Full-stack React and Django Project. #10

last time we started our detail page a little bit better so in this one we're going to go ahead and and submit an email and create a subscriber in our database so we're going to be hitting this endpoint here called subscribers so we're going to be making a post request to this subscribers route or subscribers endpoint and you're going to need to try the email that the user provides and also the campaign that they are subscribing to so whenever we click on a campaign so here when i click on build an uber clone this campaign details or the id also is available in the detail page and we're going to be using that so now let's go ahead and see how we can pick the email whenever a user enters it and also we can handle the submission so our submission we are going to keep it simple we actually are going to use html5 validation so so where we have the input for the email the type is already email but now you can see that if we come here i'm just going to remove this go afresh and submit you can see that it doesn't check it just submits so what we want is to actually prevent it if the user hasn't entered the email so you can specify a required attribute so now if you come and try to submit you can see it doesn't rate us and it wants us to fill the field obviously on the back end we have the validation to make sure that the email is going to be there and it's going to be valid so here if we enter the the text you see we still have to enter a valid one and we can't submit before we enter everyone so that's just gonna do the validation for us so no worries let's handle how to pick the email whenever a user enters it so we're gonna we are going to have to keep some local state to be able to to persist what the user is entering so here i'm just gonna have a const so i'm gonna have email set email so we're going to use the use state hook to keep track of our email state and we're going to start out as a we're going to set out our email as empty so whenever a user changes something so whenever a user enters something in the email you're going to have an unchanged so on change so don't change you're going to have a function to handle the unchanged so we'll have an event here now whenever a user enters something there we can pick the newest value from event target value and we want to update our email like this so we're gonna say set email to event target varia okay so now i'm going to go here and consolidate the email just to see if our own change is working so it's going to load it uh so it's we need to import use it so we're going to go here and input use it it's a named export so so now if you come here let's get the console i'm going to expand this one a little bit so here i'm going to start typing there's something so i'm going to do tests at gmail.com and you can see that our email is being logged here so many we are able to capture it so now let's go ahead and handle when a user submits so we're gonna have a function so whenever a user submits the phone calls and on submit and we need to provide a handler for it so here we're gonna have one submit and we're just going to have a function code on submit i'm just going to call it handle and submit and just create this function so i'm going to go top here and have const and submit equals so this gets the event so whenever the user the form is being submitted by default it is going to be making a get request so you can see it's going to do something like this so we don't want it to behave that way so we can give use this event to prevent the default behavior for when this form is submitted so once that happens then we can go ahead and handle this our way so what we want is to basically make a request and save this email to our backend so the end point you're gonna hit is this it's called uh so here i'm just gonna try to submit this so the endpoint is called slash api slash subscribers so i'm just going to get subscribers because we already have we already have this in an environment the best url in an environment variable so here what you can do is since you're using fetch you can first define our options so these are gonna diff are going to be request options so we're gonna have a method of post so method post so here now we can have a fetch so first text in the url so we're going to use this syntax here to bring in a dynamic url from the environment and to also concatenate there the subscribers so we can do process dot env dots next fabric base url i hope that's how we called it to check and then we want to concatenate there so we can put this put their subscribers like this okay so the first one is where i want to make the request to then we can specify the options so we can specify our options there now since we are going to be making a post request we need to send some data to the server of course so you can satisfy the body so since our backend accepts json we need to create a json string and send that instead of our javascript object that's going to have an email and also the campaign so here we'll have json stringify so what do you want to string file we want to reinforce the email and also the campaign so at this point in time our campaign is going to be data dot id data dot id and uh for the email we would have to try it like this but since the the key and the value have the same names then we can just keep one of them it's going to behave similarly another thing we can specify is the headers so things like the content type but let's first try this so whenever we make a fetch we'll get a promise so we can do two thing so the first dot then is sent from an initial request that is not actually the one that has what the the server responded to so what we want to do with the first response is to actually transform it to json and then the data is going to be in another thing so you can change another thing so here we can expect to have a response from the server and we're just going to consolidate it for now so let's consider response and also if there are any errors let's go ahead and handle them so you can do that catch so let's do error let's console them for now and now if you come back to our web page so i'm just going to enter an email and click notice that by default we are not able to make the request we are not able to make the post request and we get the error saying fail to fetch they are telling us that the the request has been broke by cause policy we didn't satisfy the access controller origin so what you can do here is specify some specific specify some headers so i'm going to go here and have headers so for these headers we'll specify the content type to be application json so what we can do here is we're going to go to server and enable requests coming from this local port 3000 so we're going to be using a module called django core headers django koa's headers and uh install it so we're just gonna do pip install jungle core headers so go to our back end so this is our python server i'm going to stop it and install this so let's go ahead and include this in our installed apps and we're going to be seeing how to use it as we go so let's include it here then the next thing i'm going to need to do is add its middleware so we are encouraged to add the layer before the command middleware so just going to come here and get it right here now the next thing i'm going to need to do is specify allowed origins so i'm going to copy this and uh anywhere around here i will say callers around origins so we want about 3000 to connect our server so also we can just use the domain instead of the ip and once we deploy the front end we're going to have to update this to also accept the front end but for now let's remove this so let's go back to our our front end and try again so here i'm going try making the same request notice that we we update this notice that our record is saved on the server so we get it sent back to us so since both these servers are on localhost you can see it's pretty fast but sometimes we may have a delay so we want to disable the button when we are loading and also show a success message once we submit successfully so how do we do that so in the front end we are going to have to maintain some state for the form submission so we're going to have const i'm going to have one called submitted set is submitted it's gonna start out as false as you may imagine let's also have the loading state so when we are submitting set so const submitting set is submitting we also start out as false so now here once we start to save we so once we start to make the call so before the fetch itself we can set is submitting to true and whenever we finish submitting or we get an error we can update it to we can update the is submitting by the way there is a finery so we can call we can also catch finally so this is called regardless of if things are successful or not so you can see here this is called when the promise is settled by being rejected of a field so whatever happens this gets called after so here we can just set is submitting where is that how do you call it set is submitting again so here we set we set is submitting to false again and also we want to handle we also want to handle is submitted so once so you can see that by default it's going to be false now whenever we submit we'll change that to true so we're going to go here and they do it then so we don't want to look here we are sure it's going to work i'm just gonna get a block here and write some code there so we're gonna set it submitted here to trump so once we submit successfully then we wanna give the user a thank you message so where we have the form right here we are only gonna show the right contents only when the user has not submitted so here we're just going to have if not is submitted so if we have not submitted then we are going to go ahead and you and show the form but if we have submitted so here you can have an or so let's have a div here so here we can just have a thank you message so right now i'm gonna so here i'm gonna have a class name this is gonna be stos thank you and inside here we basically want to show an icon so here i have react icons up so wanna show a check icon just so a user sees the green so we're gonna have to install react icons so npm install react icons so i'm going to be using yarn of course so you guys i'll switch to my front-end server and do a yarn add react icons inside of a thank you div we're just going to have an icon and also the text that says thank you so div class name ecos styles dots icon and the icon is going to go there then let's also have another div that's going to have the text the success text with the thank you text so here is have thank you for your subscription so now that we have this then we can spin up our server again but we need to import the icons and also use the icons so react icons comes with a very many icon sets so you can choose from very many so it's likely that you're always going to find the icon you want from this so what we want to do is we want to import the check one so we're going to import it from font awesome so whenever you're importing icons you want to import from a specific icon set so you can see there's font awesome anti-design game icons hero icons aqua moon ionic icons material i can name but a few so here let's get the import so we want to import from font font awesome so react icons slash fa and the one we want is going to be the fha circle so if a check that one all right and we can use it as a regular react component so down here we can just render the component all right so we can specify props like size so size let's set that one to 17 and we're gonna see how that would look let's also give it a color so the color is gonna be a green one so green so let's go ahead and see what we have gonna go back here it's gonna refresh so we have some typos i believe so it's submitted oh call it submitted i'm gonna change that you submitted and also whenever you're submitting we want to disable the button so we want to disable the submit submit button so if you are submitting then we want to say please wait and also disable the button so we can say disabled equals when we are submitting all right so coming back here it's gonna refresh let's try to submit this click submit you can see it submits and we get a thank you message so let's type the thank you a little bit better we want to flex it left and right give it a background of white and maybe make some things a little bit bigger but you can see you can get where we are going right now so let's see how we group this so we have a div thank you so gonna go to a detail mode due before the before the the media queries let's have thank you let's make it bigger and fix this so we're gonna so let's give it a head let's do something like 400 pixels with a hundred percent of the container then let's have display flex just so they are left and right let's center everything just for content center align item center i love doing that anyway so you just goes in the center we don't we don't want it to be so big so let's make it 200 all right looks good so for the for the message if we check here you can see the message let's change this one to message i want to give it some padding left so dot message padding left 12 pixels and let's save here you can see we get that so let's give the background so the whole layout let's give it a background so background color to white and you can see that so for the message let's give it a get that color so color i believe it's quite i believe it's it's the height is a bit is a bit large but you get the gist let's give it some border radius and yeah so also let's give it some margin on the right because it's kind of stuck there so margin actually imagine on the left 24 pixels let's see what one does and yeah anyway so this is how it looks i'm going to refresh here just so we get a new flow so come here choose an email click subscribe you get the subscription success so that's gonna do it for now so in the next video i'm gonna be showing you guys how to deploy the applications so thanks guys for watching if you enjoyed it give it a thumbs up don't forget to subscribe and i'll talk to you in the next video

Channel: Cryce Truly

Views: 2,596

Keywords: drf reactjs, django rest framework, fetch api

Id: W9NvDrP7s7w

Length: 17min 9sec (1029 seconds)

Published: Wed Sep 08 2021