Render timestamp only on client to prevent error of server not matching client

This commit is contained in:
James Grugett 2022-10-05 18:43:51 -05:00
parent a149777c0e
commit 5d7721e041

View File

@ -1,15 +1,22 @@
import { DateTimeTooltip } from './datetime-tooltip'
import React from 'react'
import React, { useEffect, useState } from 'react'
import { fromNow } from 'web/lib/util/time'
export function RelativeTimestamp(props: { time: number }) {
const { time } = props
const [isClient, setIsClient] = useState(false)
useEffect(() => {
// Only render on client to prevent difference from server.
setIsClient(true)
}, [])
return (
<DateTimeTooltip
className="ml-1 whitespace-nowrap text-gray-400"
time={time}
>
{fromNow(time)}
{isClient ? fromNow(time) : ''}
</DateTimeTooltip>
)
}