UI Additions and Deployment Prep

As I'm getting ready to deploy Lets Go for the first time I'm adding some additional UI updates. I want to add character limits to my inputs, I want the Groups list to display the groups in chronological order, and I want to re-format my date and time data so it's easier to understand.

The current state of my Groups list. No date information, 24hour time, and group IDs showing.

First, I want to add limits to the number of characters that the user can enter when creating a group. Specifically I want to limit the name of the group to 50 characters, and the description length to 250 characters. This will prevent users from putting in extremely long entries and potentially breaking the app.

I'm going to start with the input for the group name. I haven't added this kind of property before, so after a bit of Googling I find that the input elements can have a property called maxLength, where the value of maxLength is a number, contained in a string, that will be the max number of characters allowed. This is just what I need, so I navigate to the Group Name input in the AddGroup.js file and set maxLength to '50'. I go into the browser for a test run and sure enough, now I can longer enter a group name that's longer than 50 characters.

One thing that I notice right away is that there's no message or feedback for the user once the input has reached 50 characters. You're typing characters into the input field and once you reach 50, it just stops and nothing else happens. To solve this, I decide I want some kind of indicator on the form to show how many characters have been used. Again, I haven't done this before so I after a quick Google search I realized that I can use the state, and specifically the group.sport property of the state, along with the JavaScript length string method '.length' to my advantage.

I add a new span element, and display the value of sport.length above the input. Now when I go to test it out, I can see the number above the input increasing as I type into the box, and decreasing when I delete a character. I decided that I want the display to float on the right side, above the input, and I also add some text so the user will understand what they're looking at.

The new span element which shows how many characters the user has typed, as well as the maxLength property of the input.

I decide to do the same thing to the input for the group description. I set the maxLength for the description input to 250 characters, although I may end up making this longer later. Now, both the group name and description inputs show the user how many characters they've typed, and how many they have left.

The Group Name and Description inputs now have a character count above and to the right of the input field!

The next update I want to make it to the Groups list. I want the Groups list to always display in ascending order by date. This means I want the group scheduled to meet soonest at the top, and the group that's furthest away, chronologically speaking, displayed last. To accomplish this, I'm actually going to make an update on the backend. In Rails, I navigate to the group model and add a default_scope property to the model. Specifying the order of the groups by ascending date ensures that the groups will always display in the appropriate order.

I added the default_scope so that the Groups are always sorted by date.

Displaying the groups list in order makes the app a bit easier to navigate, but I still want the dates to display on the Groups screen. To accomplish this I update the Groups component to include group.date. I add the group.date to the display, underneath the time, but I don't like the format. I want to use the format 'mm/dd/yyyy' but the default date format is currently 'yyyy-mm-dd'. To fix this, I can use a bit of JavaScript on the date string. First, I split the date into an array using the JavaScript .split() array method. Now I have access to each of the parts of the date and I can order them however I want, and add the forward slash in between. Now I have a nicely formatted date in the Groups list.

The updated Groups List component with the new date and time formats.

Next I want to update the time format. Currently the groups list displays army time since this is the default format that comes out of the input with type 'time'. Just like with the date, I can use a bit of JavaScript to update the way the time displays on the screen. This one is a little trickier, and I end up using conditional statements in order to return the correct format.

For both the time and the date formats I created a new method, timeFormat and dateFormat. I invoke the methods in the appropriate places so that each Group that listed in the Groups list will call each method once, and the output will contain the correctly formatted data.

The left image contains the dateFormat and timeFormat methods. The right image shows where I'm calling these methods within the Groups list map function, so that each group will display the proper date and time format.

Since I've got the date and time formats working how I want, the last update I'm going to make for today is to add the new formats to the individual Group display as well. To do this, I create a new file in my assets folder called Methods.js. I remove the dateFormat and timeFormat methods from the Groups list component and add then to the Methods file. Now, I can import the Methods file into my Groups list component and my Group component. Now, instead of calling this.timeFormat(), I can call Methods.timeFormat() and have access to the methods wherever I need them!

The updated Group component showing the new format for the date and time using the dateFormat and timeFormat methods made available from the Methods.js file.