diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index bbed3d10..0c21345a 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'; import { isPendingView, isPostView } from '../../lib/utils/view-utils'; import { getCommentMediaInfoMemoized, getHasThumbnail } from '../../lib/utils/media-utils'; import { getHostname } from '../../lib/utils/url-utils'; -import { getFormattedTime } from '../../lib/utils/time-utils'; +import { getFormattedTimeAgo } from '../../lib/utils/time-utils'; import ExpandButton from './expand-button'; import Expando from './expando'; import Flair from './flair'; @@ -113,7 +113,7 @@ const Post = ({ post, index }: PostProps) => { /> )}

- {t('post_submitted')} {getFormattedTime(timestamp)} {t('post_by')}{' '} + {t('post_submitted')} {getFormattedTimeAgo(timestamp)} {t('post_by')}{' '} e.preventDefault()}> u/{post?.author?.shortAddress || shortAuthorAddress} u/{shortAuthorAddress} diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx index 03e6fbc7..a4cf04de 100644 --- a/src/components/reply/reply.tsx +++ b/src/components/reply/reply.tsx @@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'; import styles from './reply.module.css'; import useReplies from '../../hooks/use-replies'; import { CommentMediaInfo, getCommentMediaInfoMemoized, getHasThumbnail } from '../../lib/utils/media-utils'; -import { getFormattedTime } from '../../lib/utils/time-utils'; +import { getFormattedTimeAgo } from '../../lib/utils/time-utils'; import LoadingEllipsis from '../loading-ellipsis/'; import Expando from '../post/expando/'; import ExpandButton from '../post/expand-button/'; @@ -150,7 +150,7 @@ const Reply = ({ reply, depth }: ReplyProps) => { > {shortAuthorAddress} - {scoreString} {getFormattedTime(timestamp)} + {scoreString} {getFormattedTimeAgo(timestamp)} {stateLabel} {flair && ( <> diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 03b0e3f8..450b6425 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -1,7 +1,7 @@ import { useSubplebbitStats } from '@plebbit/plebbit-react-hooks'; import styles from './sidebar.module.css'; import { Link, useLocation } from 'react-router-dom'; -import { getFormattedTime } from '../../lib/utils/time-utils'; +import { getFormattedDuration, getFormattedTimeAgo } from '../../lib/utils/time-utils'; import { findSubplebbitCreator } from '../../lib/utils/user-utils'; import { isAboutView } from '../../lib/utils/view-utils'; @@ -19,12 +19,12 @@ const Sidebar = ({ address, createdAt, description, roles, shortAddress, title, const { allActiveUserCount, hourActiveUserCount } = useSubplebbitStats({ subplebbitAddress: address }); const isOnline = updatedAt > Date.now() / 1000 - 60 * 30; const onlineNotice = hourActiveUserCount + ' users here now'; - const offlineNotice = 'community node last seen ' + getFormattedTime(updatedAt); + const offlineNotice = 'community node last seen ' + getFormattedTimeAgo(updatedAt); const onlineStatus = isOnline ? onlineNotice : offlineNotice; const location = useLocation(); const isAbout = isAboutView(location.pathname); const subplebbitCreator = findSubplebbitCreator(roles); - const creatorAddress = subplebbitCreator === 'anonymous' ? 'anonymous' : `u/${subplebbitCreator}` + const creatorAddress = subplebbitCreator === 'anonymous' ? 'anonymous' : `u/${subplebbitCreator}`; return (

@@ -45,7 +45,7 @@ const Sidebar = ({ address, createdAt, description, roles, shortAddress, title, e.preventDefault()}> {creatorAddress} - a community for {getFormattedTime(createdAt)} + a community for {getFormattedDuration(createdAt)}
diff --git a/src/lib/utils/time-utils.ts b/src/lib/utils/time-utils.ts index 52e2418b..55aca271 100644 --- a/src/lib/utils/time-utils.ts +++ b/src/lib/utils/time-utils.ts @@ -1,6 +1,6 @@ import i18next from "i18next"; -export const getFormattedTime = (unixTimestamp: number): string => { +export const getFormattedTimeAgo = (unixTimestamp: number): string => { const currentTime = Date.now() / 1000; const timeDifference = currentTime - unixTimestamp; const t = i18next.t; @@ -33,4 +33,39 @@ export const getFormattedTime = (unixTimestamp: number): string => { return t('time_1_year_ago'); } return t('time_x_years_ago', { count: Math.floor(timeDifference / 31104000) }); -}; \ No newline at end of file +}; + +export const getFormattedDuration = (unixTimestamp: number): string => { + const currentTime = Date.now() / 1000; + const timeDifference = currentTime - unixTimestamp; + const t = i18next.t; + + if (timeDifference < 60) { + return t('time_1_minute'); + } + if (timeDifference < 3600) { + return t('time_x_minutes', { count: Math.floor(timeDifference / 60) }); + } + if (timeDifference < 7200) { + return t('time_1_hour'); + } + if (timeDifference < 86400) { + return t('time_x_hours', { count: Math.floor(timeDifference / 3600) }); + } + if (timeDifference < 172800) { + return t('time_1_day'); + } + if (timeDifference < 2592000) { + return t('time_x_days', { count: Math.floor(timeDifference / 86400) }); + } + if (timeDifference < 5184000) { + return t('time_1_month'); + } + if (timeDifference < 31104000) { + return t('time_x_months', { count: Math.floor(timeDifference / 2592000) }); + } + if (timeDifference < 62208000) { + return t('time_1_year'); + } + return t('time_x_years', { count: Math.floor(timeDifference / 31104000) }); +};