Building Relationships: The React Front End

It's time to update the React client to reflect the changes made to the back end. In the last post, I created the first relationship between User and Group. Now, I need to update the front end client in a number of ways. I need to make it so only a signed in user can create a group. I need to make it so that only the user that created a group can update or delete that group. As far as viewing the list of groups, as well as the details of a specific group, these can stay the same for now since I want unauthorized users to be able to see all the groups, but only to be able to interact with a group once they are signed in.

I'm going to start with the add/create group functionality. First, I need to figure out a way to make it so that only an authenticated user can add a new group. My first thought is to use a shortcut- I could update the entire layout using the existing Header functionality. Currently, an unauthenticated user sees the Sign In and Sign Up options in the header and an authenticated user sees the Change Password and Sign Out options. I could just move the Add Group link from my Sidebar to my authenticated Header options and call it a day, but that would be taking the easy way out and would disrupt the original layout for the app.

Instead of taking the shortcut, I make a few updates to the Sidebar logic. First I have to go to the App.js file and pass in the user prop to the sidebar. This is what my conditional will hinge on. If the props.user exists, I will show the option to Add Group in the Sidebar. If props.user does not exist, I'll hide the New Group link. Doing it this way ensures that only an authenticated user has access to the link that directs to the add group component.

The only other way that a user could access the add-group form is to type in the /add-group route in the url of the app. To remove this option I go back to the App.js file and update the Route of the add-group path to be an Authenticated Route. This update makes it so the add-group path will only render a component if a user exists.

I do some testing, first to see if I'm able to access the add group component when I'm not signed in on the app. I'm happy to find that the Link is appearing and disappearing on sign in and sign out as intended. I also find that typing in the /add-group path myself in the url does not grant access to the add group component.

Adding the ownerId to display in the app.

I also go ahead and make a few different test groups with a few different users. The last test that I do for this part is make a quick addition in the Group component. I add a new element which will display the Owner (user_id) of the user that created the group. This way I, as the developer, can see which user id created which group. I'll probably take this out later, but for now it'll save me some time during the dev process.

Satisfied with my updates, I commit the changes and look ahead to the edit and delete functionality. I want to start with the delete functionality, but first I decide to add some additional UI logic depending on the status of the user in the app.

Ultimately I want for there to be three conditions. If the user that's currently logged in is also the owner of the group, then they should have the options to update or delete the group. If the user that's logged in is not the owner of the group they should have the option to join the group. If no user is logged in, I want there to be a message that says 'please sign in to join group'.

The first thing I do is go back into App.js and add the user prop to the Group route. This way, if a user exists, the user data will be passed down to the Group component when it's rendered. Given that there are three conditions that I'm working with I'll edit the existing component, and then add two more.

The first condition states that if this.props.user is false (no user signed in) render the component but, instead of showing the edit and delete buttons, display a simple <p> element with the text 'Please Sign In to Join Group!'.

The second condition states that if this.props.user.id is equal to the ownerId, to render the component with the Edit and Delete buttons showing. This condition means that the signed in user is the same user that created the group.

The final condition is that the user exists, but does not match the owner. For this condition, I'm rendering a button that simply says 'Join'. I'll be adding the join feature down the line, so for now it's just a button that doesn't do anything.

I decide that it's time to test out all my new render options. I click around between groups while signed in under different users, or even not signed in at all.

The new componentDidMount() function.

At this point I realize that I want to make a change in the way that the data is being passed through the app. I want to make is to that the Group component is pulling data directly from the API, and not using the props. By using the componentDidMount function, an axios call, and the setState function, I can populate the date for a group when it's selected. If I leave the Group component as it is now, by relying on props to populate the group data, the user can't access a group directly unless they get there from the Groups screen. This is not intuitive and could cause confusion, so I'll avoid it my using componentDidMount(). This will ensure that the Group data will always be available (given a connection to the API) and will load even if the Group is not accessed directly by clicking a link on the Groups component. This makes the app run more intuitively, even if it means the app will be more dependent on the API.

Once I get the new API call setup, it's time to get the delete button working. This is fairly straightforward, all I need to do is add the header and token to the axios call in the handleDelete function and it's working with no issues.

Finally, I get to the Edit Group component. First I update the Route in App.js to make it an AuthenticatedRoute, and I pass along the user object. This will ensure that only an authenticated user can access the Edit Group component at all. Next I go into the Edit Group component and update the axios call in the handleSubmit function to include the header and token, along with de-structuring the user object.

One potential bug that I thought of is that the user could access the Edit Group component by typing in the url manually. I tested this out and, since the Edit Group component relies on props from the Group component in order to populate the existing Group data a Group can't be edited this way. This is, however, something that I want to keep in mind, for security purposes, moving forward.

I've successfully updated the React client for the relationship between users and groups. Anyone can view the list of groups and the details of a specific group. Only a signed in user can create a new group and see the option to join existing groups. Only the user that created a specific group can access the edit or delete options for that group. Satisfied with my updates, I commit the changes.