How To Create A Profile Page Using React JS | | Blog Application MERN-9 | Intellipaat

[Music] welcome to the last part of mon stag blog project Series in this video tutorial we are going to complete all the remaining components like profile page using real so let's move ahead and complete our blog website but before we start with that I would like to request you all to subscribe to our channel for more technical content like this now without any further delay let's move to our vs code so let's move to our homepage first and uh um we have already created this component as home post okay so inside my home post uh what I'll be doing I'll be creating this you know um box kind of view and in that box uh there will be some description of the blog or you can say the heading of the blog and then the little bit description about the blog then we will also have the the author who have created the date of creation and the image of that particular blog so we will create that view box view of our particular ular blog for our homepage all right so um let's move ahead and uh as we all know that for this particular project I haven't uh much put my attention on creating a UI so our more attention was towards creating the back end all right so we are not creating that high-fi UI over here we are just uh focusing on how to write the functionalities how to uh implement the hooks and everything right so so let's get started first of all uh what we will be needing for the image I'll be needing my uh if so what is if if is our image folder link okay so from where we are getting this from URL right inside URL we have put all the links all right so here uh for this particular uh component we won't be needing anything else it's just the image and rest we will be getting the post over here okay so let's also uh pass the post as a prop over here because whenever we are creating this uh H post whenever we are using this home post component inside our let's say uh homepage so if I'll just move to my homepage and if I'll just show you uh where we are using this home post here you can see uh we are getting two things first one is our post ID as a key prop and also the post so what I'm doing over here is I'm taking that post as a prop okay so I'm taking this prop over here let's say post you can use post ID you can take post ID as well but uh we don't need that okay so Dev I'm creating one more Dev inside this particular Dev and starting with my class names let's make our height as 45 VH uh you can change this height and width accordingly uh I have you know taken this uh grid kind of structure you can also take only rows and only columns kind of thing okay so let's make our display as Flex Flex wrap then we'll have a background as white for this particular uh box then let's make our border border as uh gray 200 fine and then also uh let's give some Shadow okay so this is our uh homepage so that's why I'm using a little more styling for this so so uh inside this I'll create one more diff then um let's try to understand one thing over here so whenever we are taking any images right so all the images won't be of a same height and width right so for that what I'll do I'll first tell uh the my box that whatever the content is overflowing hide that so for that we use overflow hidden hidden like this then uh we will also you know set the height for our particular image because I want all the image to look same now inside this particular D I'll uh take my image so let's create one image tag over here and let's also give some class name to our image tag starting with object fit so object fit object cover and object you know uh f are all the you know styling for uh making our image responsive now let's also give some withd through our particular image I'm taking 90 uh 96 over here and let's also put some classes on H so on Hover I want my image to get little zoomed in okay so for that I'm using hover scale sorry H scale 150 over here then uh now we also have to give SRC so SRC and uh let's say if plus if plus can you please put a put in the comment section like what will be after this if so this if is just uh you know locating to our particular folder not the particular image so how we will get this particular image by taking post dot photo right we have already used this part so I hope uh this is clear to you so if I'll just uh Go and show you the output we will have our image over there let's also give alt and let's move to the output so here you can see uh we have this you can see on uh H my image is getting zoomed in okay so this is the particular box this kind of box we will be creating for all our post okay now let's move back to our vs code and uh create the description and everything for this okay so after this particular image I'm creating one more div over here and inside this I'll have my all the other data okay so let's start by giving a class name let's make my ping leftt S three then inside this I'm taking my H5 over here and uh inside this I'll be writing my post title so let's say post dot title title like this and let's give some styling to this particular title let's say class name and um over here let's use text as Excel font will be bold then uh my tracking will be tight so what is this tracking typ means uh the gap G between two particular letters okay so that represents our tracking tight now also we will write text as gray uh let's keep this as dark as possible so I'm taking 900 you can use 950 as well both are almost the same color it's just that 900 is little lighter than 9 950 okay now uh after that I'm creating one more dip and inside this particular dip we will have all the other data Okay so so in this particular div I'm creating I'm writing class name and uh let's give some class names over here let's first say text as extra small font will be semi bold text will be gray 500 and item will be Center justify Center [Music] now uh let's also make this Flex because we have used the flex properties now over here I'll also give a P tag and in this particular P tag we will uh write the author's name okay so let's say post do user name so this username is the name of the uh user who have created this particular post okay so if we directly write the username then it will give you the your username for the particular logged in account okay but when we are using post. username it will give you the username of the person who have created this particular post okay and over here I'm also writing bu space and also over here uh let's give some class name and make this as a blue color so let's say text blue 400 let's look at the output so uh this is not really very clear to me okay okay why why why why this is happening text fold text okay let's try and add one more Dev over here I guess that that div is overlapping so let's also add one div over here and wrap this inside our div so I'm wrapping this div over here no change okay now the username is gone okay let's try to fix this okay let's make this as Excel uh then let's also okay uh now I can see some data but it's not clear because it does not have height I guess so let's say height as Auto still not Bic right okay uh let's see three not visible okay so what's happening over here is uh it was getting overlapped by the uh div at the very bottom okay so what I did I created one another div and I have given MTS 4 over there so uh it got this little space to show up okay it was getting overlapped all right now let's continue uh over here I'm giving do if let's check uh it's visible okay it's visible okay all right this is looking perfect over here now uh let's also uh you know this div will conent our uh description detail okay so for that what I'm doing over here I'm writing font as normal and uh text will be gray 700 right I'm not taking the black text over here and I'm also creating one ptag and in this particular P tag uh we will have our uh data so what data how we can uh get this particular data by writing post do description right but if you will notice one thing um right now we don't have that much uh you know data inside this particular uh blog so uh what happens is whenever you will be having a lots of data inside your particular post so what will happen is uh you will get whole data over there so we don't want to do that we want to show some specific data over there otherwise why we will why someone will click on your blog and read the whole thing right so for that we will just give the blog overview over there and we will use our slice we have already used our slice to you know get the date so similarly we will use slice and we will show uh around 75 letters of our particular blog okay and after that we will have this plus sign and uh in this plus sign we will add one string over here and uh everything okay just let me first finish and in in this we will write read more read more like this and uh I'm just copying this particular I'm just cutting this particular part and adding this particular part inside this curly braces okay otherwise um it will be just just visible as a text over there all right so if I'll just show you over here let's reload this okay I don't think uh it should look like that okay so we also have to this is already done right uh now let's uh move ahead and also give the post date okay so after this particular uh defending what I'm doing over here is okay one more thing I had to add this particular data over here okay because uh this is our content div right and inside this particular div only we will be writing everything so let's look at the output once so if I'll just reload this data over here you can see we don't have the description as well as the date so there is something wrong with this so let's try to figure out okay uh so this St we have everything right overflow headden 20 VH make it as okay uh so over here now you can see uh we have the data over here uh we have just toen the wrong height over here it will be 40 V and you can see uh we have this data if we had the more data we could have got the more data and then this read more but we don't have the much data inside this particular block that's why we are getting big data and read more and we have this uh date in light gray color okay so I guess uh this card is looking perfect and if I'll just show you in a large screen as well this is looking perfect and uh it's beautiful right so now let's move ahead and create the edit blog okay so let's move to our vs code again and if I'll just maximize this and let's move to our edit post so we have already created one page as edit post and we will be now writing the functionality for our edit post okay so as usual let's start by uh importing all the important things so let's say starting with our hooks first of all we will have the use context from react then we will have use State then we will have use effect in this whole series we have studied about this three hooks in very detailed right now uh after that we will be needing the footer so I'm importing footer from back/ component SL footer then we will also have our nav bar so let's say Navar sorry Navar from again components Navar now uh we will also be needing uh some icons so I'm importing that first of all I have IM cross cross from react icon slim then uh we will also need the exos so I'm importing the exos over over here exos we are using exos for this one and uh you can also use uh fetch as well so I have uh taught you both the ways to you know use our backet uh or call Api okay then we will be needing use navigate navigate not navigation use navigate okay then we will also need use parents because we are going to edit the post based on the post ID then we will need our user contacts because only the user who had created this particular blog will have privilege to edit this now let's uh uh start by creating all the functionalities first starting with uh let's let's get our post ID so let's say const post ID is equal to use params okay no suggestions for that let's say it's okay we will write it use parents as a function and we will give the ID over here then we will have the what is happening oh God H now uh we will have our user like this and uh from while this user is coming we are using a user use contact hook and then we are calling our user context so here it will be const now uh we will also create one variable as navigate and if we will equalize this to use navigate navigate like this so whenever we will be needing to navigate to some other page we can use of this particular function over there now let's create some states starting with the title so there are certain things the user or the person who have created the blog can edit starting with the title then we will have description then image then certain categories or a category and the categories array so why we need category and categories separately because categories will contain all the categories added and category we'll set the single category all right so let's start with the title title comma use title sorry set title title like this we will make use of a use State and inside this we will pass a array sorry string then uh similarly we will have the description so let's do one thing uh we can get all of this uh things whenever uh we created this particular block okay so if I'll just move little bit above and if I'll just copy all these things and uh paste that in my edit post so let's first close all of this because it's very confusing so let's say close all and then we will open edit post again and I'm pasting whatever we have copied over here so first of all let's move remove this part because we don't need this and let's remove this part because we don't don't need it now uh we have everything over here first of all we have our title then we have description then we have files then we have category and then we have categories fine so we are done with this let's create a a function to fedge the post so first of all whenever we are editing the post first of all we will have the already written post over there right so uh whenever you're are editing you will be able to read the previous post as well then and then only you will be able to edit that particular post right you don't want the whole post to be gone right you want the previous data plus you want to add some particular data so to get this previous data we also have to create one function okay so let's create one function so let's say const fetch post fetch post like this is equal to async obviously this function is going to be a sync operation and uh inside this we will have our try and cach block so let's say try try then we have catch catch will contain the error and it will return that error so let's say console DOT log error now uh let's also add this data into our Tri block so first of all what we will do uh first we will mention from where we are getting this particular data from so we are getting this particular data from const response is equal to a wait uh we have seen one another way to uh you know uh request this particular data how directly without mentioning this variable over here right we can directly write a wait exos exos doget and uh whatever the end point you want to mention so let's say for the endpoint we have our slash API slash posts now we also have to add our post ID so let's say plus post ID like this now we get the everything now what we have to do we have to set this particular data so I guess we have set that particular data when we were creating this particular post so over here we have created this uh just a minute let me just check okay no we have directly you know send this particular data to the post method so we have to write this okay no issues we will write it starting with the set title first of all we will set the title as request. data do title similarly we will have set description uh that will have uh response. dat. description then we will have set file and that set file will have response. dat do photo not file over here okay make sure you write photo over here because in the back end we have stored this as a photo so we will get photo in return then uh let's also take the categories so this is previously added categories okay not uh so over here we won't set the category we will set the categor so this is an array okay this is an empty array initially and now we are adding the data to that particular empty array so over here we will have response. data do categories so here I have created the whole categories like this so it will be categories not just the cat over there okay so this is done now let's move ahead so uh what else will be there so first of all we get all the data now we have to create a function to update that particular data right so uh already we we are going to create the particular form but we also have to create a function on submit of that particular form the data will be updated so for that I'm creating a function over here uh after this particular function uh let's me just remove this blank spaces from here and over here I'm creating um function let's say const handle handle update update and the this will be a sync operation as well this will take e e is basically the data and U let's also write e do prent default because we have handing the form so on submit uh we don't want our page to reloaded so e do prevent default we have already discussed about this right and this will be function like this now uh let's also create one more variable and in that particular object we will be storing all the data just like we have done whenever we were creating this particular blog so if I'll just show you if I move to the create blog over here you see we have uh done this right so uh over here uh we will be needing this file as well so I'm copying this particular part this whole part okay this whole part I'm copying it down and uh okay I'll be needing this as well okay so I'm copying this particular uh part down uh then we will also need to uh Delete the category button so let me just paste this over here and let's check what is the issue or what are the things we need to change so let's check it so starting with the uh we have the post so we need the post then we need the uh title that we need the description then we are setting the username so username is not going to change user ID is not going to change and categories will be changed so we are giving the option to change the category okay then uh we will have our constant data is equal to new form data right so that is uh fine because we are changing the image in case we are changing the image okay uh then we the operations will be same we have to append that particular uh file name and then we will append that particular file and we will set our photo is equal to that particular file name okay now we also have uh we also have to manage the error in case we get any so we have done that okay and after that we will send this particular data to our Endo that is uh const exos post slash okay over here it won't be a post data it will be put data because we're updating that particular data right so and this end point will be uh not create it will be just post okay and uh over here we also have to send our post ID so let's say post ID over here and then we will send the post and with the credentials is equal to true then we will also have to navigate to this particular post so this part is same only then we had our error handling okay now we have to create a use effect just like uh usual so I'm creating a use effect hook over here so use effect and uh this will be Arrow function and inside this particular part we will call our fetch post now uh also we have to pass the post ID over here so let's say post ID like this now what we will do uh as uh we have created the function to delete the category and add the category uh we will we will be needing the same function over here so if I'll just move to my create post and let's look for the create category and add Cate sorry delete category and add category function so this are two functions so I'm copying this particular part down and moving to my edit post pasting that over here so let's just check uh if there is any change so first of all we will uh Delete the category so we have the I let's update cats okay fine slice and everything is perfect and in add category as well nothing is changed it's just like the create category or create post okay so um everything is done over here now what we have to do we have to create the UI for this so I hope this part is clear because we have discussed all these things in detail whenever we were creating our create post okay so if you haven't watched that particular video I highly recommend you to go and watch that particular video now let's create the UI for this one so now let's move to the UI uh starting with I'm removing this particular edit post and over here I'm creating one more Dev like this and okay okay let's do this again Dev Dot all right now um let's first put our Navar over here so here we have our nav bar and inside this uh let's make our display flex and justify Center all right now after doing the SM what we will do uh we will create mold diff and inside that particular div we will have our form okay so let's move ahead and do that so let's say div over here like this and over here I'm giving a class name so let's say class name and uh let's uh take the pedding as four let's also give the Border over here then let's make the width as 70% 70% and uh let's also make this display as Flex fle Flex call Flex call and uh we will also have justify Center and uh let's make PX is equal to 6 MD PX as 200 pixel 200 pixel and margin top will be 8 now uh after doing this much I'm giving a heading a big heading that says update your post okay so oh it's nothing fancy over here we are just writing H1 Dot and inside this we will write font then font will be bold then we'll have a flex justify Center then we will have for the medium screen our text size will be 2 XL and generally my text will be Excel like this now uh let's give the heading over here that says update your post now after doing this much uh let's create a form over here so let's say form and let's also give the dot over here sorry let's say form dot okay now um over here I'm removing this action because we are not creating any submit form thing we are uh just going to give with as full not over here over here full then we'll also make this as Flex Flex call space y will be four and for my medium screen my space y will be 8 okay so this is X I want Y and margin top will be four fine now inside this particular form we will have all the input tags and everything so let's do that so over here I'm creating one input tag input input dot all right uh type will be text and let's also add on change over here on change of this particular uh input tag we will set the title so this one is for the title so let's have the title over here let's uh okay so over here we will have the E and then we will make use of our Arrow function and we will call the set title function so set title is basically our U State okay so whenever we are using the U State there are two things first one is the variable and another one is the update function okay so uh if I just write over here Set uh instead of set title if I just use title as this then it will throw me an error but the set title is used as function so that's why we are directly using this function okay Target over here and also let's add the value now also the value for this one will be title see we are using title as a variable and set title as a function over here now uh let's also add the placeholder so I'm just entering over here and I'm here I'm adding placeholder like this and inside the placeholder I'm writing enter post title so in case there are no titles uh this placeholder will be shown but we already fetched this title from our back end and we have set this particular title right so uh initially it will be the old title okay and then if there uh if we remove everything then we will get this particular place folder fine let's move ahead now let's give some class names over here uh starting with my PX as 4 py as 2 and uh outline none like this now we also have to create a input tag for our file file is basically our image okay so let's say input input. over here and over here I'm taking file instead of text so let's just say file over here and over here we will also make uh pxs 4 for this one and uh let's also add on change so let's say on change we will have e do set file like this and inside this particular set file we will have e do Target do value like this sorry for file we will have file over here okay because uh we are using file and initially we will start the index as zero okay now um well uh let's also create one another div and in that particular div we will have our description right so let's create one more uh div over here and inside this particular div let's start start by giving some class names over here so let's say uh class name like this and let's make it Flex Flex call now inside this particular div I'm creating one more div like this and let's also start giving some class names so let's say Flex item Center then space X4 and uh for my medium screen my space X will be eight now inside this particular uh div we will uh set our categories okay so this will have our single category and at the below we will uh display all the categories right uh just like we have done when we were creating our create post so if I just move to my create post and if I'll just scroll down over here we had this particular um category thing over here right so similarly over here it was options but in this case I also want to give you know uh option to create a new category okay so uh over here if you notice the we have this select an option thing but in edit post what we will do we will give an input tag and people can actually create new categories so let's say uh my categories is not mentioned in your list so in that case I can just simply go to the uh edit tool and I can create my own categories over there okay so let's just do that um over here I'm taking the input field input dot like this and obviously this will be text value will be cat value will be our category on change of this particular um category field we will set the category so e set cat and inside this we will have e do Target do value value like this okay now after doing this much what we have to do um we will give some uh class name over there and we will also give some placeholder over here so if I'll just uh enter over here and if I just SL placeholder over here we will uh give placeholder as enter post category category like this okay let's also give some class names over here uh let's take the PX as 4 and py as 2 then outline as none fine after that uh we will take that particular button which we have uh created in our create post so this was the button right so I'm just copying this particular button over here to here and uh inside this particular uh div only I'm pasting that particular button so after this input tag I'm also pasting one button so why this is too okay okay fine fine fine here we'll have this particular button fine so uh we have created this add category button also over here right so that particular category will be added over here now we also have to show this particular category list right so over here uh if I'll just move back and if you see this we have already created this uh show category uh thing over here right so I'm just copying this particular part down so let's say copy this categories and paste that particular category right below this button or let's say um inside outside this particular Dev so over here I'm pasting this part like this so uh it says there is no ending to this particular Dev all right now uh let's move ahead and uh outside this uh particular di I'm creating one more uh text area and over there uh we will have our description okay so first of all uh I'm copying that particular part from my uh create post so if you see over here we add this particular uh two things over here right so this button and this particular text area I'm copying this part and putting into my edit post but there are few things we need to change initially the value of our text field okay uh first of all let's uh update this particular part over here it will be up handle update not handle create because we have handle update with us and uh initially the value of this particular text area will be description so value ASC description fine uh other things will be same over here uh I'm not changing any placeholder and everything uh I'm keeping that as it is and at the very end I'll also have my footer so I'm creating my footer over here I'm taking my footer and this is done so you can see uh there are only warnings no errors over here in our code so let's move to our output and check so if I'll just click on this and if I'll just log in so let's say uh test atate gmail.com and over here if I'll just have 1 2 3 4 5 6 and if I'll just login and if I'll just click on this if I'll just click on this particular blog you can see uh there is this comment section and everything this is working fine and if I click on my edit button you can see uh we have created this and over here if I just write uh let's say I'm just adding this a over here and if I just add you can see uh this is added over here and instead of here uh it should be update right so I'll change this text over here and if I just update it so uh it's not updated because if it would have okay there are some errors so let's try to fix that error so it says that the origin is wrong you can see uh this is how CS I don't look like see uh it says that has blocked by CS policy allow access origin okay and all of this so what is happening over here is uh we are getting the Cor because there is some issue with the URL we have uh written okay so if I'll just move at the very top of my you know um edit post and if I just uh check over here then let's try to figure out what's the error we are creating okay so it will be / API SL upload comma data and / API poorts slash poost post ID post SL poost ID and uh let's try to add this and create this so it says the username okay so there is some error in the username over here you can see there is some error coming over here reading the username reading the username right so there is some issue at the username so let's let's try to figure out what is the issue over here okay so uh username will be user dot username and user ID will be same categories will be cats title will be title and description will be description so uh this is all right now I also have to check this particular Endo so I guess this is the correct end point and uh SL po/ rest data here okay uh so we are getting the data but there is uh issue when we are updating that particular data right so I guess fetch data is working fine but update data is not working fine so let's just try to figure out what is the issue over here we have this upload over here we have API post slash over here and this was API SL ports over here okay okay all right so uh just restart your server and it will start working I don't know why this uh you know react has a little glitch sometimes does not update your code so if I'll just show you the output over here uh see this is my blog and if I just click on this edit F and over here if I'm editing the category as data and if I click on update it will actually update my data over here and if I'll show you on our blogos spere screen you can see this categories is added over here okay and uh uh one more thing to notice over here is uh whenever you're updating the data your image is going so why this is happening because uh at our file input so here we are taking the file input so so initially we are not setting the value so over here we have to set the value as uh file like this so initially it will have the value so if I just you know uh set some uh image over here once again so if I'll just add the uh not the category um the image so if I'll just go ahead and add this particular image again over here and if I click on open so you see uh value property of HTML uh accepts the file name right so it's not you know it is it's giving us the error over here so uh for that what we have to do um we just have to mention the file name over there okay so let's just say file name over here like this and uh okay it says that the file name does not exist okay why this is happening why this is happening so at the image upload we have okay uh so we have this variable inside the file name and uh post. photo uh is equal to file name right so let's try adding photo over here photo like this and let's check whether it's giving us the error or not okay it's giving still it's giving the error to us okay so so over here uh let's add uh file and move to the output and if I'll just choose the photo again over here let's say this one and I F open and you see the value property on HTML the input excepts file name which only be set as empty string okay so uh I'm removing uh we have to set the value of this file first and initially it is null over here but I don't want the null over there right I want some input over there initially so if I'll just write post dot what we had photo over here okay let's uh set this as null initially and then we will set this as photo ler so at the image upload we take the file file name okay initially here I'm also setting my uh file as okay not um data as photo okay fine okay uh so we have completed our edit post now uh let's move ahead and create our profile section and let's end this particular project so we have already created a page as profile so let's move to that particular uh component and inside that what we have to do is we have to show the logged in user data okay so uh also we have to create this uh my blogs so first we will complete this profile section and then we will move to this my block part okay so this my block contains all the block which is return by you okay so over there um we will only uh fetch the data uh according to your user uh credentials okay so let's first focus on this our profile section and U starting with importing some uh important things which we are going to use in uh creation of this particular component starting with a use context um let's say user context also we will be needing so let's say use context give me the hook now okay fine then we will have our use effect then all we have our used it so this is going to be a very small component it will show you just the data okay and also we will be needing our Navar from the components then we will have our footer from the components and uh also we will have our uh exos because we are going to use exos for this component as well then we will have the URL so let's say URL from my do do back slurl now let's also import our navigate and parms okay so use navigate navigate comma use params like this now um let's create the functionalities there are only few things we had to uh do in this particular part that is uh setting our username email address password and uh we will also give uh you know uh user to privilege to update that particular data so if I want to update my username I can do that over uh my profile section okay so let's start by getting the data first so let's say const parm uh sorry parm is equ Al to why this is happening parm is equal to use params will be function. ID like this now I don't know why this is auto changing my you know pre-written text all right now um we will create some states first of all for my username use username comma set username username the St initially will be null then we will have our email address so let's say const email comma set email and initially this will also be null in a empty string okay now uh same we will have for our password so let's say set password and password will be null at the very beginning okay now uh we will also create a user constant so earlier what we used to do we used to create uh only user over there because we were only uh want to get the data of the particular user but over here I'm creating two this two uh objects saying user comma set user user and uh we will make this uh use of our use contact and inside this we will pass our user contacts so what our user contact was doing is uh storing all the user data right so it was returning the user data to us so over here uh by using this particular uh component we are also changing that particular data so that's why we need this set data as well now let's also create one more uh constant as navigate and let's call the navigate function over there use navigate like this and after this we will also create uh update did and set updated okay so first of all we will have the data which we already had and then we will have the data uh after the updation of our particular user data so let's say updated like this and uh we will keep this as a uh bullan expression because uh there can be two things so let's say if this data is updated in that case what we have to do we have to update this on our back end as well so only and only if the user make any changes inside our particular uh you know form at that time only we will call our backend functionalities otherwise we will not call the backend functionalities so for that to keep track of that particular uh part I'm creating this updated um State over here okay now uh let's let's first get the data so how we get the data by using the fetch operation right so let's do that uh here I'm making use of our uh exos but I'm creating a function as fetch profile just like we created for our fetch uh post and everything right so also this will be a sync operation like this and uh Arrow function like this inside this we will have our TR catch block we know that right let's create the try the catch will have the error then we have console do log and inside that we will cach the error fine we done with the cach block let's also uh update our Tri block so in Tri block uh we will request the data just like we we were doing it so let's say uh request a wait exos do get data why get because in this case we are only fetching the data right so over here we will make uh use of our URL plus API SL API slash users slash we also have to give the user ID over here according to that particular user ID we will be fetching that particular user only so let's say user uh doore ID like this now uh let's also set the values so first of all we uh get this particular user now um this will be user not a username okay uh this will be uh yeah that is a spelling mistake fine error is gone okay now uh let's also set user name how we can set that request dot data dot it will be dot username username like this then uh we will have set email set email and similarly um that will have uh uh response. data do email right then we will have set password and that is also same then uh this is done we get all the data for of our user now after doing this much I'll also create one function to update this particular part right so let's uh now I'm creating one handle over here so let's say handle user updated updated and this will be a sync operation and inside this first of all we will set updated as false set updated is initially False only okay but we are setting this again because uh let's say if in middle of somewhere we have set our set updated as true and the user data is not updated in that case what we will do uh first we will set our set updated as false at the very beginning of the call and then we will try to update the data in case the data is updated then and then only we will make this particular uh set update as true okay uh now what we will do we will create one try and Cat block first so cat will have the error all right now inside the tri block uh start with re is equal to await here I'm using the Fitch you can use exos as well okay so right now I'm just showing Fetch and exos in same particular uh component okay over here let's give the back tick and/ API SL users user slash dollar our user ID all right so we got the user now what we have to do uh we have to mention the method and everything so if we were using exos we will directly write exos do put over here right but we are using fet so we have to mention that method method which we are using over here uh is put like this now we also have to um mention the headers over here so obviously we are going to pass the credentials uh when we are doing this particular operation because uh we are adding the user profile right so it is very important to pass the headers okay so Contex type application Jon right then we will have the credentials credential credentials sorry credentials as uh true or you can say included uh if we were be using uh the exhaust one then in that case we write U credential as true and I like the you know uh exhaust better than the fetch but just to show you guys both the methods I'm I'm making use of both the things okay and over here we will have body sorry [Music] body as Json like this then we have to stringify that particular part and inside this we will have our username then we will have our email address and then we will have our password all right so this is done now let's also uh console this particular uh data and also we will set our updated as true okay so let's say r. data over here like this and let's also set updated s true now uh in case of any error occurred what we will do we will set our updated as false again okay because the data is not updated because uh there were some errors okay now uh let's also give our user option to delete that particular profile okay so if I want to delete my particular profile then what I'll do uh now let's create our handle delete so let's say handle delete like this and this will be a sync operation as well uh let's make one arror function over here here inside that we will manage our try and catch block so uh try block catch block will have the error error and we will console log that particular error fine now inside a tri block what we will do we will uh first send the response is equal to await and uh here I'll just to show you the difference between uh fetch uh and you know uh exos I'm writing exos for the next one okay and here it will be only fetch not fetch profile over here okay so by mistake uh by the auto update it updated this as a fetch profile in my case uh if you also use this suggestions then it might get changed in your case also okay so I didn't notice this earlier so I'm just uh updating that as well so okay so now I'll show you the exos part okay so over here uh we are deleting the you know ID in that case we use exhaust. delete then uh we will have our API uh sorry SL API SL users users like this then we will have user ID if you don't mention this particular user ID all the user data will be deleted okay so make sure you uh mention that over here and over here we will pass this with with credentials true like this and in this case we don't have to mention any uh extra thing okay then we will set our user as null we also have to uh set this particular data so we will set this as null we will navigate to navigate to where homepage okay so let's navigate to homepage and uh let's also console do log our response. data now in catch we have already manage our exceptions right now let's fetch the uh profile data first so let's say use effect and uh let's just create this Arrow function and inside this I'm writing fetch fetch profile and inside this we will also pass our par par like this and why this is giving me an error because there has to be a comma over here fine uh we are done with our functionalities we have created update and delete handle and we have also FG the data now let's move ahead to our UI part so starting with I'm removing this particular profile and I'm writing uh I'm rendering nvar first over here nvar like this then I'm creating a div div dot dot and uh inside this I'll pass border then then we'll have P3 then we'll have text Center then align medal middle then we will have this as a flex justify Center like this now uh we will also make the width as 50% for medium screen my width will be 30% and uh Shadow let's also give the shadow over here okay I by mistake L didn't close this one fine it's okay now uh let's also give the shadow as Excel or let's take two Excel this time okay we have used Excel and LG all the time so let's make it two Excel and uh let's also say uh Shadow color so let's say shadow do as gray 500 fine so this is done now inside this particular div I'm creating one more div and inside that particular uh div uh we will have all the data so over here I'm creating div dot so if you just write div dot it will give you uh it will create a div for you and also mention the class name over there okay so you don't have to rewrite that again and again so let's say Flex Flex call and uh space y as 4 and then we will have justify Center we will have text as center now inside this particular div I'll render all my user data and we will give the you know uh input tag to change the data now uh text will be Excel just defy Center text Center and font will be bold then M bottom four now between this we will just write the heading as profile profile and uh after that we will have input tag okay now uh input type will be text then uh value will be username okay username which we created as a state and on change we will um call the submit Handler so let's say e sorry we will uh set username okay set username and over here we will say e do Target dot value like this now let's add some class names over here so first of all I'm making outline as none none then we will have just defy Center also this will be Flex then we will have py as two then we will have text as gray 500 then we'll also have the placeholder in case uh user removes everything so let's say placeholder and it says your username username like this then um um we will create similar thing for our email address password okay and then we will create one but two buttons uh for delete and update okay now um let's also uh create the same thing for the email first so let's say input Dot and this will be text okay let me just copy this particular part okay I'm just removing this part and I'm copying this part for the two times like this now starting with uh this will be text I'm making this little cleaner okay so we can get the idea so first of all uh we will have uh email over here so let's say email uh this will be set email and your email over here everything else will remain the same and here I'm changing the type from text to emage like this okay now uh let's also update this uh password so type will be password let me just you know make it a little bit cleaner over here we will make the use of password on change we will say set password password you target value password and here your password okay fine I guess uh we have completed for all the input Fields now let's create one more div and inside that particular div we will have two buttons okay so uh let's also give some class name to this particular div so let's say class name and over here I'll write Flex item Center and space X6 and empty it now inside this we will have two button buttons so let's say button Dot and over here I'm writing update and similarly I'll have one more button so let's say button and over here it will be delete delete like this and uh here I also I want some class names over here now uh starting with on click so I'm making this also so you know little bit cleaner like this same goes over here fine okay starting with uh the on click function so over here I'm writing on click I'll have my handle update okay so let's say handle update over here and for this one I'll have my handle delete so let's say on click first and then let's say handle delete now I'm writing the class name for the single one and then I'll change for the other one as well okay so starting with the text as white then I have my font as semi bold then my background will be black PX as for my py as two and uh H text will be block only block and uh then my whole background will be BG will be gray 400 now I'm copying this particular uh line for another div as well okay so uh this is done uh we have completed our profile section but I also want to uh you know show the message that says my user is updated so how we can do that after this particular uh div I'm rendering you know uh conditional uh line over here so let's say updated so what is this updated updated is nothing but our state right so initially it is false so this is not visible and when my updated is true in that case only this part will be visible so over here I'm writing uh H3 Dot and uh let's make this text as green and here let's make 500 text SM and text Center then mt4 now over here uh between this two H3 tags I'll write user data updated sorry data updated successfully successfully all right um we are done with this now we also have to U render our footer so here I'll also write the footer like this I'm making this as a self closing D okay so uh we are done with our profile section Let's uh check the output how our profile section looks like so if I just move over here and if I click on the profile you can see uh this looks quite odd and at the very Corner why this is happening let's uh try to get that so over here if you notice one thing um this doesn't show your password over here right so let's also check that uh first of all let's move to our password and we have a value as a password okay so we are setting our password as password but we are not getting password fine you can see uh on updation it is showing that my data is updated successfully okay but I want this uh at the very center of my screen so let's check that uh moving to the main Dev over here align middle withth is equal to 50% Flex justify Center and uh so over here I'm making changes uh in my styling so let's say uh height is equal to 90% so it will show something like this uh let's make it screen only okay so let's say screen over here w n fine okay now you can see uh this is in the middle and at the end we have our uh footer all right so I guess profile section is done now what we have to do is we have to create this my blog section so over here uh this my blog is empty now let's move ahead to our vs code and let's try and create this my blog page so I hope you guys were uh enjoying this particular blog website series don't forget to subscribe toath YouTube channel for more projects like this so uh after completion of this particular blog website project we will create few more amazing uh MS typ projects okay so first of all let's start by importing some important things starting with the link then we will have used location okay why we are uh importing Ed location and Link over here because uh we want to link this particular uh you know all the post to their actual location right so that's why I'm using uh link over here and this is coming from our react router Dome okay then we will also need a footer so let's say footer then we will have our nav bar so let's say nav bar then we will also have some hooks so let's say import use context uh let's first import use user context and then we will need use context so let's say import uh use context context from react use effect from react F from react and then you state from react so one more thing if you guys want to you know uh any other project if you want to build any other project on react please comment that particular project name and we I will try to create that particular project for you and also I'll upload that particular project on the YouTube channel okay import exos from exos then we will have a URL so let's let's say import URL then uh let's also import home post so uh we are what we are going to do over here is we are directly going to pass this particular data this specific data which this particular user have created uh to our home post and we already have created our home post component so we don't need to style that particular part again so we just have to create create more functionalities over here we'll also import the loader so if you uh miss any of this video so uh you can check out the playlist and you will have the access to all this particular video okay now uh let's create the functionalities first before this particular U return statement what I'll do I'll create my uh first of all uh search so the code will be similar to our homepage just the difference is the data we are passing to our you know home post component is the data uh which this user has created only difference is that nothing else okay so all the code is same use location over here and this is the function then uh we will create some states starting with our post so let's say go post and let's also say set post post like this and we will make use of our U State over here uh at the starting we will initialize this as a empty array then we will have no results if the user has not created any po then we have no results just like we did for our homepage and uh in the use state initially it will be false and we also create set result set results set no results let's say results like this then similarly we have our constant loader and uh loader comma set loader why this is giving me all the wrong suggestions okay something useful false then um we will get the user data from our context so let's say use context context and then we will have user context inside this user context like this all right so let's start by fetching the post data okay so let's create one function as fetch post post is equal to a sync operation a sync operation and uh over here let's uh get our set loader like this and let's keep this set loader as true initially then we will uh wrap everything inside a dryan cache block catch over here there will be error inside this let's also cons DOT log error now uh inside my tri block uh I'll response we will get the response as uh await exos exos do get because we're getting the data right we are not updating or putting any data over here starting with our url url plus / AI I slash post post SL user user slash and we will add a user ID over here why we are adding the user ID because we want the data from that particular user only okay then we will set the post so let's say set post as response. data and uh let's also you know if the response is empty in that case what we will do we will set uh no results as true okay so let's say response do data and how we will check whether it is empty or not so let's say length we have inbuilt function as length in J uh JS triple equal to0 in that case what we will do we will set no results as true uh we will set this as true okay and uh over here else what we will do we will set no results as false fine and uh we will also have to set our loader as false at the end of this set loader as false okay now let's also put this particular data outside this uh catch block and inside my if I get any error in that case also I have to set loader as true okay now what we will do until and unless we're getting this particular error our loader will show over there now let's also uh make use of our use effect hook and get all the post data uh okay over here we will fetch fetch post function and uh over here I'm passing my search so over here on you know my blogs as well will be able to search now over here uh we are creating our UI now okay so first of all I'm uh rendering my Navar over here then I'm creating a div and in this particular div only we will have our data okay so let's make our PX as8 then MD colum PX as 200 pixel then I'll also have my Min height so this is for my smaller screen okay so minimum height will be 80 VH so from 80 VH there will be uh no less height okay so minimum height will be atph now let's also check whether the loader is loading or not so let's say loader in case my loader is true in that case what I'll do I'll render my loader right so over here I'm creating one t dot okay inside this first let's give some um height so let's say 40 V over here then let's also make this as Flex let's make this display as Flex then justify Center then item Center all right and between this I'll be uh rendering my loader like this now uh after that what we will do outside this particular uh div in case my loader is not loading and no results is also false no result is false that means uh I have to map everything right so let's say no results question mark in that case what I'll do I'll map my post so how I will map the post so let's say post do map and inside this I'll have the post and uh also we will have our okay uh let me just directly return this okay okay over here uh let's also take one empty div and inside this particular div I'll have my link so link to what link to that particular post right to is equal to user question mark now again we are uh you know conditionally rendering this because uh this is going to change according to that particular post okay so post slost slash dollar and inside this we will have post. ID and uh then we will also uh render the login so let's say SL login why slash login because inside the login only we have uh this particular part okay and I'm removing this part over here from here and we will have the link tag like this and now between this particular link tag I'll have my home post okay home post and uh in this particular home post we will pass my key as a [Music] post doore ID and also post as post so let's also pass post over here like this now after this particular link tag uh what is the issue over here home post okay change the spelling to home post fine now uh after this particular link tag uh over here in case uh my loader is not you know my data is not there in that case what I'll do I'll just uh render there are no post available so let's also do that over here I'm mentioning some class name so let's say class name starting with text Center font bold font bold mt6 and uh between this particular H3 tag I'll write no post post available available and at the end I'll also render my footer like this now let's check the output so if I'll just move to my uh homepage uh let's move over here and if I'll just log into this particular page let's say testate gmail.com and also password 1 2 3 4 5 6 and if I'll just log in over here and uh if I'll just click on okay and then if I'll just click on my post or you can say my blogs over here uh this is showing no post available why there has to be one single post available over there right so let's just check that is equal to not true over here uh there is some issue okay slash login okay over here uh it will be underscore okay so now if I'll just go and check over here uh if I'll just move to log of Spear and if I'll just move back to my blocks okay it's still showing no post available why why why okay because uh we were not supposed to write this over here okay over here it will be uh underscore user ID okay now let's move back and you can see uh we are getting this particular post but uh I guess the there is some issue with the width so uh we will fix this UI okay uh so let's move ahead and fix that particular UI so over here uh we have our minimum height is 90 VH I'm removing this particular part now okay uh there is some issue with the withd all right so let's just uh keep this as it is and U when we are uh rendering this particular home post uh let's check whether we have uh some specific data uh we have to pass over there so over here we have height is equal to 40 VH we also have to pass the width for every particular uh div over here so let's also mention some class name over here making my width is equal to you know uh let's make it as 30bh let's check this okay let's make it 40bh all right so you can see uh let's also give some margin top over here so let's say mt5 okay I guess this is looking perfect uh we have one blog only so it is showing one blog over here okay so I guess uh we have completed with our blog website and our blog website is looking very amazing we have seen how to create this particular functionalities every uh person uh functionalities of this particular website we have build it from the scratch I know the UI is not that attractive for this particular website but uh we have uh mainly focused on writing our backend how to create rest API how to get the data how to update data and everything from this particular uh project so I hope you guys have enjoyed this particular project and I'll see you guys with another monack project in next video till then keep creating this amazing projects and uh if you were creating this particular project alongside with me deploy this on GitHub and do share that particular link on comment section I'll be happy to uh look at your projects and if you made any changes in the UI as well so also please uh put that particular link uh in comment section till then T bye-bye just a quick info guys intellipath offers a fulltech developer course which enable you to learn textech from both front end and backend through this course you will gain hands-on experience with the skills and Technologies such as SQL Java data structure JavaScript HTML CSS nodejs and react under the guidance of industrial professionals with this course we have already helped thousands of professional in successful career transition you can check out the testimonial on our Achievers Channel whose link is given in the description below without a doubt this course can set your careers to New Height so visit the course page link given in the description and take the first step towards the career growth with the fullstack developer course

Channel: Intellipaat

Views: 7,352

Keywords: How To Create A Profile Page Using ReactJS, Blog Application, Blog MERN, Profile Page Using React JS, Profile Page React, Profile Page Design For Project, Profile Page Design, MERN Project Tutorial, MERN Blog Project Tutorial, MERN Project For Resume, MERN Stack Project Tutorial, MERN Stack Blog Project, MERN Stack Blog App, MERN Tutorial, MERN Stack App, Blog App, Javascript, Fullstack Javascript, Node, Express, React, MongoDB, Intellipaat

Id: 5268ugI9DLA

Length: 95min 35sec (5735 seconds)

Published: Sat Apr 06 2024