ADD time ago display to VideoCard component

frontend/src/components/video/VideoCard.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { formatTime } from "../../utils/utils.ts";
+import { formatTime, stringToDate, dateToTimeAgo } from "../../utils/utils.ts";
 import { Link } from "react-router-dom";
 import { useState } from "react";
 
@@ -8,6 +8,7 @@ type VideoCardProps = {
     duration: number,
     thumbnailPath: string | null,
     videoPath: string,
+    createdAt: string,
     className?: string
 }
 
@@ -18,6 +19,7 @@ const VideoCard = ({
                        duration,
                        thumbnailPath,
                        videoPath,
+                       createdAt,
                        className
                    }: VideoCardProps) => {
 
@@ -53,6 +55,10 @@ const VideoCard = ({
                           ">
                         {formatTime(duration)}
                     </p>
+
+                    <p>
+                        {dateToTimeAgo(stringToDate(createdAt))}
+                    </p>
                 </div>
 
 

frontend/src/pages/MyClips.tsx

@@ -20,6 +20,7 @@ const MyClips = () => {
                     duration={clip.duration}
                     thumbnailPath={clip.thumbnailPath}
                     videoPath={clip.videoPath}
+                    createdAt={clip.createdAt}
                     className={"w-40 m-5"}
                 />
             ))}

frontend/src/utils/utils.ts

@@ -12,6 +12,50 @@ function formatTime(seconds: number): string {
     }
 }
 
-export {
-    formatTime
+function stringToDate(dateString: string): Date {
+    const validIso = dateString.substring(0, 23);
+    const date = new Date(validIso);
+    if (isNaN(date.getTime())) {
+        throw new Error("Invalid date string");
+    }
+    return date;
+}
+
+function dateToTimeAgo(date: Date): string {
+    const now = new Date();
+    const secondsAgo = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+    if (secondsAgo < 60) {
+        return `${secondsAgo} seconds ago`;
+    } else if (secondsAgo < 3600) {
+        const minutes = Math.floor(secondsAgo / 60);
+
+        if (minutes === 1) {
+            return "1 minute ago";
+        }
+
+        return `${minutes} minutes ago`;
+    } else if (secondsAgo < 86400) {
+        const hours = Math.floor(secondsAgo / 3600);
+
+        if (hours === 1) {
+            return "1 hour ago";
+        }
+
+        return `${hours} hours ago`;
+    } else {
+        const days = Math.floor(secondsAgo / 86400);
+
+        if (days === 1) {
+            return "1 day ago";
+        }
+
+        return `${days} days ago`;
+    }
+}
+
+export {
+    formatTime,
+    stringToDate,
+    dateToTimeAgo
 }