React errors: update `DateTime` component to avoid calling `Date.now()`

[jamesmockett]

The DateTime component calls Date.now() when rendered which is passed as a prop to RelativeTime to allow calculation of a relative timestamp. This assumes that the component is always rendered on the server, but we have cases where DateTime is rendered inside an island within a parent component. When the island is hydrated Date.now() is called again on the client and the value of the prop passed to RelativeTime may no longer match causing a hydration error.

The time is rounded down to the nearest minute so these errors may not always be apparent as the time on the server and client may still match. It can be replicated by opening a Front and leaving the page open for at least a minute before scrolling down. When islands containing DateTime further down the page are hydrated the time fetched on the client will have diverged from the server time when initially rendered, leading to a hydration error.

The solution is to lift up fetching the current time to a higher level so that it only happens once, and never on the client. This can then be passed down to instances of DateTime via prop drilling or context.

[jamesmockett]

There are two work in progress branches that attempt to solve this issue. Both rely on calculating the current time once at a high level and then passing it down to instances of DateTime.

The first does this via prop drilling, repurposing and renaming the existing absoluteServerTimes prop. This is a boolean that is used to force the display of absolute timestamps rather than relative ones. (Controlled by a server side switch.) This is replaced with a serverTime prop that passes down the calculated time instead. If not explicitly set or set to undefined it behaves the same as absoluteServerTimes = true and shows an absolute timestamp.

main...jm/lift-up-server-time

The second branch uses context to pass down the time and adds a DateTimeProvider. This is simpler in some ways as it requires fewer changes, but adds some complexity and necessitates changes to the Island component as hydrated components do not have access to existing context so each context provider has to be duplicated in the Island component. The time also has to be passed from the existing context to each island so it can be set on its own context provider. This is done by adding a dateTime attribute to the gu-island element.

main...jm/date-time-context