v0.6: Timeago


  • Demo (If the app is loading slowly just make a refresh because it could be in the idle state on Openshift)
  • Source code on GitHub

This time a client-side timeago feature has been added to the card comments creation time to show a human friendly phrase expressing the time passed from the comment publication.
These phrases periodically update themselves while the page is open.

The previously created Timestamp React component was updated to handle this new format.
Note that this component doesn’t update itself because that would mean that on certain cards with hundreds of comments(when they are loaded with the pagination) there would be too many JavaScript timers running(all doing the same thing, querying the current timestamp with the Date object).
So the live update is handled by a single timer setup by the parent component CommentList that keeps its ‘age’ in its state and periodically pass it down to the Comment components and finally to the timestamp component using its format prop.
So this component has only the responsability to generate the appropriate markup:

<time class="timestamp" datetime="2015-08-27T13:19:27.000Z" title="Thursday, August 27th 2015, 3:19:27 pm">9 days ago</time>

To format the timestamp in these several forms it is used the Moment.js library.

The component is reused in the Card component to display the latest activity time of the card.