Ionic 5 Angular Friend Request System - Manage Connections | LinkedIn Clone [18]

welcome back to the linkedin clone in this video we'll be working on the friend request management in the previous video we set up the ability to add friend request so i'm logged in as mark smith here and i've received two friend requests from jumper ping and larry powell if i have a look at the database we can see that for our four users here we also have the friend requests that have been sent and they're all in the pending state so user one or jumper ping has sent a request to users two three and four and user three has sent a request to user two and user two is the mark power so that's why we're seeing these two requests uh for that receiver id of two there so let's see what happens if i accept john and decline larry we see that that modal has disappeared as well or the popover component and the number here has also been changed to zero if we look in the database and we refresh it we can see that the first request has been accepted and the other request has been declined so let's get started and we're just going to make a very small tweak to the back end because when we get the friend request in addition to the friend request data that we get from this table we also need information of that user and that is a foreign key in this table back to the users table so if i open up the back end i'm in the api folder and i go to get friend request from recipients we see that we're just finding where the receiver is the current user and in addition to that we just want to add on some relations here so the relations are going to go back to that table so to the user table and it's going to join them between the user table and this uh friend request table on these two keys here the receiver and the creator and i have the user controller opens just so we know what the end points are so we can type them in on the front end so i'm just going to go ahead and run the server here so in the api folder i'm just running an npm run start colon dev should get the api server going up and i can also just cd into the linkedin folder here and we can begin to work on the functionality of the friend request system so i'm just going to generate two components here if we go to our linkedin folder structure we can see in our app we have this home module here and i'm going to use this module to put the home of the users also the profile and the friend request pop over so we can use the angular and the ionic cli to generate a component and we're going to put it into that home folder into the components folder and we'll have a component and we'll call it user profile and we can just open that up and we can just go ahead and delete this spec file here we don't need that i'm also going to generate a component for um inside the header because right now well i've disconnected from the server in my example demo but we had a if you clicked here yet this pop over here to accept the friend request we want another pop over here so within the header i'm going to have a nested pop over a secondary pop over and perhaps you would want to rename this now pop over to something else but i'm just going to keep it as is but basically i want to generate the component in the header folder and i'm just going to call this friend requests popover to distinguish it from the other popover and we can see that it generated that for us once again we'll just delete the spec file now in the home module we will need to add those dependencies manually so okay that's the app module but in the home module we can just go ahead and we can copy these names of these components in to our declarations of course we're going to need a control period to import that in and we'll also need the friend request popover component that we just generated so let's import that as well and now we can run an ionic serve and we can get the current state of our application back up so i've just created four users here john two john three john four and if i go ahead and i sign in as the first john here we can see well we'll have to firstly create posts i'm just gonna go ahead and do this quickly so i've gone and i've added the four posts for each of my users and i've also added a couple of friend requests so i'll just show you one if i go to john 3 here john 3 has already sent me a request if i go to john 2 i can send him a request and if i go back and i open up the table for request and i view all the rows here we can see that i've made five requests and we can see actually we have a creator id of five six and one here um because uh when i deleted some rows before it changed the id here but everything should still be working fine but essentially i've sent a bunch of requests here and from the user three and four i've sent a request to user one and i want to be able to display that in the browser and also respond to those requests so let's go ahead and work on that and one thing to note is in application this navigation bar has been duplicated in two areas so i want to refactor that out first and then we'll add the functionality to it after that so if we go and we open up our and we'll close the home module here and actually we'll just close these here too for now but if i go back to the front end project here and i go to the app into the home we can see that we have this home routing module and we also have this home page now right now the home page has the everything on it but we want to navigate between the home page and also the user's component so our page and also the user's component so what we need to do is we need to copy this code here and we need to put it into the home page so the user profile component that we made so we'll have this user profile component here and that's the logged in user and then we'll also have the um friend request profile component so we've created that previously the connection profile component here and this has a reference to app header as well so we do just want to refactor this user this stuff here out into the user profile component so i'm just going to go ahead and cut this out here and paste it in here now we're going to need some methods and we also need the css now all this css here can just be cut from the home page if you want you can delete that scss file because there's nothing in it i'm just going to leave it there for now so you paste that in there and then we'll also need the type script and the typescript's pretty simple i believe all it's doing for us is it's just setting the body so i can actually cut this out here from the home page and put that into the component here and now if i save this save this and save this we've just refactored the user profile out of the home page into its own separate component now we don't need on a nit now since we aren't using that and we don't even need the constructor i'll just leave it there anyway for further injection so now that we've got that component sorted what we want to do in the home page so in the connection profile component we just want to delete this header here and in the home page we actually just want to we either want to route out the um the connection profile component or the user profile component so what i'll do if i go to the home routing module is i'm just going to change these imports a little the routing sorry the routing not the imports so basically we want to display the home page and then we also want to route to one of the other two components so the home page has the app header encapsulated in it and if i get the iron router outlet there because that just wraps the regular outlet we can just save that now at the moment that's not going to do anything for us but if we come to our home routing module we can go ahead and we can say okay on the home page which is just the app header and also the pages we're navigating to we want to have two children here and the first is going to be the user profile component so if you're on the path just blank so the home page itself we can go ahead and we can use the component and then this is where we can import the user profile component but if we want to go to a specific user we can pass in the dynamic id here and refer them to the connection profile component let's just go ahead and save that and let's see where we're at okay so we've got the home page there's a little bit of a spacing issue here but if we go to another user we still everything's working but we got the navigation bar refactored out now so let's just get a little bit of spacing going so if i open up the user profile component scss file we can just go ahead and just add a little bit more margin here save that there so top margin and then we've got that nice spacing there and if we go to a page we can close this now but in our connection profile component we can just go ahead and we can give it some spacing in an analogous way so we can just say okay we'll make this 100 pixels and there is this extra element around it which has its own margin in the other component so that's why you just have this extra 10 pixels here and i just eyeballed the spacing basically so now we have that spaced out nicely and we've got this refactored we can begin to work on the actual functionality of the friend request system so we designate the logic of our application to the service and if we open up our services here we got this connection profile service where we had the ability to get the connection they get the friend requests and ad connections so now what i want to do is to be able to get the connection requests for that particular user and also respond to those connection requests so let's say i want to get the friend requests we know that this is going to be an observable and it's going to be of the friend request type it's going to be an array of them and i can just copy the get method from above here so you can use the http client to get the friend request the array of them and it's going to be getting them from the end point get friend request me receive request so i can copy this here and i can get rid of that variable and that's the endpoint to get the request and the service method that we'll use elsewhere i also want to have the ability to respond to friend requests so this is going to be more like the post method so if i go ahead and copy this i can copy this down here and then i can rename this method respond to friend request so this is the ability to manage the friend requests now you're going to need the id number here of the connection request or the friend request and we'll also need the status response so the status response is going to be a subset of all of this status responses and in particular we are only interested in accepting or pending so ah sorry accepted or declined because pending and the other options they're not definite but if we're responding to the request we're having a definite action here so it's not even going to be accepted or declined and rather than getting this friend request back actually we will get a friend request back if we take a look at the controller here we do get the friend request back when we update that status so i can close this back end controller here now and rather than this error we're just going to say okay we're expecting a friend request to be coming back so we can remove it from the generic type on the post method and we just need to change the route and i didn't save that from the controller that i just closed so let's just get that and we can go ahead and we can get this and we can go ahead and say at the end point user slash friend request less response and then the id of the friend request what we can do is we can pass in the status and that's just going to be the status that we have here and then we have our http options which is just json as uh defined before so we have our service methods ready to go now we can make use of this in our header component so if i open up the header component and i open up the typescript file right now we just have this method here that's presenting the pop-over of the logged in user and there's also a subscription that's being managed to get the image that you see in the top right here so we also want to add the another badge here so let's go ahead and do that and we'll just hard code that for the moment and then we'll connect it to our uh service so if i go ahead and i open up the header here we can see that we have this iron badge here i'm going to go ahead and copy this here and i'm just going to go up a little bit here to my network and just below this icon but above the text here i'm going to copy this badge here now if i take a look we see that we got this badge here and i might just move it over to the right just to patch so if i go back over here and we have this margin left we might just make this say negative eight pixels and right now we just got this hardcoded value but we'll change that shortly so if we go back into our header component into our typescript file this is where we can actually have another popover component so basically if i click on the friend request component i want to sorry the friend request icon or this people icon if i click on this column here i want to open up a separate model so or a popover component so basically i need the i need to [Music] copy this code here and bring it down one and we'll just call it present friend request popover to distinguish that it's a different pop over now it's going to be quite similar we'll even have the same class here but we'll call this the friend request popover component that's what we'll need to import now we don't need any props in this case because we're going to use a service so yep all that's all good we can just leave that there like that and this means when we come to the header here we can have the ability to open that so if i just pass on the uh and i'll copy it from below this here this click event i pass that here on the column here i'm going to just use the name of this popover and put it in here and put a quote here to close that part up now this will fire every time and we're going to later check for the case that there's nothing in the friend request if there's no friend request we won't allow that to open and we'll do that with an if statement before this click here but now we can see we get this friend request pop over works now obviously we want to make it into a card so let's go ahead and open the friend request component up the popover component that is and what we can do is we can copy our other pop over and we'll see if there's any styling or anything like that oh and card content okay so what i'm going to do is i'm just going to copy this html over into the friend request here and basically i'm just going to delete a few things here so i'm going to come down here and i'm just going to delete this iron card content and this method here and this divider i'm also going to delete this iron card content here and also here as well so i'm just going to get rid of all that now i will have the iron card and iron header with our layout with the iron grid row and coals right now i just want to so we're going to need an image so i'm just going to comment this out for now and for the iron card title i'm just going to hard code this for now subtitle we won't need so we'll get rid of that and we will have a another iron row here and in this iron row we're going to have our buttons so we're going to have two iron buttons actually i might just do one and then duplicate it later and here we're just going to have except and we're going to have a click event but we won't create that just yet we'll have expand equal to block size equal to small fill equal to outline and we want the color to be the primary color here and then i'm just going to copy this down one but rather than the primary color we'll have the danger color and then we'll have decline here so let's just go ahead and save that see whatever it's looking like so now if i open up this pop over component we get the pop over here oh and we still got this view profile that will delete the image we're going to come back to and it's going to be nested to the left here of a certain size and then for multiple requests we're just going to have a for loop and have them coming down here like this so we can delete this view profile button get rid of that so now we're going to need some data so that means we're going to need to work on the typescript file and i'm just going to close the popover component so close that as well now in the friend request popover component here we're going to need the controller because we're going to want to close it so if we get the private pop over controller and that's of the type pop over controller and that's going to come in from ionic angular but recall that we've made this connection profile service here as well and this has those methods that we just created to get the friend requests that we're going to need in there and then also the ability to respond to those requests so let's bring this in so in addition to that controller here i'm going to have the connection profile service of the type connection profile service give it a lowercase c here and import that in so what we want to do well we want the ability to respond to a request but we'll set that up later on first we just want to get the data so if we look at the connection profile service we want to extend this just a little bit so we have access to a property so let's go ahead and do that so right at the top here for our public method we can have our friend request which is of the type friend request array and this is going to be set at various uh locations so basically when we get the friend request we want to set it so above this return statement here and actually rather than doing it here we're going to want to set it in the header component and the header components uh calling the pop-over component so if i just come to this header component we can see that we've got this user full image path and user image path subscription so we want to do the same sort of thing but for our friend requests and the friend request is going to be an array of friend requests and the subscription to the friend requests because obviously when you accept or decline it's going to change the state and there's gonna be less or fewer or more or the same amount of friend requests and you can also log out and log in so you wanna have a subscription that subscribes to the uh friend requests and then we'll update here so we're going to need the controller so we need this connection profile service controller let's get it we can make this public and we can say get the connection profile service because we want to public because we will want to use the uh myth the property directly into the template here and that way everything will be uh in harmony so we've got that now in this ng on init we set up this user image path subscription here so i'm going to do the same thing for this friend request subscription so i'm going to set this dot friend request subscription into something and that means i'm also going to need to use the unsubscribe method on the ng on destroy so if i go back to the subscription what i want to do is i actually want to use the connection profile service and that method we made to get the connection request or get the friend request we want that so to get the observable get the data from it we need to subscribe to it and basically we're going to need the friend request of the type friend request array and i might just bring this to the next line here basically for our friend requests that we have what i want to do is i want to say well we're going to have a bunch of friend requests but we only want the ones for example in our database here um now these are pending but if you accepted one it's getting all the requests so you could filter out the api level but um you know it's good to filter it on the front end as well so you have knowledge on how to do it from both perspectives so we've seen on the back end so let's try to on the front end so if they accept or decline you don't want to see that so basically you just want to filter that state out so and this is why i've set a property on the connection profile services on the service here this um friend request property because i want a global place where this is being set and then i'm subscribing to that and then i can have a consistent value elsewhere in my application so there's many ways you could architect this application um as you see i've sort of been doing it in various ways throughout the application there is this idea that you want everything to be consistent and that is true however because this is a tutorial i wanted to show you all the different various ways you want to do you could do something and then you can choose make the decision for yourself of how you want to architect your application so i'm just going to say for each of the friend requests that we got back what i want to do is i just want to filter them out based on the friend request and this is going to be a singular this case so for the friend request that we got there back from all the friend requests we want to filter something out and basically if the friend requests if the status is equal to pending then we'll return those and then we'll set it to this connection profile service here so let's go ahead and save that so with that we can actually go into the html of our header component and we now have some information so on this connection profile service here we now have information relating to that and we have it in the friend request here so let's just go to our application here basically on that column that we created here sorry here for the friend request pop-over component we also want to check that the connection profile service if that you know if the friend request exists because it might not exist due to it not being set here and then if you get something nothing back it might not be set so if that is true and it has a length that's greater than zero so there is something we just want to run this function so you can actually just say end here because this will evaluate to true and when that evaluates to true i will just look at this function here and it'll execute it but if this is false this won't run so basically what i want to do in the badge i want to display this number here dynamically so on the badge here i can say well we can basically have something like this here and we can have an expression here where if this connection profile exists and the friend request has some sort of length um you know display that but if it doesn't just go ahead and display zero here so let's go ahead and look at that so we're getting a zero here and actually we don't even need the friend request here another thing i spotted was looking for that is just the http should be a put here but they'll come on later on so i've just modified the code slightly in the header component where i set the friend request subscription equal to the connection profile service you get the friends you subscribe to it and then for all the friends that you get back i want to filter on the pending and then i also set the variable of the profile service to the property friend request i set that equal to all of the frame requests that are pending because you could have friend requests that are accepted or declined and then i just filter out the uh friend request and frame request status equals pending so i just had a syntax error just before and i was looking for that and then in the template we basically say you can click the component if the friend request has a length greater than zero and we see that we get this pop up here so i'm going to click off that and we also show the length there if it exists otherwise we show zero so that's the uh ui side of things set up for showing the friend requests now i do want to tap into the friend request popover component and use that data so basically we've got the connection profile service and the pop-up controller now on the ng on a net what we want to do is we want to use that connection profile service we want to go to those variables that we've set for the friend request and we basically we want to go through them so we can use the map operator here and this is not the this is the javascript map operator rather than the rxjs map operator it pretty much does a similar thing here but what we need to do is we take each friend requests that we get so we're cycling through all the friend requests and for any one given friend request what we want to do is we just want to get the id of the creator so if you're looking at the friend request here we've got the creator id here so when we get the um however when we get the data back when we even though in the postgres database we have creator id and receiver id here um because we have a relation between that table here and the user table we're going to get a nested data structure back so we're going to get creator back you could have a separate type for that but i'm just gonna do the work around solution and that is just setting the creator id based on the friend requests that we got and we need to cast this as any because we know that there's this creator for the creator we have an id on that creator and this should be creator obviously with any type we're not getting good intelligence anymore that's one of the downsides of this approach uh you could have a separate api call or another data type but we've seen how we can do all those sorts of things and sometimes it's good to figure out how to do some work around solutions as well so basically if the friend request if there is a friend request firstly and we have a creator id that means that what we want to do is we actually want to call this connection profile service and we want to get the connection user here so even though that we've set the we have access to the uh all of the profiles from this connection profile service we actually we still want to get the connection user um because what we want to do here and i think i've called this something else if i open up the component for the connection profile service and we have this get connection user method here basically we want to get the user of the page that we're on um so we're able to get the image path for that particular user because right now we're just getting the data in this form so we have this creator based on the creator id here but when we show the image we need information back from the user table so to do that we call this get connection user method here and from that we can pass in the creator id and then we can just go ahead and we can pipe into that observable we can take one so we don't have to unsubscribe from it and then when we have that imported we can run a second pipeable operator so i'll just put a comma here and the second type of operator that we want to use is tap because we want to tap into the user that we're getting back from there but we don't really need to do anything with it other than set some variables here so let's just bring in these here and now i have the user object relating to the profile that we're after we can just say okay what we want to do is we are going to append we're going to add a property to the uh friend request object so because we're in this friend request loop for each of the frame requests we can actually go ahead and we can use that and we can say okay we can so normally you'd get this create id id and stuff um but we want the image path and more precisely the full image path so i may have created a getter somewhere else in application but i'm just going to hard code it here and i'll leave it up to you to refactor but essentially what i'm going to copy here is i'm just going to copy the end point here and basically there's two scenarios here that could happen either there could be a user and if there's a user uh they would have an image path um but if this returns back null we will just post in the blank profile image that's just on our server here and then after the this is all done here we can go ahead and subscribe and actually we want to do this after this part here so we can just go ahead and subscribe and we're only taking one so we don't have to unsubscribe um so basically we're mapping through all of the friend requests and we're getting a user based on the creator id and then that way we're able to get the full image path for that particular user that sent us a friend request so now we have access to that we can come to our template here and we can just add a few if checks here so obviously we don't want anything to come up if we don't have a any users so this is going to be this dot connection service dot friend request here so if this doesn't exist and we'll go ahead and we'll just make this public so we can use it in the template so now we can see if there if there is a friend request set and they should be at this stage because we're in the popover component and it's coming from the header and the header won't call it unless there is but just to be sure um what we can do just below this iron grid here where we have the row we can actually have an ng container because we want a dom element uh we don't want a dom element but we want some logic with an ng4 so basically we want to go through each of the connection requests that we have so we can say let friend request of this dot connection profile service and actually i'll put the whole thing here now you don't need elvis operated because if it makes it past if check it's going to have that um but we're looping through all of that and now we should be able to display our image here so we've got the user full image path i want to change this so we'll change it and because we've done the hack solution we need to cast the particular friend request that we're on such that we can access the appended object property so that's the full image path and while we're here we may as well in the title here we'll get rid of one of them and then we'll write in the string interpolation we'll do the same sort of thing so we can still use the any type here we can use this javascript and we can go ahead or type script and we can get the creator first name and i'm also going to do the same thing here and just put a space here for the creator last name so let's save this and i'll get my window back up my explorer so if i look at my friend request here you can see that well user three and four they both don't have a friend request so if i just go ahead and let's see here if i log in as user 2 let's go to user two so user two has sent me a request so rather than log in and log out um actually i will just log in and log out to me the easiest thing to do here um so if i log in as john2 hotmail.com and what i want to do here is oh i wanted to log in as john three um but let's say i go to my uh popover component here so john 1 has sent us a message and we can see quite clearly that the profile image is there so now we want the ability to accept and decline the requests and show that in the ui so let's go back to our code here and if we go to our friend request popover service component and i just looking at the service because we want to use this response to friend requests where it takes either accepted or decline which is a partial of the status of the friend request but basically what i want to do here is i just want to have another method and i've got this pop over controller so because i want to close the controller in a certain scenario when there's no more um if there's if you know if you click on something and then click on something there's nothing left in there i want to just close that because it looks a bit weird if there's a box just there without any content so what i'm going to do here is i'm just going to blow this engine in of course you could refactor this out and you probably should into another function but i'll leave that up to you um is i'm going to have this a sync function here uh respond to frame request and it's a sync because i need to use the pop-over controller and i need to wait for something like that and this is just the easiest approach to do that the built-in capabilities so we know that basically this is going to take in this so it's going to be an id and a number and i'm purposely not putting the response type here because we've got this a sync keyword and then there's a promise and then it's not consistent with our observable um return statements and it's not that useful to us anyway you could put a comment here or something like that but i'm not going to worry about that so basically we're going to have um two cases here we're going to have the case that we have a handled friend request and there's also going to be a case where we have an unhandled friend request so how do you know well basically if we have a handled friend request and we can only handle one at a time so let's write this out so let's say we have a handled friend request this is going to be of the type friend request this is going to relate to our service so in our connection profile service where we have our friend request we have that object there that we're tapping into in multiple places um actually it's an array but it's a property that we're tapping into multiple places and basically what i want to do here is i want to find the particular friend request so i'm going to do this on the next line here i'm going to find the particular friend request where and it's all uh type script is inferring the type here's friend request and it's sort of implied through um what we're finding is the observable here you could add it here as well if you wanted to that's up to you but essentially i just want to get the id of the friend request and if that id matches the id that were passed in here um basically i'll be able to respond to the friend request so we'll pass the id in in these buttons here and we have access to the id of the particular user through the frame request here so if that id matches that of the uis local id in memory then basically that's that's what we want to do here let's get that handled friend request so we'll get that handled friend request back otherwise we'll have the case where we have an unhandled friend request i'm going to copy this down but use a different while higher order function here so you could have an unhandled friend request and this is going to and this you can get multiple unhandled friend requests because imagine you had 10 people send you a request you can only respond to one so when you respond to one the other nine will be unhandled so the unhandled friend request this is going to be an array of friend requests and on the friend request property we just want to filter through all of the friend requests and for each singular friend request if the friend request id is not equal to the handled friend request dot id then we have the unhandled friend request so we have information of the id of the particular frame request that we're accepting or declining and based on that id we can determine all the other unhandled friend requests you could essentially bring this code into a one-liner but i thought i'd make things more explicit here to for the understanding purposes so this means that if i go to the connection profile service i can get the friend request and then i can set that equal to the unhandled friend request so what i've done is i've taken all the friend requests i've handled one of them and i then want to remove that from the dom so you only see one of the requests or the remaining requests but then of course you need to handle the request and that gets done by setting it equal to this connection profile service and recall that this um property here or this array of friend requests this is a value that's been used uh all throughout our application and it's aware of it in the component level so if i just if there's no if there's no um if there's none left though so basically you want to do is you get the friend request here now it could be the case that you had one but then you handled it and then there's no more here to filter out and then this one got removed so then that disappears but you'll still have the empty box open and in this case it may not exist so the friend requests uh like it probably is probably an empty array but just to check if the friend requests no longer exists basically what i want to do here is i want to await for the popover controller and the popover controller knows that it's this popular rather than the other popover because we specified the component that it relates to and there's no weird behavior that interacts between the two popular components you open when you close other so you can just go ahead and dismiss this and that's an asynchronous event so that's why we have the async await keywords here um it would be too much of a pain to convert that into the observable syntax and quite frankly it's not even worth it so basically if you go to the connection profile service and you get your friend request this is essentially what you want to be [Music] working with so actually if you return if we go ahead and we return this.connection profile service then we're able to respond to our friend request here so i might actually make the type after actually i won't because of this in keyword um but you might want to comment that up the top or something like that but sort of implied through this service method here where we can respond or give our response to the friend request and i might already name this to respond to a friend request um so basically we need to pass in the id so we can get the id the particular user that we handled the requests from and we're also going to need this status response it's either going to be accepted or declined and because this is a observable we want to just pipe into this and take one you could do this pattern part one take one at the service level by that's personal preference i find it kind of if you start to do it at the service level sometimes you come to component when you forget where it's at um so it's i don't know just a preference sometimes i like to put the pipe and the pipe operators at the component level so uh when you subscribe to that method um you can clearly see in the place that you're using it the uh you know the behavior of the asynchronous operations now that's not to say that that's the right way to do it um either of them are fine uh just depends on your preference and some might even argue that you need to put this pipe take one in multiple places where you if you need to subscribe to the same method uh observable elsewhere in application and that's totally fine but i i think these couple keystrokes um you know it saves the well saves me the trouble of figuring out and going back to this service every time to check so pros and cons of both and then of course you can just go ahead and you can subscribe to that observable so with that we now have all the functionality we need to be able to uh respond to a friend request and i'm going to call this respond to friend request so that means we can simply just call this from our template now so on these buttons here i'm going to have a click event and this is where i'm going to have the respond to request function or action being called and we have the friend request and it's the id of the friend request so we don't have to do that any type here and in the first case where you accept it and pass in accepted and in the second case here you pass in the client and if i save that we can reload our page we're logged in as user two here in our database we have all pending and we're expecting because we're logged in as user two uh that relates to this user five here i believe uh or was it six let's see here oh it's four four so where we have this receiver of four and four we expect there to be the john and this other third person to be having those requests which we do so let's go ahead and accept john papinkia and that closes it up for us and if we were to [Music] and actually uh what i want to do here is the friend request um if only if the length is equal to zero well i want to close it so i'll save that and now if i decline john three that will close that and if i go to the database here i can see that we have this accepted and declined state here so if i go to join pink um will have to change this here so it's accept request is uh and it's now accepted and if i look at user3 here we want to hide this here so let's go to the profile there actually let's just log out here and sign in as john pink so i'll log out and let's just log in as john one and if i go to you can see that john 3 and john 4 have requests here so if i go click on john 2 we see that we're no longer seeing those buttons and we actually only want this for the first button here so let's save that and now we can still see the message and more so even though we're friends with john 2 now that button there has now disappeared because we have this logic where you only show that button if a request has not been sent it's pending or it's waiting for a current user response so it's either not sent or it's pending from either party if it is the case where it's pending you can disable that button but if it's not sent you won't disable that button and then you'll just show some different text accordingly so let's just go back home and i'll just refresh the page here we can see that john 3 and john 4 where you can accept john 3 and decline john 4. and if i go and have a look at john 3 here um it's it's still accepted um it's accepted but it's not showing in the ui here but if we were to take a look at the table and update it we can see the receiver of one john one has accepted the invitation from five and john one has declined the investigation with the creator id of six year and actually i'm going to leave that as an exercise for the viewer to be able to change that it's very important that you're not just following along completely um and you're able to create and build some of these things and fix bugs by yourself as well so it should be a trivial change but i'm just going to leave it there in the application and yeah that pretty much concludes what i wanted to do today so just to recap what we did is we have the ability to accept friend requests so if i go to and you can see this number two here it displays in the reverse order so there should be an example in the code base uh it shouldn't be too hard to figure out how to get rid of this one here um you just need to make a couple of changes probably so if i go ahead and i sign in as user 4 for example oh signings user 4 and if i look at user 2 here and connect with user 2 i can make a request here i've already connected with user 3 but then if i sign out here and i sign in as john2 hotmail.com and sign in here and i get this friend request and i can either accept or decline the request someone's going to accept that request and then it displays in the ui here and also if i look at the table here we see that we've got this new request and it has been accepted so that concludes the friend request management system uh we've done add and managing the requests so in the next video i would like to work on using the request to um begin chatting so i want to start working on some websocket stuff or socket io and have the ability to chat between friends in a messaging section so i'm super excited for that it's going to be really really interesting and um but before i do that i might just do a couple of upgrades so i might upgrade angular 11 to 12 and nest i believe it's seven to eight um just so we can see how to upgrade and at some point i might do some error handling and testing as well um but only if it's sort of requested i really want to work on the chatting part of the application so please let me know what you think and if what you want to be working on uh if you made it this far in the video series will be congratulations i believe this is a quite a large milestone um and we'll just be adding one more feature and handling uh different bugs and uh error handling and testing and stuff like that so if the series continues on enough past that uh if not i might be making some other clones or using other technologies and stuff like that so just let me know what you guys want to see anyone watching this video you made it this far so you know you deserve to ask for what you want to see so yeah thanks so much for watching and if you haven't already please subscribe to the youtube channel and i'll see you in the next one cheers thanks so much for watching

Channel: Jon Peppinck

Views: 214

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: -twyOu22shw

Length: 71min 58sec (4318 seconds)

Published: Mon Jul 12 2021