Code Cleanup and UI Updates

Today I'm working on cleaning up the code and trying to make it more efficient where possible. In previous posts I had noted places where I felt I could have coded differently or better, so today I'm going to do the updates.

To begin with, I open up the Groups list component. I'm using react-bootstrap for layout and styling in my app. Right away, I can see that I didn’t use the 'React' way of implementing bootstrap, so I'm going to go ahead and clean that up. I update the list, list items, and assorted divs to use the react-bootstrap conventions of using Container, Row, and Col elements. I double check on the app and confirm that my updates do not break in the interface, and I'm happy to find that the interface is still intact.

The left image is the Groups list using HTML elements (ul, li, divs). On the right, I've updated the elements to use the react-bootstrap layout, replacing the HTML elements with the react-bootstrap elements. Next, I'll take a look at the individual Group component.

The first update I need in the Group component is to the componentDidMount() method. When I updated the component for memberships, I needed to determine if the current user was already a member of the group. To do this, I had two different axios calls depending of if the user existed or not.

I know that I'm repeating myself unnecessarily here, and to fix it I use the ternary operator. Instead of using a conditional to determine if the user exists, and then if the user is a member, I can do this all in one step. In the setState method, I add a ternary to the isMember property. By doing this, I'm saying that if the user exists, check the memberships array in the response to see if there is a membership with the user_id that matches the current user id. If there is no existing user, simply keep isMember false. By making this update I've cut the length of the componentDidMount() method in half.

By using the ternary operator I can determine if the user exists. If the user does exist, I use the JavaScript array method .some() to determine if there is a membership with a user_id that matches the user.id

Next I move over to the AddGroup component. After review I realize that I'm passing along some unnecessary data, specifically in the component state. I have an array for users that I don’t need. I do some testing and confirm that this users array isn't needed when creating a group. I think I had it in originally when I was setting up the memberships and then never took it out.

At this point I'm happy with the code in the AddGroup component but I'm not satisfied with the styling. The component is just kind of thrown on the screen and isn't very nice looking, so I spend a little time updating the look and feel. I update the title to say 'Create a New Group'. I also update the h4 elements to actual label elements. This makes the entire component feel a lot more natural.

I also add placeholder to the city and state inputs to make these a bit clearer. I update each of the labels themselves to be a bit more accurate and descriptive, so instead of sport and about, I have group name and description. I decide that for the mobile view I want the input's themselves to take up 100% of the width of their container, so I give add this to the css. I also give the inputs a light border and a small border radius. Finally, I add a new div for the date and time info. Since I want these to share a line, I give the new div the className of type-input and style these inputs and labels to fit on one line.

Finally, I copy these changes over to the EditGroup component so that the styles match. In the end I'm much happier with the feel of the forms for AddGroup and EditGroup.

The first two images are the updated AddGroup and EditGroup components, and the final two are the old versions.