Ionic 5 Angular Friend Request System for Social Networking - Add Connections | LinkedIn Clone [17]

welcome back to the linkedin clone in this video we'll be working on the friend request system on the front end so in the previous video we've set up the tables so i've created five users here the first with the angular image and was also got our table for our friend request so if we go and go to user two as we're logged in as user one and we look at his profile we see that they got a profile page and it navigates to the id home slash the id of that user and there's also the ability to connect so you can send a friend request to this user and if you click connect here it grays out the connect button and if you take a look at the postgres database and you refresh the table we see that the id of one created the friend request to the id of two and the current status is that it's pending hence why it's greyed out here and of course if i was to go back and go back to this user two it's still in that nice state there and of course i could go to user 3 and send a connection to user 3 and if i were to log out and then sign in as user 3 for instance we can see that if we were to take a look at user one's profile we get this grayed out option here saying to accept requests now in the next video we're going to set it up so that the navigation bar will have a popover component and then we're able to handle the um handle the request that we got but this is all about setting up the infrastructure to create the request to accept the request here and also if i was to go to say user 5 here i could go ahead and connect to him and then we should see the changes propagate to our database here so we see that we've got the first user added the third user and the third user has added the fifth user so let's go ahead and get started and we're going to need to make a small change to the back end because in our application there is the ability if if for example in this database here we can see that if you're logged in as user three and you're looking at user one profile as we did before you get that waiting for approval message so i just need to tweak the back end to allow for that so let's go ahead and open it up and i'm gonna go ahead and drop the tables because this was um from a previous um the demonstration and it has slightly different table names for my case i'm just going to go ahead and drop these for um my case there will be auto created anyway when you start the application but i just don't want any conflicts in names to occur so basically what i want to do is i want to go to my api and in the source file in the folder there for auth we see that we have the auth module here and then we have this user controller here and this user controller we have the ability to see the status of the request in the get friend request status function here so if i go ahead and press f12 here i'll navigate to the get friend request status method so what i want to do here is i just want to tweak this slightly so basically we're going to have a receiver id and the current user so if you make a current if you make a friend request to somebody you need the id which is going to be taken from the angular route and the current users attached to the request through the jwt so what we're doing here is we're just finding that user of the receiver id and we are going to find that particular user where the creator is equal to the current user or the receiver is going to be equal to the receiver here so i'll put this in here and i'm putting it explicitly like this because we also want the reverse and then we want to handle it so it could be that this example you look user one has sent a request to user two but the front end wouldn't be able to tell based off this query we also want the reverse if that was true so we want to detect if the receiver id is one here and the creator i id was two and that just means someone else sent the request to you if you're logged in as user two instead of user one so what we can do here in this fine one method here we have the ability to have multiple where clauses so we want to search for one or the other so what we can do here is we can just go ahead and cut this and we'll keep it in our buffer but inside the object we can add the where clause so and we can also specify two different scenarios here so we can have an array and then you can just go and paste this object in here like this um within an object so that's one scenario and i'm just going to go ahead and paste this again here and just get rid of this comma here and go ahead and put this all in the object again so i'll save this but this time i'm going to swap the scenario over such that the creator is the receiver and the receiver is the current user so this isn't finding both cases if you wanted to find both cases you'd need something like this so this is the creator is the current user and the receiver is the receiver and having a second object here is all so if that and that or that and that is true then it'll go ahead and find that record so if you made the request or you'll receive the request you'll be able to find that particular row of that friend request and the current user and receiver they are both foreign keys to the user table so we just need to have a relations here and we're going to have our two relations so we know that we have the receiver and the creator so you can just go ahead and put the creator in here and also the receiver and that's just the name of the um inside of the actual table itself so we've got creator and receiver here now it just tacks on the id there because it's a foreign key relating back to the user id but we know that this is the creator and the receiver here so we get our friend request and what we want to do is we don't necessarily want to just return whatever the status is from the friend request we need to handle a certain situation here so what we'll do and i'll open up the friend request status type here i'll press f12 because we do want two more types here we want the case when something is not sent and we also want the case where we're waiting for current user response as we've seen in the demonstration in the beginning so not sent obviously means that either party or either connection hasn't sent a request pending refers to the currently logged in user if they've sent a request they're waiting for the other person and you can potentially name these better [Music] but waiting for current user response is the reverse scenario so if you're waiting for the um current user response when you're looking at their page well you can just go ahead and accept them and that's how we that's as we were prompted in the demonstration and then of course you could either accept or decline the request here so let's go ahead and save that and then i'll close the file for the interface here also don't need the controller so what we'll do is we'll return to the service here and in this switch map when we get the friend request before we're just getting the id and the status because there was no relation to the user table but now we have these relations we're able to do a check here so what we'll do here is we'll just have a if condition and we'll say if the friend request that we have that we found from the database just a row in the database if that exists and it may not exist so we'll chuck on this elvis operator and then if the receiver if their id is equal to the current users id that means that you get a record from the database here this is an old version but it will demonstrate the point if you have the receiver id here being equal to the current user what we want to do in that scenario is we want to return an observable of this shape here so we'll copy this here and we'll just go ahead and we'll get that status as uh this is the new status that we created this is the waiting and i'll just go ahead and get from here so i don't make any typos this is the case where we're waiting for the current user response now it's going to complain here but what we can do is we know the type of it so we can just specifically say this is going to be the friend request status type here so just to confirm that's the friend request status type here and this is the scenario where we're being if we're logged in and someone else has sent a request to us then this the current use that we're logged in is in is waiting to respond back to that person so that's that case there but otherwise we would just want to return the status which is just the friend request status and i'm just going to go ahead and tack on this elvis operator here for type safety because that might not be defined and if it isn't defined that means that there's nothing sent so we can say nothing not sent because if you get a row here back oh if you're looking for say use a one send a request to use a five well the creator with the user one hasn't uh sent a request user five and five hasn't sent a request to user one so in either scenario when we get back the one record or the one unique row that friend request won't exist and if it doesn't exist then we just go ahead and we just say well it's not sent and that's all i want to do on the back end so i'm going to just close that up and i'm just going to go ahead and cd into the api folder so i can run the npm run start dev command here this will start the server and i'm going to go ahead and i'm just going to close this file here and i'm going to refresh my sql here now i'm going to close this as well but i'm going to reopen the user table and i'm also going to open up the request table so of course i've just deleted five users i deleted the table so i'm going to have to create five users again but just to ensure the shape of the tables are there there we go so what i'm going to do here is i'm just going to quickly create five users here so i'm going to have and here i've just tried to log in i actually need to register before doing so so let's just get our logins going so there's two one here's two three four okay so that's got joe but okay doesn't matter five so now if i look at my user table and you can see i've got a different name of this table we've got our five users here and if i view this i've got an empty table here and i'm just going to add an image in for uh the first user here actually i'll do that later on um so and i was just looking at the table here got a different name here it was connection before now it's request uh that's just in the demo though so it'll be the same as it was but i can more or less just close these up now and open up the front end so i'm just gonna go ahead and copy this part here actually i'm going to open this file here from the back end and i'm going to copy that into my front end so i can actually just run a ctrl shift tilde now open a second terminal up and i can just go ahead and cd into my linkedin project here so what i want to do is i just want to generate a couple a component and a couple of services here so let's just open up the folder structure to see where we want to generate this so in our home folder that's where we have the um that's where we're going to have our user profile um you could have it in a separate file but i've got our homepage and our profile in this home folder and then i thought you know you can just easily use the components within there and i basically want a friend profile here or connection profile so i'm just going to run an ionic g c home slash components slash connection profile and we can see in our components we've got this connection profile here and we'll just check that that added it to the module here so if we go to the app module we can see that oh sorry if we look at the home module we would be expecting the connection profile component to be here but it's not here so let's go ahead and add that so that's just the connection profile component now there was also an error in the pop-over component where the in the home in the header i believe in the pop-over component here we're getting this error here and that's just because we didn't add it to the module so let's just go ahead and get that popover component in here and save that and now we can see we can use all the ionic element tags so it was working before but it was a little bit of a hack but now we've added that to the home module here we can go ahead and continue to get what we need we can generate services so we can go ahead and run an ionic g s and in the home module in the services folder for that connection profile component that we just created we're going to need a service for that because we can't just copy and paste our profile summary component or we can copy parts of it but it's going to rely on different data and it's also going to be size different than anything so you could refactor that into a more generic component but it's just as easy just to create a new component based off that one and also i'm going to need one more service and it's going to be the banner color service because if you have a look at the profile here we see we got this backdrop here uh and that's the same as the other profile component so i'll just refactor that part into a service other than that it's a different layout the data is going to be different there's potential to refactor into one component but i don't know it doesn't really seem worth it in this case so we have our components ready to go we have our services ready to go we can go ahead and delete these um spec files here we don't need these so delete that you could of course use the skip test at the end of the command as well in the ionic cli but with that we can start to work on the logic a little bit so a good place to start is just creating the link to the page and for that we'll need to look at our routing module so in our home module we have this home routing module and all we want to do here is just have another one of these so just copy that down and we just want a dynamic part to the id of that particular user and rather than rendering the home page we're going to go ahead and just render that newly created connection profile component and we're just going to need to import that so now we can run our ionic serve command and i'll just load the server up for the front end and one thing we might want here is we might want to use the app header and we probably refactor that or in in the next video where we deal with the friend request here so right now there's no post or anything like that um but we in the next episode we'll refactor the um headers to handle the friend requests and then we'll refactor that at that stage there so it says i'm logged in as user three here i think what i want to do is i might just create some post here and i might log in as user one to do this i'm just gonna sign in here i'm also just going to get this image here and i'm just going to start a post this is a post and that's a post from user one and i might just do this for all of the users so probably a faster way to be doing this is to log in as user 2 in postspan copy the json web token go to the route and i might just pause the video i won't make you watch all of this but just note that this is um what i'll be doing actually i might do one and then just leave it at that so if i just refresh the page there's user 2 and i'm going to do the same thing for the other three users so you can see that i've created five posts one for each of the users and two for john 2 and what i want to do is i want to add the ability to click on here and navigate to the user's profile page so if i go to the all post component i can open that up with a control p go to the all post component and we can see that for our posts we're looping through all of the loaded posts and we have access to the post and the author so that means we have the id so that means on the iron avatar on the image we can go ahead and we can make it look like you can click on it by adding the cursor pointer property and we can also use the router link and what we can do is we can point towards so we want it to be based from the home or the route we want it to be in the home and then also since we have the post author we can just go ahead and put the post author id in so we also want to copy this and we want to add it to the name so you can click on the name as well so on this div with full name here we can just go ahead and control v and save the file and of course we'll save this file as well so that means we can now click on this and we can now click on this so if i was to click on john 5 for example we see that we got this navigation bar and we got our page here so i'm just going to go ahead and press f12 so we can see any http requests and console logs but before i even work on this component i do want to refactor this banner colors out so if i look at that profile for that so that's the profile summary component here what we can do is we can go to the typescript file and we basically want to take everything relating to the banner colors out and we want to put it into our service i'm just going to close a few things up here you don't need all of these open at the moment so what we can do is we can go to our banner color service and we can just take this type of the banner colors and just cut that out and put it above the um component here and it's good to make this component a little leaner anyway could probably do the same thing for the image upload as well a little bit at least however i think this is fine we can come to into our component here get our banner colors these are the default colors because recall if you log in as a premium user an admin user the backdrop color banner colors will change so we cut that out so this is this line will stay here um but it's going to relate to the service and that means when we use it elsewhere it will be consistent so let's just go ahead and cut this private method out here this get banner colors and we'll go ahead and we'll paste it into here now we're just going to remove this private keyword here because we're going to use it elsewhere but we will need to just get the roll so we get the type of that so okay so we've got that there so we've got the banner colors object with the typing and then the function here and then all you need to do is pass in the role so that's essentially all we need to do in the refactoring of that so that means we can come to our profile summary type script and just inject into the constructor banner color service and we'll need to bring that in so we import that so and i'm going to make this public actually because we're going to use in the html file so rather than this dot get banner colors we're going to refer to this dot banner color service dot get banner colors and we're going to do the same thing here so we can refer to the property on the service itself and we pass in the role and that determines the colors so we can just use this here in our component in our template and we don't need this keyword so we can just go ahead and actually i think we do need this keyword so we can just go ahead and type this in like this okay there's an extra dot there and if i save this here and reload we see that nothing has broke so everything's all working fine and has been refactored into the service but that means when we go to another profile here we will be able to use that so let's begin to work on the actual layout of the user's profile page so i'm just gonna do a control p here and i'm going to open up the connection profile component the html here and i think what i'll do just to get started is i'll just copy the html from here over because it's going to be kind of similar but i'm just going to nest this in an iron content uh iron content component and i'm just going to go ahead and pull this in now we're not going to have the divider and we're not going to have that much in this iron card content other than our buttons so let's just go ahead and get rid of that we're not going to need this input for the file select so what we can do firstly is we can just get the service in so this won't error so let's go ahead and get that and we can actually do it in the exact same way as we did it here so we can just copy that from the constructor here and just bring that in and i should get rid of the template errors now we don't need to set it because it's going to be set through the template here so i'm also going to copy through the scss and i'm just going to go ahead and delete this test file so i'm just going to go ahead and copy this css and we'll take out what we don't need obviously you could refactor this as well but things are a little different even though it looks quite the same uh you'd have to spend some time refactoring it and and that's just a decision you need to make if depending on how you want to be doing it but since this is just a demo application i'm not going to make into a production application i just want to focus more on the you know unique concepts rather than iterate uh repetitively over things that we've already done and we've seen how we can do that all throughout the course so basically in the connection profile scss file just go ahead and copy that in here now again a couple errors here profile okay so we want to get rid of all of that there and we will want to get the user um so i'm just going to go ahead and comment one of them out so i've got the properties for later but right now yeah i'm just going to comment out the image here and i'm also going to hard code this name here so let's see where we're at okay so now we see that we've got a component similar but it's missing the image and it's got a hard coat of data here so let's just go ahead and get the user so we have our service so let's go ahead and work on that so we've got our connection profile service and we no longer need to have the banner color server so can we see that that's working all right so in the connection profile service we'll work on the get the connection user so we're going to need some we're going to need the http client to make our request bring that in from angular common http we're also going to need some headers later on for the json for the posting so let's just go ahead and look for that in our application and this is another thing you could refactor out if you wanted but i'm just going to put it in like this and just bring in the http headers this won't be needed for now but very shortly we'll be wanting to post to add a connection so we'll just get that in there while we're working on this part here but basically what we want to do here is we want to get a connection user so this is going to take the id through the url and we're actually going to get the user so we can bring in the observable and we can also bring in the user here and recall that a user this is the id first name last name email role image path and post and this is just airing because we're not returning anything here so what we want to do is we just want to return and we can use the http client service so we can use a get request and we can put the user here now if you put the type here you don't necessarily have to specify observable user but i like to have a type in all my functions anyway it is implied but it just makes it easier to look through for readability purposes but this type here always matches the type within the observable that it's returned by so basically we want to get our environment variable so we do have that so we can go ahead and we can just say we can get the base api url and we can say we want to send a request so where we send a request to well we want to send it to the uh we want to get the connection user from the api so if we just take a look at the path here i think it's user but we'll just confirm that if we're going to auth and we look at the user controller we can see that we've got user here and we also got a couple of other endpoints here and i might actually just leave this open just so i can copy the endpoints in i'll put it at the front there so that means we can go to slash user and then just whatever the id is so you can use the template literal and pass in the id now that's the http request but we need to subscribe to that and call it and we do that from the connection profile component so let's just have a function here called get user and this is going to get the user um from the url so let's actually make a before we even do this let's just make a private method because we're going to need it for other method calls within this component here and i'm going to call it get user id from url so we just want to extract this 5. so it's just going to be a number that we want back here so it's going to be an observable because we're going to and this is where we're going to need to inject the activated route so we can bring that in of the type activated route bring that in so it's just saying that we need to use that variable and return another number so we can just go ahead and return this dot route and you can get the url and this is an observable that means we can use the pipe operator to use the pipeable um operators so what i want to do is i want to go from that observable into a number so i can just use the map operator from rxjs operators and we're going to get the url segment and it's going to be in an array of segments here so you can get the url segment bring that in and this is just going to return and we want the url segment and it turns out that at the beginning or in the first index um we can go ahead and we can get the uh path variable here so that's the part of the segment that we want oh and i realize i've injected this into ng on this needs to be over here of course in the constructor and this is just airing because this is going to be a string it's coming from the url so it's going to be string but we just want to a number of that and we can say plus here and i might make this lowercase here as well so we've got a nice camel case here so now we have this method here so let's just go ahead and just call this method just to make sure that it's working so let's just say this dot get user from url and we're going to need to subscribe to that and then for the number that it's returning i just want to console log that number and i might prefix that with a 33 so i can tell which of my comments is going to be showing that so we see we've got 33 of a 5 here go to 3 we got 33 3 so we can see that it is extracting that value nicely so what i want to do is i don't actually want to do that so i'm going to go ahead and get rid of that but now i'm able to get a user based on that so i'm going to have a function here and i'm going to call it get user and it's going to return a user so an observable of the user type it's going to return and this is where i can call this get user id from url and i'm able to pipe into the result of that and because i want a user i actually want to um i actually want to use the uh i want to use a service here to get the so we've created in the service this get connection user method so we're able to get the user like that so once we get the id from the url and remember that's asynchronous so we need to change this observable into another observable of the user type hence we use the switch map operator here and we've used this quite a lot already so with the switch map that means we're able to [Music] we can say well we're getting a number back here so the user id that we're getting back that's obviously a number um i'm going to import this user type and switch map operator and what i want to do here is i want to just return and this is where i'm going to use the i'm going to need this service here so if i just say private and then get the name of this service connection profile service bring this in import it and for this service we have our get connection user and that's based on the user id so we can go ahead and we can just pass that in here so now we can actually call this so let's just go ahead and say this dot get user id sorry get user and if i just subscribe to that and console log that out and just put a three here this should make a second request for us so now we see we get three here let's just see it works for one as well and we get our three we get logged in as the first well we get the first profile we've got a two we get the second profile idf2 so we can see that it is indeed returning our user for us here so what i want to do is i also um and i know i said i'd work on the uh display first ui but i've need all this data to be able to work on it so i'm going to come back to that so basically what i want to do is i want to create a few things here i also i need to get the status of the user as well so when i go to a user's page i need to determine whether or not we have a friend request sent if a friend request is sent we want the button to be disabled and if it's accepted or declined i just want to hide that button so i'm going to need the that method there so if i go to my service here i can have a get uh friend request status and this is going to just take in the id which is a number and what it's going to return for us is it's going to return an observable and this is where we're going to need our types so if i just open up this models here and i create a new file and i call it friend request dot type script open that up i'm just going to go ahead and copy this in here and i'm just going to change it up a little so i can close this now and in the model here i got the friend request status not sent pending accepted decline waiting for current user response and then i'm also going to export the interface friend request status and also the friend request so that's just going to be an id and these aren't optional in this case here and this um oh and this in this case we want it to be modified a little so this would just be a number here for these two here so that's that so i can close that up now or i can use it to refer um back to the connection profile service that we're working on so basically we're going to return something of this type here so status and then the friend request status so the type and we're going to need to bring that in and then we can just go ahead and we can just copy this here so rather than user it's going to be friend request status here we hit the user and then if we look at our controller here we can see that uh for the status we're hitting this friend request slash receiver id endpoint here so if i come back to the service here we're still in user slash friend request slash status and then the id that's getting passed in there so if i save that i should be able to go back to the component that i'm working on and i'm able to use this and i can just close this now move this over here i can use this get friend request status so i'm going to have a function here called get connection status or get friend request status this is going to return an observable of that type friend request status and just put that in there like that so all this is going to do it's just going to return the get friend request status method that we have there and it has no arguments oh is it sorry it has a argument and actually what we want to do here to get that argument we need to use the um get user id from profile so basically what i want to do here is before doing this at all i want to say this dot get user id from url so i can get the id of the user through the url now i don't need to pass anything in because it's coming from the url so i can pipe into this and i want to return a friend request status here so i can just use this switch map operator and that's going to give us our user id of the number type and then we want to return the new observable which is this dot and then this is this part here so the get request status so now that we have access to the id we can get the status of the friend request and then we can go ahead and we can say okay pass in the user id here now we may just need this type in here like that um oh sorry i used the wrong method here obviously we're going to need to use the connection profile service get friend request status and now we have that we're able to get the status of the friend request based on the url but we still need to actually use this so what we can do here is we can set a couple of variables here because we're going to need these in our component so we're going to need the user data so we'll have a variable called user we're going to need the connection status or the friend request status and this is of the type friend request status we're going to need the friend request status subscription because we're going to need to subscribe to things so i'm just going to put this dollar sign here as a convention for anything relating to observables and this is of the type subscription and we're going to need the same sort of thing in here but we're going to need the user subscription because this value is going to change depending each time you go to a new page or something like that and what i'm going to do is i'm going to actually implement ondestroy because i'm going to assign these variables so that means i need the ondestroy method and i need to import that from angular core and if i just get the name of that and just above the private method but below all the other methods i'm just going to have this on ng on destroy it's not going to return anything but basically it's going to take the subscriptions and i know we haven't set them up just yet but it won't error if we unsubscribe from anyway and we're going to shortly set them up anyway so if i bring this down and then rather than the user subscription here i'm going to unsubscribe from the friend requests status subscription and don't forget the dollar sign and that means what i basically want to do rather than just console log things out i actually want to start to set up these variables that we can use in our template so the friend request status subscription i'm going to assign that and you use the this keyword here and use the dollar sign and when you assign it it actually will call the the method here so if i'm saying this dot get friend request status so again the user id from the url and then getting the status of the friend request that's in existence between the two parties if you set this equal to that and subscribe to it it will actually even though you're assigning the variable it will still do the work because you have this subscription set up equal to that and hence you don't want any memory leaks so you can use the energy on destroy uh pattern to unsubscribe from that but since this get frame request status isn't observable and it's given us the friend request status we can just go ahead and we can pipe into this observable here now we don't want to return anything here but we actually just want to get some values and assign a few variables so we can actually use the tap operator here and we can bring that in and we know that we're going to get our friend request status and this is of this friend request status type now if we go ahead and we open the code block here um this is just airing because we haven't subscribed just yet so i could just tack on a uh let's see dot subscribe and we don't need to do anything other than subscribe so we can just have that there like that but in this uh tap pocketable operator we have the access to the friend request status so we can say this is where we can actually set our variables here so we can set the friend request status that we defined up here and this is just going to be equal to the friend request status but remember this is a nested object so we just want to get the status from that and likewise we also want to set this dot well we want to actually uh get some information relating to the user we want to get the user here and then we want to set up information relating to that user so we have access it to the template but to do that we just go ahead and this is the point where we can do it so basically we can set our other subscription here like this and recall that we've unsubscribed to these ahead of time so when we set this variable this will actually still fire the variable because we've got a subscription so if you have a subscription and you assign it to the observable that you're subscribing to that will uh indeed fire it so we can just say this this is where we want to get the user so we can go ahead and get the user and of course you could do this in multiple ways um i you could get the user first and you know get the status second or anything like that doesn't really matter this is happening very fast anyway [Music] so there's no need to over engineer it or anything like that but you can just subscribe and you can get the user and basically i just want to set the user equal to that user that you're getting back there now one thing i might do here as well is i might add the property because right now the user is returning the image path but we're not getting the full image path so i'm just going to go ahead and set a local variable here called image path and this is going to be equal to the image path um but if that doesn't exist we can use this double question mark so if it does exist it will take the first value but if it doesn't recall on the back end we did have this blank profile picture dot png so you can just go ahead and have it there you might want to refactor this out so it's not hard coded into a local variable then get the default image but i'm just going to leave it like this for here now on the user object there doesn't exist a full image path so we can use this sort of syntax here so if you do dot you get the first name image path and so on but we want to append to that so uh obviously you could put it onto the model and have it as an optional variable and in hindsight that's probably a better way to do things but you won't always be able to do that so i just wanted to demonstrate for education purposes uh you can actually just go ahead and use this syntax here it's sort of uh to tack on that method there for a type but you can um override that user type and sort of have access to that so what i'm going to do here is i'm just going to go ahead and copy the path um so it's the node local host 3000 api slash feed slash image this is where our images is going to come from and then we can just go ahead and tack on that image path which is either going to be defined or it's going to return our blank profile image here so we've done quite a little bit of work here um and if we're looking at our page here it's still looking quite the same but now we have access to everything that we need so we can go to a page and we can go to other users pages as well and we shouldn't have too many issues with that so we've got this user we've got this friend request status and this these will change as the uh subscriptions they're you know looking for the changes and in the url and they're constantly watching those and then further requests will be made based on those so that means we can come back to this line here and we're not going to have full name here but we're going to have we can say if we have the user because initially we won we can say we can say we need the user first name and get the user last name here so let's just go ahead and see if that's working for us and also let's just get the image as well we've got the full image path here so basically if if we have the user we can use the user dot full image path and note that we're not getting the intellisense for that and that's because it's looking for the user type here but if we wrap that with the dollar sign any keyword you don't want to do this too often but we purposely set this up um we should have uh image here and now we can see we get this uh blank image here and if i go to user one we can see that we get the user there you use image and we get john pink here and if we go back we get john 2 here so that's rendering dynamically so that means we have the data that we need so let's go return to the layout of this and then finally we'll add the functionality to add the user so basically we need to go through um html and the css here so we've already cleared through the html but i may have got distracted with the css so let's just see we no longer need this here or this here and once again you could refactor the shared parts um but it's it's the values are sort of a lot different uh it's you sort of might even want it in an other component like i'm doing here anyway sort of thing so basically the iron card here i want to just tack on a little bit of margin here and i want 20 pixels from the top i want the left and right to be um centered so i'll put auto here and then nothing on the bottom and i'm just going to change this to 782 pixels i've roughly found these just by inspecting the elements on the linkedin website um but obviously that's not going to work on mobile so we want it to be responsive so we'll have this max width here of 960 and i've chosen 960 because that's a break point in ionic but basically at a certain point we just want the width to be auto and the margin to be 20 pixels so there is still going to be space left and right um and the view the card will just take the width of the screen uh subtract the margin either side of it so for the backdrop we can just go ahead and you know just change the height of this to 196 pixels and rather than using values here for the width i'm going to use percentages so that means when you move from one view to the other the proportions will be preserved so i'm just going to go ahead and just change a few things here so i want the width to be 70 percent here i want the width to be only two percent and this is just the curve part here so basically i'm making this card bigger and i'm centering it here and this looks about seventy percent this little bit here is about two percent and then this is the remaining part here uh it's a little different in the larger view so i've sort of just eyeballed those proportions uh but nevertheless this will be a width of 2 height of 100 for all of them um [Music] here we've got 70 percent and then we want the remainder to add up to 30 and this 2 percent just goes over the top uh of the backdrop two so i might actually just make this five percent here and i'm going to make this 25 so that should add up nicely um one thing i want to do is i want to make the image a little bigger and i'm just going to duplicate the height for that so we got a circle rather than oval shape the margin we no longer want it centered so we'll get rid of that um we've got the border we'll make that a little bigger so the white circle around the image is a little bigger and we'll just make it margin top go up a little bit here so let's save this and okay so we can see that we've got this little thing here so let's see what happened here okay so this width here should be 25 percent and then this height should still be 100 this height should be 100 percent and this should be five percent so that may have confused you a little bit before but hopefully this fixes things up and then we can see we get a nice profile here and we can see that it preserves all the way now one thing we want to do is we just want to left align this part here and also add the buttons below so let's go ahead and work on that so if i come to the template here and i think i can close this up now if i come to the ah let's see where we have the name what we can do is we can just say we can we don't even need this iron margin top anymore we can just say iron text left we add that class here and then we'll do the same thing for the subtitle there we go we've got our left aligned image we still got our spacing around it now we just want to add the buttons and then we can hook into the functionality that we created so what we want to do here is in our iron card content and you didn't have to lay it out this way this is just the way i've chosen to do things um but basically we have our uh friend request status and if we take a look at this here we've got these types here so basically we want to do two things here we want to show a button to say connect only if there's not something sent there's no request sent um because if something's been approved or declined we just want to hide that button but there could be the case that it's pending so i could have created the request so it'll be pending from my perspective or the other person could be waiting for my response and they have sent it and in either of those cases i want to you know disable the button but i still want to show it so the action uh can be you know reach its conclusion um and i just want to gray that out because in the next video i'm going to refactor this nav bar such that we can also respond to requests and i'm probably just going to have a little drop down here with some names and accept or decline and then they'll be i make requests but we've already scaffolded everything up pretty much to be able to do that so it's just going to be a couple ui changes and some more endpoints so basically based on that logic that i've outlined uh we want to have an ngif now i don't want to have any dom elements so i'm just going to wrap it in a ng container tag um so i can just run ng if here and i'm going to rather than do if connection status equals i'm going to do includes and then i'm just going to go ahead and i'm going to um get the friend request status so if that friend request status includes and the types we got here are not sent um pending so if the thing hasn't been sent we want to show it if it's pending we want to show it but we want to gray it out or disable it and we'll handle that in a moment and then also if we have the case where we're waiting for we're waiting to respond to the other user that's already sent the request then we can go ahead and tack that on there so this is only going to render so basically i could also say if it's not included in accepted and declined so basically what i want to do here is i just want to have an iron button and i want to bind it to the disabled property oops and i'm just going to go ahead and copy this including because it'll save me some key strokes because i can just go ahead and remove not sent because if it's not sent by either person obviously you don't want to disable it so you want to click that but if it's sent by either party you want to just disable it because it hasn't been approved or declined it's in the pending state so basically i also just want to make the shape of this rounded so i've already set up the color schemes in early videos um but this i just want to make it in the pill shape and here in the text for it i basically i want to say i want to you want to connect it's going to depend if the basically if the connection status or the friend request status if this is equal to waiting for current user that means they've sent you a request so you can say accept request otherwise it means you've sent them a request and or it's not sent in which case you just want to have the word connect here so let's just save that and now we get this connect button here it's not um hooked up just yet um but just to finish up the ui side of things what i want to add here is i want to add two more uh buttons that are for show so i can say iron button and i'm going to have the fill uh equal to like this equal to outline and i want two of these so in the first one i want to have an iron icon and i want to have a slot equal to start i also want to have the lock icon here and i'll just put in a message text here and for this other one i also want to have a rounded shape here so i can tuck on the attribute shape and the round for that property and i can have more so this should and if i sign in i'll sign in as user one i think i set my token expiry date to like i don't know 10 minutes or something or 30 minutes so i don't know okay so basically if i go to user 2 here oh and i want some text in here um so rather than between the icon i want it after the icon and there we go we've got our ui all sorted and it's reasonably responsive so basically now we just want to add the ability to connect so let's go ahead and look at how we can do that basically if we return to our connection profile service here we can have a add add connection user we're going to want the id of that user and we're going to want to return an observable and the particular type of that is the or basically we're going to have a friend request here we're going to get back the friend request or we could be getting an error back if we have a look at the [Music] ability to post requests we can see that we're going to have a friend request back all this error here so we can actually just go ahead and copy this whole thing and paste it in the observable here so that means i can do a post method so i can just say return this dot http dot post this type's going to be the exact same you might want to put this into its own type um because it's getting a little long here but just to keep consistent with what i've done here i'm going to tack it in here end here as well so basically this unlike the get this takes some additional parameters because we have to specify the type of the data that we're sending through if it's not in the form data or the standard type so we want jason so we can just go ahead and we can just go ahead and just get that end point here so friend requests send put this in here so still on the user but the friend requests send section now that's the first argument now this is a post method but we're sending it through the url here but we still need to tackle options so we can just have an empty body here and then we can just call the http options that we specified earlier in the video so that's the method we need for the service now pretty much all we need to do now is we just need to add the user uh call this function and use it in the component so if i come to the component i think just below this get user method i'm going to have a add user method so i'll have that now this is actually the way this is going to work is in the html here when we um and that's the wrong file when we want to click the button so if it's not disabled that means we're able to click it and that means it's in a not sense state basically so on the iron button we can actually have this click event here and we can set it equal to add user so we have this add user function here so basically what's happening here is we want to get the user id from the url which we can do and based on the user id from the url we want to call this connection ad connection user method here and this is going to return either a friend request or an error and based on what that is given back to us well basically um we just want to call that method um but we only want to we basically want to unsubscribe straight away but we want to subscribe in the method call because we need to subscribe to that method uh to be able to get the data that we need but we don't want to we need to unsubscribe so we can actually just take one from that so basically this is going to be a subscription type because we're going to subscribe to the method that we set up um and basically when you add a user you can only add a user if they're not if there's no request being made by the party but when you click it basically you want to set this dot connection or this friend request status equal to pending because you want to disable the button so and you want to show those changes in the ui and then obviously the next time you go there you'll be making the request again you could cache it if you wanted to but if you relearn the whole application again you're going to need to you know get the request so we have this get user id from url function we're going to pipe into that observable we're going to use the switch map operator so we can return another observable based on data that's returned from that first observable so we know that again the user id which is just a number and what we want to do here is we just want to return this dot connection profile service and then we want to call that ad connection user method by passing the user id with retrieved from the previous observable so that's all well and good but we don't actually want to return this observable we want to return a subscription but we want to get another observable from the original observable so if i just save that i'll just format things a little but basically after the pipe operator it's going to give us back the data here so i want to actually pipe into the response here and i only want to do so so i can use this take my method and then i'm just going to go ahead and i'm just going to subscribe and because i'm taking one it's going to handle the unsubscribe so i don't need to put in the ng on destroy like the other subscriptions here but basically if i save that everything should be working well and good so let's take a look at our database if i refresh this we get nothing in here so i'm logged in as um user1 and let's just refresh this um so i'm going to refact this navigation by anyway so don't worry about that image there um let me just yeah so i got this image here in this case uh but when i go to john 2 oh maybe it was just a temporary thing um so basically i haven't made any connections just yet but if i connect here and i refresh the database we can see that we get a request that's been created and it's in the pending state if i sort of if i go back to the home page and i return to user 2 i can't click this if i were to go to user 3 and connect i'm able to connect here and if i sign out and i log in as user 2 or user3 i can see if i go to user one here oh i think okay if i go to use a one user 1 sent me a request so i can have this great option saying accept request and what i want to do is i want to in the next video be able to handle the request and i'm going to refactor the navigation bar and fix up a few glitches as well um but if i go back here and then i go to say john 5 i can now make this request here so if i go to the database reload this table here we'll see that i've got three requests three friend requests the first two are created by creator one to uh user two and three and that third one we seen that when we went to use a one profile you get that uh other option there and then i made a request to request five so yeah thanks so much for watching the friend request system the ability to add users and display that through the ui on linkedin in the next video i want to work on the ability to accept friend requests so thanks so much for watching please subscribe to my youtube channel and i'll see you in the next video cheers

Channel: Jon Peppinck

Views: 173

Keywords: angular, ionic angular, ionic, ionic 5, ionic 5 angular, angular routing ionic 5, angular navigation ionic 5, ionic tutorial, ionic framework, ionic 4 angular, ionic using angular, learn ionic 5, ionic 5 tutorial, learn ionic, ionic guide, ionic 5 course, modern sidemenu ionic 5, angular 7, angular 9, ionic 5 for beginners, ionic course, ionic angular tutorial, ionic http request, angular 12, tutorial angular 12, ionic for beginners, angularjs, javascript

Id: 4v_wbyrc93U

Length: 94min 21sec (5661 seconds)

Published: Sat Jul 10 2021