React: Updating Join/Leave Group

Today I want to add some functionality with joining and leaving groups. Right now, when a user wants to join a group, they can click the 'Join' button and if successful, the 'Join' button becomes the 'Leave' button. The problem is that the 'Leave' button doesn't actually work right away since the app doesn't add the new membership to the state. My goals for today are to have the join and leave actions update the memberships array in real time, to have the number of members indicator respond appropriately, and to add confirmation modals for join and leave to confirm the user intention.

On the left, the 'Join' button appears if the user is not already a member. On the right, the 'Leave' button appears if the user is already a member.

I'm going to start by updating the handleJoin function. handleJoin is called when the 'Join' button is clicked and sends a request to the backend to create a new membership using the user id and group id. To update the memberships array I'm using the response from the server to push the new memberships to the memberships array, and then updating the state of the component.

Taking the existing group from the state, pushing the newest membership from the response.data, and then using setState to update the group.

Using this technique, the indicator that shows the numbers of members in a group automatically updates! Since I'm using the memberships.length property to show how many memberships there are in a group, by pushing a new membership, the indicator increments by one.

I'm going to follow similar steps for the handleLeave function, however, this is a bit trickier because instead of adding a new membership to the array, I need to remove the correct membership from the array. To do this, I'll first need to find the correct membership, and then remove it from the state.

To accomplish this I'm using the .find() array method. In the first highlighted box, I'm setting the membership by finding the object in the memberships array whose user_id matches the current user id. Once I have the membership I'm getting the index of it using the indexOf() method (in the second highlighted box. Using the splice() method, I'm removing the membership using the index. Just like with the handleJoin function, since I'm updating the memberships array, the memberships indicator automatically reduces itself by one!

Finding the membership of the current user, finding the index of the membership, and then deleting the membership using splice.

Great! Now the user can join and leave a group without having to reload the page or go back to the Groups list! The main problem now is that there's no buffer for joining and leaving. If the user wants to, they could just spam the button 100 times, constantly joining and leaving a group and creating a bunch of useless memberships (that would each be deleted each time, but still, it's not really great).

To fix this I'm going to add modals using React Bootstrap. I'm thinking about the modals as a kind of confirmation. When the user clicks 'Join' I want the modal to pop up and say 'are you sure you want to join X group?' and 'are you sure you want to leave X group?'

I start by going to the React Bootstrap documentation and reading about using Modals. The documentation can be found here. I'm going to start with the modal for 'Join'.

According to the docs, the best way to have a modal appear is to use the component state. Since I'm going to have 2 different modals I'm going to need 2 new state properties. I start with adding showJoin to the state, and setting the default value as false. Next, I update the 'Join' button with a new onClick method called handleShowJoin. Now, when the user clicks the 'Join' button the state.showJoin updates to true and the modal appears. In the modal itself, I add the old 'Join' button with the handleJoin function on click. I update the modal use the name of the group as well.

Great! Now the modal appears every time a user wants to join a group! I follow similar steps to have a different modal appear for leaving a group and I'm satisfied to find that everything is working!

One additional item I had to change in the handleJoin and handleLeave functions was that, in order for the modals to close on successful action, I had to add a handleClose method. handleClose updates the showJoin and showLeave in the state to false so that it will close whichever modal is currently open.

Now I'm feeling much better about joining and leaving groups! The memberships indicator updates in real time and modal confirm the user's intentions before each action!