+9

src/state/models/ui/shell.ts

··· 224 224 activeLightbox: ProfileImageLightbox | ImagesLightbox | null = null 225 225 isComposerActive = false 226 226 composerOpts: ComposerOpts | undefined 227 227 + tickEveryMinute = Date.now() 227 228 228 229 constructor(public rootStore: RootStoreModel) { 229 230 makeAutoObservable(this, { ··· 231 232 rootStore: false, 232 233 hydrate: false, 233 234 }) 235 235 + 236 236 + this.setupClock() 234 237 } 235 238 236 239 serialize(): unknown { ··· 340 343 closeComposer() { 341 344 this.isComposerActive = false 342 345 this.composerOpts = undefined 346 346 + } 347 347 + 348 348 + setupClock() { 349 349 + setInterval(() => { 350 350 + this.tickEveryMinute = Date.now() 351 351 + }, 60_000) 343 352 } 344 353 }

+6 -2

src/view/com/post-thread/PostThreadItem.tsx

··· 15 15 import * as Toast from '../util/Toast' 16 16 import {PreviewableUserAvatar} from '../util/UserAvatar' 17 17 import {s} from 'lib/styles' 18 18 - import {ago, niceDate} from 'lib/strings/time' 18 18 + import {niceDate} from 'lib/strings/time' 19 19 import {sanitizeDisplayName} from 'lib/strings/display-names' 20 20 import {pluralize} from 'lib/strings/helpers' 21 21 import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers' ··· 30 30 import {ErrorMessage} from '../util/error/ErrorMessage' 31 31 import {usePalette} from 'lib/hooks/usePalette' 32 32 import {formatCount} from '../util/numeric/format' 33 33 + import {TimeElapsed} from 'view/com/util/TimeElapsed' 33 34 34 35 const PARENT_REPLY_LINE_LENGTH = 8 35 36 ··· 189 190 </Text> 190 191 </Link> 191 192 <Text type="md" style={[styles.metaItem, pal.textLight]}> 192 192 - &middot; {ago(item.post.indexedAt)} 193 193 + &middot;&nbsp; 194 194 + <TimeElapsed timestamp={item.post.indexedAt}> 195 195 + {({timeElapsed}) => <>{timeElapsed}</>} 196 196 + </TimeElapsed> 193 197 </Text> 194 198 </View> 195 199 <View style={s.flex1} />

+15 -10

src/view/com/util/PostMeta.tsx

··· 2 2 import {StyleSheet, View} from 'react-native' 3 3 import {Text} from './text/Text' 4 4 import {DesktopWebTextLink} from './Link' 5 5 - import {ago, niceDate} from 'lib/strings/time' 5 5 + import {niceDate} from 'lib/strings/time' 6 6 import {usePalette} from 'lib/hooks/usePalette' 7 7 import {UserAvatar} from './UserAvatar' 8 8 import {observer} from 'mobx-react-lite' 9 9 import {sanitizeDisplayName} from 'lib/strings/display-names' 10 10 import {isAndroid} from 'platform/detection' 11 11 + import {TimeElapsed} from './TimeElapsed' 11 12 12 13 interface PostMetaOpts { 13 14 authorAvatar?: string ··· 64 65 &middot; 65 66 </Text> 66 67 )} 67 67 - <DesktopWebTextLink 68 68 - type="md" 69 69 - style={pal.textLight} 70 70 - lineHeight={1.2} 71 71 - text={ago(opts.timestamp)} 72 72 - accessibilityLabel={niceDate(opts.timestamp)} 73 73 - accessibilityHint="" 74 74 - href={opts.postHref} 75 75 - /> 68 68 + <TimeElapsed timestamp={opts.timestamp}> 69 69 + {({timeElapsed}) => ( 70 70 + <DesktopWebTextLink 71 71 + type="md" 72 72 + style={pal.textLight} 73 73 + lineHeight={1.2} 74 74 + text={timeElapsed} 75 75 + accessibilityLabel={niceDate(opts.timestamp)} 76 76 + accessibilityHint="" 77 77 + href={opts.postHref} 78 78 + /> 79 79 + )} 80 80 + </TimeElapsed> 76 81 </View> 77 82 ) 78 83 })

+21

src/view/com/util/TimeElapsed.tsx

··· 1 1 + import React from 'react' 2 2 + import {observer} from 'mobx-react-lite' 3 3 + import {ago} from 'lib/strings/time' 4 4 + import {useStores} from 'state/index' 5 5 + 6 6 + export const TimeElapsed = observer(function TimeElapsed({ 7 7 + timestamp, 8 8 + children, 9 9 + }: { 10 10 + timestamp: string 11 11 + children: ({timeElapsed}: {timeElapsed: string}) => JSX.Element 12 12 + }) { 13 13 + const stores = useStores() 14 14 + const [timeElapsed, setTimeAgo] = React.useState(ago(timestamp)) 15 15 + 16 16 + React.useEffect(() => { 17 17 + setTimeAgo(ago(timestamp)) 18 18 + }, [timestamp, setTimeAgo, stores.shell.tickEveryMinute]) 19 19 + 20 20 + return children({timeElapsed}) 21 21 + })