Adding a Profile and Desktop Styling

Today I want to add a 'Profile' view to the app. This view will contain a list of the created groups for the current user. To start, I'm going to add a new link to the authentication nav bar. Once the user is signed in, link named Profile with appear to next to the Change Password and Sign Out links.

The 'Profile' link while selected, displayed in the authentication nav element.

Next I'm adding an AuthenticatedRoute to App.js, which will provide the patch to '/profile'. The new route passes along the user prop. I'll use the user id from the user object to filter the list of groups in order to display the groups that the current user is the owner of.

Now I want to create the Profile.js file. I create a new folder for the profile inside the components folder. Inside the profile folder I create Profile.js. To start, Profile.js will be an extremely basic functional component. I make a simple <p> element stating that this is the Profile component so that when I go to test the output so I know that the link and path are working.

Once I've confirmed that Profile loads when the Profile link is clicked I begin adding the current user's list of created groups. To accomplish this, I'm going to make a get request to /groups and then filter the groups array to find the groups that the current user created. Since I passed the user prop to the Profile component I have access to the user id. By filtering the groups array by each groups user_id property I can create a new array, named myGroups, that contains only the groups that were created by the current user.

Using the JS .filter() array method to filter the groups array for the groups that the current user created, and then displaying the new array in a list. Also setting the max display length of the group name to 12 characters.

As far as displaying the list of groups on the page I'm using a revised version of the groups-list component. I'm going to use the same styling, but only display the name of the group with the link to the Group component. This way the page isn't too cluttered with information and the user will have quick and easy access to any and all groups that they've created.

The 'Profile' display showing only the groups created by the current user.

One other little feature that I added is to limit the length of the group name that will display. By setting the limit of the group name that displays to 12 characters I'm ensuring that the display is clean and easy to read. The user can access the full view of the group by clicking the link, just like with the Groups List component.

At this point I've got the Profile display working, but I'm not super happy about how I got it working. One potential problem that I see is that once I've got hundreds or thousands of groups, I don't want to have to filter through the entire groups array each time the Profile loads. I'm going to research ways to handle the filtering on the backend, but for now I've got the component working so I'll leave a not for myself to look into this again down the line.

As for today, my other goal is to update the interface for a desktop view. Right now I've been working with mobile first development and it's time to think about other potential screen sizes. A key feature that I want in the UI is for the group nav element to become a sidebar instead of a header. I want the Explore, Groups, and New Groups links to be on a vertical bar on the left side of the screen.

To accomplish this I'm adding a media query to the 'Sidebar' css file. Using the @min-width 992px, I'm adding a float: left property to the sidebar element. This way, when the screen width reaches 992 px, the element moves from the top of body to the side, and the rest of the components will fill the remainder of the right side of the screen.

In order for my sidebar to display properly I also need to add a number of other css properties. I add the display type flex to the sidebar, and then make it a column so that the links display vertically. I also add a flex-basis of auto to the column elements so that they display to a uniform size. I give the entire sidebar a height of 90vh, and I also update the header element to have a height of 10vh at 992px. I add position fixed to keep the sidebar on the screen when the user scrolls. Finally, I add a width of 15vw to the sidebar element and give it a right margin of 2rem to add some space between the sidebar and whatever component is displayed next to it.

The desktop view for the Groups list component. Note the sidebar on the left and the Profile link in the auth header.

The Update Group component in desktop view.

I'm satisfied with this round of updates, and I've reached the goals that I've set out to accomplish. I have a Profile component which displays the current user's groups and I have a desktop view with a functioning sidebar. For the next round of updates I'm planning to add some color and refine the look and feel of the app.