Ionic Angular 12 Chat UI - LinkedIn Clone [27]

welcome back to the linkedin clone in this video we'll be working on the user interface for our chat for our websocket connection between the server and the client between nest and angular now before we work on the ui we're going to have to make an api call build one that returns all of the friends for the logged in user so we'll just go ahead and create that and then we'll go style all this ui here ready for the next video where we're going to have the ability to create rooms and do some chat so just to see what we're doing in this one here we're logged in as user 2 here we can see we've got the image here and we can go ahead and chat now right now this is just one room although it looks like we're in a particular room so we're going to come back and add the logic after we've styled this of course you can go to the github repo and copy the styling but we're going to be adding that api endpoint and we're also going to be fixing two ui bugs right into this image here not working and also when you log in as a different type say like an admin user and you log out and log in as a regular user or premium user there was a slight ui glitch there so we're just going to patch that up a little so let's go ahead and get started so i'm just going to go and cd into the api folder because we're just going to start there and then i'm going to navigate into the source folder into auth and into the services and i'm going to go to the user service and this is where we're able to extend our logic here and we're going to have a function called get friends and it's just going to take the current user and remember that's coming from the jwt that's attached with the request and we've got an auth guard there so that's going to be of the type user and what we're expecting back there is a list or an array of users and if we just take a look at the database here we can see that we've got a bunch of users here john and john 2 will be the ones i'll be using and that's a user and admin we'll see that later on but more importantly we have this conversation and conversation users user table so let's just go ahead and look at the rows here for the conversation so i've just gone and generated a couple of conversations just ahead of time and then i'm going to work on this in the next video but i just needed some data here if you want you could just hard code this here and i've also got this conversations user and you could go ahead and just hard code this as well if you want but we're not actually going to be using this part here what i was more interested in and we'll get back to this in the next video but what i was trying to show for the relevance of this video is this request table rather than the conversation table so we can see that we've got some requests here so right now we're logged in as user two and if we have a look we look at the user table we'll see that we've got this id here of four and let's have a look at our accepted request here now we see we got one from five but this has been declined but we've got one from user one and one from user six and they've both been accepted and this would if user four created something and then someone else accepted would also want to be able to show the list of users in that sort of that meet those requirements so let's just take a look at the ui here we see that we've got jumper pink here he's user one and john four which i believe is actually this user six here so let's just go ahead and create this out so in visual studio code we've got this get friends function being created here now what we want to start by doing is we want to access the friends repository relating to that friends table here and we basically want to if either the creator or the receiver id is the user id that's logged in we want to end this is also accepted we want to get that row and then we want to return the corresponding uh data for those lists of users excluding the logged in user so then we're able to display all of their connections the accepted friends here and then later on we're going to go ahead and create a room so let's just go ahead and start there now we're going to use the friend request repository so we can just say return and then we can use the from um to convert from the promise that the friends request repository will give us into an observable and then we'll be able to intercept that observable and pipe into it and then switch it and get back our other table based on those bespoke requirements so what we can do here what we want to do is basically we've got two cases here either the creator is going to be the current user and also the status is also accepted or we're going to have the case where the receiver is the current user and the status is accepted again if we look at the friend request table the id of the creator or and the status has to be accepted or the receiver id and the status of accepted they both have to be valid and true and then we'll be able to get our list there and there's not going to be any doubling up because only one person can create and one person will receive so there's not going to be a doubling up on that end of things but we will need to just ignore the current user so basically that's all we really need and we just need one more thing here and that's because the creator and the receiver they're related to the you know that's just related to the user table based on the id so we can see here you know for the creator the id 5 here this relates to john 3 here and then you know there's more details on here so what we could do here we can just say there's a relationship and there's a relationship for the creator and then also the receiver i'm just going to go ahead and copy that in there so from this observable here we can just go ahead and we can just pipe into it and then we can use the switch map operator and we know this is coming from the friend request repository so we're going to get the friend request row so and actually going to get multiple rows because it's going to find not just one record but all of those that meet the criteria so we're just going to go ahead and use this type here the friend request type here which maps to that table we just saw so have a look there id create a receiver status and then because that refers to the user object and that's another table we just have those relations relating to that table for the create and receiver so what we can do here is essentially what we want to do is we want to have a variable called let user ids and it's going to be a number array and we can just go ahead and initialize it to an empty array and essentially what we can do is for each of the friends that we get back so each row in this table here we can just go ahead and we can just use a for each to loop through each of those records and for each friend which is just going to be of the friend request type here we can just go ahead and have a some logic here so let's just tab over here so if it's the case where the friend and the friend has a creator id and that's why we need the relation here because even though the creator refers to the id in the table it's referring to the uh you know the foreign key it's a foreign key and that needs that join there so if that creator id if that's equal to the current user id and the current user id this is just going to come from the controller it's going to be attached with the request so we can actually go ahead and open that up too and let's see here users controller let's just scroll down to the bottom let's just copy this here and we're going to want to use a jwt guard so you won't be able to obviously chat or access that area unless you made it through the jwt guard and that means you'll have your json web token and that means from the json web token there's a user attached to the request so let's just go ahead and change this to friends my to get you know get all the friends and this request object here that's what we're going to use and we're going to return a user array and we can just say get friends and pass in that request object there and then just here that's the current user from the request object so if that current user if the id is equal to the you know this creator id here that means they were the ones to create the room so we only want to have the number in the receiver id because we ignore their id because we don't need to retrieve in when retrieving the friends so let's go back there and do that so if it's that case there let's just open our code block here we can say the user ids that we're looking to fetch we can just go ahead and push the friend dot receiver dot id now hopefully that's clear and we're going to use the similar sort of logic there in an else if and you could do an else but i want to make this more explicit and if the friend id actually else probably wouldn't hold in that case but you could make it work if you tweaked it a little but anyway we're not doing that if the friend receiver id is equal the current user id well in that scenario that means the receive id here that means we didn't create it but we received the friend request and then that means rather than having this receiving id we want the creator id because i'll be uh the person that isn't logged in and that'll be the id we can use to request the ids for when we're getting all our friends for all the rooms we'll create so we can do a similar sort of thing here where we can just push on this creator id here so that's that part there now what we can do is we can just go ahead and we can turn and then we can use the other repository that we've previously injected the user repository because we're in this switch map we can return another observable and we can just say find by ids user ids go ahead and we can save that so let's see what's wrong with this i think there should be one more bracket here which means this one here isn't needed let's go ahead and save that what's wrong another bracket issue okay so i just added this semicolon here and deleted the comma so let's go ahead and just save that there let's run the npm run start dev so we've got this end point here it's going to require a token so we're going to need to log in when the server starts and then we're going to need to copy that token here so let's do that let's just get a log in here copy the token go to postman and then just go to the slash user slash friend slash my endpoint go to authorization here and click send and we can see that we get the two users here so the id of four the id of five so who am i logged in as i'm logged in as user one so join homeowner.com let's look over here has the id of one and he's friends with users four and five because we got those back there so let's just confirm that that's working okay by looking at the friend request table so we can see in the first row that user five or the user with id of five sent a request to us and also the user with six sent a request to us but that one was declined and also we created one to the user of four so we both we get the five and the four and they're the exact users that we want and then we're going to display the information we're going to access that endpoint in our front end and then start to build up our ui for our chat rooms so let's go ahead and work on that now so the very first thing we want to do is we just want to open up a new terminal here i'm going to cd into the linkedin folder we're going to navigate to where the um chat is which is nested in home here and there's components here in this chat folder here so let's just go ahead and open that up i'm going to be doing a bit of styling here so i'll just open up all those files and then i'll also open up the corresponding chat service so let's get that there so in the chat service this is where we interface between our api that's running and our client so we can get the information that we desire and we can just have a function here called get friends and like the other functions it's going to return an observable and we're expecting a user array back and we can just go ahead and we can use the http client by using this http uh actually we don't have that so we're going to need to inject that into our constructor here we can just get the http client from angular common core angular common http and what we want to do here is we just want a simple get method here and it's going to return a user array type now it is type inference does sort of imply that and we wouldn't need to return this statement here um but i just like it for readability purposes so i'm just going to go ahead and put that there import that let's put a little space here and what we want to do is we can use the backticks here and we actually have set up already our environment variables so recall that we can access that uh we can use this template literal here and we can access environment variables by bringing environment now i'm just getting the local environment not production but if you're doing production you'll need those production variables there we're not going to worry about that it's the same in this case anyway and we just access the base api url which is you know localhost 3000 api and then we go into the endpoint that we just created slash user slash friends slash my so that's what we'll use here now we can go ahead and we can close that up you can also close the controller and that service there from the back end and now we can come into our chat component here and this is where we can start to use it so let's see here let's just go ahead and do it in the ng on init here now i have been a little lazy [Music] with unsubscribing to observables and we have seen how we can handle that pattern elsewhere in application so as an exercise i'll leave that to you but one thing to note is the life cycle methods in ionic slightly differ to angular so you have to check the documentation to see which ones are appropriate so i'm just going to go ahead and just access the chat service here get friends subscribe get the friends which is a bunch of users and this is a method here this get friends method we just created okay now this engine knit i'm just going to remove this return here and i'll leave this here this refactor to unsubscribe and this chat service get friends subscribe get the friends we're going to need the user model or interface and then we can just go ahead and we can just set this dot friends equal to friends now we're going to have to create that there so let's just say friends is a user array and we'll just initialize that to an empty array and we'll just leave that like that there and let's just sort of um you know log things here so let's just do a console log here friends and then we'll just run an ionic serve just to make sure everything's working okay and we can see where we're up to with things [Music] so this is the current state of things i'm logged in as user 2 here and there's a little bit of an issue with the data updating so this image if you just reload this page here that will address that if there's an image already on and then also some of these names and stuff like that uh having issues updating um when i've brought in this new if when you reload the header in this uh view so let's say you're logged in then you go straight to this page here uh you get just a slightly unusual behavior let's just see the check yeah remember this is an actual room so if you're logged in as another user and you go to this endpoint these will be admitted to the page but what our main goal here is is just to see that we've got this user here so yeah we've got these two users here that's great they're the two accounts that we'd want to see so i'm going to start off by building out the ui and then we're just going to fix some of the bugs relating to the subscriptions in rxjs uh that are throughout this application um not we're not going to implement the pattern everywhere but we will see a pattern and if you want you can implement that throughout the project it's really good practice to do that you really should be doing it i just wanted to focus on all of the different types of features and rather than you know do something repetitive and boring so we're nearing the end of this um linkedin clone and let's just start to get the ui going so we can get our chat room going and if there's anything else any other cool projects you want me to build let me know happy to have a gold it um so let's yeah let's just build out the ui so let's just come here you see that we've got the friends that's working okay you can go ahead and delete that so let's start to work on this ui here so all right so we've got this margin top of 110 pixels we've got these messages here we've got this form here i'm just going to go ahead and just comment this out i'm going to refer to it i'll just comment it out so i think what i'll do here is i'll just have an iron card and i'm going to give it a class of container and then nested within there i'm going to have a div with a class called select connection and then within there i'm going to have a d and i think you can do it this way as well just a dot top panel and then within there actually i'll just build that out there so we've got a container so the idea is we've got the two columns we've got the one on the left where you can click all the users and then you've got the one on the right where we have the chat so this container is going to be containing everything and then we have this select connection here which is going to be the left hand side and then we're going to have another div here which is going to be it's going to have a class of chat here and this will also have a top panel the top panel is just a little bit at the top there it's about i don't know 50 pixels or something like that just to separate and give the name to the page sort of thing but we'll come back to this right hand side i want to build out this part here so right at the top in the top panel we're just going to have a heading and the heading is just going to be we're going to have a div with a class board container and then nest in there we're going to have an iron text element and i'll just build that and then it's going to have a color here of dark that's just going to say messaging here um so you can refer to the beginning of the video to see what we're building and these should start to make sense once i start to save a few of these files here so and of course you could copy this from the github repo as well but if you're interested in how i build it out you can just watch this video so after this iron text here after that div there we're going to have another div and we're going to have an iron button and we're just going to say give it a shape of that needs to be inside the element give it a shape of round a color of dark and a fill of clear and then i'm going to put an iron icon in here and i looked at the iron icons in the documentation there and there's one called ellipsis horizontal outline let's just go ahead and save that see we're up to okay so we need to have that margin on the top again so let's get that there and if we just switch over to our css we go to our container class which is containing everything now the height i'm gonna do a calculation here because i want it to be a hundred percent of the page but i want it to be not having the footer there so other header so just underneath the header it's about 110 pixels then there might be a bit of space there i set the width of this thing to 800 pixels now these ion elements that have a bit of box shadow on them so i'm just going to set this here to none the border elsewhere we've done one pixel solid um e1 e1 e1 the light gray there we say a margin of auto they'll just center things and we'll give it a margin top of 110 pixels and we'll just have a display of flex here so things are displayed flexible so we can see we've got this nice box here we've got this button here now we want to split this page into two and then have this top part here and this needs to be in the row so let's just work on that a little and i'm also just going to add in this media query while we're here because it's not going to be 800 on you know mobiles that are only you know 300 400 500 pixels wide or so so i'm just going to set this max width of 800 pixels here and the width is just going to be 100 in these circumstances i'm going to go crazy into the responsiveness or anything like that again i'll leave that as an exercise to the viewer but i just want it to not look completely terrible so then we have this select connection which is going to be the left hand side so let's just go ahead and nest in a select connection into our scss here now select connection is going to loop through our um all the friends we get back and we could have a lot and it will go off the page so in those circumstances we'll have this overflow of y to scroll let's just set the width of this left hand side to 40 percent and we'll give it a border right of the same thing here and then for the um we've got two top panels so i'm not going to do that nested within we will have actually let's just work on the top panel a little bit so again this is going to be outside of oh it's going to be outside of here so i can reuse the code and the first thing we notice is we want it to be in a row so not in this stacked column sort of format so the easiest way to do that is just to make it display flex and we can just go ahead and justify the content to space between so it will hug the left and right of its container because we're going to have the two nested divs within there and then we're gonna have the align items to center now inside the top panel we're gonna have this heading here and this heading it's going to have a padding of 16 pixels a font size of 18 pixels and we'll give it a font weight of 500 just to make it a little thicker and i think we'll just also have a border bottom of this same thing here so let's save that and see where we're up to all right we can see that we've got this left-hand side here now we're going to need another icon here so let's put one in there and then we'll start to work on the looping of the friends so if we return to our template here we can duplicate this iron button here and we can just say this second button here there's an icon called create outline and i'm just going to give the first one i'm just going to do an inline style and i'm just going to say margin right negative 30 pixels and i'll just bring them a little closer together because by default they're quite far apart so we see we've got this nice looking buttons here that aren't too too far apart so let's do the looping and we'll do that let's see here i think so this div here is the top panel then underneath the top panel that's where we want to have the friends so let's give this a class of friend and this is where we're going to have our ng4 and we're going to let friend of friends so recall in the typescript here friends is the friends we've set so we can loop through those and i'm just going to use an iron grid here and the reason i'm doing that is so i can have the rows and i can align the avatar image and stuff like that so i've sort of seen this before but in the iron grid i'm going to have an iron row and in the iron row i'm going to have two iron columns so let's get those oh it's actually on coal mine coal so on road we want to have a class here of iron align items center that's the vertical centering and then iron justify content center and you may choose to um organize your css in a more consistent fashion uh i'm just sort of just trying to get something up so you can use the iron classes you can use css you can use the flexbox um whatever you feel like doing so in the first iron coal i'm just going to have this tag here it's just going to be size equals to auto and in here i'm going to have an iron avatar and that will allow me to have a containing iron image so the iron image this will basically we can have two situations here um and i've done this in the ternary approach in other approaches throughout this i might try the if else sort of approach so if i have ng if so if the friend if um you know if they have an image path what we'll do is we'll display this code block so we'll basically just be this iron image with the source attribute and then that's just going to be equal to the and i can just copy this path from postman http such api now obviously if you're doing this really don't want to hard code your links in here like this you're pretty you know environment variables i think we even done that but i'm just going to keep it like this because it makes it really clear and then there's this end point here feed such image slash and then we this is where we can just plus on something so we're actually going to make this a string so then we can just press on the friend dot image path but if that isn't true we can just do this else and then refer it to a template and that's just going to be the blank profile picture template so i'm just going to go ahead and copy this and right after this iron in image here i'm going to have an ng template you could put this wherever you want and it's just going to have the tag here blank profile picture so it's able to reference this in that particular case and then i'm just going to go ahead and copy this iron image tag again and rather than have this part here let's see we will just say slash image slash and there's that one default image the blank profile picture png so we can just go ahead and get that and then in this next iron coal here we can have an iron card title and this is just going to be the friend that we got first name space last name and we don't actually have this information in the object but you might have this uh for real if you're adding everything in so i'm just gonna hard code the position here to full stack developer so everyone's gonna be full stack developers today so let's just go ahead and save that taking a little while reload okay so we've got some sort of internal error going on here and it's because the friend is unable to get the access but there's also this maximum core stack retrieved in the if else so let me just have a look at that so i've just gone ahead and logged in as user one it was an error because um i deleted some images from the server at this point too but then the big error was just maximum core stack was just um you know i was just missing it's just the formatting of this basically just take a look at that and match it up it's almost identical so yeah we've got that there now we just need to you know get a little bit of a line here or something like that and a hover state so let's get that going so let's see here the select connection it now has the friend class and we'll give that the border bottom of the one pixel solid light gray and in its hover state i'm just going to have a background color here and it's also going to be this and again you could have you know global variables and all that sort of stuff if you want i also give it a cursor of pointer so let's just save that have a quick look at where we're at to we've got our top panel here all right so this is looking nice we've got the nice hover state here so let's begin to work on the right hand side of the card so as we can see here we've got this select connection here and then we've got this chat section here so we'll have that same top panel sort of thing and then we'll have our so let's actually go ahead and just copy that top panel so i'm just gonna go ahead and copy this in here of course you could put this in its own template if you want to again i'm just going to do it this way so in the top panel rather than have the heading we're going to have a class that says friend name and roll because it's gonna be two rows instead of the one so it's just gonna have a slightly different styling and here where we've got this iron text here i might just give the first one a style here to make the name a little more prominent give it a font weight of 500 and this is just going to be whoever we clicked on and we're going to come back to this right now we're just going to hard code it to name last name or maybe oh it doesn't really matter first first name last name geez first name last name and then iron text will have this will also be hard coded because we don't actually have value but we'll use this school state developer to get their role so then we've got this div here and a div here iron button right now we're going to have this same icon here for the first one but the second one we're going to just use the video cam and then that's the end of the iron button and the end of the div end of the div and we're going to have an iron grid here it's going to have a class of chat messages this is where our chat messages are going to be and we've got the iron grid so we can use the iron row and this is where we want the logic that gets our messages so ng4 message of messages you can put that on there and we can also give it a class of those ion ionic classes we saw before let's just go ahead and get this here so iron align item center will vertically center then iron justify content center we'll do it horizontally and then we can have an iron coal once again we'll just give it actually we can sort of copy this from just above and that may be an indication that we should be using some templates here but i'm just going to go ahead and get this iron avatar here i'm just going to copy this in to this iron coal and rather than having this ng template thing and this else thing here i'm basically just going to work on this logic here so let's see what we have here we're going to need the image [Music] so i'm just going to leave this blank just for the moment being but we will um i think this was it blank profile picture oh dot png let's copy that there i'll get that blank profile picture and i'm just going to put a to-do here get image and we will come back to this in this video so that's the first iron coal and then the second iron coal will be nothing more than our message and we don't have any messages because we haven't seen any and we need to fix up this bit at the top here so we can actually just below this iron grid here this is where we can have our form and we sort of started this before i'm just going to copy this in here and i can delete the comment here so the form is going to have an iron item with an iron and we might change this to a text area so it's more space there text area all this is the same but we can just give it a placeholder now write a message then we have the iron button i might actually add some more icons here so i'm just going to have an iron grid with an iron row and it's going to have the iron line items center and also the iron justify content between classes in this iron row you want to have two spans the first one is going to contain four icons so i can copy this iron button with the iron icon thing in it so the first one let's have a look here i'm also going to have on the iron button this style of margin right of negative 20 pixels just because you get a lot of space in these rounded uh icons here and the first one we're going to have here is the image outline so we're going to copy this down four times or three more times i'm going to remove the margin right on the last one and then i'm just going to go ahead and change the name of the icons so this one can be document outline film outline and happy outline so let's get those and then in this second span here we're going to have some more icons here now we've got this iron button we've already created this so let's just get that one in there now we're just going to hard code the width here to 55 pixels and we're just going to take this block off and we're just going to send it i have the message send here now i'm just going to have one more of these iron buttons below this iron button within this span here and this one here is just going to be ellipsis horizontal outline and let's just go ahead and save that i think that's most of the template we need all right so things are looking good and if we say hi get high and we get this blank profile we'll put in the actual profile although this is going to change again in the next video when we get the particular user that talks back to our sort of thing i think we're missing an icon here i'm just going to check that i spelt that okay and i think it's ellipsis with an eye there so yep got everything we need in terms of the html so let's just go ahead and style this let's go to our template and in this container we're going to have the chat now we made the width 40 so let's make this width here 60 so it adds up to 100 we're going to position this relative and we're making it relative so we can absolutely position the chat to the bottom and then we cut the chat messages we're going to have overflow of y set to scroll we're going to have the height and again we're going to do another one these calculations so it's going to be 100 of its container we're just going to subtract off 260 pixels because we're going to have around that for the where we sending the message and the button down below and then we can just make it look a little nicer with the border bottom of this one pixel solid light gray so those are the chat messages so the chat's the whole right container the chat messages is the messages part and then also we're going to have the form which is where we're able to write the new message and submit it now this width here that's just going to be a hundred percent give the height of 200 pixels position it absolutely [Music] right at the bottom there and we've got this iron text area and we're just going to give this a height 110 pixels and just on this friend let's see if we can find it brand name roll so in chat at the top panel we have the friend name roll uh rather than heading we're just going to need to have the friend name roll it's also going to have padding that's going to have a little less padding because there's going to be two rows [Music] and to make it have the two rows i'm just going to display and have the flex direction as a column so now we can see things are lined up really nicely let's just test that the chat works and the vertical scrolling of that row works so i'm just going to type in a few things here now we can see that you know we can scroll down and our chat message box is still there so that's awesome we've done all the styling now we just need to get in the correct data that we're after so let's go ahead and do that so we're going to need the user image and for that we're going to need the auth service so if we just get that in so all service bring that in and let's just take a look at it for a sec remember what we're dealing with here so we're going to need information about the user so a logged in user and the user has various things like the role and the id and the full name and the image path and all that sort of stuff and this is what we're interested in for our users getting the user full image path now obviously if you're logged in on another account it's going to you know show you your image instead of their image sort of thing if they sent it but we're going to need this data anyway and then we're going to when we create the rooms and all of that and the messaging we'll uh tee that out but we will go ahead and use this and just to recall we have this user variable and it will either display the profile the blank profile image if there's no if they don't have an image or it will actually go ahead and set the full image path there and the full image path is like including the local host part not just the name of the file so now that we've got that let's um let's just go ahead and create a variable here so right at the top here i'm going to have user full image path it's going to be a string and then i'm just going to have this private variable here because we don't need it in the template it's going to be the user image path subscription and it's going to be of the type subscription and what we can do here is in our ng on a knit we can go ahead and this is another candidate for when you want to do some refactoring and stuff for that but in angular the regular angular way you'd go user image path subscription and then you just call that all service and then you'll get the user full image path and it's a get getter so you don't need the parentheses and then you can just go ahead and subscribe to that and you can just get the full image path which is a string and then you can just go ahead and set the user um this user full image path equals the full image path that you get back from over there and then the pattern is to unsubscribe um in the constructor i'm not in the constructor the ng on destroy so you could do something like this although in saying all this in ionic they have uh different um you know life cycle methods so something like this you just have to check you know i i've also used the um take one throughout so you just do unsubscribe but what i've been doing is rather than doing this sort of approach this works in angular but rather than doing this approach here i've been doing the um this is ng on destroy the take one approach so let's just take a look at this method here um so this particular one's more of a getter but you can see in some of these other ones where we're taking one sometimes this causes an error if you're doing some logging in and logging out and we will address that quite shortly but now that we have the use a full image what i'm able to do is i'm able to go back to the component and we had a little to do somewhere and then basically we can just change that here to the user full image path and that's only in the case that we have it but we should have it because otherwise would just be the default image so let's get that so now i'm logged in you see hey and notice how it's not having an image and same with the bar at the top here but if i let's see if i go home and then come back to messaging and then i say hey ah things are working now we can see things are working so we want to obviously fix that so let's do that and what i've done previously probably wasn't the best approach but we can see now and learn from it that i in the post service which gets used on the home page that's where i was setting it but the post service isn't used in this messaging tab so if you just refresh the page here you won't actually do that and it's quite simple to fix really all you need to do is just cut this little bit of code here out from the post service and then you just open up the um the header component because the header component is going to be on all the pages so we can just do it there it's only not in the login section but that's okay so let's just go ahead and go to the ng on init and then at the top here you can say and you just need to get these going so we're getting the user image name otherwise we'll return the blank profile png and then we're just subscribing to that so you can save that and now when we reload this page here we see that we get this displayed here uh i just want to go back to the template because this was supposed to be sort of next to it um so i don't know if something happened there or not so iron coal maybe i don't want that hmm so i'll just slightly tweak the styling here and now when you send your messages it's left aligned so we can return back to the [Music] um so we fix that bug so let's go and fix the other bug so i haven't actually shown you this other bug yet i don't think but let's say i sign in as john hotmail.com [Music] now we're getting this state where again this blank profile image here if i reload it then it shows you the image and also we've got this banner here this blue banner and that's relating if you look at the database if you look at the user we see the user type then if we log in as an admin for example we see it's still blue and we also see that the state here hasn't changed properly now this was working at some stage and we can see here it's here the john 2 and the john 2's here um but because we've made some adjustments we're going to need to refactor that back so it's working again so what we can do is we can come to the the first thing is there was actually a logical error in the banner service so let's take the example that you were a user and you log in so you're not an admin and you're not premium so by default it's going to take this banner colors which were set to the default colors but let's say you were an admin user then the banner colors is going to be updated to the admin colors and then you sign out but it's still going to have that in state so that means you know if you log in as a regular user you're going to get the wrong banner colors so basically we actually have to have this next state this next case here in the case they're a user and then we can just have these banner colors here so that's the first thing and then we have to go ahead and propagate the changes in our profile summary component we can close that but let's open our profile summary component and this is what we've got so far so we've got this uh image path subscription set to the full image path so let's just go ahead and just cut that and bring it to the top of the engion and here and we can see but the in the ng on destroy but i've talked about this before um and then we've got the user role and that's where we're setting the banner colors to the banner colors but here we can see that where using this take one and same with the user full name have this take one here so i'm actually going to use this logic i'm just going to take a slightly different approach here and i'm just going to create a user subscription so we have a user subscription and then i'm just going to have something here it says this dot user subscription and then of course i need to unsubscribe to that so we'll do that in a similar way the angular way so basically what i want to do here is set this to this auth service and i've actually got the user stream which is going to have multiple properties on it so rather than do this multiple times i can just say subscribe to the user stream so we're going to get the user so we're going to need that and if we have a user and they have a role this is where we can implement this logic here because another thing that could be going on and this is user role and i'll be defined is let's say you sign out right well the user is going to be null in that case so there's going to be no role there but it will be in the previous default state so that's where we're getting issues from logging out and logging back in so that handles that and then also we can say actually after this if we could have another if so if there is a user and there's a user first name and a user last name we can set this dot full name so recall we've got the full name and the full name uh behavior subject here which will propagate throughout the application when we call the next one we can set this equal to the user first name plus an empty string plus the user.lastname and then we can call this dot full name dot next and then we can say this equal to this dot full name and if we just return to our auth service we have the get user full image path and we also got this get user full name so basically in the scenario that there is no user defined or you signed out you just want to return an empty restaurant turn mal and then i'll fail the null check otherwise we just go ahead and do exactly that there and on the user id the user role in the switch map here we can just say if you know you have a user and they have a role and this is basically i'll just leave a note here for after signed out i still subscribe and i'll just add one more thing now people aren't going to be signing in and out all the time you know they might have like when you use linkedin you're ideally going to be logged in once and not sign out but let's say you did have multiple profiles uh it's not that big of a deal if you just sort of refresh the page when you log out you barely even notice it and it'll just go ahead and help reset the state of things so when you sign out you can just go ahead and this is built in dot reload so let's go ahead and save that see where we're up to with things all right so i'm going to sign out here i'm going to sign in as user one we see we got this you know it loads all the images nicely if we go to messages it has the image there hey reload go back home refresh everything works and we've got this blue banner here and now if we sign out and i sign in as john 2 at hotmail.com we see now that we've got this admin view with the gold uh banner there we've got john two john 2 we've got the image here go to messages say hey go home go back refresh on the connections page say hello so we see that everything's working nicely so i hope you enjoyed that video most of the work was in building the front end with the ui here but we've also fixed some of the logical errors with some of the subscriptions and rxjs things now i will note that ionic it has different life cycle methods and you might have to take a slightly different approach we took more of an angular approach and that's more because i'm interested in the logic of building out this chat so in the next episode or the next video we're going to go ahead and we're going to create the ability to join a room and also we're going to store the messages to a database and we're going to have the ability to chat between two users not just on this one server but in individual rooms um between each other so they need to fetch their old posts and then also append new ones and it'll be like a real-time chat sort of thing so this is sort of the foundations for that um if you're at all uncomfortable with any of the code we have covered all of the core concepts throughout this video series so if you want to refactor things maybe you want to make some templates or architect things a little differently or use some more ionic approach with the observables and whatnot please feel free to do that you can always send me a pull request if it's bothering you or anything like that uh but i really want to just wrap up on this project so i just want to finish out this chat functionality um but yeah please comment down below if there's something you need to see relating to this because uh that's going to be more or less i think the next video will be the finale in the series so if you really enjoyed the video and you've been watching so far please subscribe to my youtube channel and please feel free to recommend any you know future videos or projects or technologies you want to cover or anything like that so thanks very much for watching i'll see you in the next video cheers

Channel: Jon Peppinck

Views: 35

Rating: 5 out of 5

Keywords: ionic, ionic angular, angular, ionic chat, ionic 3, ionic chat app, chat, ionic 5 chat ui, ionic 5 chat app ui, ionic 5, ionic 5 ui from scratch, ionic 4 angular, ionic 5 angular, ionic 5 ui tutorial, angular chat app, ionic 5 travel app ui, ionic tutorial, ionic 5 ui design, ionic 4 chat, ionic 3 chat, ionic 3 angular 4 chat, firebase ionic angular chat, ionic 4, chat app ionic 5, ionic 5 chat app, ionic 3 chat app, chat app, ionic guide, ionic 5 tutorial

Id: l6EKr4RqGY8

Length: 80min 5sec (4805 seconds)

Published: Sun Oct 03 2021