Next.js and Django Fullstack Airbnb Clone - Part 5 - React, Tailwind, Django Rest Framework and more

okay since we now can add properties through the admin interface now I want to make it possible to add them from the front end so I want to make it possible to click this here to open up a modal window and then go through a sort of wizard where you add title description price per night uh images and similar so just like we created a modules for the login and the sign up and I want to create one for the add property so inside modules folder here in the components folder we can create one more called uh add property right mod. TSX and set this to be a use client uh next we can import image from next image because we're going to use this import image from next SL image and we can import the model uh parent window or what we call the component we are reusing import model from SL model we are in the same folder as this so we can just say SL mod and then we can create the class for this or the function so const add proper model equals create a fat Arrow function like that um in here I want to initialize the use add property model which we have not created yet if you remember we have these hooks one for the login one for the model so I want one more just like this but for the property so you can copy everything inside use login mode all create a new file called use sorry lower case use Pro property model. TS and just paste it there um if I then make this collapsed and you can see that we don't want to call this login model store we want to call this for add property model store we can have the is open the open and close function and rename this as well to add property model and copy and paste and we want to use this store here and another login model store paste so now all of the errors are gone and we can just save and close this file because we are not going to do anything more inside this anyway we close this login model as well uh and then we can import that here as well so here we can import use add property model from App hooks use property model great so we can initialize that here by saying con add property model equals use add property model and a parenthesis then we can Define the content here by saying return parentheses create the empty fragment and then we initialize the model there in here I want to have the is open set to add property model do is open and the same with the close so let me just say add property mod do close which is the functionality this is the Bine value if it is open or not the title for this model can be add property and yes okay you can see that this is actually missing something title does not exist sorry let me just open up the model TSX this is expecting a label not a title label so the new war name because the content is not defined let me just add something here so we can test think I no that's not right yo okay so then we can save this okay so now we can just say at the end there export default add property model and save so now we can import this into the menu so that when we click this this will be opened so that we know that everything there is working so if I go back to the code and then locate one button here somewhere Navar add property button now you can import the modu hook we have cre so import use add property model like that so this come from App hooks use property model so this should be add property model maybe have this typo somewhere fix it there as well and then find this that we created you can see here that I have a typo in the file name supposed to be add property add property use add property use add property but the file name is not correct if you just close that and find the hooks folder there rename this to be use add property model there the error is gone great and I only want to make it possible to add property if you are logged in if you are not logged in I want to open open up the login model so we can import that as well here so import uh login model okay so then I can go back to add property button and continue here so we have the function here and we have this button and when we click this I want to open up the model so we can create a function for this const Airbnb your home equals and I create a fat eror function and in here we can just add property sorry add property model. open now we get the warning now because this is not configure did you mean cannot find this name did you mean no fix this the lower case and we need to say at the top here const add property model equals use add property model so you need to initialize this and when that is done we can create this function which missed the equal sign so com air Airbnb or home fat Arrow function this and then we say at property module do open so then we just need to change this a little bit so it's clickable then at the top here we can say onclick equals add the Li say and Airbnb your home okay so could almost test this user only works in client components okay so this needs to be converted to client component as well use client error is gone and if I click this now nothing happens and H but why there property mod all and this has imported this is open add property maybe it's because I don't think that should matter okay I forgot one thing and that was to add this into the main file where we have the login and sign up model as well so let me just find layout and import it into here and that it then it should work so import add property model and then you can just insert it at the bottom here so save so now you can see it's showing there if I click it it's showing nice now you can see this is the label and here we have the content so that means that now this is working um I only want to show this if if we are logged in so let's handle the authentication here so if you are not logged in the login module will open instead to do this we can first import the login model here so use login model like that we can have this on the top and then we need to set up an interface here because we need to allow a property I want to pass in the user ID from the menu since it's already available there so interface add propery button props curly brace this should be a user ID and since you might not be logged in we need to make this optional by setting this question mark and so this can either be a string or it can be null so now we just need to convert this from from a normal function to a react functional component we're adding this as a react. fc pass in add property button props equals and then in this parenthesis we add curly Braes and POS in user ID so now we take it from here PA it in here and then we can initialize the login model by saying const login in model equals use login model and then in here we can just simply say if user ID then we can show this property module here if not we can say login model doop as simple as that so this will not work right now because we have not passed in the user ID so that will be the next step so if I just go back here find the components the nav bar there then just like we passed it in here to the usern now we can pass it in to the property button and save and then it should work so for us I am logged in no I'm not logged in so if I click there now you'll see that I see this log in here so I just logged in as you can see here and if I click this now you can see that I see this add property instead of the log in nice so then I want to continue building this so what I want to do first is to make it possible to choose between the categories that we have here so let's set up the title on the first step here so just close this close this and close and then we have the file add property model where everything should happen um I want to define the content in a variable up here and just say cont content equals parentheses like that and then in here add the fragments then I have H2 close name mb-6 no space below the title text to XL choose category and then instead of showing yo down there we can instead say content so if I save now go back you can see the title choose category um so I want to list out the same categories that we have here if you can see them in the background and Below have a custom button that says next so we can use that below the title just say custom button passing the label which should be next next and on click so we click this I want to call a function called Set current step to two Okay so we don't have this yet this is actually just a very simple state that uh keeps track of which step in the crate wizard we are in so we need to import this use state from react import oops use State remember this curly Braes from react then we can say const current step then this is then the name of the variable Set current step is the action you can use to change this use State and this should just be zero um no maybe default value should be one is Step number number one which is this one so if I close that now that means that when we click this custom button we set the current step to two and we go to step two which should be describe the place but we come back to that very soon just want to show have the title now and the button so nothing happens now but if I up here for example say a cur libr current step equals one question mark and then the parenthesis in here we need these empty fragments close the empty fragment else curly brace P step two then need to close this curly there so we need to add more steps further down here when we come that far but if I save now click this one you can see that we are sent to step two great so let me open this again and you can see that we are now just continuing on step two but if I refresh the screen you can see that I'm sent back to step one I'm going to make a previous button soon but right now I want to make it possible to select the category and to make it possible to select the categor is very easy I want to create a component that lists this out so in this components folder we create a new folder called add uh property in case we want more components here and then a new file called categories. TSX um here I want to set up the interface because I want to be able to pass in properties because I want to um set which category we have active and similar so interface categories props equals and then data category which is just a simple string but oops not x equal sign there and set category which is a function and we want to make it disposible to pass in a string value to the parent so it's easy to set the category for this wizard void so it looks very similar to the on click functionality that we have used now we can say const c atories oops categories react. FC pass in the categories props equals then here we pass in the data category and the set category so we get this from up here so we get the warning now object lader only specify data category does not exist let me just finish this to see if the error goes away return create an empty fragment in there and a export default categories and yes the errors are now gone so it didn't make much sense why they were there it was probably just because this was not finished um in here I want to have a grid or um Flex box with a list of categor so we can begin by creating this HTML div class name pt3 so padding at the top cursor Das pointer because we want to make it possible to click uh all of the children here pb6 because we want to have some space at the bottom of this flex and item Center so that are they are on the same height space- x-12 so that we get some space between the elements in the horizontal Direction Save okay so it can just be like this now and then we can import it and add it here so here we can say import categories it's important that it is this one and not the other one like that and then if I scroll down then I want to have this between between these two elements so categories and I want to pause in you can see I get a warning because we are missing the data category and the set category so let's say data category we want to pass in the value of data category which we have not created yet and set category so when we click an element in here we want to call this function which again calls the one that we have here which is parenthesis category so we get this string that you can see here we get it back to this one then we just pass it in to set category and pass in category there again you can see that we get a little bit of warnings here now because we are missing these values here you can create them so the errors will disappear so um can have this up here States just so that we can have these um together in a group const data sorry const data category set data category equals use State and this can just be default and amp the string and the data category is the category that we have selected in the list of categories so this is what will be sent into the database in the back end so we are still missing this set category and this sort of looks like one of these but it is actually a function and not a value so let's create it here I just like to add these so that has some more space to make this more readable um we can say set datas because we going to have more of these const set category equals category string so here we are expecting a parameter called category which is of type string equals and then the curly brace and then in here is a set data category to B category um this looks a little bit weird right now but there is a reason why I've done this and I will come back to that later but right now just know that this calls this function which again SCS the set data category that comes from here which is assigned to this value here if I save now go back you'll see the ASDF and that comes from this list in here so this should then be converted to actually show the correct uh categories that we have um so which categories do we have we have these four here let's open up the other categories file there sorry categories these ones so I can actually copy these four here go into here and paste them so I I can see that I get the warning why J does not support atres because it doesn't have props property um this is most likely because I have not imported image yet so import image from next next SL image and then this is gone so if I save now you can see that we can now select between these perfect then we just need to set the onclick functionality for these individual divs here so here I can say on click so when you click this I want to call this set category so then add a curly brace create a f AR function and say set category and pass in Beach you can actually just have the uppercase Beach so it is the same as the label if I just copy this now place the next div and this should be vow do the same with the third one this should be cabins and the last one which is tiny homes tiny homes nice so nothing happens still when we click on one of these um what I want to happen is that one of these should be um have a dark the Border you see at the bottom I want that to be dark when it is active so if I go back here where we show these cloth names here um if I convert this to a curly brace and a back tick and then I end it with the back tick and curly brace and remove it quote then I can actually in here after is a border white after the hover no it's after this border white then I say dollar actually take it before here dollar data category equals Beach so if the category is name is Beach then I want to use border gray 800 if not we use the Border white so um close that one there so it just checks the value that we get in here if that value is Beach then we print this Clause if not the border is white if I click this now nothing happens because we haven't added it to this yet but this one has this functionality so that means that I can copy this Dev so this CL name should have done that before I replaced everyone Villas do the same thing for cabins and last but not least the tiny homes tiny homes so now all of these are working perfect so now that we are able to select which category we want to create a new property in we can continue to The Next Step which should be to have this next page showing here so if I then go back here scroll no we can just close this file close this and close the custom buttons so we only have ADD property model open then I can copy this here go in here create the amp the fragment just so we only have one child for this function and replace the title with describe your place um if I save now you can see that if I go to next you can see describe your place perfect um this isn't really step two it's just if the value is not step one then we are showing this so we can add here colon current step equals two then we show that one then we need to add new else down here like that so if current step is one now do it else if current step is two then we show this else we show this um at the bottom here I want one custom button for going to step three so just replace the value there with three then above this we can have a previous button previous previous button set step one because we want to go one back and we can add a new Clause to this as well so that both are not red so now we can say CLA name and B-2 so we have some space between these two BG black black and hover colon BG gray 800 if we save now we can go and test this go here you can see the black button with the hover effect and the next button I go back there and I can go to step three perfect um just refresh so take get back here then here I want one text field for uh setting the title or the name of your property and I won't want text field or text area for the description um so I want to keep track of these two also in h the state at the top here so we can say con data title set data title and I just used data title data category Etc because then I know what I'm going to send in the back end use State this can default just be an empty string const data description this is stand the long text area set data description use State and this can also adjust default to be an empty string so if I then scroll down again to find this step number two then here I can create a new div div class pt3 so we get some space up to this title padding bottom six that will be down to this custom button and space y4 which will be between the text fields and I can one div for the title so div class name padding Flex Flex call space- y-2 because I want to have the title on one line and the field on the next one and then I have the space between this label title and input sorry lower case input go to the next lines type text when I have so many attributes I like to have one attribute per line you don't have to do this if you don't want to the value can be set to that title and oops when we change this on change and we want to tell the state to change so add the curly bra and then e for event set data title e. target. value so it just sets the state whenever you type something in this field and the value of that will be printed into the field here class name for this can be w- full padding for also P4 so it's in all directions border border gray 600 and rounded D XL and we can close that go back and see if it is working next now we have the title here great and then we can continue with the text area so we can copy this and paste replace the title with description this should be a text area and not an input field so that means that we need to close it as like that because you can't self close a text area the type is not necessary but the value can be data description and the on change should set the data description and not title of course so if I save now go here you can see that we have this text field here like that maybe we should set the minimum height for this so h- 200 pixels which makes it a little bit easier to see what you're writing nice so now we have two steps in this wizard before I continue I just want to say thanks to all of my patrons if you do want to support me you will find a link in the description below step three will be the details like the price per night how many bedrooms you have and and similar so we can just go down here actually we can cop this go down here add it at the bottom above this one and then in here we add the fragment like that and say step three um here I can just copy these two buttons so that I have these two the previous and the next but we need to increase both of these because we're going back to step two or uh forward to step four then at the top you can have the title so we can copy this as well then see here details save so we can check that it is working yes we have the details we have the previous button Etc um then we can start by setting the States for this so const data oops data price set data price this is just a fixed price per night use State and this can be a default to zero and const data bed rooms set data bed rooms equals use State default this to zero just copy this because it's the same thing for the bathrooms bathrooms and we want one last one for the guests how many guests you are allowing okay so then we have the states for for this let's scroll down and since we're using form here as well let's just make copy of this so that we get the div that has the padding above and below and the space between each of these elements then we can say price per KN input type should be number the value should be data price and when change this I want to go set data price and just pass in the value um assignment with a string is not assignable type paramet set um okay how do you set set this to be a number um maybe if I can convert this to par if I just convert this to be and integer then it looks like that is working there are no errors we just force convert is to be an integer so price per night there is an error receive none for the value attribute if this is expected cause the value to be [Music] string okay yes let's just convert this to be a string field because it will be handled on the server anyways so if we go up here I can default this to be empty strings all four of these so we don't have any confusions there and then we need to do the same thing for the bedrooms so bedrooms data bedrooms set data bedrooms great should do same thing for the for the bath rooms both sorry Capital both rooms data bathrooms set data bathrooms and one last one for the guests so guests data guests and set data guests um the title maybe can be maximum number of guests so it's a little bit more clear and save just want to refresh so the error is gone just so that I know that everything is working yes no errors or warning perfect so let's then continue to The Next Step which is selecting the location this will would be an interesting step so let's copy this again scroll down paste then we can copy this fragment and the title close the fragment location and we can copy these two [Music] buttons just increase both of these so if I go to this step now we have the add property oops maybe I want a little bit too far no um sorry this needs to be increased to four so we have three there and four which is location step um I can actually copy this div as well because I want to have the list selector for the countries inside this here select country blah blah blah now it should be here as a step for location select nice um here I actually want to use uh use a component called select country so we need to create this so go back to the code open up here and then inside the forms um yes because I want to reuse this one more place so inside the forms there we can say select country do TSX set this to be a use client component um want to import select from react select okay get a warning here now because this is declared but never read cannot find this module so we need to install it um so let's go to the terminal stop the server say npm install react d select hopefully that's the correct name yes now you can see this was installing I just didn't have internet for the first try there but now it is installed and it looks like this is working so we can run again by saying mpm run Dev go back and now this error is gone nice um before I continue building this component I want to create a an hook for the country selections so this is not a hook for the for a model window but it is a hook for um listing out the countries from A Different package we are going to use but let's create a file called use countries. TS and say import countries from world- countries okay so now I get the new warnings you need to install one more package I think this is the last one stop and mpm install world countries so this is a list of countries and that has Flags the code the label um latitude and longitude which region it is in and similar so that was working then I just need to uh set up a variable say const formed countries because I want to create a list of which countries we are going to use countries. map so I'm going to go through this list create a variable called country for each of the countries and format countries equals sorry like that and this should um say value country. cca2 which is sort of a code for the country for example n o for Norway this also has a label country. name.on and I think that's everything we need right now why are you giving me a warning cannot find label but this is something I want to have here okay not sure why I needed this parenthesis here but now it is working so now I have a list of form meted contes in the values that we want then I can set up the hook whoops you can see up here that I have a typo in the file name let's fix that before I continue use countries close and then use countries equals create create a fat Arrow function and say const get all equals formatted countries so we have a function called get all which just gets this list and we can create one uh for uh con get by value in case we want one specific country equals value which is string so if we pass in for example ano then we want to return this uh object which contains both the value and the label create a fat Arrow function um you will probably understand more of this as soon as we start going through this and as you can see here now we need to set a return but when you do this oneliner this is actually automatically returned by JavaScript so formatted countries do findind and we want to find item I'm sorry I need to define the item as item. value equals value so we Loop through the contries this could just be cont and cont value equals the value that we pass in here then we get that object return get all and get by value now we have created a function that we can use and we return this because this m methods should be available to be used on this object export default countries sorry use countries and save so that should be this whole file so that me and I can close this and go back to select country component and import this import use countries from App hooks use countries and then I want to set up a type and this is almost like an interface for the properties but a type is just uh we Define what sort of values a typical country have so export type select country type here we need to use the equal and this should have a label called string and it should have a value which is also a string so that means that every time we use a contrary we will know that these two values is available on that object and I want to set up interface because I want to pass in a few things into this component so select country props not equals value this is optional select country value sorry value that should actually be the name of this one up here and on change so every time we change the country now we call Value which is one of these types here and set this to be a void so then we can create this select country functionality const select country which is then the name of the component FC pass in the properties equals and pass in the value and the unchange function from up here then I get this warning again but that is just probably because you have not finished this yet export default select country and then here we need to return and set up this empty fragments okay so now that we have everything there we can starty to import this and show it here first we can say select country so get a warning now because this is missing okay um it was automatically imported there so it's not missing anymore but if you were quick you probably saw that we were missing in the onchange function so here we can set this before we continue with the component value should be data country which is also something you want to send into server and if this is changed now say on change equals and we get a value pass this into set data country which is not defined yet value as select country value okay I got a lot of warnings here now but we want to pass in the value into this state here as this which means that when we say value as this one we use what we defined up here and then this component also not just passing in a label and a value so let's scroll up now and Define all of this at the top so we have imported select country but we can also import select country value which means that now this error is gone so we just need to Define data country and set data country so at the bottom here we can say const data country set data country and this is use state but here we want to Define that this is Select country value so that the state knows what values we want to store and just set that be an empty parenthesis save so if I see here now there are no errors here are no errors and it is just like it was before so this ASDF um should be visible somewhere here let me refresh there you can see it was just because I hadn't refreshed because probably because I connected to the internet or similar okay so now we can continue working on this select country because I want to list out all of the countries that is available so here I want to use this select function that we imported select and I want to say placeholder anywhere um we can try to save now and see if this accepts you can see here now do we get select list anywhere no options because we haven't provided anything can also set this to be is is clearable so that we get an X for just U xing out the value uh op options oops options should be set to get all sorry get all a this get all okay we need to import this um and this comes from the use count that you have imported up here but you need to uh set here con const get all equals use countries so then we import this function from this file here and we provide the options to this select with the values if you save now and open up here you can see all the worlds contrary nice and we need to set the value value is value so it's the value that we get up here and when we change this we want to pass this into this function so on change now we get the value to a fat error function I call the UN unchange function pass in value as select country value so we just pass it in back there which will then go back in here and be set ultimately up there save so I can also search here now Norway and then this list will be filtered aome you can see the clear there which comes from this is clearable so now this step is also finished next and last step will be to select image before we are submitting this to the Ser great so let's go back here now we can close this and scroll down copy one of these actually you can copy with the title and probably this class here as well so copy all of these lines scroll down and replace there here we can actually just say else because if it's not one of the steps that we have above then this page will be shown or this step so here we can say image and then copy the two buttons below this div previous should go back to step four and the next button needs to be a little bit different for now it can just say console log submit and the title can also be submit so if you save now go through all of them next you can see image have the previous and we have the submit button which just prints out submit to the console down there anyways now it's time to make it possible to add images in here so let's add a div for this div close name passing py D4 px6 so get some space above and on the sides PG gray 600 and the text can be white and rounded XL then in here I want the input sorry lowercase input type should be file and this should only accept images so image slash S image/ star and on change so when we change this I want to call a function called set image like that so we get the warning now because we don't have this yet so we need to scroll up to Define this so we can scroll up and find all of these states and then we can add it at the bottom here first we can say const data image set data image equals use State and this needs to be a type of file or null so it's either a file or or null and default the value is null and then if you remember we use the function called set image which should come down here const set image equals and here we want to pass in something called event and this event is change event uh there and the event that has been changed is H HTML input element like that and then we convert this to Fat eror function and now that we have the event which is we know is this type then we know that we get an image and we can say if event. target. files then we know that there is a file and event. target. files l length is greater than zero just to be totally sure that everything is okay and we going to say const image or TMP image equals event. target. files so we just get the first one in this list even though there are only one now we can say set data image so now we call the state which we defined up here and just PA in TMP image okay right now nothing will actually happen when we select an image but I want to show a little preview of the image when this is selected so we can check if this variable has data if you just scroll down find step five with the image then below this div we can say data image and then then we have checked if this is not null then we know that it is an image then we just div CLA CL class name w-200 pixels so it's not too big height can be maximum 50 pixels set this to be relative because we want to relative because we want to make it possible to fill out this whole div with an image then image fill fill not full um alt uploaded image just so they have alternative text source is url. create object URL data image so this is just something that comes built in with JavaScript that converts the URL to the image and shows it there we just need to specify some class names w- full W no sorry h- full object cover so it fills out this whole div cover and rounded DXL we can close this fix that indentation it doesn't have to be two in and save so let's try to see if this is working so let's select the cabin and then we can see a preview of the image we are going to upload to the server great okay so now that Mo we have sort of have finished this wizard we need to set or create a function called submit which will take all of this data and send it to the back end so let's go back here again and we can have this above this uh content here we can have it here oops submit so const submit form equals async because we want this to be a synchronous so we can do things and wait for stuff to happen console log submit form and then we can do a very quick validation here just to see that all of the fields are filled in if data title and and data description and and data price uh sorry and and data country and then data image because these are all of the required fields and if this is okay then we can create a new form data new form data this is something is built into JavaScript which creates an object that we can send to the back end I think we also need to search data category because this is also required of course now we just a form data. append we append the category data category we can copy and replace this with title data title the description data description and then the price per night data price and the bedrooms data bedrooms the bathrooms data bathrooms the guests that are guests and then country data oops data country do label and also the country code because I want to store this in the database as well data country oops country count dot value and last but not least the image which is data image okay so then we can use the builtin function that we have to create this we use the API service so we can import this import API service scroll down again scroll down scroll down find sorry not that far here and say const response equals await API service. poost and we want to post to API SL properties slash create slash and we want to pass in all of the form data and we do not need to stringify this data because it's added to the request like this console Lo the response is already printed in API service so don't need to think about that here but I can say if response. success then we can say console log success just to be very happy and router so router. push see here I forgot to import the and initialize the router so I can do that before I continue here so let's begin by importing this import use router from not next router but next navigation is the correct one now we need to initialize it here conster router equals use router and then I can use it down here by saying router. push so we just uh send you to the front page and when that is done we can say add property model do close we just close that if there are any errors we can just show them in the console for now console log oops console log error like that um so we can save now this will definitely L not work now because first of all I haven't filled out anything and we haven't fixed the back end okay so we can start working a little bit on the back end to handle all of this so if I find a property app then I want to create a new file called forms. P because I want to have a form from D Jango to handle all of this Forest so that we don't need to think about security and similar so let's import model form from Jango from Jango forms import model form and from do models oops models import property and we set up the form by saying Class Property form pass in model form then we need to specify the class meta so that you can say which model we want to use which is the property of course and which fields that we want to fill out here we want to have the title we want the description we want the price per night we want the bedrooms we want the bathrooms we want the guests we want the country we want the country code and we want the category and we want the image so if open up mods. Pi you can see that that was almost all of the fields this is filled out automatically this ID field um this needs to be set manually and this is um this is also added automatically so we can save this now go to api. piy in the same folder and import the form we just created so import sorry from do forms import property form and there we can say here we are going to require that you are authenticated so we're not going to use these two decorators but we're going to use an API view in uh anyways and we won't accept post and files I think this only uses post even though it says files but let's have it there just so it will work def crate property PA in the request parameter and then here we initialize the form but thing form not form but form equals property form pass in request. post and request. files so we pass in the post data and the files data then we can check if it's valid by saying if form is valid we know that everything is filled out and correct set property equals form. saave but we can't store it in the database yet because we have not filled out this and it will just crash so we need to say commit equals false remember capital F since this is python property landl can just be set to request. user because we know that the requested user is authenticated because that's the default one we setting that we have property. say and when that is done and everything is okay we can say return Json response success is true and then we will be redirected front page if it's not uh correct then we say print error just that we see in the console what's wrong form. errors and form. nonf field errors so that's a little bit easier for us to debug and then we can say return Json response and we pass in errors like that say form. errors. s Json parenthesis to set this as a function and just forgot to add the curly Braes status equals 400 because something is wrong so before we now can test this we just need to set the URLs and the URLs to this is then API /properties so we just need to part create SL api. create property name API create property and save so if there are no errors here now it means that it should work at the back end so let's just refresh now to have a fresh start select the category Villas the title description price per night 500 five bedrooms two no three bathrooms maximum 10 guests the country can be Angola next then we have image this can be Villa one that one very nice submit and then nothing happened why did not anything happen um that's very easy to find out because I just said console log there darn remove everything and just submit form instead so I just need to fill out this again just add some random information 500 542 yeah 3 guess that sounds about correct Villa open submit okay so I now get the unauthorized and then you can see down here that authentication credentials were not provided the problem with this is that um if I go to the API service the problem is here actually we are not providing the be error token that we need to tell the back end that we are authenticated so we just need to fix this so let's go back to visual studio code and then before we change this we need to do uh a couple of changes so inside lib actions we need to create two new functions here or at least one function so we can say export as sync function get access token because this is what we need to tell the back end that we are authenticated and then we say let access token equals cookies. get session access token oops Oten token this is what we set up here when we are logging in now we can see is this there actually then we get the value and if it's not there then we want to make it possible to refresh the token but we will come back to that later in this course so we can just say return access token save so then we can import this at the top here on the API service import get access token remember the Cur bra say vs code usually adds this automatically and then when we have this on the post function I think we also can add this on the get just so it is there then we can say author S pass in sorry backtick Bearer space very important that you have this space PA in token okay but we do to token come from it should be this one um and at the top here we can say const token equals a weight get access token so this will now either be an empty string or it will actually be a token if it is a token you will be authorized in the backend if it's not you will not be authenticated as easy as that so uh now we just need to use this there as well and save so we can try again now just refresh just to make sure that everything is fresh Villas title and description 10 per night one bedroom one bathroom five guests yes still in Angola next choose file anyone from Angola here by the way use this image and submit and I'm still unauthorized given token not valid for any type token not valid H let me try to log in and log out it might be because of this refresh functionality isn't correct let me just create a new user I don't remember authorization header must contain to space The Limited values okay this might actually not work now because we are using this but this is null okay let's create one more copy of this post without token just remove this remove this and and then add the comma there and then if you open up login model TSX instead of saying API servers. post we say post without token on the login and also on the sign up model post without token just want to refresh now try to sign up again user is already register submit okay so now I am logged in then we can try to submit a new Villa hopefully it is working now choose image submit okay so now I get a 400 bed request but that means that we are one step further it looks like we got to the server um it's just that it didn't work Jason Parts you can decode X invalid start bite doesn't really tell me where the error is UTF it can't decode it might be a simple solution and that is that only this without token should use this one for now and up here let's remove these two and save so let's try one more time submit new no errors I was redirected to the front page which means that at least we got the success message from the server everything looks okay if I refresh you got the new home there nice great so that means that now we can actually post new homes from the front page before I celebrate too much I just want to do a few changes here because I want to show error messages if there are any so I want to fix that before we continue to The Next Step so let me just find the add property model and scroll up to where we find all of the states then the top here or wherever you want you can say const errors oops errors set errors set errors equals use State and this is type of string array and array is empty at the beginning now or default empty and when we submit this form you remember down here that we just showed this in the show this in the console instead I want or at least also we can say const TMP errors equals string uh string array equals object. values response it's just like we did on the login page do map error and a type because it can be anything and then curly braces and then return error so this was actually supposed to be comma sorry colon string and then at the bottom here say set errors pass in TMP errors so the values that we got from up here I just set to that state so now I can Loop through this state and print the errors here together with the submit button and we can Loop through them by just saying CBR errors. map pause in error index and create a f Arrow function like that and I say return POS it in like that with the parentheses create a div I need to set the key here since this is unique can just PA in um the index element which is the iteration we are on now padding five so we have in each directions margin bottom four down to these buttons BG Airbnb so it's red because it's an error text can be white rounded DXL and the opacity can be be 80 so it's not too screaming red and then in here we just print out the error so that was it here now we now have a possibility to create new properties and similar great so that means that if I know go here go to there I can set this to done actually had a few sub tasks here but yes all of these are now done I will come back to this again at later point in this tutorial because I want to have a toast coming down here if there's anything uh sorry when you have posted this and it will come down here that you have posted a new home okay but that was that task nice by the way if you want to learn even more D Jango or view from me you should check out my website codit stein.com the site has many premium courses and a lot of awesome blog posts and for as little as $20 per month you will get access to all of my content and you'll be able to track your progress you can talk to me and similar so go to codit stein.com after the video and sign up okay so now I want to make it possible to uh see the detail page of a property so I can go back to visual studio code just close everything here open up here and find the correct page close there then I have the properties ID and page. TSX so we already have the page but everything here is hardcoded so now I want to load all of this from the server if I go to the back end we have the property and the serializers so we already have one serializer for the list but I want one for the detail page as well because I want more details and I don't want to load all of that data when we go through a list of properties so here we can say Clause properties detail Ser alyer posing serializer model serializer this also needs the class meta for configuration and we're going to use the same model can copy the fields as well because I just want to add a few more so you have the title but I also want the description the price per night is correct the image URL but I want the bedrooms value I want the bathroom's value and I want the guests value and who the land lord is um the landlord does this have a separate serializer no so I need to create that because I want to get the name I want to get the Avatar and similar so um let's create that before we finish this one so in the user account we also create Sera serializers serializers.py and we can begin by importing serializers from rest framework so from rest framework import serializers and from Models import user then set up the user detail serializer and pass in serializer do model serializer class meta for configuration the model we're going to use is user of course and the fields that we want is ID is create Temple ID the name and the Avatar URL okay did we create the URL function there no we don't have that either so um I think this can be copied from the properties this image URL just copy and paste it in the models.py in the user model there this can be called Avatar URL and we want to get the Avatar here so get a um we already imported this for something else here so then we can just leave it like this um at least this is if there is an avatar for this specific user so if self. Avatar then we want to return this um else we can just return an empty string rink so then we have the model that will return the URL for the Avatar we have the serializer that will give us the ID the name and the Avatar URL so we just need to import it here and use it for the landlord field so to do that we can import the serializer we just create in so from user account. serializers import user details serializer and at the top here we say land lord equals user details serializer the read only equals true because you don't want to be able to change this um you can also set many equals false even though I think that might be the default value um so these are then connected and we will get an array with the ID name and Avatar great so then we need to create an API end point for this so let's open up here find the property app api. piy so we can copy this here because you should be able to visit this even if you are not uh authenticated so we can just remove the authentication claes here now said def properties detail pass in the request parameter and the primary key which is the U U ID now we can get this from the database bying property equals property. ob. getet where primary key is primary key now we just pass it into the serializer properties list serializer is not correct it should be properties detail serializer so you need to import this as well and here we can just pass in the property which we just got from the database up here and said many equals false and we know that we at least just get an object and not the list of one object so return Json response serializer do data and save before we can go back to the front end we just need to add this to the url. pi and we can have that below the crate function so path and when we get The UU ID here called primary key PK there is the same as you have to have there slash then we use API do properties properties detail is what we called it and we can set the name to be API uncore properties detailed save so I think that it should be correct there now so if I click one of these nothing happens okay so that will be the next step when I click one of these I want to be redirected to the detail page so so I think if I go to visual studio code I can close this I can close the serializer and the API um this page here is the detail page um you need to be able to get from the front page into this one and we can do that by finding components and the properties property list item so when we click this here I want to be sent to that page so we can begin by importing router so import use router from next SL navigation and then initialize it here uh const router equals use router and then when we click this object here let's just move these to separate lines on click then we can say router. push backck uh /properties Slash and then we can pass in property. ID which comes from this object there so save now go back here and I clicked it then I was redirected to this page which is right now just hardcoded so then means that this is working we can continue working here to get the data from the back end so here we can start by importing the API service import API service like that and then we can get the property from the back end by saying const property equals await API service do get and what we want to get here needs to be back tick like that API properties SL pass in ps. ID and ps. ID is what we get um from this here which I'll need to change a little bit so so this needs to say a sync instead of that typical function call and in here we pass in params which is the parameter ID which comes from this folder name there and after this we say colon and what we are expecting here is params colon ID which is a string so now these parameters here should be be available to be used inside the function here so if I save now go back here and refresh and go to the command line you can see here that we're actually trying to get this specific property from the server nice so hopefully I can now just say property do title and save go back here then you can see here first property which is the one that I clicked on so then I can remove this hardcoded value and then I can start doing this down through the page for example here we can say property. guests so then that should be updated and with the bedrooms bedrooms the bathrooms pluralize that so you can see these are coming from the back end now we can do the same thing with this body text here property do description nice um we can set the price per night which is inside this reservation bar okay let's come back to that very soon let's show the name of the host property dot um sorry oops oops oops property. landlord. name Stein is your host um let's see if there is an avatar property. landlord do Avatar URL that user does not have an avatar okay so um but we can check here if it has so prop property. land lord. Avatar URL if it has that we can show this element like that and then I think I can just PA it in there and then I just say property. land landlord. Avatar URL if it is there so that will probably not render now because we don't have anything so then I just need to PA everything in to here so that we can show the correct price per night as well and in order to pass this into the reservation bar we need to allow a few properties there so let's open up this reservation Side Bar and configure a few things here so here I want to uh set up a type for the property that we are expecting here so export type property and this should have the ID string I want this to have a price per night which is a number and then we can come back to the rest later here then we need to set up which properties that we can pass into to this reservation sidebar right now this is interface called reservation sidebar props and then in here we expect a property property which is a type of property that comes from up here and we need to convert this to a react functional component and pass in the reservation sidebar properties and then here we pass in the property this property we now know that should contain a price per night so we can put it in like that property. price per night so everything here is okay because this file is correct but here we have a new error because we have not passed in the property yet property equals property and the property comes from here and we know that that also contains the correct information so now see $100 per night if I go back to the front page select this one you can the title sff guests bedrooms $10 per night correct there are no host for this because that user probably don't have a name Etc so that means that now I can set this task as well to done we will we will work more on this for example the when we start working on the book property we will pass in the user ID we'll pass in more things like the number of guests that's available to be used in this list that's Etc but that's done now and that was it for this time if you have any questions about today's code feel free to leave a comment below and I'll answer as soon as I can see you in the next video

Channel: Code With Stein

Views: 1,249

Keywords: code with stein, django, learn django, django tutorial, nextjs, react, django and react, django and nextjs, nextjs tutorial

Id: jUNCzIwo9l0

Length: 94min 24sec (5664 seconds)

Published: Mon Mar 11 2024