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.
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.