mirror/seedit
1
0
Fork 0
mirror of https://github.com/plebbit/seedit.git synced 2026-02-08 04:50:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(time utils): differentiate between 'time ago' adding function for formatted time duration

Browse Source
This commit is contained in:
plebeius.eth
2023-11-20 11:37:58 +01:00
parent c09bae351c
commit f6aa70be9d
4 changed files with 45 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/post/post.tsx
View File

@@ -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) => {
/>
)}
<p className={styles.tagline}>
{t('post_submitted')} {getFormattedTime(timestamp)} {t('post_by')}{' '}
{t('post_submitted')} {getFormattedTimeAgo(timestamp)} {t('post_by')}{' '}
<Link className={styles.authorAddressWrapper} to={`u/${shortAuthorAddress}`} onClick={(e) => e.preventDefault()}>
<span className={styles.authorAddressHidden}>u/{post?.author?.shortAddress || shortAuthorAddress}</span>
<span className={`${styles.authorAddressVisible} ${authorAddressChanged && styles.authorAddressChanged}`}>u/{shortAuthorAddress}</span>

4
src/components/reply/reply.tsx
View File

@@ -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}
</Link>
<span className={styles.score}>{scoreString}</span> <span className={styles.time}>{getFormattedTime(timestamp)}</span>
<span className={styles.score}>{scoreString}</span> <span className={styles.time}>{getFormattedTimeAgo(timestamp)}</span>
{stateLabel}
{flair && (
<>

8
src/components/sidebar/sidebar.tsx
View File

@@ -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 (
<div className={`${isAbout ? styles.about : styles.sidebar}`}>
@@ -45,7 +45,7 @@ const Sidebar = ({ address, createdAt, description, roles, shortAddress, title,
<Link to={`/u/user.eth`} onClick={(e) => e.preventDefault()}>
{creatorAddress}
</Link>
<span className={styles.age}> a community for {getFormattedTime(createdAt)}</span>
<span className={styles.age}> a community for {getFormattedDuration(createdAt)}</span>
</div>
</div>
</div>

39
src/lib/utils/time-utils.ts
View File

@@ -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) });
};
};
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) });
};