[fix] comment and post timestamps

App.tsx

@@ -1,5 +1,7 @@
 import 'react-native-reanimated';
 
+import '@src//plugins/dayjs';
+
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { TamaguiProvider, Theme, useTheme } from 'tamagui';
 

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Post and comment timestamps properly rendered
+
 ### Changed
 
 - Loading screens now have an option for whether to display mouse animation (default normal spinner).

src/components/Comment/components/CommentHeader.tsx

@@ -18,7 +18,7 @@ function CommentHeader({
   CommentMetrics,
 }: IProps): React.JSX.Element {
   return (
-    <XStack space="$3" alignItems="center" pb="$2">
+    <XStack space="$2.5" alignItems="center" pb="$2">
       <CommentUserLabel
         userIcon={creatorAvatar}
         userName={userName}

src/components/Comment/components/CommentMetrics.tsx

@@ -1,17 +1,24 @@
 import React, { useMemo } from 'react';
-import { useSettingsStore } from '@src/state';
+import { useCommentPublished, useSettingsStore } from '@src/state';
 import { Text, XStack } from 'tamagui';
 import ScoreIcon from '@components/Common/Icons/ScoreIcon';
-import { ArrowDown, ArrowUp } from '@tamagui/lucide-icons';
+import { ArrowDown, ArrowUp, Clock } from '@tamagui/lucide-icons';
 import { useCommentVoting } from '@hooks/comments/useCommentVoting';
+import { getTimeFrom } from '@helpers/time';
 
 interface IProps {
   itemId: number;
 }
 
 function CommentMetrics({ itemId }: IProps): React.JSX.Element {
+  const commentPublished = useCommentPublished(itemId);
   const voting = useCommentVoting(itemId, true);
 
+  const timestamp = useMemo(
+    () => getTimeFrom(commentPublished),
+    [commentPublished],
+  );
+
   const totalScore = useSettingsStore((state) => state.totalScore);
 
   const upvoteColor = useMemo(
@@ -34,16 +41,22 @@ function CommentMetrics({ itemId }: IProps): React.JSX.Element {
 
   if (totalScore) {
     return (
-      <XStack
-        space="$1"
-        onPress={voting.scoreVote}
-        hitSlop={3}
-        alignItems="center"
-      >
-        <ScoreIcon myVote={voting.myVote} />
-        <Text fontSize="$2" color={scoreColor}>
-          {voting.score}
-        </Text>
+      <XStack space="$2">
+        <XStack
+          space="$1"
+          onPress={voting.scoreVote}
+          hitSlop={3}
+          alignItems="center"
+        >
+          <ScoreIcon myVote={voting.myVote} />
+          <Text fontSize="$2" color={scoreColor}>
+            {voting.score}
+          </Text>
+        </XStack>
+        <XStack space="$1">
+          <Clock size={14} color="$secondary" />
+          <Text>{timestamp}</Text>
+        </XStack>
       </XStack>
     );
   } else {
@@ -71,6 +84,12 @@ function CommentMetrics({ itemId }: IProps): React.JSX.Element {
             {voting.downvotes}
           </Text>
         </XStack>
+        <XStack space="$1.5" alignItems="center">
+          <Clock size={14} color="$secondary" />
+          <Text fontSize="$2" color="$secondary">
+            {timestamp}
+          </Text>
+        </XStack>
       </XStack>
     );
   }

src/components/Comment/components/CommentUserLabel.tsx

@@ -34,7 +34,7 @@ function CommentUserLabel({
   return (
     <XStack space="$2" alignItems="center" onPress={onPress} hitSlop={5}>
       {showIcon && <UserIcon userIcon={userIcon} />}
-      <Text fontSize="$3" color="$secondary">
+      <Text fontSize="$2" color="$secondary">
         {name}
       </Text>
     </XStack>

src/components/Common/PostCard/PostMetrics.tsx

@@ -9,10 +9,12 @@ import {
   usePostCommentCount,
   usePostCounts,
   usePostMyVote,
+  usePostPublished,
   useSettingsStore,
 } from '@src/state';
 import { Text, XStack } from 'tamagui';
 import ScoreIcon from '@components/Common/Icons/ScoreIcon';
+import { getTimeFrom } from '@helpers/time';
 
 interface IProps {
   itemId: number;
@@ -24,6 +26,9 @@ function PostMetrics({ itemId }: IProps): React.JSX.Element {
   const postCounts = usePostCounts(itemId);
   const postCommentCount = usePostCommentCount(itemId);
   const postMyVote = usePostMyVote(itemId);
+  const postPublished = usePostPublished(itemId);
+
+  const timestamp = useMemo(() => getTimeFrom(postPublished), [postPublished]);
 
   const upvoteColor = useMemo(
     () => (postMyVote === 1 ? '$upvote' : '$secondary'),
@@ -78,7 +83,7 @@ function PostMetrics({ itemId }: IProps): React.JSX.Element {
       <XStack space="$1" alignItems="center">
         <Clock size={14} color="$secondary" />
         <Text color="$secondary" fontSize="$2">
-          {postCommentCount}
+          {timestamp}
         </Text>
       </XStack>
     </XStack>

src/components/Inbox/components/InboxReplyMetrics.tsx

@@ -1,9 +1,14 @@
 import React, { useMemo } from 'react';
-import { useSettingsStore } from '@src/state';
+import {
+  useMentionPublished,
+  useReplyPublished,
+  useSettingsStore,
+} from '@src/state';
 import { Text, XStack } from 'tamagui';
 import ScoreIcon from '@components/Common/Icons/ScoreIcon';
-import { ArrowDown, ArrowUp } from '@tamagui/lucide-icons';
+import { ArrowDown, ArrowUp, Clock } from '@tamagui/lucide-icons';
 import { useInboxReplyVoting } from '@components/Inbox/hooks/useInboxReplyVoting';
+import { getTimeFrom } from '@helpers/time';
 
 interface IProps {
   itemId: number;
@@ -18,6 +23,10 @@ function InboxReplyMetrics({
 }: IProps): React.JSX.Element {
   const voting = useInboxReplyVoting(itemId, commentId, type);
 
+  const published =
+    type === 'reply' ? useReplyPublished(itemId) : useMentionPublished(itemId);
+  const timestamp = useMemo(() => getTimeFrom(published), [published]);
+
   const totalScore = useSettingsStore((state) => state.totalScore);
 
   const upvoteColor = useMemo(
@@ -40,16 +49,24 @@ function InboxReplyMetrics({
 
   if (totalScore) {
     return (
-      <XStack
-        space="$1"
-        onPress={voting.scoreVote}
-        hitSlop={3}
-        alignItems="center"
-      >
-        <ScoreIcon myVote={voting.myVote} />
-        <Text fontSize="$2" color={scoreColor}>
-          {voting.score}
-        </Text>
+      <XStack space="$2">
+        <XStack
+          space="$1"
+          onPress={voting.scoreVote}
+          hitSlop={3}
+          alignItems="center"
+        >
+          <ScoreIcon myVote={voting.myVote} />
+          <Text fontSize="$2" color={scoreColor}>
+            {voting.score}
+          </Text>
+        </XStack>
+        <XStack space="$1.5" alignItems="center">
+          <Clock size={14} color="$secondary" />
+          <Text fontSize="$2" color="$secondary">
+            {timestamp}
+          </Text>
+        </XStack>
       </XStack>
     );
   } else {
@@ -77,6 +94,12 @@ function InboxReplyMetrics({
             {voting.downvotes}
           </Text>
         </XStack>
+        <XStack space="$1.5" alignItems="center">
+          <Clock size={14} color="$secondary" />
+          <Text fontSize="$2" color="$secondary">
+            {timestamp}
+          </Text>
+        </XStack>
       </XStack>
     );
   }

src/helpers/time/getTimeFrom.ts

@@ -0,0 +1,9 @@
+import dayjs from 'dayjs';
+
+export const getTimeFrom = (timestamp?: string): string => {
+  const res = dayjs(timestamp ?? 0)
+    .utc(true)
+    .fromNow(true);
+
+  return res;
+};

src/helpers/time/index.ts

@@ -0,0 +1 @@
+export * from './getTimeFrom';

src/plugins/dayjs.ts

@@ -0,0 +1,40 @@
+// main library
+import dayjs from 'dayjs';
+
+// plugins
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import updateLocale from 'dayjs/plugin/updateLocale';
+import utc from 'dayjs/plugin/utc';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+
+const localeList = dayjs.Ls;
+
+// extend dayjs with plugins
+dayjs.extend(advancedFormat);
+dayjs.extend(relativeTime);
+dayjs.extend(updateLocale);
+dayjs.extend(utc);
+dayjs.extend(localizedFormat);
+
+dayjs.updateLocale('en', {
+  relativeTime: {
+    ...localeList.en.relativeTime,
+    future: 'in %s',
+    past: '%s ago',
+    s: '1m',
+    m: '1m',
+    mm: '%dm',
+    h: '1h',
+    hh: '%dh',
+    d: '1d',
+    dd: '%dd',
+    M: '30d',
+    MM: '%dM',
+    y: '1y',
+    yy: '%dy',
+  },
+});
+
+// send it back (for use in other files)
+export default dayjs;

src/state/comment/commentStore.ts

@@ -80,3 +80,6 @@ export const useCommentRemoved = (id: number): boolean =>
 
 export const useCommentActorId = (id: number): string | undefined =>
   useCommentStore((state) => state.comments.get(id)?.view.comment.ap_id);
+
+export const useCommentPublished = (id: number): string | undefined =>
+  useCommentStore((state) => state.comments.get(id)?.view.comment.published);

src/state/inbox/inboxStore.ts

@@ -83,6 +83,9 @@ export const useReplyMyVote = (id: number): number =>
 export const useReplyRead = (id: number): boolean =>
   useInboxStore((state) => state.replies.get(id)?.comment_reply.read) ?? false;
 
+export const useReplyPublished = (id: number): string | undefined =>
+  useInboxStore((state) => state.replies.get(id)?.counts.published);
+
 export const useMentionPostId = (id: number): number | undefined =>
   useInboxStore((state) => state.mentions.get(id)?.post.id);
 
@@ -123,6 +126,9 @@ export const useMentionRead = (id: number): boolean =>
   useInboxStore((state) => state.mentions.get(id)?.person_mention.read) ??
   false;
 
+export const useMentionPublished = (id: number): string | undefined =>
+  useInboxStore((state) => state.mentions.get(id)?.counts.published);
+
 export const useMessageContent = (id: number): string | undefined =>
   useInboxStore(
     (state) => state.privateMessages.get(id)?.private_message.content,

src/state/post/postStore.ts

@@ -108,3 +108,6 @@ export const usePostRemoved = (id: number): boolean =>
 
 export const usePostDeleted = (id: number): boolean =>
   usePostStore((state) => state.posts.get(id))?.view.post.deleted ?? false;
+
+export const usePostPublished = (id: number): string | undefined =>
+  usePostStore((state) => state.posts.get(id))?.view.counts.published;