feta(post): show full date on timestamp mouseover

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) => {
                   />
                 )}
                 <div className={styles.tagline}>
-                  {t('submitted')} {getFormattedTimeAgo(timestamp)}{' '}
+                  {t('submitted')} <span title={postDate}>{getFormattedTimeAgo(timestamp)}</span>{' '}
                   {edit && isInPostView && <span className={styles.timeEdit}>{t('last_edited', { timestamp: getFormattedTimeAgo(edit.timestamp) })}</span>} {t('post_by')}
                   <PostAuthor
                     authorAddress={author?.address}

src/components/reply/reply.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import styles from './reply.module.css';
 import useReplies from '../../hooks/use-replies';
 import { CommentMediaInfo, getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
-import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
+import { formatLocalizedUTCTimestamp, getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import CommentEditForm from '../comment-edit-form';
 import LoadingEllipsis from '../loading-ellipsis/';
 import Expando from '../post/expando/';
@@ -298,7 +298,8 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
   const commentMediaInfo = getCommentMediaInfo(reply);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
 
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const { language } = i18n;
   let score = upvoteCount - downvoteCount + 1 || 1;
   if ((upvoteCount === 0 && downvoteCount === 0) || (upvoteCount === 1 && downvoteCount === 0)) {
     score = 1;
@@ -363,7 +364,7 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
                 />
                 <span className={styles.score}>{scoreString}</span>{' '}
                 <span className={styles.time}>
-                  {getFormattedTimeAgo(timestamp)}
+                  <span title={formatLocalizedUTCTimestamp(timestamp, language)}>{getFormattedTimeAgo(timestamp)}</span>
                   {edit && <span className={styles.timeEdited}> {t('edited_timestamp', { timestamp: getFormattedTimeAgo(edit.timestamp) })}</span>}
                 </span>{' '}
                 {pinned && <span className={styles.pinned}>- {t('stickied_comment')}</span>}

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'
+  );
+};

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<VirtuosoHandle | null>(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]);