Let’s Be Friends
Social media, in my own view, really started to take off around early 2010s when I noticed more and more movies and celebrities started using it. I knew back then it would be big because at the end of high school, I saw that if I can use it to stay connected with friends, I knew celebrities can use it to become connected to their fans more than they ever have in the past. It was great to see our friends and favorite celebrities post personal pictures and videos to see how they are doing.
I started using Facebook back in 2009 and Instagram in 2015, and one thing I see that both have in common are friends/ followers list, but I never really knew how it was build until now. To make this possible, we need to operate in the back end to send the data and have the front end display the request to be friends. I used Rails and React to build this.
The first step is in Rails. We need to make a friend request relation to the student. Each student has many friend requests as a receiver and requestor.
We needed a foreign key here because it will allow the student to send a request to another student. The student does not have such an ID so we need to make one for the student here.
The next step is to show the entire controller for friend requests, as shown below.
Now that is all in the back-end. We can start to focus on the front end. First, we go to App.js. In this file, we need to go to our state and include the data for friend requests.
With this state, we can see the student send and receive requests on the front end. The next step is fetch the data from the back end and update the state of a student from a possible friend to a requestor or receiver.
We can see the requestor ID and name is the student name and ID, while the receiver is the target student name and ID. We also see a status that goes to “pending”. The next step for the student is to decide what to do with the request, that is delete it or accept it. It is an easy task.
This is all. The referenced article was used to see how it was done, though the front end was done in JavaScript, but React is very similar with some changes. I hope this article helped to see how to make a friend request.
References
