Add localization support for relative time formatting

web/components/answers/other-profile-answers.tsx

@@ -10,6 +10,7 @@ import {CompassLoadingIndicator} from 'web/components/widgets/loading-indicator'
 import {UserLink} from 'web/components/widgets/user-link'
 import {useOtherAnswers} from 'web/hooks/use-other-answers'
 import {QuestionWithCountType} from 'web/hooks/use-questions'
+import {useT} from 'web/lib/locale'
 import {shortenedFromNow} from 'web/lib/util/shortenedFromNow'
 
 export function OtherProfileAnswers(props: {
@@ -18,6 +19,7 @@ export function OtherProfileAnswers(props: {
   className?: string
 }) {
   const {question, className} = props
+  const t = useT()
   const otherAnswers = useOtherAnswers(question.id)
   const shownAnswers = otherAnswers?.filter(
     (a) => a.multiple_choice != null || a.free_response || a.integer,
@@ -49,7 +51,7 @@ export function OtherProfileAnswers(props: {
                 </Col>
               </Row>
               <div className="text-ink-400 text-xs">
-                {shortenedFromNow(otherAnswer.created_time)}
+                {shortenedFromNow(otherAnswer.created_time, t)}
               </div>
             </Row>
             <Linkify

web/components/comments/comment-edit-history-button.tsx

@@ -7,6 +7,7 @@ import {Content} from 'web/components/widgets/editor'
 import {LoadingIndicator} from 'web/components/widgets/loading-indicator'
 import {Title} from 'web/components/widgets/title'
 import {useIsClient} from 'web/hooks/use-is-client'
+import {useT} from 'web/lib/locale'
 import {db} from 'web/lib/supabase/db'
 import {shortenedFromNow} from 'web/lib/util/shortenedFromNow'
 import {formatTimeShort} from 'web/lib/util/time'
@@ -22,6 +23,7 @@ export const CommentEditHistoryButton = (props: {comment: Comment}) => {
   const [edits, setEdits] = useState<EditHistory[] | undefined>(undefined)
 
   const isClient = useIsClient()
+  const t = useT()
 
   const loadEdits = async () => {
     const {data} = await run(
@@ -61,7 +63,7 @@ export const CommentEditHistoryButton = (props: {comment: Comment}) => {
           }
           onClick={() => setShowEditHistory(true)}
         >
-          (edited) {isClient && shortenedFromNow(comment.editedTime)}
+          (edited) {isClient && shortenedFromNow(comment.editedTime, t)}
         </button>
       </DateTimeTooltip>
       <Modal size={'md'} open={showEditHistory} setOpen={setShowEditHistory}>

web/components/relative-timestamp.tsx

@@ -16,6 +16,8 @@ export function RelativeTimestamp(props: {
 }) {
   const {time, className, placement, shortened} = props
   const isClient = useIsClient()
+  const {locale} = useLocale()
+  const t = useT()
   return (
     <DateTimeTooltip
       className="text-ink-400 ml-1 whitespace-nowrap"
@@ -23,7 +25,7 @@ export function RelativeTimestamp(props: {
       placement={placement}
     >
       <span className={className}>
-        {isClient ? shortened ? shortenedFromNow(time) : fromNow(time) : <></>}
+        {isClient ? shortened ? shortenedFromNow(time, t) : fromNow(time, false, t, locale) : <></>}
       </span>
     </DateTimeTooltip>
   )

web/lib/util/shortenedFromNow.ts

@@ -26,7 +26,7 @@ export function shortenedDuration(diff: duration.Duration, t: any = undefined) {
 
   for (const unit in units) {
     if (units[unit] > 0) {
-      return `${units[unit]}${t(`time.units.${unit}`, unit)}`
+      return `${units[unit]}${t ? t(`time.units.${unit}`, unit) : unit}`
     }
   }