Make date distance format use correct verbiage

src/shared/components/common/moment-time.tsx

@@ -1,6 +1,5 @@
-import { capitalizeFirstLetter } from "@utils/helpers";
+import { capitalizeFirstLetter, formatPastDate } from "@utils/helpers";
 import format from "date-fns/format";
-import formatDistanceToNow from "date-fns/formatDistanceToNow";
 import parseISO from "date-fns/parseISO";
 import { Component } from "inferno";
 import { I18NextService } from "../../services";
@@ -43,7 +42,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
           className="moment-time font-italics pointer unselectable"
         >
           <Icon icon="edit-2" classes="icon-inline me-1" />
-          {formatDistanceToNow(parseISO(this.props.updated))}
+          {formatPastDate(this.props.updated)}
         </span>
       );
     } else {
@@ -53,7 +52,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
           className="moment-time pointer unselectable"
           data-tippy-content={momentFormat(published)}
         >
-          {formatDistanceToNow(parseISO(published))}
+          {formatPastDate(published)}
         </span>
       );
     }

src/shared/components/modlog.tsx

@@ -7,6 +7,7 @@ import {
 } from "@utils/app";
 import {
   debounce,
+  formatPastDate,
   getIdFromString,
   getPageFromString,
   getQueryParams,
@@ -15,8 +16,6 @@ import {
 import { amAdmin, amMod } from "@utils/roles";
 import type { QueryParams } from "@utils/types";
 import { Choice, RouteDataResponse } from "@utils/types";
-import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict";
-import parseISO from "date-fns/parseISO";
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import { T } from "inferno-i18next-dess";
@@ -119,10 +118,6 @@ function getActionFromString(action?: string): ModlogActionType {
   return action !== undefined ? (action as ModlogActionType) : "All";
 }
 
-function getExpires(expires: string) {
-  return formatDistanceToNowStrict(parseISO(expires));
-}
-
 const getModlogActionMapper =
   (
     actionType: ModlogActionType,
@@ -376,7 +371,7 @@ function renderModlogType({ type_, view }: ModlogType) {
           )}
           {expires && (
             <span>
-              <div>expires: {getExpires(expires)}</div>
+              <div>expires: {formatPastDate(expires)}</div>
             </span>
           )}
         </>
@@ -408,7 +403,7 @@ function renderModlogType({ type_, view }: ModlogType) {
           )}
           {expires && (
             <span>
-              <div>expires: {getExpires(expires)}</div>
+              <div>expires: {formatPastDate(expires)}</div>
             </span>
           )}
         </>
@@ -472,7 +467,7 @@ function renderModlogType({ type_, view }: ModlogType) {
           )}
           {expires && (
             <span>
-              <div>expires: {getExpires(expires)}</div>
+              <div>expires: {formatPastDate(expires)}</div>
             </span>
           )}
         </>

src/shared/utils/helpers/format-past-date.ts

@@ -0,0 +1,12 @@
+import formatDistanceStrict from "date-fns/formatDistanceStrict";
+import parseISO from "date-fns/parseISO";
+
+export default function (dateString?: string) {
+  return formatDistanceStrict(
+    parseISO(dateString ?? Date.now().toString()),
+    new Date(),
+    {
+      addSuffix: true,
+    }
+  );
+}

src/shared/utils/helpers/index.ts

@@ -1,6 +1,7 @@
 import capitalizeFirstLetter from "./capitalize-first-letter";
 import debounce from "./debounce";
 import editListImmutable from "./edit-list-immutable";
+import formatPastDate from "./format-past-date";
 import futureDaysToUnixTime from "./future-days-to-unix-time";
 import getIdFromString from "./get-id-from-string";
 import getPageFromString from "./get-page-from-string";
@@ -26,6 +27,7 @@ export {
   capitalizeFirstLetter,
   debounce,
   editListImmutable,
+  formatPastDate,
   futureDaysToUnixTime,
   getIdFromString,
   getPageFromString,