Unify time distance format

src/components/Assets/AssetList/AssetEntry/index.tsx

@@ -1,9 +1,9 @@
 import { DefaultTheme, useTheme } from "styled-components";
 import { InsightType } from "../../../../types";
+import { formatTimeDistance } from "../../../../utils/formatTimeDistance";
 import { getInsightImportanceColor } from "../../../../utils/getInsightImportanceColor";
 import { getInsightTypeInfo } from "../../../../utils/getInsightTypeInfo";
 import { getInsightTypeOrderPriority } from "../../../../utils/getInsightTypeOrderPriority";
-import { timeAgo } from "../../../../utils/timeAgo";
 import { Tooltip } from "../../../common/Tooltip";
 import { GlobeIcon } from "../../../common/icons/GlobeIcon";
 import { getAssetTypeInfo } from "../../utils";
@@ -82,10 +82,10 @@ export const AssetEntry = (props: AssetEntryProps) => {
 
   const servicesTitle = props.entry.services.join(", ");
 
-  const timeDistance = timeAgo(lastSeenDateTime, "short");
-  const timeDistanceString = timeDistance
-    ? `${timeDistance.value}${timeDistance.unit}`
-    : "";
+  const timeDistanceString = formatTimeDistance(lastSeenDateTime, {
+    format: "short",
+    withDescriptiveWords: false
+  }).replace(" ", "");
   const timeDistanceTitle = new Date(lastSeenDateTime).toString();
 
   return (

src/components/Notifications/NotificationCard/index.tsx

@@ -1,6 +1,6 @@
 import { DefaultTheme, useTheme } from "styled-components";
+import { formatTimeDistance } from "../../../utils/formatTimeDistance";
 import { getInsightTypeInfo } from "../../../utils/getInsightTypeInfo";
-import { timeAgo } from "../../../utils/timeAgo";
 import { InsightScope } from "../../Insights/types";
 import { Badge } from "../../common/Badge";
 import { Tooltip } from "../../common/Tooltip";
@@ -101,7 +101,9 @@ export const NotificationCard = (props: NotificationCardProps) => {
 
   const title = props.data.title;
   const linkName = getLinkName(props.data.data);
-  const timeDistance = timeAgo(props.data.timestamp);
+  const timeDistanceString = formatTimeDistance(props.data.timestamp, {
+    format: "medium"
+  });
 
   return (
     <s.Card
@@ -115,11 +117,9 @@ export const NotificationCard = (props: NotificationCardProps) => {
           <Tooltip title={title}>
             <s.Title>{title}</s.Title>
           </Tooltip>
-          {timeDistance && (
+          {timeDistanceString && (
             <Tooltip title={new Date(props.data.timestamp).toString()}>
-              <s.TimeDistance>
-                {timeDistance.value} {timeDistance.unit} ago
-              </s.TimeDistance>
+              <s.TimeDistance>{timeDistanceString}</s.TimeDistance>
             </Tooltip>
           )}
         </s.Header>

src/components/RecentActivity/RecentActivityTable/index.tsx

@@ -8,10 +8,10 @@ import { useMemo } from "react";
 import { useTheme } from "styled-components";
 import { Duration } from "../../../globals";
 import { isNumber } from "../../../typeGuards/isNumber";
+import { formatTimeDistance } from "../../../utils/formatTimeDistance";
 import { getInsightImportanceColor } from "../../../utils/getInsightImportanceColor";
 import { getInsightTypeInfo } from "../../../utils/getInsightTypeInfo";
 import { getInsightTypeOrderPriority } from "../../../utils/getInsightTypeOrderPriority";
-import { timeAgo } from "../../../utils/timeAgo";
 import { Badge } from "../../common/Badge";
 import { Button } from "../../common/Button";
 import { Tooltip } from "../../common/Tooltip";
@@ -65,10 +65,10 @@ export const RecentActivityTable = (props: RecentActivityTableProps) => {
 
   const renderTimeDistance = (timestamp: string, viewMode: ViewMode) => {
     const title = new Date(timestamp).toString();
-    const timeDistance = timeAgo(timestamp, "short");
-    const timeDistanceString = timeDistance
-      ? `${timeDistance.value}${timeDistance.unit}`
-      : "";
+    const timeDistanceString = formatTimeDistance(timestamp, {
+      format: "short",
+      withDescriptiveWords: false
+    }).replace(" ", "");
 
     return viewMode === "table" ? (
       <s.TimeDistanceContainer>

src/utils/formatTimeDistance.ts

@@ -1,6 +1,151 @@
-import { intlFormatDistance } from "date-fns";
+import intervalToDuration from "date-fns/intervalToDuration";
+import { isNumber } from "../typeGuards/isNumber";
 
-export const formatTimeDistance = (dateTime: string) =>
-  intlFormatDistance(new Date(dateTime), new Date(), {
-    numeric: "always",
-  });
+export type TimeUnit =
+  | "seconds"
+  | "minutes"
+  | "hours"
+  | "days"
+  | "weeks"
+  | "months"
+  | "years";
+
+const unitFormats = {
+  seconds: {
+    short: "s",
+    medium: "sec",
+    long: "second"
+  },
+  minutes: {
+    short: "m",
+    medium: "min",
+    long: "minute"
+  },
+  hours: {
+    short: "h",
+    medium: "hr",
+    long: "hour"
+  },
+  days: {
+    short: "d",
+    medium: "d",
+    long: "day"
+  },
+  weeks: {
+    short: "wk",
+    medium: "wk",
+    long: "week"
+  },
+  months: {
+    short: "mo",
+    medium: "mo",
+    long: "month"
+  },
+  years: {
+    short: "y",
+    medium: "yr",
+    long: "year"
+  }
+};
+
+const getTimeDistance = (
+  date: string,
+  dateTimeToCompare: string
+): { value: number; unit: TimeUnit } | undefined => {
+  const { years, months, weeks, days, hours, minutes, seconds } =
+    intervalToDuration({
+      start: new Date(date),
+      end: new Date(dateTimeToCompare)
+    });
+
+  let value: number | undefined;
+  let unit: TimeUnit | undefined;
+
+  if (seconds) {
+    value = seconds;
+    unit = "seconds";
+  }
+
+  if (minutes) {
+    value = minutes;
+    unit = "minutes";
+  }
+
+  if (hours) {
+    value = hours;
+    unit = "hours";
+  }
+
+  if (days) {
+    value = days;
+    unit = "days";
+  }
+
+  if (weeks) {
+    value = weeks;
+    unit = "weeks";
+  }
+
+  if (months) {
+    value = months;
+    unit = "months";
+  }
+
+  if (years) {
+    value = years;
+    unit = "years";
+  }
+
+  if (!unit || !isNumber(value)) {
+    return;
+  }
+
+  return {
+    value,
+    unit
+  };
+};
+
+export const formatTimeDistance = (
+  dateTime: string,
+  options?: {
+    format?: "short" | "medium" | "long";
+    withDescriptiveWords?: boolean;
+  }
+) => {
+  const now = new Date();
+  const dateTimeToCompare = new Date(dateTime).valueOf();
+
+  const distance = getTimeDistance(now.toISOString(), dateTime);
+
+  if (!distance) {
+    return "";
+  }
+
+  const withDescriptiveWords =
+    typeof options?.withDescriptiveWords === "boolean"
+      ? options.withDescriptiveWords
+      : true;
+  const format = options?.format || "long";
+  let unitString = unitFormats[distance.unit][format];
+
+  if (distance.value === 1 && format === "long") {
+    unitString = `${unitString}s`;
+  }
+
+  const distanceString = distance ? `${distance.value} ${unitString}` : "";
+
+  if (withDescriptiveWords) {
+    if (dateTimeToCompare > now.valueOf()) {
+      return `in ${distanceString}`;
+    }
+
+    if (dateTimeToCompare < now.valueOf()) {
+      return `${distanceString} ago`;
+    }
+
+    return "now";
+  }
+
+  return distanceString;
+};