Build a Friend System in Laravel
This episode is for members only

Sign up to access "Build a Friend System in Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
12. Adding more profile page logic

Episodes

0%
Your progress
  • Total: 1h 16m
  • Played: 0m
  • Remaining: 1h 16m
Join or sign in to track your progress

Transcript

00:00
Let's return back to the profile page that we saw earlier and just look at some of the logic around this. If I go ahead and add a Mabel as a friend
00:09
and we come over and we accept this and we come back over, it returns back to add as a friend. That's just because we only have one check over on that profile index page
00:20
and that is checking if we have a pending friend request and otherwise we're just showing add as a friend. So clearly we have a little bit more work to do in here. Now I don't really like nested if statements,
00:31
but we're going to add another if statement inside of this else to determine if we're already a friend of Mabel's and we're going to have the ability to delete this friend or remove this friend and we're also on the other user's profile
00:45
going to have the ability to accept this from the profile page as well. So the first thing that we'll do is just come up here and we'll wrap this entire thing in an if statement and this is going to be to check if the user is already a friend with this user.
00:59
Otherwise, we're going to go ahead and do all of this stuff here. So let's just collapse these just so we can see what we're doing and go ahead and end that if in here and we'll just say you are friends.
01:13
At the moment, we're just passing true through so that's always going to say that but we can go ahead and fill in a method to do this. Now for this what we want to do is ideally have an is friends with method
01:24
which checks if we are friends with a particular user. So we can go over and just underneath where we created out the has pending from request. We can now introduce is friends with
01:37
because of course we have that friends relationship now that's being merged in. So let's go ahead and pass in a user here and we can just say this friends we can now access that relationship here and grab the collection and say contains user.
01:54
So if we are friends with someone that's going to return true or false. So here we can say auth user is friends with this user whose profile we're viewing then we can say you are friends just to demonstrate that if we head over to profile 3, of course that doesn't work because we're not friends with Tabby.
02:14
So we could go ahead and add the unfriend button in here as well if we wanted to. So why don't we just grab in fact, we'll do this from scratch. So let's just create out a div in here with a space X of 1 and in here it will say you and and then the user's name are friends
02:36
and then we'll create the form out here. So we will steal that form to delete that from request. So let's add that into here and we can say unfriend and that if we pass friend through should work.
02:55
Let's go over and undefined variable friend. Yeah, of course that should still be user. There we go. So I can unfriend Mabel directly from her profile page. Let's re-add her as a friend and accept this and let's go over and there we go.
03:10
Okay. So now what we want to do is if we unfriend Mabel and we add her as a friend and we come over to Mabel's account. If we now head over to Alex's profile who has just added Mabel as a friend. So Mabel now has a pending friend request from Alex.
03:28
We don't want this to be add as a friend. We don't even have any protection against that yet. We'll do that in a moment. So if for example, Alex has already added Mabel. We have this in here. Mabel can now technically add Alex as a friend
03:41
and now we've created a duplicate relationship in here, which we don't want. So we're going to need to protect against that as well. Instead what we want to see over here is Alex has sent you a friend request. Do you want to accept it? So back over to our code.
03:56
Let's have a look down here. If this user has a pending request for this user, that's great. What we can do now is say else if, add that else back in here and we can say user has pending friend request for auth user. So we basically do it in the reverse.
04:19
So has sent you a friend request. Let's go over, give this a refresh over on Mabel's account. And there we go. So Alex has sent you a friend request because we're looking at Alex's profile in the context of Mabel.
04:35
So now we can pretty much just do the same thing. Let's again create out a class in here with a space X of one and let's fill this in properly. So we'll say user name. So we're looking at Alex's profile from Mabel has sent you a friend request
04:53
and then we can implement the form to reject or accept this. So down here, let's go ahead and create this form out and let's actually create two of these. So we'll create maybe in fact, we'll create two inline forms.
05:08
So let's say class of inline and the action here we can go through to this one. And this will be friend patch and this will be to accept it. So let's just grab the cross site request forgery token.
05:26
Let's add the method and all of this is over on the friends page. So you don't have to duplicate this but it's just nice to have it on the profile page itself. Let's grab the button here and this will be to accept this friend request.
05:39
So let's say accept and I think that looks good. Let's go over to Mabel's account and let's just make sure that is a span and let's go over to here and we can accept that
05:56
and it's just add a full stop in there as well. So I can accept this from request now. It doesn't quite work at the moment. So let's just see why and yeah, this needs to be a method of post.
06:09
Let's go back over to Mabel's account accept and there we go. Great. So you and Alex Garret Smith are friends. So if we just go back over to Alex's account again and add Mabel as a friend and back over to here,
06:21
let's just fill in reject and then we're pretty much done. Okay, so let's just copy this form down here switch this to reject switch this to delete and switch this to destroy that should be everything we need. So if we head back over to Mabel's account reject, there we go.
06:45
So we have rejected Alex's friend request. We can add Alex as a friend back from there. And of course this works in exactly the same way. We're now both friends together.

Episode summary

In this episode, we jump back into the profile page and work on making the friend logic much smarter. Up to now, the "Add as a friend" button didn't always reflect the actual friendship status between users, so we start cleaning that up.

First, we add additional checks to determine whether two users are already friends, if there's a pending friend request, or if a friend request has been received by one user from the other. This way, the profile page can correctly show the appropriate action: whether to add as a friend, accept a friend request, or indicate that you are already friends (with the option to unfriend them).

To make this work, we implement an isFriendsWith method, which lets us check if two users are friends. We also prevent duplicate friend requests and ensure users can't add each other multiple times. Now, if a user has a pending friend request from someone, they’ll see the option to accept or reject it directly from the profile page.

We walk through updating all of the conditional logic and forms to support accepting, rejecting, unfriending, and sending friend requests—all from the profile page, making everything feel much more seamless and intuitive.

Episode discussion

No comments, yet. Be the first!