From 9ea79c2de30911845f4246a7aefde18048c72faf Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Wed, 12 Apr 2023 21:07:48 +0200
Subject: [PATCH] include createdAt on individual video page

---
 src/pages/share/[videoId].tsx | 17 +++++++---
 src/pages/videos.tsx          | 61 +----------------------------------
 src/utils/getTime.ts          | 59 +++++++++++++++++++++++++++++++++
 3 files changed, 73 insertions(+), 64 deletions(-)
 create mode 100644 src/utils/getTime.ts

diff --git a/src/pages/share/[videoId].tsx b/src/pages/share/[videoId].tsx
index 800323c..3643653 100644
--- a/src/pages/share/[videoId].tsx
+++ b/src/pages/share/[videoId].tsx
@@ -6,6 +6,7 @@ import ReactPlayer from "react-player";
 import { useRouter } from "next/router";
 import Link from "next/link";
 import Image from "next/image";
+import { getTime } from "~/utils/getTime";
 
 const VideoList: NextPage = () => {
   const router = useRouter();
@@ -67,11 +68,19 @@ const VideoList: NextPage = () => {
           <div className="mb-10 mt-4 w-full max-w-[1800px] pl-[24px]">
             <div>
               {video?.video?.title ? (
-                <span className="text-[18px] text-lg font-medium">
-                  {video?.video?.title}
-                </span>
+                <div className="mb-4 flex flex-col">
+                  <span className="text-[18px] text-lg font-medium">
+                    {video?.video?.title}
+                  </span>
+                  <span className="text-[18px] text-sm text-gray-800">
+                    {getTime(video?.video?.createdAt)}
+                  </span>
+                </div>
               ) : (
-                <div className="h-6 w-[300px] animate-pulse rounded bg-slate-200"></div>
+                <div className="mb-4 flex flex-col">
+                  <div className="h-5 w-[300px] animate-pulse rounded bg-slate-200"></div>
+                  <div className="mt-2 h-4 w-[50px] animate-pulse rounded bg-slate-200"></div>
+                </div>
               )}
             </div>
             <div className="mt-2 flex flex-row items-center">
diff --git a/src/pages/videos.tsx b/src/pages/videos.tsx
index 7b729ae..af0261a 100644
--- a/src/pages/videos.tsx
+++ b/src/pages/videos.tsx
@@ -7,6 +7,7 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import Image from "next/image";
 import VideoUploadModal from "~/components/VideoUploadModal";
+import { getTime } from "~/utils/getTime";
 
 const VideoList: NextPage = () => {
   const router = useRouter();
@@ -83,66 +84,6 @@ const VideoCardSkeleton = () => {
 };
 
 const VideoCard = ({ title, id, createdAt }: VideoCardProps) => {
-  const getTime = (timestamp: Date): string => {
-    const delta = Math.round(
-      (+new Date() - new Date(timestamp).getTime()) / 1000
-    );
-
-    const minute = 60,
-      hour = minute * 60,
-      day = hour * 24;
-
-    let timeString = "";
-
-    if (delta < 60) {
-      timeString = "Just now";
-    } else if (delta < 2 * minute) {
-      timeString = "1 min";
-    } else if (delta < hour) {
-      timeString = Math.floor(delta / minute).toString() + " mins";
-    } else if (Math.floor(delta / hour) === 1) {
-      timeString = "1 hour ago";
-    } else if (delta < day) {
-      timeString = Math.floor(delta / hour).toString() + " hours ago";
-    } else if (delta < day * 2) {
-      timeString = "yesterday";
-    } else if (delta < day * 7) {
-      timeString = Math.floor(delta / day).toString() + " days ago";
-    } else {
-      const date = new Date(timestamp);
-      const months = [
-        "Jan",
-        "Feb",
-        "Mar",
-        "Apr",
-        "May",
-        "Jun",
-        "Jul",
-        "Aug",
-        "Sep",
-        "Oct",
-        "Nov",
-        "Dec",
-      ];
-
-      timeString =
-        `${
-          months[date.getMonth()] || ""
-        }} ${date.getDate()} ${date.getFullYear()} ` +
-        `at ${
-          date.getHours().toString().length === 1
-            ? "0" + date.getHours().toString()
-            : date.getHours()
-        }:${
-          date.getMinutes().toString().length === 1
-            ? "0" + date.getMinutes().toString()
-            : date.getMinutes()
-        }`;
-    }
-
-    return timeString;
-  };
-
   return (
     <Link href={`/share/${id}`}>
       <div className="h-[240px] w-[250px] cursor-pointer overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
diff --git a/src/utils/getTime.ts b/src/utils/getTime.ts
new file mode 100644
index 0000000..9644024
--- /dev/null
+++ b/src/utils/getTime.ts
@@ -0,0 +1,59 @@
+export const getTime = (timestamp: Date): string => {
+  const delta = Math.round(
+    (+new Date() - new Date(timestamp).getTime()) / 1000
+  );
+
+  const minute = 60,
+    hour = minute * 60,
+    day = hour * 24;
+
+  let timeString = "";
+
+  if (delta < 60) {
+    timeString = "Just now";
+  } else if (delta < 2 * minute) {
+    timeString = "1 min";
+  } else if (delta < hour) {
+    timeString = Math.floor(delta / minute).toString() + " mins";
+  } else if (Math.floor(delta / hour) === 1) {
+    timeString = "1 hour ago";
+  } else if (delta < day) {
+    timeString = Math.floor(delta / hour).toString() + " hours ago";
+  } else if (delta < day * 2) {
+    timeString = "yesterday";
+  } else if (delta < day * 7) {
+    timeString = Math.floor(delta / day).toString() + " days ago";
+  } else {
+    const date = new Date(timestamp);
+    const months = [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ];
+
+    timeString =
+      `${
+        months[date.getMonth()] || ""
+      }} ${date.getDate()} ${date.getFullYear()} ` +
+      `at ${
+        date.getHours().toString().length === 1
+          ? "0" + date.getHours().toString()
+          : date.getHours()
+      }:${
+        date.getMinutes().toString().length === 1
+          ? "0" + date.getMinutes().toString()
+          : date.getMinutes()
+      }`;
+  }
+
+  return timeString;
+};