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

okay so now that we have the detail page for properties we can continue and build the landlord page so let me just go back to the project I do not have it running right now so let me just start the server again refresh and then I have it here perfect so to create the landlord page we can go back to visual studio code and begin by just closing this one and then we can copy these three lines and open up the file editor or file browser um so just like we have this properties folder there I want one for landlords so landlords or you can call it hosts if you want to do that and then one more folder with the ID so that we can have a dynamic URL and then in that ID folder the page. DSX so I can just close this it's a little bit bigger and then close the return close the function and Export default uh property detail page is wrong this is supposed to be landlord detail page land lord and save so if I go back here now go to land lord just add some random things you can see here that we are now on the landlord page awesome okay so here I want to split the screen uh in two so that you can have a image of the landlord and a contact button and then I want to list out all of his properties on the right side here so we can begin by going back here and creating a div for the grid so div class name give it a grid and grid calls one for small devices and if you're on a medium or greater or larger then we say grid calls four and also a gap four we can just close that Dev and then we can begin with the left side where we are going to show information about the landlord so div or aside to be better or more correctly semantic uh give us a class name of call span one and mb-4 so this mb-4 will just be there if we are on a mobile device then we get some space between this and the other one below here so if I just add some random things there and a div here for the right side class call span three uh padding left uh can be set to zero on small devices but on large when we have these two next to each other we can have a MD colon pl6 whoops can move this up again there properties so then you see here split the screen perfect and if we make this small you can see that it's jumping below there great um I want to have this to be rounded Corner add a border and some Shadow so after this inside here I want to create a new div is the class name of flex and a flex column because then it's easier to have things centered inside here items Center and some p-6 so that I have space in both directions rounded XL so that I have rounded corners on this Dev give this a border and a border gray 300 set the color for the border and a shadow DXL so then I can close the div and close it again correctly after this this text nice so now we see the border with the rounded Corners you can also see the shadow perfect and since we used the flex call and flex item centered you can see that it's automattic automatically centered in here and when we add more things in here for exle a p and a p i can see that they're below each other but still centered great anyways on the top here I want to have an image so image and the source can here be slash profile p1. PNG I think that is the correct name profile pick one jpeg sorry uh we can set the width for this to be 200 we can set the height to also be 200 so this is now a square image uh alt land lord name and um we set this to be a class name of rounded full so that we know that it will be round still get an error here because we do not support this blah blah blah it's because we haven't imported it doesn't really say that that clearly but I know that's the problem so import image from next SL image and then the warning is now gone so if I go back here now you can see a pretty profile pick uh centered on the screen and it's rounded full great below there I want the name of the landlord so H1 it is the class name of mt-6 so some space up to the image set the text to be text D2 XL landlord name perfect now below here I want a contact button but this is something I want to come back to contact button because I want this to be a separate component actually we can just make it right now so this would be the contact button just close it like that um yes we have a warning because we haven't created it we can't import it either because we don't have it but inside the components inside there isn't any good folder so let's just put it in the main folder contact button. TSX we can create another folder for example for land Lords but in my case I'm just going to have one component connected to him anyways so um then const contact button equals create Arrow function return P button just for testing export default contact button save and now we should be able to import this import contact button save and now we have the button there nice but it can't look like that so let's do something about that um I want this to be a div and then we can set the class name py4 px6 I want to have a this red background so BG Air BnB that text should be white and we can set the corners to be rounded - XL and then in here I can just say contact perfect but we need some space in there so mt-6 nice um later when we make this more Dynamic we are only going to show this if we are not uh if we are on someone else's page and not your own and also need to set the cursor so cursor point pointer nice and we can have a hover effect so hover BG Air BnB dark great if we want animation we can set this to be a transition transition and now you can see it's fading in and out nice okay let's list the properties so what's cool now now is that we can just reuse what we did on the front page so if you open up page. TSX in the app folder just copy this property list and paste it in there then we need to import this so import property list and save um whoops it's not supposed to look like that um sorry I need this grid here as well like that and it will hopefully look a little bit better save and yes so now we can see these and we do not need the mt-4 and maybe instead of having as much as five we can just have three great um we are using it like this but when we make this more Dynamic we are going to pass in for example here land lord ID and then we put in something here um so that we can get the correct properties from the back end and not just get every one um I think this should also now be ready for mobile devices almost we do not want this space here when we are on small screen screens um so that should be call span Gap four need to check what this where this comes from so it might be this grid call Pan one yeah the problem here is that I'm using call span one on this and call span three on this so on smaller devices we can say call span one and that is also true on small devices but this should also say call span one but on larger devices it should call span four if I save now they are the same width perfect so we can say that this is now mobile friendly so if I now go to the through list I can set this task as well to done nice 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 okay let's just jump right to the next one which is my reservations and then let's just have the project open here go back here and then we can begin in by making a copy of the top here because we reusing some of this go in here close the component and then create a new folder called my reservations and then in here page. TSX so hopefully now you start to understand how the URL router is working and how the URLs are generated as you can see here this will now be the URL and then next TSL jsx X will automatically find this page. TSX inside there my properties close this one you can rename it to my reservations page export default like that I do not think I'm going to use any of these two so it can just be like this and and if I then go to my reservations you can see here that we are on the page great so at the top here I just want a simple title saying my reservations so let's create a div for this close name um PT pt6 so some space at the top pb2 and then then here just H1 class name text 2XL my reservations okay now I got the error here unexpected to and Main it's because I forgot to close this div it's better then have the title as you can see we got some space at the top there um we could maybe just clean up the HTML for this a little bit just have the H1 and we can say margin top six and margin bottom two so still looks correct but HTML is a little bit better and then below here I want to have a grid of your own reservations where will you will see the image of the property um see the name of the property the check in date check out date number of nights and the total price so let's begin by creating this div okay so here just create an empty div for now and then I'm going to create the HTML for one of the reservation so div class name P5 so has a space in here above below and on the sides I want to have a mt-4 more space up to this but also since there are men in this list we have space between them grid grid calls 4 Gap four Shadow DMD border and Border gray 300 save it for now then you see here what this is going to look like at least in the beginning we need some rounded corners on this so rounded XL and save okay then on the left side I want the image of the property so we can have a div class call span one so we take one of these four columns and then we create a new div class and give this the relative option and overflow hidden because here we want an image inside aspect square and round rounded DXL now can set the image source and that can be the name of the house that we have in the public folder which for me is Beach one. jpeg um we can set this to fill out the all available space uh set the class name property to hover and scale 110 sorry scale 110 object cover and transition H full w- full last but not least we need the alt tag so beach house now we can close the image this is already import ported there but I need to close one div to make this happy so save and go back okay so now you can see here we got the hover effect same rounded Corners everywhere and we have the space there nice so then we want to show the rest on the right side so div CL CLA name call span 3 space- Y2 because I want to space between each of the elements in here H2 class name margin bottom four so have even more space between this and the other than the rest of them and text- XL property name great then below here I want to show the check in date so add the paragraph and then the strong element check in date and then here we have the reservation 14 to 2024 nice copy this one check outdate to 16th and then we can just add some space down and say here number of nights which will be two of their my very good calculations strong total price 200 okay oops forgot that this one and some space okay so this is basically what each of the reservations will look like if I copy paste you can see more of them um but instead of using more top four on this one you can actually in this div rather say class name space dy4 great but this needs some more space below so margin bottom six and that means that we can say m Y6 instead since it's both above and below great um I don't think this is mobile friendly right now because on very small devices the image is very small so maybe I want to move it up there and to do that we can say grid calls one and then on larger screens we said grid calls 4 that means that this should also say call span one and md- call span nice so now it looks better there like that and we need to do the same thing on the one below so just copy everything paste it like that nice okay so that's was my reservations page um okay we can add a button here as well so that we can go to the property um div CLA um cursor pointer py4 PX 6 BG Airbnb text white rounded DXL uh go to property and they should also have margin top six so that have good space up there um no I did not get that but maybe if I add the block no but they should be an inline block anyways inline block because I don't want to fill out the whole screen but why isn't margin top working to inspect this margin top six maybe it is yes it's been overridden since we are on the last element in this here okay um maybe I here rather can say class name and b-6 no it's still not working um okay how can I fix that I think if I add an empty element but that's not very good so let me just remove this and not spend too much time and then instead on these I can say class name mb-2 so it looks like it then and then I can say empty 6 great so let's copy this T and replace this one save and now both of these has this go to property button perfect so that means that I can go to the to-do list and set this to done okay the next one will be quick one that's the my properties page I can just make a copy of this code here and then go here create a new folder called my properties and in there the page. TSX paste it rename this to my properties re the title to my properties close the main close that close that correctly and then export default my properties page and save so if I then go to there again go to my properties I have the title there nice so then I just want the properties list here so so I can just open up the landlord page which is identical and then if I then just copy this grid I do not need the call span and everything there just the grid with the property list paste it below there import This One Import property list save go back and then these are my properties of course this is just static and I'm going to uh PA in the correct ID and similar here later that I get only my own properties anyways was very quick so I can just set this to Dawn okay so now over to something a little bit more fun we are going to create the inbox page so let me just go to the project here and then it can go to visual studio code and I can make a copy of all of this this and go here create a new folder called inbox which will also be the URL for this and then a new file page. TSX and I can paste it here just rename this to be inbox can remove these two and rename the page to inbox page close the main close the return and close the function as a return inbox sorry not return but export default inbox page so if I save now and go back here just go to directly to SL inbox great and then below here I want to list out the conversations and for each of the conversations I want a component so we can begin by creating that one so the new folder in the component folder called inbox and a file called conversation sorry conversation. TSX of course um yeah can just say con converation create an arrow function return conversation and then export default conversation now we can import it and use it on the inbox page so import conversation and we can add a couple of them here conversation conversation conversation if I say now you can see three conversations there great but they can't look like this obviously so let's go to the component again just replace this with a new div give it a class name of PX 6 and py 4 and I want the border on this and I want the border to be border gray 300 and I want rounded Corners so rounded DXL save um that is great I will fix the space in between these soon um in here I want to show the name of the person we are talking to so P class name um give this a margin bottom six and text XL John do and then below here a link to the conversation page um I think I can just say P I think I'm going to convert this to a link later so let's just say class name uh text air pnb dark and go to conversation great so um if I then just on this top element here say cursor pointer you can see here that the mouse it looks more like something you can actually click on um and then I'm going to fix the spacing between these so on this element I can say space- y4 nice and then yeah that was it for this task so now I can set this to done okay so we have come a long way now on the design and the last page we're going to create now now is the detail page for the chat so let me just go back to visual studio code and make a copy of this one just forget about the Space X close and close and then inside the inbox folder not one component but this one create one more ID because this needs to have a dynamic URL and then in there page TSX um yeah I don't need this one and this should rather say conversation page because now we are on a detailed page so then we can close the main just add something in here so that we can test that the URL is working correctly return no sorry export oops whoops export default and then conversation page so if I save now go back to the project here just add something random here you can see ASF which comes from here great okay so um here uh I just want to have a list of uh all of the messages so I'm going to create one more component here that can say um conversation detail like that and this will actually hold uh all of the button the messages the form for sending Etc um so I need to import this but but we need to create it first so let's just copy this name and then in components in box then we can say conversation detail. TSX const conversation detail create an arrow function sorry equals a return div add something in there and then export defa a conversation detail then we need to import it here import conversation detail save so now it still says ASF but it doesn't come from here it comes from in here I can see there great so um we need some styling on this for example we need to set a Max height and we need to make this scrollable for this is where we want to have the messages Dave class max dh400 pixels add this inside its brackets so that Tailwind will fix this for us set overflow to be Auto I want it to be a flex and a flex columns and space- y4 so that everything in here has some space between each other because this will then be the the messages itself so we can create one message that we have sent and one message that we have received so that we can see the difference between this so div class name and then we set the width to be 80% of the screen um py4 and px- sorry px-6 and I want this to have rounded Corners so rounded XL and then a BG gray 200 and then in here I want to show the name of the person who sent this so Peak last name font bolt text Gray 500 and then close that one and just say John do and then below the message just add some random info close this div and when I then save it go back you can see here what the message will look like and then my messages will be on this side and sending automatically to this yes since it's blue and on this side you will understand that it's your information so it will look fairly similar so let's make a copy of this one and my name um code with Stein I want this to be BG blue 200 and we can also say ml Dash Marin left 20% if I save now we get the blue and it's on this side of the screen great um below here I want the form for sending messages so actually we need one more div or we can use a fragment if we don't want an extra div so close the fragment and then below here we can say div close mt-4 have some space up in case the screen is filled with information um I want some space in here so py 4 and PX 6 I want this to be a flex container because I want the form on left side and the send button on the right side want to have a border to separate this a little bit from the messages and then border gray 300 space space- X4 so space between the input field and the button and then rounded D XL and then on the left side here the input field give this a type of uh sorry type is text um we can have a placeholder type your message and we can have a class name w- full so it fills out the screen uh the part of the screen that's available padding to BG gray 200 and rounded DXL now we can close it so now you can see that it fills out the whole screen but that's just until we add a button on the right side here um so this button actually want to be a container no sorry a component because I want the button to be reusable so we can say custom button and close it like that and then I will show you how to send information to this component but first I just want to save it's crashing great and then in here in the components we can create a new folder called forms since this is a form field and then custom button. TSX um con conom button create an arrow function return div button and then export default custom button and then we just need to import this at the top here import custom button and then error is gone okay nice but it can't look like that so let's add some styling to it um I wanted to fill out the whole screen if it's possible if not I want to just make it possible to uh style this from the parent so w- full and uh we can set the padding in the y or vertical direction to be uh four the BG should be Air BnB and if you hover it it should be BG Airbnb dark uh the text should be white so text white and I want the corners to be rounded so rounded DXL I want to transition that so that it say a full smooth fade and a cursor pointer um so if I save now it starts to look like a button um okay so how can we then fix the width the label and what happens when you click on this so that's where a little bit of this typescript magic is coming in let's say that uh we down here want to pass in a label and we can say label and we can put in the string send like this see I get a warning um string is not assignable because it's not available to be assigned to this component um so in here we can say label but it still is not working because it's not defined even though we try to push it in here so we need up here to um create something Co an interface so interface um custom button props so we Define what properties that we can send so do not add the equal sign here it's just interface the name and then the Cur bra s and then here we want to allow a property called label and this should be a string and then you can see that we still get the warning down here it's can't find label so we need to be able to pass this in this interface and set it to be used on this one and to do that we need to convert this component to be a react functional component do that we just say colon react. FC see and then we add these two and in here we can pass in react no sorry custom button props but it's still not working but we are very close now in here we PA parameters to this function add two curly braces and then labeled and now it is working so now we get sand which comes from this label here passed in there into this and into this and if we try to change this to something else than a string for example a number then see here we get a warning type number is not assignable and this is some part of the typescript uh Magic that won't allow you to use other types than what you're defining here so let's make it possible to have a onclick event as well so add the semicolon there and then on click and when we unclick this we just say void to say that this is a function we are expecting then we POS it in here on click and just move this to a separate line so that it is a little bit clearer on click so when we click this div we want to call this function so I'm used the curly braces there and just say on click if I save now we are now expecting this here but as you can see here you actually get a new war name because okay you haven't uh we are missing this type if you want to make this uh not uh not required we can just add a question mark there and the warning is now gone but we want this to be mandatory or required so here we can say on click and when that is called we can create a new uh function just console log click so later we will call something here to send this information to the user uh event handlers cannot be passed okay so event handler cannot be passed um if you need interactivity please consider sry consider converting this to a client component so right now this is actually a server component this conversation detail so this expect things to happen on the server and on the server we do not have something called on click so we need to specify that this is a client component so then me just say use client at the top and save and if I then go back click send you can see down here that we are clicked great and last but not least least I want to be able to specify a class name here oops class name and I want to pass in that I don't want this to be more than 100 pixel in the width but then I get this new warning because it's not allowed because we haven't added it up here but we can say close name oops class name but this is not required so Str ring po it in down here and then we just need to figure out how we can POS it in into this one and it's not that hard we just need to convert this to a curly brace and then back ticks and then we close it the same way back tick Cur brace this makes it allowed to use JavaScript in here so at the end we can just PA in close name like this if I say sa now go back you can see that this is now 100 pixel width and then we just need to say text Center to Center everything nice and this page is also already mobile friendly so we don't have to do anything more here now nice so that means that I now can set this task to done nice so now it's time to start working on user menu pop up so that when we click on this I want to show a menu here first of all since we're not logged in now I want to show a login and sign up button but first I want to make it possible to at least click it and just show a div below here so just want to close everything and see what we built last time um we have this nav bar here and we have the user nav um okay so when we click this button I want to show um a div below here so we need to introduce a few things here first of all I just want to convert this to a client component as well because we're going to use click events here and a little bit other things then we can import state from react so import use state so this is the state management to make it easy to get track of when we click something we can store it as a temporary variable and then um since we have imported this now we can create a variable called const create the brackets here is open and set is open so then this is then the name of the variable and this is the function that that we're using to change this or toggle it because we can't directly say is open equals fals and similar because that's not how states are working you'll understand soon and then we say equals use state to tell next that this is a state variable and what the default value should be to make it easier for us to test now we can just set this to true and we will change this to false in a little while um then below this button we can create an if statement and to create a very easy if statement here we just use the curly brace and say is open and end and then parentheses and then you close it like this you see get the warning because expression is expected okay so let's create the div in here some things and close the div and this is then actually an expression so when this is true this will be rendered so let's give this a close name of w- 220 pixels and I want this to have a property absolute because we want to be able to put it uh directly below this one so we can actually test this while we are writing now if I save now you can see ASDF at the below there um so we need to move it down a little bit more so top- 70 pixels if I save okay that's a little bit too much 60 pixels that's might be better we will test more soon and I want to say right zero so um that the right side of this which is 200 pixels let's add bgy 200 and a border so it's a little bit easier to see so you can see that the right side here is aligning with this one and that's because you said right zero okay we also want some Corner radius on this so uh rounded D XL and a shadow MD soorry I keep going back and forth even though I'm seeing it here and that looks like it is it I'm going to make the buttons show in there so I don't need any spacing right now I just need one more div here if I'm not just sorry I can just add it up to this one I think so Flex Flex the call because I want the buttons to be below each other and cursor pointer and then in here I can say p Just for some testing yes great um I want to have a component in here called menu link because they're going to look identical they're going to have a label and they're going to have a click event so let's create a component first before we start importing it so in navbar here we create a new file called menu link. TSX and then create it const menu link equals create eror function return use the parenthesis Dev just add something there export default menu link and save and if I then import this up here import menu link and we can use it here nice okay so here we also want to be able to pass in the label which can be log in then I get the war name because we haven't uh said what we're going to use here but anyway let's add use client here since this will be a client component uh um and then this uh needs an interface menu link props convert this to react. FC and pass in menu link props and then in here for the parameters we can PA in label and then we can just use it here labeled okay there is something wrong of course I forgot to assign it up here label and this should be a string so just add the semicolon and save and then I get the log in there perfect so then I just want to add some styling to this class name px-5 py D4 and when you hover it it should be a little bit grayish so hover BJ Gray 100 and I want a transition effect on this so now it looks like a pretty menu let's add one more for sign up sign up so then we have two buttons here perfect and since we are already have this open we can add this on click event here so on click void pass it in here on click and then we can add it to this link here s to this div on click and when we click this we call on click and we should also have this cursor cursor pointer save great um probably have errors here now because you haven't Define this on click so when we do that we call this a conso log click button and save so let's just open up the inspector to see that the click event is working and it is nice so let's go back to the Todo list and set this task to done actually it's not done yet because we can't click and togg it sorry so let's go back to visual studio code and fix this so on the this button up here this button that is this one let's move this to a separate line just so it I like that I have more properties and one I like to have one on each line so onclick equals set is open equals not is open so um sorry you need to create Arrow function like this when I pass in functions with options um so what this does is that it takes the value is open posi in so if it's true it will be set to false and if it's false it will be set to true because this will just opposite this variable so if I save now I can click this and it's hiding and showing nice and then we can also set this default to be false so it's not showing when we are refreshing only when we click to show it great so now I can set it to done okay then over to one more fun task creating a reusable model window because I want to have a window popping up on the middle of the screen when for example click log in or sign up and similar but this need to be reusable so that you can just uh pause in properties and make it much easier so that means that we need to go and create one more component so in this components folder we can create one more called models and then one more called model. TSX and this is then the reusable but we want to create one more for example for login so we're going to begin very easy and then build on this so we need to pause in use client because this is a client function or client component and then const model we can just at the beginning call this uh react. FC this can be empty right now equals like that then Ro turn and uh export default model and we can add a div in here just for testing okay the type argument list can't be empty so it has to be like this for now I think that will work and for testing this we can open up layout. TS X and import the modu here import model from there great and just append it at the end of the body so if I save now you can see that you get ASF there if I go to the front page it will also be there um I want this to appear on the middle of the screen on a blackish background so let's start coding more for the mod all um let's add a class name of flex and um items Center because I want everything centered on the screen and inside there and justify Center so it's both horizontally and vertically centered and um I want this to be fixed so we can't scroll when this is open so fixed and we need to set the inset to zero so that it's from the top and left and then set value C value to 40 so it's above everything or 50 so it's a preter number and then BG D black divide this by 60 so that we get an opacity so if I save now you can see that we have a div all over here I can't click anything below behind here now because we have this div here now you can see here ASDF which comes from here is in the middle of the screen but the middle of the screen can't look like this I want a white div there for example um so we can begin by adding a new div here oops oops oops oops oops div class name set this to be Rel relative so that we can have things absolutely positioned and similar in here and then on mobile devices I want this to be 90% of the screen and on medium uh screens MD I want the width to be 80% of the screen and on very big screens or large screens I want the width to be 700 pixels so that this is a default layout for all of this when it's going to be used and then we can add a my6 in case it's larger than the screen and we always get some space above and below and MX Auto I no actually don't think I need that one and the height to be Auto on this one on so then I can close the div save so actually it's moved out there now probably because the relativity and similar but let's set MX Auto oh sorry it's not the relativity um it's the width I set so if I inspect this we should see that we have a div here and it's centered on the screen nice um in here I want one more d div so it's a little bit div Mania but that's just how these models typically work div class name uh and this should have the transition that fades it up and down as we open the screen so we need to use the back TI here again because here we need to PA in variables you can first translate um duration can be set to 600 so it's a little bit slow animation I think the default one is 400 so you don't need this either age uh the height can be set to full and we can set um right now just uh translate y0 so right now it will be centered on the screen and I will fix the animation soon um and also we can set the opacity to 100 which will then be the default value when you are seeing it but when it's hidden it will be just uh 10 so that you can see the fade in effect so now we can close this div and add one more div in here and then the class name w- full and the height can be automatic so we just fill out whatever is available in there and we can add the turn no I don't think I need a translate on this one but we can say rounded XL and relative and flex Flex colum because I want all of the elements in here to be below each other then flex and flex col because I want everything in here to be below each other and then BG white just add some random inform there so then you can now see that it's still centered on the screen and we have this white background with the rounded Corners great so it's starting to take shape at the top of this um box I want a header uh we have a title and a close button so let's begin with the header here we can add some space in here and say header and give this a close name of flex items Center and we won't use the flex box because then we can have things on different places in here p-6 rounded T so that the top corners are also rounded just like the parent justify Center and relative because here I want things to have a absolute value inside and Border B head so if you save this go back now you can see that we get this border as you can see here barely I will it will look more better when we add more to this box um in here we can begin with the close button so div class name p-3 three absolute left three so it's a little bit from the left side and when we hover it I want the BG sorry the background BG gray 300 rounded full and cursor pointer cursor pointer and then in here we can just say close div so then we have it here and you can see this close effect um I think maybe the parent here should have some spacing py2 sorry that's not correct it already have ping six there um M Y2 maybe no still not working um okay may it might be this absolute thing that we have in here that does this um if I say a height maybe it will work automatically yes so then we have some space above and below but we can change this if we go to Hero icons to a close icon instead that look always look better so we can copy the jsx that's probably better I think in one of the previous Parts I copied SVG but this has the right format as you can see here with the capital L and similar we can just remove this save go back and then we have this close button much better and then on the middle of the screen I want the title So Below this the that is absolute I can say this div or H2 class name text LG font bold and here the title okay nice um inside down here I want the content So Below the header we can add the section class name relative I don't think that I need relative class name p-6 and then just add some random information there and now you can see how the border is looking like great um so then we need to do some modifications to this to make it uh more Dynamic this for example needs to be dynamic and this needs to be dynamic so let's make it possible to pass in a label so we need to add this interface just like we have done previously interface model props label and this is a string so then we can pause it in here model props and the same in this list of oops parameters was in label and then we use the label here label and then if I go to the layout you can pause in label here model test great so then that is working next step is the content so this will then be a react element we want to have here so we want to pass in sorry we want to make it possible to pass in HTML so content and then we just say react do react element so then uh typescript will know what it should expect posing the content now we can render the content by just saying this so if I save now go to layout we get this warning so let's create the content uh I think I can say um maybe I can just PA in some elements here for now content no this is not expecting a string it's expecting some content so let's define the content by saying content like that and const content equals a function like that return P yo um jsx element is not assignable did you mean to call this expression um like that is that correct yo yes that is correct it is correct but it's still not what it should be like let me remove this return and set it like this use parentheses and then do not call it but put it in like that yo y yo yo yo yes now this is working great so that was step one of this next I want to add some State handling to this so we can go back to model TSX and then we need to import a few things so we can begin by importing um use State again from react and then in here we can um Define some State variable con show model set show model equals use State and then pass in the default value which should be a value called is open okay so where did this come from we need it to be passed in a PA so is open this is a Bine value we need to put it in here as well is open so now the error Here Is Gone perfect but we need to specify down here so is open equals true and use this parent uh curly braces so you can pass in a value there so save and save go back it's still showing and everything is as it was supposed to be um so uh if I then can handle if this is not showing then we want to have the element below the screen so on one of these uh the one with the translation and the back tick we can add a test to this around this translate so you say show model if this is true then we can pass in translate y z and if it's not true then say Translate Y full so then it's pushed all the way below the screen and then close that one and we going have one more around this OPAC it but let's just copy this replace the opacity 100 and if it is true again um actually I think I just can say here opacity 100 and if it's not true then opacity 10 so that it will give us a fading and sliding effect yes that looks great so we can save this and uh if I set this to be false here save okay it's not take been taken care of okay I am not sure if there's anything wrong with my code so I will just continue and come back yes this was supposed to be there anyway this was supposed to be there anyway yes uh I will come back to it very soon we can continue more with the state handling and then we can say that if not is open so if it's not supposed to be open if it's false already we should say return null and save and now it's actually gone all the way so it's not even rendered on the screen um but that's not what we want right now because we still want to test a few more things here and we need to set something called a use effect so then it was automatically imported up there so this use effect here will be called every time this uh component is rendered and here we can say set show model to true so then this will um set this value to be true so it will automatically show sorry now I was that was not correctly um we need to PA in this value so when this is loaded we pass it in there and every time this updates we also want to set that function so how this works is that if this value changes from True to false or false to true this function will be run and we will set model show to this value um we also need one function up here for closing so let's add close void not void but the parenthesis void PA it in here close and then we can uh use it here const handle close so on we click on the close button we want to call this function here and we want to call it by using something called use call back which is something that comes from Jango that will return a memorized version of the Callback um and this is sort of like caching the result so then we use this to create an arrow function set model uh sorry set show model set this to be false um okay I have a warning here no an argument is not provided so we need to provide here close close so when this is clicked we will call this function here and then we set set uh time out create an arrow function close 300 so what this does is that after 300 milliseconds this time timeout is run and we call this close function and the reason why we need this 300 milliseconds is because that when we set this to be false this translate here will kick in and move it out of the screen and then it will wait 300 milliseconds before it is removed from the screen um and I think that is actually it so if I just remove now it's remove from here and we will do some more testing on this in the next task when we are building the reusable login component so if there are any mistakes right now I will fix them soon anyway I can set this to done like that okay so it's time to reuse this model window and make it pop up on the screen so it's a little bit easier now that we can test in and out and similar so let's go back to visual studio code and create a new model so in model there we say login model. TSX and then const login model equals create an arrow function return just add something there export default login in model and then this needs to be imported into the layout just like we did with the model here so let's just add login model instead and append it at the bottom here so as you can see now there are no warnings because we haven't told this component that it is a model window yet and before we go to that part we need to in uh install a new package to the project so if we stop the server we can install it by saying npm install sust stand so this is a sort of a global State handling that we can use with hooks and hooks are also some sort of a global functionality um so we can click something in one component and tell the parent or the root component what to do so uh now that that is installed we can go here and then inside the app folder create a new folder called Hooks and in the hooks folder called a file called use login model. TS and here we're just going to use a plain typescript so it's just TS and not TSX um this might be a little bit much information right now but once we start using this it will probably make more sense I hope so we can import sust by saying import create from sust and then we create an interface for the login modu store so this is then store or store information about the login module window for example is open buen um open so this is a function for opening the login model and one for closing it so then we have these different things that we're going to be able to interact with this store and then we can say const use login model and this use word um is just a typical way that we uh uh Define these types of classes or functions equals create login model store pass in set because we're going to set things here oops to one too many parentheses like that so it's should supposed be closed by that and then in here say is open so this default to false use comma there open and then create a arrow function set is open set this to true so when we call the open function we set the value of this store and this property is open to be true and on close we do the EXA exact same thing but opposite here set is open to false um so this is doesn't look too complicated and then we can just say oops export default use login mode so that's everything we need in order to make this Global at least so if I now go back to login model we can do some more changes to this one first we can set this to be client component so use client then we can import the model which should be this sort of parent um we need some State handling internally here so import use state from react and we can import the use login model we just created import use model login model of course and then this can just be like it is and then in here here we create one more more Define const login model so we create a new instance of this store use login model like in function like this uh the use state will be used here later when you're introducing the form so we don't have to think about that right now um then we can Define the content that we want to show inside the modu window so const content equals parentheses H2 class name mb-6 text to XL and then welcome to Jango BMB please log in um so that's everything we need there um so done down in the return we actually just want to pass in the model window the parent and say is open equals login model do is open so then we just take the variable from this syst stand here this one true or false pass it into the module window from here and close so if we close this logo uh login model we call this function on the model on the reusable window so login mod. close so then it will be closed sorry when this is called we call this and then we close it and then we have the title or the label I think I call it um model yes label not type title label log in and the content should be content so we can close this model there so there are no errors things looks okay so then I want to fix that if I click this now and then log in that this login window should pop up so let's find the user nav bar there and then we need to import this use login model so import uh use login model and then we need to Define it in here so const login model equals use login model and just uh copy that and when we then click this login button then we can create sorry it was supposed to be like that uh isn't this correct yes click the button and now we can say login module. open and save so hopefully if I click this now the login window appears perfect um okay the close button there is not working that should be something in this model window handle close yes um okay close button is this div here so on click handle close so if I click now it will remove perfect uh we should also close this menu here when we click the window so uh then here I can say set is open to false so if I now click click and you can see that the window there is gone nice okay so now that is reusable um sorry usable it's workable so now I just want to insert a form on the login window um so let's go back there and then below this H2 inside the login model TSX we can create the form so form I think uh jsx expression must have one parent element yes so let's add a empty fragment and then in here is a input type email and set this to be a close name of w- full we want some height on this so age 54 uh you want the border and set this border gray 100 and round this D XL okay oops need to self close this and we should set the placeholder here as well so placeholder your email address email address save um okay the padding did not work or the height sorry it needs to be height is 64 pixels and we need some spacing on the left side there that was not good and this can be a little bit darker PX 4 yes much better so now we can add one more for the password so just copy this your password this need to be type password and I'm can say close name and space- y4 so we get some automatic spacing between this and then below here a button so I think I can just import the custom button that we created earlier so uh custom button and uh this should have a label submit on click so let's just say log test and close nice so now we have a very simple and reusable login form maybe we don't even need this title since we have the one up in the header and if there are any errors I just want to show them here between the input and there so here we can say div CLA name P5 p-5 BG a BNB so it's red it makes sense that that's an error text white rounded DXL opacity can be set to 80 so it's not too bright color the error message great so that was the login component as well so then I can go here set this task to done okay the last part end before we start with the back end is to set up the login uh sorry the module for the sign up so that's going to be identical with the login model so that means that I can make a copy of this login model store just copy and paste everything and save this as use sign up modu sorry Modo TS and I can just rename everything in here to sign up and these two should also be renamed to sign up so that means I can just close this because it's done and this login modu here copy everything and paste it as sign up model. TSX then just rename a few things sign up the title of the box or model should be sign up um then we need to import the use sign up model instead use that and sign up model and rename this to be sign up mod all um here we need two passwords so it's your password and then below there the repeat password repeat password uh sign up model close and do close or is open and do close so that's everything there next step import this to the layout import sign up mod all and just po it in below here sign up mod all and this will not be rendered on the screen unless the is open and actually is set to true if not they're just ignored so now we can import this again use sign up mod all Define it there const sign up mode all equals use sign up mod all and then activate the button to do the same thing as this one so I can actually remove this console log this console log set this open so close it and use the sign up modu there instead save so if I then go to the project hopefully if I click this it will show me the sign up form perfect close and if I click the login it will show this instead nice so that was very quick so let's go into the to2 list in eraser and say done 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: 5,345

Keywords: code with stein, nextjs, tailwind, react, react and tailwind

Id: -Bjp5VZzYiM

Length: 92min 22sec (5542 seconds)

Published: Mon Feb 19 2024