Add follow methods0:00
Okay, let's add the ability for users to follow and unfollow each other from within the app. So when a user goes into another user's profile here, this should show either follow or unfollow, depending on if they're already following them. So let's add a few methods to our User model here. So this is our relationship, but we also want to add the ability for them to follow or unfollow. So let's say follow. And we can follow another user here. Let's do the same for unfollow. So let's just change this name to unfollow. And let's add one for isFollowing to check if the user is following another user.
So let's just change this name to unfollow. And let's add one for isFollowing to check if the User is following another User. And we'll name that isFollowing. So pretty straightforward, we can just make use of this relationship we have here. So for follow, we can return this $follows. And we can just attach a User to the pivot table. So attach the User. Pretty much the same thing for unfollow, except we're using detach here. And then for isFollowing, we can grab the relationship. And this returns a list of Users.
Test in Tinker1:18
And then for isFollowing, we can grab the relationship. And this returns a list of users. And then we can just check if they are following a certain user. So we can say where id is userId. And we can check if there's a record, so we can use the exists method. Okay, so let's try this out. Let's go ahead and php artisan tinker. And let's just grab a few users here. So $user1 equals User::find(1). Let's do $user20.
So $user1 equals $user->find(1). Let's do $user20. Remember, $user1 to $user20 are all following each other. So we'll say 20. And then we'll grab $user21. Okay, so $user1. Let's try the isFollowing method first. $user1->isFollowing($user20) should be true. And it is. But $user21 should be false.
And it is. But 21 should be false. Okay, cool. So let's go ahead and follow user21. So we can use the follow method. Okay. And now we can check again. And now it should be true. Cool. And let's go ahead and unfollow this person.
Create follow API routes2:45
Cool. And let's go ahead and unfollow this person. And we can check again, and it should be false. Okay, so everything is working. Okay, let's exit out of this. And let's add a few more endpoints to our routes/api.php. So let's go to that file. And let's add endpoints for following, unfollowing, and checking if a User follows another User. So we'll add that down here. Actually, let me just grab one of the route signatures with the middleware.
So we'll add that down here. Actually, let me just grab one of the route signatures with the middleware. So we'll grab this one here. And we'll go down here. And we'll start with follow here. So we'll name it follow. And we want to follow a certain User here. So we'll do it like this. And it has to be a POST request. And we do have the middleware to make sure that the User is logged in.
And it has to be a POST request. And we do have the middleware to make sure that the user is logged in. So the logged in user should be following the user that's passed through here. And we have to make sure to accept that user here in the params. Okay. And we can just make use of that follow method that we just created. So we can do auth()->user()->follow($user) coming in. And that's basically it. And we just have to make sure to return a JSON response. So let's do that.
And we just have to make sure to return a JSON response. So let's do that. Let's get rid of this. Return response()->json(). And let's just add a string here. And let's say 201 created response. Okay. And for unfollow, it's basically the same thing. So let's just duplicate this. Rename it to unfollow.
So let's just duplicate this. Rename it to unfollow. So right here, it's unfollow. And I have it as a POST request, but you can make it a DELETE request if you like. And just change this to unfollow. Let's change the text to unfollowed. And that should be good. And let's do one more for isFollowing. So let's duplicate this. And I have it named isFollowing, is_following.
So let's duplicate this. And I have it named isFollowing. And we're checking if the logged in User is following the User that's passed in. And we can just do it directly in the JSON here. So let's get rid of this. And we can just say auth user is following the User passed through. Okay. And we'll stick to a 200 here if they are following them.
Test endpoints in REST client5:24
Okay. And we'll stick to a 200 here if they are following them. Okay. Save that. And let's give this a try in our REST client. So we have to be logged in. So let's make sure to hit that endpoint first to grab the token. So let's fix the password here. Let's hit this. We do get a token.
Let's hit this. We do get a token. Let me copy that. Okay. Let's duplicate this. Let's say is_following. And let's just move this up. And let's start with is_following. So it's is_following. And let's check user 21 first.
So it's is underscore following. And let's check user 21 first. Okay. And we don't need any of these. But we do have to pass through the token. So let's do that. Bear token, paste the token in. And let's see if I did this right. Okay, so false. But we are following user 20.
Okay, so false. But we are following User 20. So let's try that. And it is true. Okay, so that's working. Let's go ahead and follow User 21. So we'll change the endpoint here. 21. Okay, followed. And again, if we change this to isFollowing, it should be true now.
Hook up profile UI7:06
So now we just have to hook it up to our front end. So let's do that. So back to our front end. This should be within the profile screen, which you see here. And we need to add some state here. So we need a piece of state to check if the logged in user is following the user on the page. So let's say const isFollowing and setIsFollowing. Let's default it to false. useState(false).
Let's default it to false. Use false. Okay. And we need the token to pass through. So we have to grab that from our auth context. So let's say const user equals useContext like we've been doing. And the context is authContext. And it's saying user has already been declared because we're using it up here to grab the user profile information. So let's rename it here.
to grab the user profile information. So let's rename it here. Just say user from context. Okay. And auth context was not imported correctly. It's not finding it for some reason, so let's just do it manually. So let's just say import auth context. Okay. Let's go back to the profile screen. And first, let's check if the logged in user is following this user.
Let's go back to the profile screen. And first, let's check if the logged in user is following this user. And this button should show either follow if they're not following them or unfollow if they're already following them. So from within our useEffect, let's add another method here called getIsFollowing. Okay. And it's going to be almost the same as this, but we're hitting a different endpoint. So let's just grab this definition here.
but we're hitting a different endpoint. So let's just grab this definition here. Let's paste it in here and let's rename it. So get is following. Okay. And we also need the token. So let's just grab that from another screen. So here's the token. And we should have a loading state for this as well, but I'm going to skip that part and be lazy.
And we should have a loading state for this as well, but I'm going to skip that part and be lazy. Okay. And this should be user from context. Okay. And the endpoint is is_following. And we're checking if we're following this user. So this is the correct userId, which is coming in from the params and responseData should be either true or false.
which is coming in from the params and response data should be either true or false. So we can just set that piece of state that we made. Actually, let's just console.log that for now. So console.log(response.data). And we might as well set that piece of state. So setIsFollowing to response.data. Okay. And for the error, let's just skip that and just console.log it.
And for the error, let's just skip that and just console.log it. Okay. So let's give this a try. So this should be true since personOne is following personSeven. So let me save this. And let's go here. Let's reload this. Let's go to personSeven. And we get an error.
Let's go to person seven. And we get an error. So we're getting a 405. Let me just console.log error.response. Maybe that will give us a better error message. And you can see I am using get and it should be a post request. Actually, it should be a get request since I'm just checking something. So let's change that to get in the front end or in the back end. I mean get here. Okay, and we can try this again.
I mean get here. Okay, and we can try this again. So let's reload the app. Let's go to person7 and we are getting true, but it's happening three times. So I think that's because in our useEffect. We also have this page dependency here. So if you want you can just make another useEffect hook and that should only run once. So let's do that useEffect get isFollowing and let's make this an empty array. Okay, let's try that one more time reload.
and we can conditionally render a different button based on that piece of state. So let's do that. So let's look for that button. It is called follow. So where is that? So here's the button and we want to change the button to an unfollow button if we are already following this User. So let me just wrap this in a view first. And then we can do a ternary here. So we have that piece of state called isFollowing. So if we are following but a question mark here, let me just end that curly here and let's put some brackets around this.
So if we are following but a question mark here, let me just end that curly here and let's put some brackets around this. Okay, so this is the true case and then we can do the else case here. Okay, so let's just duplicate this, put this in here, and that looks good. So if we're following this should be unfollow. And this should be follow. Okay, so we are following this person. So it should be unfollow when I save it. Okay, and it is cool. So we just have to add a method here for follow and unfollow. So let's say onPress equals
Okay, and it is cool. So we just have to add a method here for follow and unfollow. So let's say on press equals and let's say let's name it unfollowUser and we have that userId coming in from the params. So let's say route.params.ID or userId. Okay, save that and same thing for the other case, but we'll make another method for that. Okay, let's paste that in here. Should be called followUser. And we can define those methods up here.
Should be called followUser. And we can define those methods up here. So unfollowUser and followUser. So let's make that up here. Let's put it underneath our getIsFollowing. Let's just duplicate this. This one is followUser. It takes in a userId. And let me just scroll this down; should be a POST request. The endpoint is follow. And we are following this user here. And when it's successful, we can set isFollowing to true. So let's set this to true.
And we are following this user here. And when it's successful, we can set isFollowing to true. So let's set this to true. And let's just add an alert. So the user knows that it was successful. So we'll just say alert.alert('You are now following this user.'). Okay. So unfollowUser is pretty much the same thing. So we can just duplicate that. Okay, unfollowUser. And we can change this to isFollowing false and we can change the message here. 'You are now unfollowing this user.' Okay. Does this work? Let's save this.
and we can change the message here. You are now unfollowing this user. Okay. Does this work? Let's save this. So I'm currently following user 10. So let's just check the database to make sure. So let me refresh this follows table. Let's go to user 1 who I'm logged in as and user 1 is following user 10. So if I unfollow this person. That did not work. Sorry, I forgot to change it to unfollow the endpoint unfollow. Let's just reload to make sure. So I'm following everyone on this screen, but let's go to person 10 again. Let's open up our database here. Let's unfollow. Okay, there's the message. And if I refresh this,
but let's go to Person 10 again. Let's open up our database here. Let's unfollow. Okay, there's the message. And if I refresh this, this entry should be gone. So let's refresh. And it is gone. If we try to see it, it is gone here. Cool. So it is working. Let's go ahead and refollow this person. And that doesn't work as well. So this onPress should be obviously on the other button. So let's paste that in and that should fix it. So now let me go back to my database first. If I refresh this, still not here. 110 is not here. But if we follow, there's the message. And if I refresh this,
Hide button on self16:25
still not here. 110 is not here. But if we follow, there's the message. And if I refresh this, there is 110. So everything is working. So one more case here. If we are on our own profile, we don't want to see this button at all. So let's look for myProfile here. It should be somewhere in here. Okay, so this is myProfile here. We do not want to show the button. So let's just wrap this entire view here in another conditional. So let's just say we'll grab the $user from the context where $context->id is not equal to the $user on the screen.
So let's just say we'll grab the user from the context user from context.ID is not equal to the user on the screen. So route.params.userID and go ahead and render everything here as we saw. But if they are equal, then this is our own profile and don't render anything at all. So let's close this out here. And we also have to wrap this in brackets. Okay, let's save that. And now the follow button is gone. If this is our own profile, let's just make sure it still works on other people and it looks like it does cool. So one more last test. Let's go to the other screen here so we can follow other people.
let's just make sure it still works on other people and it looks like it does cool. So one more last test. Let's go to the other screen here so we can follow other people. Let's follow person36. So let's open up their profile. Let's follow them. I'm now following this User. Let's hit OK. Go back to our tweets page here. Let me refresh and we should have the tweet by person36 because we followed them. So let me just pull to refresh here. Okay, and there is the tweet from person36. So we can now follow and unfollow other Users in our application. So let's go ahead and make a commit here. Where's this console.log coming from? So it's coming from here from the isFollowing. So let's remove that.
So let's go ahead and make a commit here. Where's this console.log coming from? So it's coming from here from the is following. So let's remove that. Save that and we can make a commit here. So this is our front end. Say git add, git commit. Allow users to follow or unfollow each other. And for our back end, let's say git add, git commit, add endpoints for following and unfollowing users.
