Next.js and Django Fullstack Airbnb Clone - Part 8

okay so now it's time to start working on search filters so I want to activate this so that we can add location check in and out date and who how many are coming how many bathrooms they want Etc um first we can begin with setting up the model for the search filter so let's go back to visual studio code and just like we have worked with other models I want one for the search so we can begin with the hook for this so let's create a new file use search mod. TS and then I can just copy a little bit from this because there are a few things that I want to reuse so just copy everything from login model and paste it there then we can rename this interface to search modu store down here replace with search mod store and the name for this use search model and replace this at the bottom as well I also want to set up a um a type for this so that we know what we want to search for in the backend so export type search query equals curly Braes and I want to search with the country and this should be a type of string and I want to know when we are checking in so this is check in this this is has to be a type of date uh check out is also type of date guests is a number and the both rooms oops both rooms also a number and bedrooms also a number and which C atory are we searching in category is also a string so this is all of the data that I want to sent in to the back end and since we now have this as a type it's very easy to do that um for this interface um we have now this open and close but I want to have a few more things here I want to make a possible to set the query here so we can add query which will be a string or research query referring to this up here and a set query which then is a function which takes one parameter which is a query but a type of search query and void so now this is used to get this information and this is used to set the information sorry I forgot to add the uh for to close something here or is it just that I forgot to put them down here as well let's put in the query Here country empty string check in can be null check out can be null um guests can default to one bedrooms can default to zero bathrooms can default to zero and category can be an empty string and maybe we can set these to be either date or null just that we can have this reset and don't be anything um then now we have the query we that just need set query so set query call this as a function where we pass in the query which is a type of search sorry search query set this to be an error function set and query query so now that error is going just need a comma there so now we are exposing this function which again will or this is exposing and this will set it and then we can get it from here after it's set in there so I might need to do more things with this later but it can just be like this for now so now that we have this use search modu hook we can create the modu itself so just open up models in this folder create a new one called search model. TSX then we can create a class or a constant function const search model equals create this as an arrow function um how to set up a dynamic content that I want to render here so let content equals and then just add some empty fragments in here and then later I'm going to manipulate this based on what step in the search process we are in and then at the bottom here we can say return and then mod all so now we import that which is the main model or the reusable component is open equals search search model dot is open see this converted to capital S which is not correct and that's because we haven't set up the use model yet so import use search model like that and then in here we can say const search model equals use search model so now this is initialized and we can use that there okay but this also takes more properties for example the close we close this search model do close and what is that the title to be search and last but not least the content content so I'm me just pass in this here um label maybe the correct one yes okay so if I just rearrange this now to make it look a little bit better like that so then just want to export this export default search model and then we can import this into the layout. TSX so it's available there so import search model down there and then we just insert it down here so search model and self close this so now this should be available to be used um if I now open up the navigation bar component Navar search filters so anywhere when I click on this I want to open up the search model so I Can Begin by importing this import use search model and then we initialize it there const search model equals use search model then I want to move this to a separate line like that and here I can set one click so I can just have it globally on this whole div and when we click this uh we can Say Arrow function and search model do open and we can also pass in something called location here so this is not actually expect it um let's just skip that for now I might not need it anyways okay so then we can have it like this and if I now go to the website just user ref only works in client component and this is in the search model TSX so I need to set this to be a use client and that's also the case for this for later so if I now click this I'm presented with the search model great so first here I want to make it possible to uh select between which countries we want to search in so we can go back to visual Studio code and start setting up a few things so here we can begin by importing a few things from the country uh Contra component which we created previously for the add property component so import search uh not search but select country and select country value which is um it's just a type for the label and string as you can see here and we can define a variable down here const country and set country equals use state which I have not imported but if I hit enter now it will Auto Import this from react and I want this to be a type of Select country value just default this to nothing um if I then scroll or go below here I want to set up a Content just for the location so const content location equals add in the parenthesis and then empty fragment in here I can add a title H2 class name set margin bottom to six and text to excel where do you want to go um this will not work yet and in order to implement this and make it possible to go back and forth and similar in this here I need to do a little change to this search module here for this search module store I can add a step to this one step which should be a string then down here you can see that I get an error now but if I just step to be default empty then it can be like this and in the search filter where we have this here I can now pass in location so you can see here this is not expected yet but it should be if I here say step string and we are expecting this and when this is open it will also set it up here um down here on the open function I can set step step uh cannot find name step no need to POS it in there so this works now that here we PA in location which goes in to use search model as you can see up here we have Define that we are posing in a string there so we get it here from this search filters and then it goes in here and set step to be step and step step this here is step and then we can use it here in the search model to Define what uh the uh content should be so here I can say if search mod. step equals location then I can say content equals content location and if I now save I can go back click this open and then I get the title here where do you want to go perfect if I now change this a little bit we can PA in cont here and we have imported component I can just use it here select country I want to set the value to be country which comes from this variable here cont and on change so when something change in here then we get the value from that call and call set country up here and and here we pass in value as uh select country value so now I know that this will only work if I actually get a label and a title or a label and a code I think it was so now go back I can search here for Norway select this and now this is ready to be used great now we need a button to go to the next step so let's add a div here so so that I can uh so that I can have a button inside div class name mt6 so I to space up to this component here Flex Flex row and GAP four this is actually not needed for the first step here but I want to just have it to it's similar on all steps in here I want to use the custom button you can see here now this was Auto imported and then takes a few uh attributes like label set the value to be check in date because that's next step and on click then we call an error function like this and then we can say search module. open and Pa in check in which will be the next step then I can close the custom button like that if I go back now click this one nothing will happen now because we have not set up step two so if I now Define one more here const check uh sorry content check in equals error function like that and then we set up the empty fragment and in here a title just like we have up here um and then we can say when do you want to check in down here I can say else if search model. step equals check in which you can see we are setting up here then the content should be content checkin think we can test this now if I go back here now this automatically show up here now perfect um we also have created a calendar vidget that we used uh for the booking so we can import that and reuse it import calendar from date range so it didn't actually create that but we're going to use this so move it up there just so we have it nicely as this and for using this we need to specify a few variables you need to set initial date range I think I have this um on the reservation sidebar so let me just copy this these five lines paste it and down here I can say const date range set date range this is then the select a date range that you want to check in and out of use State then I want to set this to be a type of range so I need to import this also from react date range and default this to be initial date range like that um then we can also create a new function here for when we change the date range set up a comment here contents and set date range const underscore set date range and I just said underscore here because this is not I don't want to override this and I want to have the same n just so I know that what's happening and here I want to pass in a selection selection a type of range then we make this an arrow function like that and then we can say if uh search model do step equals we can use three equals just to make it as secure as possible if this is check in then we want to set the start date so if this is checkin now we're just want to go to the next step which is uh check out so search model do open and then we can say check out else if search modu do step equals equals checkout so if you are on the checkout and we go want to go to the details so search model. open details details like that and when we have moved here we can also set the date right R just so that's done set date range and here we can PA in the selection which will then be the start date and the end date for the checkin so if I now go down again and find the content for the checkin we can insert a calendar so calendar set the value here to be date range this is what we have up in the state here so this is now the initial date range which will be today and tomorrow I think and what will happen when we change something here so on change then we pass in the value here and call the custom function we created the set date range pass in value do selection because selection is a property on this one um S range no that's not correct property selection does not exist on date and then close this so the date has no properties in common with range so I have probably done something wrong here yes and what I have done wrong here is that it's not this calendar here no um we you going to use this calendar which takes these values um so let's import the correct One Import calendar um okay did I use a different the date picker is the name I used date picker okay so that might make more sense po it in there and then I can say value do selection so then selection is a property on the value self close that one close there so everything there is okay and then I can just copy this and we can have a button down here to go to the next page so the you can have one button saying check out date rename this to check out and if I take one more button above here this can go back to location location and I say location there as well so I can save this now and test this so now we have a date here that we can a calendar if I click there I can go back so let's select the country check in date um this is the last day of March so let's select the date there and then I'm sent to the next page which will be the checkout page um this will be very similar to this one so let's just make a copy of this and say check out when do you want to check out the date picker can just be like this and the oops there was one too many of that one sorry the back button here should go to check in date re this to check in and this button should go to details and Reen this to details if I scroll down I can add it down here as well so check out check out go back to the browser and now I have this check out functionality as well since is refreshed now the state is a little bit weird so select a country select a check in date fourth and now I'm on the check out page so I want to go and book from the fourth to the eight and then I'm on the detailed page where we are supposed to fill in how many guests are coming and similar 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 so that will be the next step if I just did a Todo list now I can probably check out a few of these so now we are on the detail page great so back here again now go to visual studio code and set a few more States here so we can say const num guests set num guests and this should be a state of course if not we won't be able to keep track of it the right way it can be a string and the default value can be one then I want to do the same thing for uh the bedrooms like that default this to zero because you don't know how many bedrooms you want and oops uh I want to do the same thing for the bathrooms default this to zero um like that so now we have three new variables that we want to fill out on the detail page so let's create the content for that as well I can make a copy of this and say content details and the title there can just be details no question mark no date picker and the back button here can go to check out date set is to check out um and here I do not want to have a next button here I just want to have a search button so the label here can be search and when you click this I want to call a function called close and search but I will come back to that um now we just need to edit here else if search model do step equals details content equals content Det details let's see if it is working there was [Music] nothing content details forgotten s there and now we have the details there the buttons nice okay so now it's just time to set up three uh input Fields here so let's go back to visual studio so here I just add a div close name space- y4 that has some space between these input Fields Dev class space y4 u because I want to have space between the label and input field so label and number of guests colon input type uh number and uh oops no I'm messing here um the minimum value here should be one and the value should be num guests when you change this I want to call a function so onchange here we pass in the event and set num guests should just receive the value of e. target. value which is the content of this input field also need some claes on this here one let me just clean this up a little bit by moving everything to separate lines so they are not so long the input field here should be W full I want this to be height 14 and PX4 so it has a space inside this um input field border border gray 300 rounded DXL and I can also set a placeholder here number of guests so let's see if this looks okay yeah I think so good now we can make a copy of this whole thing here but instead say number of guests here with number of bedrooms so how many do you want where you are overnight bedrooms num bedrooms and set num bedrooms okay that looks great let's make one more copy for the bathrooms num bathrooms number of bath rooms and set num bathrooms and that should be it there so when I then click this button here everything should be sent to the back end so we can create the function for this and just call it so the function should just be called close and search close and search because I want to close this model and perform the search so if I scroll up we can have that up at the top here doesn't really matter where you put it const close and search equals Arrow function like that and in here we can say search mode mod. close and just do that for now if I click this this will close and in theory the back end should be called now um I think I can set this to done now and I can work on the back end to receive all of this data before we activate the inserting of this so if I go back to visual studio code I can find API do PI no I cannot um okay I'm missing my back endend folder here so I need to add this to my workspace probably close this at some time add there so now I have the back end there and I probably now can find api. pi inside the property app great so in property list here I want to receive a few more things so we are already receiving these two filters but we want to receive the country request of get. get country default this to empty and the reason why I like to use get instead of post here is because this makes it easier to just manipulate the string and hit enter if you want to do that copy and paste replaces with category category I haven't worked with that in the front end yet but we will do that later check in date check in date or check in which is the variable name we use in the front end check out date check out and we want one for the bedrooms bedrooms actually it's called num [Music] bedrooms guests num guests and last but not least bathrooms num B rooms so then we can start implementing more of these filters below this favorites we can check if guests that means that you have added that in the query then we can say properties equals properties. filter and we want to filter where guests is greater or equal than guests so that means that if you search for five guests and the property only allows four it will not be showing in this list then we need to do this with the bedrooms so bedrooms bedrooms and the bathrooms bathrooms and if we have set the country country then we filter on the country but this is not greater or equal this is just country equals country this also needs to be bedrooms sorry and bathrooms um and also I think you can just add the check for the category as well since we have it here in the backend now category so if we have the category set and category not equals undefined then we can filter on the category as well so where the category is category which is also just a simple string so now we have made almost all of the filters except the check in and check out these are a little bit different so we can have these on the top here and say if checkin date and checkout date then you can say exact matches equals reservations now we need to get all of the r reservations that matches this doob do filter where the start date equals checkin date or where the reservation doobs oops objects do filter and date equals check out date now we get the exact matches and then we want to get the overlap matches in case you're just searching for um 1 to F and it's matching on the fourth and up um equals reservation doob do filter start date is lower than or equal to checkout date or that the end date is greater than or equal to checkin date so we should get all of the matches then I can create an empty array all matches just so that we get them and then we can Loop through all of these fields here and add them to this list so to do that we say for reservation in exact matches or overlap matches then in here it all matches do append [Music] reservation lower case dot property underscore ID because I only need the ID for this one and then I can say properties dot sorry equals properties then I just override as a variable exclude so we want to exclude all of the matches that we have have here ID n equals all matches so if the ID for the property we are searching for is inside this list of matches then we exclude it from the from the search results so I think that was it for the back end we can see if there are any errors if I just open up this one look looks like it's still running perfect if I refresh I still get results um so API end point should now also be finished so now we just need to send the data to the back end and filter it on the front page so we are soon ready to go here now so if I find search model where we have this close and search functionality and I want to create a new variable here const new search query this should be a type of search query in here I want to pass in the country country. label this just need to be that in case it's not set yet a check in should be date range do start date check out should be date range do and date and we need to set the number of guests so Pars in so we send this as an integer num guests do the same thing with the bedrooms num bedrooms and the same thing with the [Music] bathrooms bathrooms sorry n bathrooms of course and set the category to be empty so you can see I get a warning here now date undefined is not necessarily okay to use um country should be able to be undefined so we need to change this here to be um null or undefined find and the same thing for these two see if that is working you can default this to be undefined I don't think this is the best way to solve this but yeah yeah it's working um so save no you don't need to save we now created this variable and then down here we call search model do set query and just pass in new search query and um this function is what we created down here so now it's easier to send this to the server so this search model should now be finished and we just need to do some changes in the search filter so now that this has been set you know that this is now in the state of the browser so if we now open up property list. TSX we can do some changes here um here we also need to implement the search model to get this data so import use search model and scroll down and initialize it here so const search model equals use search model like that and then we can set up a few uh variables that will be sent to the back end down here so we can say const cont equals oops country equals search model do query. country do the same thing for what is this it's just declared and not readed it's okay num guests and num or guests num bathrooms [Music] bathrooms num bedrooms bedrooms and we want to check in and check out dat check in date check [Music] in check out date check out and category category category by the way is these four here on the front page which will be coming back to soon category so now we have that and we can scroll down to this get properties so here where we are building the URL we have already checked for these but I want to build this even further so this does not have search filters so here we can just say else and then we try to rebuild the query so let uh URL query equals set this to be empty if country so if this variable exist we say URL country URL query plus equals EMP Sign Country equals plus country then we do the things for all of the others the num guests so if there are guests then we PA in Num guests and num guests do the same thing for n bedrooms do same thing for [Music] bathrooms oops n bathrooms copy and paste again do the same thing again for checkin date check in and this needs to be format so we use format and pass in check in date and we want to format y y y y- mm- DD check in date oops there I lost the format y y y y mm DD so I need to import format here if I just scroll up I can say import format from date FNS so's can scroll down and do the same thing for the check out date check out date check out date re this the check out and now almost have everyone need to the same for the category that's more similar to this so category category and category so I think that was all of them and then at the end here we can see if any of these actually are filled out just to be sure that it is if URL query do length that means that it has been filled out console log oops log query URL query just so you know what we actually are searching for and then I need to append a question mark at the beginning here so URL query equals question mark plus URL query do substring and we want to remove the first one which is this Amper sign so we just remove the first one of that if not you won't be able to read this in the back end and then a low below here we can URL equals sorry plus equals URL query so then we append this URL query to the URL that we have up here and do the same thing as we did with this so then this can just be like it is and I think we are ready to test now um so wanted location select the country Angola select the date can go to eight to the 11th number of guests two I want one bedroom and one bathroom search um see if we got anything for the back end we got this number of guests equals one but it looks like that was the only thing and by the way if you see that some things are run multiple times this will not necessarily be done in production sometimes Rea do this locally but why was that not working let's open up the console to see if there are anything you can see the query is just numb guests so why was not any of the others set let's say console log query search mod. query just to see that this was set yes you can see here the cont was set check in check out guests bedrooms so why was it not working further down okay so I think the problem here is that um it us using this value because this is actually one but since these other one are not correct values that might be the pro okay so you can see here that it's going for Num guests equals one but what happens to the other values here and Def find maybe it's because all of these are null or zero and that's why they are not passed in correctly try to say console.log search query pass in the search model. query here and console.log just see what for number bedrooms is oops should be a comma and now go back and scroll down you can see that this is zero which is correct but let me try to do a new search [Music] Afghanistan 4 to six two guests two bedrooms search so now you can see the search query here bedrooms two bedrooms and the back end is saying that now I'm searching for everything there okay so maybe I just needed to refresh because now it looks like this is country is empty what is happening here okay so I think I figured it out um there's a big problem because we are not calling this other than when we are actually setting the uh setting the properties or loading the screen I mean so in here we should actually pass in category if this changes and also search module. query so if anything in there changes we call this again so let's now refresh now we have everything there let's do a search in Afghanistan we want to go between the third and the fifth we want two guests two bathrooms and search okay so there are no results that is okay let's do a new search prob in Norway let's see if there are any available yes you can see these two are available for this States in Norway great so that means that now the search is working working you can filter on anything inside there so let's go and set this to Da sorry not this not this now we just want to make it possible to choose between these categories as well so I think a little bit of this was actually done before so let's find the file categories. TSX inside the components folder not add property and then in here we need to do some changes um we can begin by converting this to a client component use client because we going to need to use State here import use state from react and I want to import a search model so import use search model and also I want to get a search query type in here because I want to use it here then we can initialize the search model const search model equals use search model and I want to uh set a category here const category set category category equals use State this can just default to an empty string like that and I want um um function called set category here which is going to be called when click one of these so concore set category because this is going to be very similar to what this does just here we want to get in a category use underscore here because I don't want to override this name but it's still a category and it is a type of string so I just add the curly braces there to make this an arrow function then we can set the category by using this one and pass in category and then I want to set up a query that I can override so const query equals sorry semicolon then I want to set up a query here so const query search query equals I could probably unpack or reuse the other one but let's just do it this way search model. query. country like that do the same thing for the check in so we are sort of just overriding everything here now check out check out um the number of guests we want this for the bedrooms and the bathrooms and then the category category should be set to what we have up here so underscore category and now we can call search module do set query query and when this is now called it will automatically uh toggle the property list this get property function because we have that as a dependency there const query [Music] expression what is wrong here sorry that was supposed to be a semicolon and then at each of these functions or divs down here we can call this function on click use an aror function here to call set category and passing empty because um I should actually make a copy of this one sorry make a copy of this one rename the title to all you can just still use this image you can feel free to change it if you want to do that but we just need an all category to reset this this one should be Beach just as we'd have down there this one can be Villas this one can be cabins and this one tiny homes um then I think we can save this and if I click Beach then I don't get anything Villas nothing cabins nothing tiny homes I'm starting to think there is something wrong with this one let's see what we are searching for if the category category tiny homes one of these should be one of these categories let's go into one of these doesn't State there what it is so I need to log into the database and check this out Villa in angolan beach house you can see the category name Beach housecore so that's probably why um so this should maybe be renamed to tiny homes let's see if that's the category name we used when we added the when we added this for the front end set category Beach set category tiny homes like that and um when we create a category so when we create a property we set beach with lower Capital lower capital V Cy like that and tiny homes okay so now if I go into this one you can see that this is a category Town what the these are not one of those let me just rename this manually to cabins refresh then I can do the search I don't need to search and I can click C and then I was hopefully going to get that one category cabins sorry cabins and plural cabins there now with lower case maybe cabins yes so now the category is also working just need to mark this as the active category so just close everything and open up the correct one categories inside the components folder and then I can in here say um to convert this to use curly braces and a backtick and then here I can SA dollar and curly brace um and then category equals Villas question mark if so then we can set the close to be border black if not border sorry colon if not border Das white so we can try this now by going back here select vas you can see there is a dark line under there because that's the active one so we can do this on all of these different ones replace this and if the category is Beach then this will be active and this one should just be if category is empty then we use that if not it should be white and we need to do that on this one which should be cabins and last but not least the tiny homes and save okay there is something wrong I I did one too many of these save refresh and then I get this from the server if I click Beach no Villas no cabins yes great so that means that now it looks like we can set the category as well great and then I can set this task to done and this task to done um before I jump to the deployment I want to add one more task here and that is um when you add the property and you go to the front page it's not automatically added there because it doesn't refresh so I want to fix that so refresh refresh front page automatically like that so to do that we can open up the property list property list. TSX and import one thing from uh react navigation or next navigation import use search params so that we know that if these are changed then we can get properties so scroll down scroll down scroll down and initialize it in here const search we can just go perms equals use search parms and then we can add this as a dependency on this one as well so nothing happens here now great and the last thing we need to do then is to just go into the create model where do we have that model add property model and when we redirect us to the front page then we here can say added equals true doesn't matter what you fill in there as long as this URL changes so we can create one more now just to test this vas add the title like that set the location next choose a file and submit okay that did not work so I can try to create one more now cabins just add some random info location select the image image submit now you can see that this was added here automatically nice so that means that now you don't have to refresh to see what you have created perfect um I also remember one more task here and fix the refresh token so now you're are automatically logged out after 1 hour but if we create a refresh token you will not be uh uh sorry logged out after 1 hour it will just refresh automatically for a week or something like that so if I now find the sorry this should be in the lib actions here we have the hand login reset all and I want a reset token function here so at the top yeah we can just have it there at the top export a sync function handle refresh here we don't need to pass in anything and at the first here we can just say console log handle refresh so we know that this is happening and then uh need to get the refresh token so const refresh token equals await get refresh token so I need toate create that as well which is a simple function we can actually create that before we continue so if I just scroll down just make a copy this one rename this to get a really fresh token refresh token rename this one oops that was one too many token session refresh token so this is already set in the cookie as you can see up here and here so this lasts for one week instead of 1 hour as the access token does so now that we have this one we can talk to the back end to get the correct one there so con token equals await fetch hb/ Local Host 8,000 SL API or SL tokens refresh and I think if I go to urls.py in the back end for the user account it is not added here so I need to do that it is built in but you need to add it there the method should be post and the body should be json. stringify and here we pass in refresh and pass into refresh token like that I think we have some headers no but we can set up the headers so that we are sending in correct Json headers create the dictionary like that accept and application SL Json and also content-type should also be application SL Json and when this is done we can go outside of this one and say dot then and we get the response back from the server response Json because we are getting Json back do then Json create a function like that and now we can say console.log because now we are getting a new token from the back end response uh refresh colon Json just so that we know everything that is there if json. accs we know that the property of this is actually access and we can set this exess token again so set access token or we can probably just do copy this one instead so then we PA in here json. XS so we just set this again okay and if we don't get this access token then we are actually not authenticated anymore so now we can say reset what cookies so we call this function down here and then we are essentially logged out of the system if there are any errors you can say do catch pass in error like that error function console. log error error so we know where this comes from and now we can also call the reset what cookies here as well at the end here we can say return token so um so below here we setting the cookie we can return json. Xs and the bottom here return this for where we call this function here so if I now scroll down to the get access token then I can here say if not access token so we are not authent authenticated now but maybe we have a refresh token let's try to get this so access token will then be await handle refresh so try to get a new access token by setting this one so I think that should be already know there are no errors and here are no errors perfect sorry there is one more thing we need to do and that is to ex uh activate the reset here the refresh token so we can add that below here part token SL refresh and this should call a function called G refresh view parenthesis do S View parenthesis name token refresh okay so where do we get this from yes it's imported up here already from JWT O So if I save now check there no errors do a refresh here no errors great so now the refresh token can is also fixed so now it's just deployment left 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,712

Keywords: code with stein, django, learn django, django tutorial, next.js, react, django and next.js

Id: 63yjsvrV6_4

Length: 68min 30sec (4110 seconds)

Published: Mon Apr 01 2024