format ago using F1

factorialco · Jan 3, 2025 · 65cfe94 · 65cfe94
1 parent c49e58e
commit 65cfe94
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/lib/experimental/Information/Communities/Post/CommunityPost/index.stories.tsx b/lib/experimental/Information/Communities/Post/CommunityPost/index.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
+import { subMonths } from "date-fns"
 import { CommunityPost } from "."
 
 const meta: Meta<typeof CommunityPost> = {
@@ -31,7 +32,7 @@ export const Default: Story = {
       title: "All company",
       url: "https://google.com/",
     },
-    ago: "a month ago",
+    createdAt: subMonths(new Date(), 1),
     title: "Title",
     description:
       "Description with a maximum of two lines visible.<br />Like this one :)<br />This shouldn't be visible",

diff --git a/lib/experimental/Information/Communities/Post/CommunityPost/index.tsx b/lib/experimental/Information/Communities/Post/CommunityPost/index.tsx
@@ -4,6 +4,7 @@ import { PersonAvatar } from "@/experimental/Information/Avatars/PersonAvatar"
 import { Reactions, ReactionsProps } from "@/experimental/Information/Reactions"
 import { Dropdown } from "@/experimental/Navigation/Dropdown"
 import { EllipsisHorizontal } from "@/icons/app"
+import { getAgo } from "@/lib/date"
 import { withSkeleton } from "@/lib/skeleton"
 import { Skeleton } from "@/ui/skeleton"
 import { PostEvent, PostEventProps } from "../PostEvent"
@@ -19,7 +20,7 @@ type CommunityPostProps = {
     title: string
     url: string
   }
-  ago: string
+  createdAt: Date
 
   title: string
   description?: string
@@ -45,7 +46,7 @@ type CommunityPostProps = {
 export const BaseCommunityPost = ({
   author,
   group,
-  ago,
+  createdAt,
   title,
   description,
   onClick,
@@ -60,6 +61,8 @@ export const BaseCommunityPost = ({
     .filter(Boolean)
     .join(" · ")
 
+  const ago = getAgo(createdAt)
+
   return (
     <div
       className="flex w-full cursor-pointer flex-row gap-3 rounded-xl border border-solid border-transparent p-3 pt-2 hover:bg-f1-background-hover focus:border-f1-border-secondary focus:outline focus:outline-1 focus:outline-offset-1 focus:outline-f1-border-selected-bold md:pb-4 md:pt-3"

diff --git a/lib/lib/date.ts b/lib/lib/date.ts
@@ -1,4 +1,4 @@
-import { format } from "date-fns"
+import { format, formatDistanceToNowStrict } from "date-fns"
 
 export function formatTime(date: Date) {
   return format(date, "p")
@@ -11,3 +11,7 @@ export function getAbbreviateMonth(date: Date) {
 export function getDayOfMonth(date: Date) {
   return date.getDate()
 }
+
+export function getAgo(date: Date) {
+  return formatDistanceToNowStrict(date, { addSuffix: true })
+}