Create a Custom Profile Page for Users using Redux Toolkit + Redux Persist in MERN

so far everything looks good we have the signin functionality done we have the signup functionality done we can also Now log in with Google so I'm going to continue with Google you could see this popup opens up and then you have to just uh put your name so let me just uh you know it since it's only one account it's automatically going to go and navigate me to the homepage so this is actually like my profile page what you could say I don't want this signin button to appear anymore since I'm already logged in so this is the next step we're going to do we're going to put the things that are in our re Redux so you can see in our Redux toolkit we have this stuff that is preserved we have an ID we have the username we have an email we also have an avatar image from Google as well as the created ad and updated ad so we could use the image to be dis to display it on the Navar section on the top and we could also have a profile image custom one that only the authorized user could access so let's let's do this and uh and also we could make the profile page private so that only the user could use it and no other person so let's just go quickly into our terminal and let's have all this closed you could also close all of these stuff out using this uh close close all that's it and then you know have all of that expanded like this now now you see uncollapsed now you know you can collapse them one by one so the first thing that we have to go is to our header um and that's in our client so if we go to the source we remember the components that we created this is the header uh the the thing on the top let's just have the uh the image or let me just put this over here and also this over here let me just bring the code over here and just scroll this down uh oh man I want it together now it was coming together come on uh uhu bring this on this part uh the that part and I think it looks good now okay so great so the thing that I want is this is the header right and in the header we want um now on authentication so what I'm going to do is I'm actually going to uh import something so from here we're going to remove this we don't need this and we could say um import use selector Hook from react Redux this is going to get our state variable all right the the states that are stored in our um that that are stored in our you know re react Redux tool hereit so what we could do is once we got the you know State we could initialize that um in our header so inside here we could say um you know const user or you could say um whatever the user is so essentially you have it as current user so current user and then you could have it as use selector State and state. user this is the name and I'm going to have to recall this that I'm actually using new selector and state and I'm actually using state. user and you might be asking well the name we actually to find already um in our um in our you know Redux um user user slice so here you can see we named it as user that's why we're using this user slice all right so no need to do anything and just leave it like that all right so now let's go back here and you could see now we have this state got it um we could now use this uh as a conditional render here so in the sign in right uh we have to see if the person is already authenticated logged in we don't want them to see the sign in or we just want them to see their profile image okay so for this conditional rendering we could just have the following so first of all let's uh let's let's actually um have something here so I'm going to have to comment this out let me just comment that out and uh let me just uh add the thing that I want so first of all we have a link to um the link to the profile page so link to and we have equal to the profile page SL profile all right and this is uh going to be dependent on for uh the following parameters we have current user State remember if the current user exist right then we want to show show the image of the user so we could have like so we could have the image IMG of the um you know user so Source you could actually put the sort as current user. Avatar and ALT Avatar they just add some class name here as well so let me just have all of this stuff out right right now and this is if the user exists right so then show that if not then show this so This Means just add in like sign in button would remember this sign in button this one just bring this entire thing all up up up right here the one that I commented out so now you could see that image is appearing which is crazy um now I could remove all of this stuff that was in the comment section we don't need that anymore but the thing is now I said if the current user exists then show the image source and current user. Avatar where are you seeing this value well remember we saved them and in the states they also have that uh value so you could see it u in the dep tools as well to write and you could see over here um State action all right so we have payload and ID just one second uh anyways what we have here is this profile image and this is coming from there uh and there were certain parameters that we had to you know specify and those are being specified and that's why you know everything seems to work so let's go back to Redux I think we manually did something wrong okay so we have this uh payload and over here we have the user current user and then the Avatar you can see this is the value so user. Avatar or um current user Avatar all right so that we can use that and we can use all of them uh else as well so anyways um let's go and cancel that out and the image is so big we need to make it smaller so we'll just add in some class names here um right after the alt I'll add the class name tag and the class name for the image first of all let's make a rounded hyen full so that it's circular we could have the height as seven so this is going to shrink now okay and then we have the width of seven and then we have an object I cover so this is going to maintain its aspect ratio no matter what object cover all right so now that the image is there uh which looks good we have the signin page we have the link page which is perfect as well we want now the next part of this um so this is you know you have the uh image it looks pretty nice here as well and if you go and put it like that it looks good too and remember we had this uh you know uh responsive design where if you put it in a tablet or less than you know that kind of Dimension the other options wouldn't appear so now this is perfect we could go and do the next part of this uh process where we could create our own custom profile page you could see over here that we want this profile page right ex exhibiting so we want it to go to the profile page so this is actually going to the profile page when you log in but the thing is we want to show the profile page how can we do that it's pretty simple all we got to do is we have to go to the source and then into the components and then we have to create another component in here so that's going to be called private route so let me just go in the components and I'm going to call this as private route. jsx all right so now we have the private route. jsx um we could have um the following we have Wy and you can see that this is uh the private route now the thing is that we have this private route correct and let's just call it as private route here as well okay so now that we have the this private route we only want this profile image to be seen only for those people who have uh you know logged in because look at this if I go back to the home page and know if I go back to the signin page or anything like signin page now if I just you know do SL profile I'll still be able to see my profile page I don't want that right I don't want that I only want the authorized users to see it so um if we go to the app.jsx file this is created right now we have to go to the app.js x file which is right here and let me just maximize the screen now so app.jsx file and in here what we have is um you know we have a couple of things that we could look into so the thing is this routes and then the route and then this is the profile right we actually create an upper wrapper around it so what I do is right after the about we say route and we say the element and inside the element we put the tag which is um Pro private profile private route all right so private route close it and now you don't want this closed over here right this is a catch all route all for all this is a catch all route for all private routes yeah but you know we don't want that but actually we want it closed after this profile whatever is inside of this is going to be uh private so this is the route closing tag like this I believe it's now going to you know work uh okay I I have to close it like that my bad okay so now I guess we have it correct still it's complaining there's got to be some issue that needs to be resolved so route um opening okay okay okay okay uh let's see no okay so we have route element private route uh that's okay and then we have okay we have one thing over here um we had to close this tag I forgot to close that okay so we have over here route element and we have private route and this is the closing tag for this and then we have I mean opening tag and then this is the closing tag my bad and then we have this inside here all right so this is now going to be private but what we have to see is that um if this is private right we're going to have to import it you can see up it's imported on the top now we're going to have to um use the following as well so now let's go back to the private route. uh jsx and we have to import Outlet component as well as navigate component these are two different components now don't confuse yourself with um hooks hooks are like use navigate this is actually a component and outlet outlet is also a component uh and they're from react router D all right so they're from react router Dom if you see um we have P private route and we have um you know the route but now we could actually Preserve the user so remember the same uh process where we uh use the selector so we could actually import that as well so import selector use selector hook this is hook uh from you guessed it react Redux um like that and you know just for the sake of consistency I'm making these brackets curly as well I mean double quotes when what am I saying so double codes for everywhere so just to maintain consistency and let's create our current user again the current uh so let's say current user and is equal to use selector and and we have state and then we have state. user all right this looks great I believe we could move forward um what I did was I MA actually didn't have to do it in here this is not inside it's not in the div fragment I mean it's not in the jsx it's actually outside before the return so over here I initialized my current user and I could actually see if that user exists or not so um what I could do is um I could say if you know the current user exists so we could either just have you know not even this and in the return you you could have well actually you don't even need these round brackets you could just have it specified within this one line so because we could do it in one line so if the current user um exists we want an outlet all right Outlet means it would go to its specific um component which is going to be the profile and if not the user exists then we go to the signin page that's that's basically the private route that jsx doing so Outlet is basically over here uh if you go into the uh private route so over here uh which is in the app.jsx you see that there's this profile page right it allows you to go to that outlet it allows you to go in there only if you're authenticated if not then it's just going to navigate you so this is a navigate component and has a two attribute that goes to the signin page seems perfectly fine and I'm I'm hoping that it's going to work now let's just cross this out I don't know why um so let's go here and we're authenticated that's why we're allowed to do this right but if I actually delete the thing from my uh if I delete the thing from my application it should be over here if I delete this local storage uh which has the persist route and all my information right if I delete this now if I refresh the page I wouldn't be able to go back to that page anymore and now if if you look at the user the state has been changed to null so that's amazing um and if I try to go to the profile page now profile it requires me to sign in first so sign in can't uh it's saying like sign in so continue with Google of course I only have one account so that it's not giving me the select options but now when I log in you can see now coding cleverly is in my local storage so this is working super cool now all I want to do is add some uh over here an image um a profile image a custom one since this is now home I want a cool profile image over here and uh you know some form where you could actually see all this information about my account so let's go and do that um so we're going to profile page uh what we're going to do is we're going to go to the profile. jsx page so this one now essentially this is the profile uh page and and you can see now we're in the profile page I don't know why I was actually in some other yeah I was in the home okay yeah it's happening something I clicked on that it goes to the profile I click on this it goes to the profile perfect um so so according to my code it says it like navigate so it says header um if it's authenticated you know it would link to the profile otherwise it would you know oh yeah it links to the profile I mean it doesn't navigate you it just has a link to that so I mean it's fine it you know it takes you to the sign in the sign in component has the you know go to the homepage but now we're in the profile page and we want this information here we don't want to add all nested in the profile uh uh in the homepage section right we want in the profile section so let's create the profile page UI let's go to profile. jsx file which is over here and now let's just quickly add the UI components that we need so so first of all we have to have the div here and um I'm going to have okay I'm going to have a div and inside the div we're going to have an H1 one tag and the H1 tag is going to be um related to the uh profile so I'll say profile all right so let's just have that other on the other side as well this okay okay so uh I changed it I'm not sure why I didn't apply it but yeah it should be applying it later on or did my server turn off or something everything seems working oh we got some issue but it's still working [Music] now okay let's let's comment this out oh yeah it is working so we have this head one right now we want some of the cool things that we could add so we want first the um first we want the text to be a little larger so class name and we'll have three Exel so we'll say text hyphen 3 XL save you can see it's bigger now we want the font uh to be semi bold we want the text centered we want the um margin of Y to be seven all right so we got a cool profile um um you know text over here now we need a form tag the form is not going to have any action but I'm going to cons contain a lot of things inside here so first of all we have an input field and this is going to be for um you know it's going to be a type text and then we have well actually I don't want um an input field at the moment because I actually want to display my image okay so this is the image I want a IMG and I could say SRC right now we have the image so we got to actually get the image again from the same process what we do is current uh so it's use selector from react Redux okay and then we have um over here we have in before the return we basically create a const use uh user current user and we assign it to use selector State and then you know we have that okay state. user that's it nothing else now that we could have that we have that we have current user. Avatar okay okay and then alt Avatar and I don't know it add some cool okay now we have this Avatar but not being appeared now if we look into this so so we have uh current user use selector um and we have state and then we have state. user and then over here we're trying to add the image of the person uh at the moment it's not allowed allowing me to have the Avatar displayed I don't know why but it should after that we could have the I mean there's a lot of things that could go into this but initially that the image is not being appeared so okay so I'm feeling like maybe we're not saved or something let's see uh refresh um console let's go to application okay user exist okay so why is it not being displayed the image okay so now let's go and turn off so let's just sign out or something um so we need to sign up sign out buttons but right now we don't have any so let's just delete this it should navigate back let's sign in again okay it goes to the homepage we click on the profile page and it doesn't give us the thing that we need we can go to Redux and we could see over here that um we have Avatar and then we have that go back here and see where we we've done wrong so we have um form and inside we have the image and we had image source current user do Avatar and we have alt profile okay let's just have it as profile instead Avatar Avatar um okay class name there nothing so uh the image could have a class name of rounded I full still not appearing is it because of the form still not it's not because of the form it's something else you selector current user use selector State state. user so you know we have use selector State state. user we have current user okay I guess I guess one issue that have done many times before is uh you know having this bracket because uh essentially that's how it's tracking everything and you know how your images are being appeared so rounded full and now that we have our image being placed which is amazing now we just need to add some styling to it so rounded full let's have height of 24 width of 24 look height of 24 width of 24 and then we have oh it's not being saved okay now uh we have um object cover to maintain a aspect ratio for every device and then we have cursor pointer so I pointer so that I could when I hover over I could see this pointer effect I could also have self center now content is um like text center right but this is for images self center now this is going to allow it to be on the center um and then we have margin top of two okay so the thing that uh you know it means that it's not being applied so what I'm going to do is I'm actually going to go into the class named div and over here I'm going to add some CSS styling here as well padding of three okay it looks good now we have Max hyphen with hyphen LG all right and then we have MX Auto meaning it's all going to be in centered then we have the um this is all the that inside the form we have a class name again and um the forms class name has you know the flex that will have all of the things at the moment I just see the image and um you know it should have the username so I'm thinking of having a username here so maybe an input tag here and uh you know type uh text and then we have placeholder um we have username and then we have uh default value we could have a default value and that will be sorry it applies all these stylings for me right I don't want all that so default value you're essentially having that at the moment you could see that this is my username okay so yeah it was giving you styling um here's the class name and and you could have some cool styling for this as well um suppose you could have some cool styling for this as well so suppose if you want the um you know the IM uh what is it called the input uh field um to have a border you could have a border it's going to give a nice border um and then you could also give a nice padding of three and you could also give some rounded LG okay so this is looking good but the thing is they're not centered at all um so I'm going to have to put the input uh Avatar so in the class name you see this so inside this form we could have a a property that it says Flex so that they're side by side we could have a flex call now they they're in a column direction and you could also have a Gap g of four so they're a little spaced out like that so now it looks much better uh looks really good okay so now that we have this I I forgot one more uh tag here um there should be an ID tag so ID and the ID should be also called you know it should also be called username so placeholder username and ID equal to username like that all right so now we have this copied we could go and next is the email and after that we have we just need three more now let's just zoom make this a little over here and make this a little smaller I'm just going to quickly now change the next ones which is email and password so I'm going to say um placeholder email you could actually use this uh following thing uh I think it's contrl D contrl D contrl D I don't know yeah see so wherever you see username right you could have control D it's going to take it you to the back you could get the next one and you could get the ne other one and then you could just uh you know right onto it so what we need now is this email and that's going to reflect everywhere over here we have uh control D contr DTR D and this should be password okay so now it should be applied Okay the reason why it's not being applied at the moment I guess yeah I didn't refresh it so I have to refresh the page you can see the email is there now the password password you don't want right so you don't want the default value password so just keep it like that and uh this is going to be you know your field where we'll just have the text as password and the placeholder is password on change is handle change ID is password um class name is border P3 and rounded LG so this is perfect um we don't need that password at the moment because this is going to be basically maybe uh there to uh change your password if needed so we could format document over here okay that looks really nice and we can move on to the next part which is the button so now after this we have a button at the end and in the button tag it's pretty simple all we got to do is is we have to put a uh you know button here which is going to be calling um um you know submit or something and we have over here let's have a class name to this button and the button's class name is all pretty simple background slate and we'll put 700 nice color uh text white and we have um padding of three and we have rounded LG we have uppercase we have text type and sender and we also have uh opacity of 95% so you can see this is our submit button which is fantastic now when we have all of this done we could move out from this uh you know form tag and move out from the form tag and you could have um you know text for you know delete account or you know something else so so let's have a div here and uh essentially in this div we have a span and the span will say delete account like that and we'll also have a div I mean span that says sign out all right like that now look at this the thing is that they're not really that good in styled right they're not good styled so what we could do is I could fix this up by first of all having a class name here and for this you could have the span as text type in red and that's 700 and we have a cursor pointer hypen pointer look at that looks good and the span for this one we have a class name and we could have the text hyphen red hyphen 700 and we also have cursor hyen pointer looks good but now we need to space them apart so we have a class name here in the DU okay and then we could call Flex now we'll have uh since we called Flex here what we need to do now is justify uh between and this is going to put them in separation right there and we could also have the last one which is modern top of five which is going to look good like that so now it looks good we have a delete account and we have sign out so both of them look really nice and pretty much that's it I guess with the um the profile now you can see it's pretty responsive because I actually added the um I actually added this you know this thing which is padding of three overall through the entire div and then we have Max width is large for large devices so so it says the maximum width for this form is is large so it can't go exceeding this you know these these widths of these input Fields can't just go extremely it's all set and constrained uh and then we have MX Auto which is margin uh of X is auto meaning it's all centered so this is pretty much it with the UI design of the profile page

Channel: Coding Cleverly

Views: 413

Keywords:

Id: N-WAllZ3SBo

Length: 37min 14sec (2234 seconds)

Published: Sat Jan 13 2024