Update relative timestamps to account for i18n

[tommoor]

We use the date-fns library, it includes support for passing in the current users language and will then format relative timestamp appropriately: https://date-fns.org/

Timestamps are centralized in the Time component

[rubenmoya]

Hello! I was thinking about picking up this one, this is how I think I'd approach it, I'd love some feedback before starting:

• Either inject AuthStore to the Time component or convert it to a functional component and use the useCurrentUser hook.
• Get the language from the user and split it (for example, get en from en_US and es from es_ES
• Dynamically require date-fns/locale/${locale} and pass it to the distanceInWordsToNow

That should work, but I have some questions since I've been playing with Outline for a few minutes:

• How could we handle the shorten prop? it's really coupled to english right now, and I can't think of a good approach for it
• Injecting the whole auth to the Time component feels weird, is there a better way I could do it? Also depending on the current user feels weird...

[tommoor]

This sounds exactly like what I had in mind – I'd convert to a functional component, in fact here's a commit/branch where I already did some of that work several weeks back and could be a jumping off or reference point:
https://github.com/outline/outline/compare/functional-time?expand=1

How could we handle the shorten prop? it's really coupled to english right now, and I can't think of a good approach for it

In the near-term it's probably fine to leave it as English only, it was really a work around for the default english translations being quite verbose.

Injecting the whole auth to the Time component feels weird, is there a better way I could do it? Also depending on the current user feels weird...

Not that I can think of, we could store the users language in another mobx object but that's probably overkill – the auth store rarely changes after all. One thing I'd note is that we need to make sure that the component still works correctly when there is no current user as we have public-facing pages that use the Time component.