diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index ae0a09ea..ba216165 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'; import { isAllView, isPostView, isProfileHiddenView, isSubplebbitView } from '../../lib/utils/view-utils'; import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils'; import { getHostname } from '../../lib/utils/url-utils'; -import { getFormattedTimeAgo } from '../../lib/utils/time-utils'; +import { getFormattedTimeAgo, formatLocalizedUTCTimestamp } from '../../lib/utils/time-utils'; import CommentEditForm from '../comment-edit-form'; import ExpandButton from './expand-button'; import Expando from './expando'; @@ -105,7 +105,9 @@ const Post = ({ index, post = {} }: PostProps) => { const { displayName, shortAddress } = author || {}; const { shortAuthorAddress, authorAddressChanged } = useAuthorAddress({ comment: post }); - const { t } = useTranslation(); + const { t, i18n } = useTranslation(); + const { language } = i18n; + const postDate = formatLocalizedUTCTimestamp(timestamp, language); const params = useParams(); const location = useLocation(); const subplebbit = useSubplebbit({ subplebbitAddress }); @@ -225,7 +227,7 @@ const Post = ({ index, post = {} }: PostProps) => { /> )}
- {t('submitted')} {getFormattedTimeAgo(timestamp)}{' '} + {t('submitted')} {getFormattedTimeAgo(timestamp)}{' '} {edit && isInPostView && {t('last_edited', { timestamp: getFormattedTimeAgo(edit.timestamp) })}} {t('post_by')} {scoreString}{' '} - {getFormattedTimeAgo(timestamp)} + {getFormattedTimeAgo(timestamp)} {edit && {t('edited_timestamp', { timestamp: getFormattedTimeAgo(edit.timestamp) })}} {' '} {pinned && - {t('stickied_comment')}} diff --git a/src/lib/utils/time-utils.ts b/src/lib/utils/time-utils.ts index 7adc85cc..00e1433f 100644 --- a/src/lib/utils/time-utils.ts +++ b/src/lib/utils/time-utils.ts @@ -1,6 +1,10 @@ import i18next from 'i18next'; -export const getFormattedTimeAgo = (unixTimestamp: number): string => { +export const getFormattedTimeAgo = (unixTimestamp: number | undefined): string => { + if (!unixTimestamp || isNaN(unixTimestamp)) { + return '-'; + } + const currentTime = Date.now() / 1000; const timeDifference = currentTime - unixTimestamp; const t = i18next.t; @@ -35,7 +39,10 @@ export const getFormattedTimeAgo = (unixTimestamp: number): string => { return t('time_x_years_ago', { count: Math.floor(timeDifference / 31104000) }); }; -export const getFormattedTimeDuration = (unixTimestamp: number): string => { +export const getFormattedTimeDuration = (unixTimestamp: number | undefined): string => { + if (!unixTimestamp || isNaN(unixTimestamp)) { + return '-'; + } const currentTime = Date.now() / 1000; const timeDifference = currentTime - unixTimestamp; const t = i18next.t; @@ -70,7 +77,32 @@ export const getFormattedTimeDuration = (unixTimestamp: number): string => { return t('time_x_years', { count: Math.floor(timeDifference / 31104000) }); }; -export const getFormattedDate = (unixTimestamp: number, locale: string): string => { +export const getFormattedDate = (unixTimestamp: number | undefined, locale: string): string => { + if (!unixTimestamp || isNaN(unixTimestamp)) { + return '-'; + } const date = new Date(unixTimestamp * 1000); return new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'short', year: 'numeric' }).format(date); }; + +export const formatLocalizedUTCTimestamp = (unixTimestamp: number | undefined, locale: string): string => { + if (!unixTimestamp || isNaN(unixTimestamp)) { + return '-'; + } + const date = new Date(unixTimestamp * 1000); + return ( + new Intl.DateTimeFormat(locale, { + weekday: 'short', + year: 'numeric', + month: 'short', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + second: '2-digit', + timeZone: 'UTC', + hour12: false, + }) + .format(date) + .replace(/,/g, '') + ' UTC' + ); +}; diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx index 67a9302c..c40df127 100644 --- a/src/views/home/home.tsx +++ b/src/views/home/home.tsx @@ -41,6 +41,15 @@ const Home = () => { const currentTimeFilterName = params.timeFilterName || timeFilterName; + const [showMorePostsSuggestion, setShowMorePostsSuggestion] = useState(false); + useEffect(() => { + const timer = setTimeout(() => { + setShowMorePostsSuggestion(true); + }, 5000); + + return () => clearTimeout(timer); + }, []); + const Footer = () => { let footerContent; if (feed.length === 0) { @@ -93,7 +102,6 @@ const Home = () => { }; const virtuosoRef = useRef(null); - const [showMorePostsSuggestion, setShowMorePostsSuggestion] = useState(false); useEffect(() => { const setLastVirtuosoState = () => { @@ -109,14 +117,6 @@ const Home = () => { const lastVirtuosoState = lastVirtuosoStates?.[sortType + timeFilterName]; - useEffect(() => { - const timer = setTimeout(() => { - setShowMorePostsSuggestion(true); - }, 5000); - - return () => clearTimeout(timer); - }, []); - useEffect(() => { document.title = `Seedit`; }, [t]);