LB-531: Adjust timestamp format for older listens on listens page

[jdaok]

Jira ticket LB-529:

Problem

The timestamps on the recent listens page can be vague when viewing older listens.

Solution

preciseTimestamp will determine how old the listened_at date is and format it accordingly on the ListenCard:
(<24 hours)
(<1 year)
(>1 year)

[MonkeyDo]

Thanks for opening this PR, that's a great improvement !

A few of us have been talking about these annoyingly vague timestamps for a little while now, and I just started to try and fix it this week in a WIP feature.
I was going for a similar implementation, but yours is more precise with the optional year, that's great!

We will use this method anywhere we display timestamps; consequently, I'll ask that you move the method to static/js/src/utils.tsx so it can be imported in other components/pages.

[alastair]

This is super cool, thanks for contributing it! I updated the title so that it references the ticket that we have open to track this task.

As @MonkeyDo said, I really like the year split too.

This is a topic that everyone has an idea about, and there might be some other opinions here, but I think that we should only show "x minutes ago" for listens less than an hour old. Anything else should have a timestamp.

[jdaok]

Thank you for the reviews! :)

This is a topic that everyone has an idea about, and there might be some other opinions here, but I think that we should only show "x minutes ago" for listens less than an hour old. Anything else should have a timestamp.

@alastair I considered this too. Personally since I listen and submit less frequently, they are older and so no "x minutes ago" formatted timestamps would appear on my my recent listens page most of the time.

^ Users are still always able to view the exact timestamp for any listen by hovering. (I could also update this to be more similar to the >1 year format for more readability).

I think allowing listens up to 24 hours old (instead of 1 hour old) to be formatted this way makes the page look less formal for users who listen and submit less frequently, but I'd like to get further input as well.

[MonkeyDo]

I'm finding more things to tweak as I keep looking at the code, but it's starting to look really nice and much more robust than before ! 🎉

It would be nice to see unit tests for preciseTimestamp where you try throwing curveballs at it to see if you end up with a nice result anyway and nothing breaks.
A unit test file utils.test.tsx was just created yesterday, so you'll need to pull the recent changes on master into your branch.

Keep up the good work, this is an invaluable utility!

[MonkeyDo]

Awesome, thanks a lot !
We're going to use this utility everywhere!