refactor relativeTime function

VATMENA · Apr 3, 2024 · 66f0cba · 66f0cba
1 parent f9db2f4
commit 66f0cba
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 48 deletions.
diff --git a/src/lib/date.ts b/src/lib/date.ts
@@ -24,3 +24,26 @@ export function humanReadableDateOnly(d: Date): string {
 
   return new Intl.DateTimeFormat("en-US", options).format(d);
 }
+
+export function relativeTime(fromDate: Date, toDate: Date = new Date()) {
+  const units = [
+    { max: 1000 * 60, name: "second", divisor: 1000 },
+    { max: 1000 * 60 * 60, name: "minute", divisor: 1000 * 60 },
+    { max: 1000 * 60 * 60 * 24, name: "hour", divisor: 1000 * 60 * 60 },
+    {
+      max: 1000 * 60 * 60 * 24 * 30,
+      name: "day",
+      divisor: 1000 * 60 * 60 * 24,
+    },
+  ];
+
+  const millis = fromDate.getTime() - toDate.getTime();
+
+  const unit = units.find((u) => Math.abs(millis) < u.max);
+  if (!unit) return "Unknown";
+
+  const difference = Math.round(millis / unit.divisor);
+
+  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+  return rtf.format(difference, unit.name as any);
+}
diff --git a/src/routes/[id]/training/queues/[queueId]/data-table.svelte b/src/routes/[id]/training/queues/[queueId]/data-table.svelte
@@ -11,30 +11,10 @@
   import { addPagination } from "svelte-headless-table/plugins";
   import { Button } from "$lib/components/ui/button";
   import type { TrainingQueueMembership } from "@prisma/client";
+  import { relativeTime } from "$lib/date";
 
   export let members: TrainingQueueMembership[];
 
-  const timeString = (joinedAt: Date): string => {
-    const now = new Date();
-
-    const diff = now.getTime() - joinedAt.getTime();
-
-    const sec = Math.floor(diff / 1000);
-    const min = Math.floor(sec / 60);
-    const hr = Math.floor(min / 60);
-    const day = Math.floor(hr / 24);
-
-    if (day > 0) {
-      return `${day} day${day > 1 ? "s" : ""}`;
-    } else if (hr > 0) {
-      return `${hr} hour${hr > 1 ? "s" : ""}`;
-    } else if (min > 0) {
-      return `${min} minute${min > 1 ? "s" : ""}`;
-    } else {
-      return `${sec} second${sec > 1 ? "s" : ""}`;
-    }
-  };
-
   const table = createTable(readable(members), {
     page: addPagination(),
   });
@@ -50,13 +30,13 @@
     }),
     table.column({
       accessor: (member: TrainingQueueMembership) =>
-        member.joinedAt.toDateString(),
-      header: "Joined at",
+        relativeTime(member.joinedAt),
+      header: "Joined queue",
     }),
     table.column({
       accessor: (member: TrainingQueueMembership) =>
-        timeString(member.joinedAt),
-      header: "Waiting time",
+        member.joinedAt.toDateString(),
+      header: "Join date",
     }),
     table.column({
       accessor: (member: any) => member.user.id,

diff --git a/src/routes/admin/connections/+page.svelte b/src/routes/admin/connections/+page.svelte
@@ -4,6 +4,7 @@
   import * as Table from "$lib/components/ui/table";
   import type { PageData } from "./$types";
   import type { Connection, User } from "@prisma/client";
+  import { relativeTime } from "$lib/date";
 
   export let data: PageData;
 
@@ -42,29 +43,6 @@
 
   const { headerRows, pageRows, tableAttrs, tableBodyAttrs } =
     table.createViewModel(columns);
-
-  function relativeTime(fromDate: Date, toDate: Date = new Date()) {
-    const units = [
-      { max: 1000 * 60, name: "second", divisor: 1000 },
-      { max: 1000 * 60 * 60, name: "minute", divisor: 1000 * 60 },
-      { max: 1000 * 60 * 60 * 24, name: "hour", divisor: 1000 * 60 * 60 },
-      {
-        max: 1000 * 60 * 60 * 24 * 30,
-        name: "day",
-        divisor: 1000 * 60 * 60 * 24,
-      },
-    ];
-
-    const millis = fromDate.getTime() - toDate.getTime();
-
-    const unit = units.find((u) => Math.abs(millis) < u.max);
-    if (!unit) return "Unknown";
-
-    const difference = Math.round(millis / unit.divisor);
-
-    const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-    return rtf.format(difference, unit.name as any);
-  }
 </script>
 
 <div class="flex items-center justify-between">