Planning Follow Button0:07
Let's now work on the follow functionality. So take a look. I'm on my feed here and at the moment I don't see any button, uh, to follow the user. Maybe we could include this with the context menu, but also if I click on the profile itself, I still don't see a follow button. Okay. That's okay. I know the functionality is implemented behind the scenes, we just don't have anything to my eyes and the front end.
behind the scenes, we just don't have anything to my eyes and the front end. So I think what we're gonna do is because we're skipping the forms, uh, for this series, at least right now, I'm gonna swap this out with a follow button. Let's get to work. I will once again go into our profile page and let's see if I can find it. Edit it must be in the header. Yeah, here we go. So we have an anchor tag to edit profile.
Wiring Follow POST Link0:47
Edit it must be in the header. Yeah, here we go. So we have an anchor tag to edit profile. It currently doesn't do anything at all. Alright, let's make this a button. So here's what I'm thinking. Uh, why don't we see if I can use an Inertia Link tag here, but I will be explicit that we're gonna make a post request here. So if we go into the routes file and we scroll down, I know we have follow functionality.
So if we go into the routes file and we scroll down, I know we have follow functionality. Yeah, here we go. So it looks like Jeremy has two endpoints. They are, uh, accessible via POST requests. One to follow, one to unfollow and notice the named routes here. And it looks like the only thing I need to provide is the profile's handle. Okay? So if I switch back, maybe I can say, all right, the method is always gonna be POST the HA is basically
Okay? So if I switch back, maybe I can say, all right, the method is always gonna be post the HA is basically where we are posting to. So that would be route profiles follow, and then let's send through the corresponding profile. Next, I'll change this to follow and let's see what that looks like. Alright, so obviously we have more to do here, but I do see follow. Now let's see what happens.
but I do see follow. Now let's see what happens. When I click on that, it's gonna make a POST request to this endpoint. As we saw that will hit this route here. It's gonna load the ProfileController, uh, and a follow action. The follow action grabs the current profile and it uses this createFollow method. Okay? And then it's returning.
and it uses this createFollow method. Okay? And then it's returning. Uh, JSON, why don't we just once again return back and then perhaps later we should include some flash messaging as well. So we'd get something like that. And then why don't we do the exact same thing for the unfollow functionality just to save ourselves a little bit of time. All right, let's cross our fingers and see if this works.
Verifying in Database2:28
to save ourselves a little bit of time. All right, let's cross our fingers and see if this works. Now actually, I'm thinking at the moment we don't have any indication that it's gonna work, but of course we can switch over to the database to see if that follow relationship was created. All right, cross the fingers. We click on it, it redirects back. We assume it's very fast. So yeah, let's switch over to TablePlus. Alright, so let's go into the follows table.
So yeah, let's switch over to TablePlus. Alright, so let's go into the follows table. Let's grab the most recent one and hmm, I'm recording on November 20th and I don't see anything here, so maybe it didn't work. Alright, that's fine. Uh, let's switch back and see if maybe there was a validation issue. And let's do our sanity check. Hello, are we hitting this endpoint one more time? We hit it and yeah.
Hello, are we hitting this endpoint one more time? We hit it and yeah. Okay, so that's working and it's creating the follow, it's gonna create profile. So this looks right. Oh, I know what it is. I know what it is. I bet we're already following this person, uh, from the database cer. So it's running first to create here and I was expecting a new record to be created, but instead it just already had one.
and I was expecting a new record to be created, but instead it just already had one. So it returns that. I bet that's exactly the case. So, um, why don't we do this? Um, let's figure out who I am. I am Rosalyn. Okay, let's see if I can find that record. There's Rosalyn. So I have an Idea of 7, and now let's go into followers and look for, uh, a record where the followerId is 7.
and look for, uh, a record where the followerId is 7. And yeah, I bet that person we're following is one of these. So let's just clear these out entirely and try again. All right, one more time. I click follow. And with any luck this time if we return to that follows table, get the most recent one. There we go. Okay, so everything is working. I was just a little bit confused as usual. So now we just have to update the
Detecting Follow Status4:21
I was just a little bit confused as usual. So now we just have to update the display of the button, right? If we are currently following them, then it should say maybe unfollow. Alright, so how do we figure out as the current User, am I following a given profile? Well, let's see what Jeremy implemented. I'm gonna go into profile and I'm just looking for stuff related to followers.
I'm gonna go into Profile and I'm just looking for stuff related to followers. All right, so he has a method to fetch the relationship for all of your followers. Uh, another one to fetch all of the people that this Profile is following. Uh, but I don't see any, any Boolean like isFollowing or following. So maybe, maybe that wasn't implemented. Let's go into User. Is there anything related
So maybe, maybe that wasn't implemented. Let's go into users. Is there anything related to following there? No. Um, okay. So maybe, maybe we can implement this ourselves. Here's what we'll do on the profile. Very quickly, I just wanna inspect what is being fetched there. And yeah, we have the followersCount, but again, no information about the current user's
And yeah, we have the followersCount, but again, no information about the current user's status or relationship. So if we were to manually do this, let's see, let me think. Um, if I were to say something like hasFollowed, and that seems to be the convention that Jeremy used, you'll remember in PostController, uh, like for one of these, he does stuff like this where he loads an exists relationship, uh, likes as hasLiked, determines whether or not the current user has liked this.
and exists relationship, uh, likes as hasLiked, determines whether or not the current User has liked this Post or has the current User has reposted. Um, this. So I'm gonna stick with that same convention by returning to our ProfileController and this will be, hasFollowed. And yeah, I think, let me do this very quickly. Maybe we grab the authenticatedUser. Uh, I wanna get the profile and I know there's a followers relationship,
Uh, I wanna get the profile and I know there's a follower's relationship, so I wanna check the followings relationship for the current User and determine whether or not that includes the current profile. Yeah, that's what I wanna do. So maybe we'll write it out long form, get the followings relationship where, and then we want the following_profile_id, and that's the name of the field in that table.
and then we want the following profile_id, and that's the name of the field and that table. And let's see if we are following the profile. And does that exist little long here? Uh, I think that might work though. So let's come back and take a look refresh and sure enough, now we are following that current profile, okay, but this is super verbose. So what I might do instead, uh, again, Jeremy has these dedicated query classes.
Adding isFollowing Helper6:50
So what I might do instead, uh, again, Jeremy has these dedicated query classes. Maybe it just needs its own, but I don't wanna do that. Um, instead we're just going to add a scope. So let's go into Profile and maybe write down here, let's add a method like isFollowing might be useful or following whatever you want. And this will return a boolean and yeah, we just need to know is this profile
And this will return a Boolean and yeah, we just need to know is this profile following another profile? All right, so we could just say, all right, well we're just gonna repeat exactly what I had right here. So I'll copy all of that, switch back and paste that in. Yeah, that looks right to me and we can return the results. Okay, so now we have a little helper method we can reach for. Is the authenticated user, are they,
method we can reach for. Is the authenticated user, are they, or is it following the profile, uh, for the current page? Once again, if I come back, I should still get true and we do right here. Perfect. Alright, and that's all I'm gonna do here again, maybe that should go somewhere else. Um, if we kick it back to Jeremy, maybe he can refactor that a bit.
Um, if we kick it back to Jeremy, maybe he can refactor that a bit. Alright, so finally, uh, when profile gets converted to a resource, we need to make sure that we reflect that and yeah, maybe what I could do is right here is say, hasFollowed is going to be whatever currently exists for that. If anything, otherwise default to false. And this will handle the case where, uh, maybe you're not signed in.
Toggling Follow/Unfollow UI8:15
And this will handle the case where, uh, maybe you're not signed in or null is returned for some reason. Okay, so now I can return to our show page into the header, down to the link. Here it is. Let's put this on its own line. And yeah, now I can say, well if the profile has been followed by the currentUser, then unfollow, otherwise follow. Alright, switch back.
otherwise follow. Alright, switch back. And now it says unfollow, but just remember, uh, because Jeremy set up two different endpoints, this would need to be tweaked as well. Uh, so I could say, um, once again, profile has followed, then profiles unfollow, otherwise profiles follow. All right, so we come back and now it says unfollow, we click it and that seems to be working great.
All right, so we come back and now it says unfollow, we click it and that seems to be working great. Let's double check in the database. So if I click follow, this should be registered in the follows table. And if I switch to TablePlus, sure enough, it is. However, if we now unfollow him and switch back, that should disappear on refresh and it does. All right. So it just took a little bit of effort,
refresh and it does. All right. So it just took a little bit of effort, but I think we're good to go.
