show relative time string

package-lock.json

@@ -21,6 +21,7 @@
         "@trpc/react-query": "^10.18.0",
         "@trpc/server": "^10.18.0",
         "axios": "^1.3.5",
+        "dayjs": "^1.11.7",
         "next": "^13.2.4",
         "next-auth": "^4.21.0",
         "react": "18.2.0",
@@ -2724,6 +2725,11 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/dayjs": {
+      "version": "1.11.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -8338,6 +8344,11 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "dayjs": {
+      "version": "1.11.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

package.json

@@ -22,6 +22,7 @@
     "@trpc/react-query": "^10.18.0",
     "@trpc/server": "^10.18.0",
     "axios": "^1.3.5",
+    "dayjs": "^1.11.7",
     "next": "^13.2.4",
     "next-auth": "^4.21.0",
     "react": "18.2.0",

src/components/ExpireDateSelectMenu.tsx

@@ -1,7 +1,10 @@
 import { Listbox, Transition } from "@headlessui/react";
 import { Fragment } from "react";
-import { getTime } from "~/utils/getTime";
 import { api } from "~/utils/api";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(relativeTime);
 
 interface Props {
   shareLinkExpiresAt: Date | null;
@@ -35,16 +38,28 @@ export default function ExpireDateSelectMenu({
       },
     });
   const handleChange = (value: string) => {
-    console.log("selecting value", value);
+    let timestamp: null | Date = new Date();
-
+    switch (value) {
-    const now = new Date();
+      case "Never expire":
-    now.setHours(now.getHours() + 1);
+        timestamp = null;
-
+        break;
-    console.log(now);
+      case "In 1 hour":
+        timestamp.setHours(timestamp.getHours() + 1);
+        break;
+      case "In 24 hours":
+        timestamp.setDate(timestamp.getDate() + 1);
+        break;
+      case "In 7 days":
+        timestamp.setDate(timestamp.getDate() + 7);
+        break;
+      case "In 30 days":
+        timestamp.setDate(timestamp.getDate() + 30);
+        break;
+    }
 
     setShareLinkExpiresAtMutation.mutate({
       videoId,
-      shareLinkExpiresAt: now,
+      shareLinkExpiresAt: timestamp,
     });
   };
 
@@ -58,12 +73,12 @@ export default function ExpireDateSelectMenu({
 
   return (
     <div>
-      <Listbox value={shareLinkExpiresAt} onChange={handleChange}>
+      <Listbox value={"dummy text"} onChange={handleChange}>
         <div>
           <Listbox.Button className="h-6 rounded border border-solid border-[#d5d9df] bg-white px-[7px] font-medium">
             <span className="block truncate">
               {shareLinkExpiresAt
-                ? getTime(shareLinkExpiresAt)
+                ? "In " + dayjs(shareLinkExpiresAt).fromNow(true)
                 : "Never expire"}
             </span>
           </Listbox.Button>
@@ -76,7 +91,7 @@ export default function ExpireDateSelectMenu({
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Listbox.Options className="absolute z-10 mt-1 max-h-60 max-h-[300px] w-[220px] w-full overflow-auto rounded-md bg-white py-1 py-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            <Listbox.Options className="absolute z-10 mt-1 max-h-60 max-h-[300px] w-[220px] overflow-auto rounded-md bg-white py-1 py-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
               {availableExpireDates.map((person, personIdx) => (
                 <Listbox.Option
                   key={personIdx}

src/server/api/routers/video.ts

@@ -125,7 +125,12 @@ export const videoRouter = createTRPCRouter({
       };
     }),
   setShareLinkExpiresAt: protectedProcedure
-    .input(z.object({ videoId: z.string(), shareLinkExpiresAt: z.date() }))
+    .input(
+      z.object({
+        videoId: z.string(),
+        shareLinkExpiresAt: z.nullable(z.date()),
+      })
+    )
     .mutation(async ({ ctx, input }) => {
       const updateVideo = await ctx.prisma.video.updateMany({
         where: {