From 066cdd0ea4c610a0e81c6d3e9c754f5e7efca382 Mon Sep 17 00:00:00 2001
From: Tan Su Yin <e0425292@u.nus.edu>
Date: Sat, 8 Oct 2022 20:44:35 +0800
Subject: [PATCH] [resumes][fix] Use date-fns to format upload time text

---
 .../src/components/resumes/browse/BrowseListItem.tsx     | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/portal/src/components/resumes/browse/BrowseListItem.tsx b/apps/portal/src/components/resumes/browse/BrowseListItem.tsx
index b8c3cdaa..3c10a463 100644
--- a/apps/portal/src/components/resumes/browse/BrowseListItem.tsx
+++ b/apps/portal/src/components/resumes/browse/BrowseListItem.tsx
@@ -1,3 +1,4 @@
+import { formatDistanceToNow } from 'date-fns';
 import Link from 'next/link';
 import type { UrlObject } from 'url';
 import { ChevronRightIcon } from '@heroicons/react/20/solid';
@@ -33,11 +34,11 @@ export default function BrowseListItem({ href, resumeInfo }: Props) {
             </div>
           </div>
         </div>
-        <div className="col-span-2 self-center text-sm text-slate-500">
-          {/* TODO: Replace hardcoded days ago with calculated days ago*/}
-          Uploaded 2 days ago by {resumeInfo.user}
+        <div className="col-span-3 self-center text-sm text-slate-500">
+          Uploaded {formatDistanceToNow(resumeInfo.createdAt)} ago by{' '}
+          {resumeInfo.user}
         </div>
-        <ChevronRightIcon className="col-span-2 w-8 self-center justify-self-center" />
+        <ChevronRightIcon className="col-span-1 w-8 self-center justify-self-center" />
       </div>
     </Link>
   );