[CORL-794] Create a common date formatter (#3073)

* Create a common date formatter

Updates all uses of Intl.DateTimeFormat(...)
with re-usable date time formatter functions.

The formatter functions have default formatting
options, but these can be overridden.

CORL-794

* Include options in useMemo

Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>

* Make date formatting accept single locale string

Makes formatDate and createDateFormatter accept
string | string[] | undefined for the locales
argument.

CORL-794

Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/core/client/framework/hooks/useDateTimeFormat.ts

@@ -1,10 +1,11 @@
 import { useMemo } from "react";
 
+import { createDateFormatter } from "coral-common/date";
 import { useCoralContext } from "coral-framework/lib/bootstrap";
 
 export default function useDateTimeFormat(options: Intl.DateTimeFormatOptions) {
   const { locales } = useCoralContext();
-  return useMemo(() => new Intl.DateTimeFormat(locales, options), [
+  return useMemo(() => createDateFormatter(locales, options), [
     locales,
     options,
   ]);

src/core/client/ui/hooks/useDateTimeFormat.ts

@@ -1,10 +1,11 @@
 import { useMemo } from "react";
 
+import { createDateFormatter } from "coral-common/date";
 import { useUIContext } from "coral-ui/components/v2";
 
 export default function useDateTimeFormat(options: Intl.DateTimeFormatOptions) {
   const { locales } = useUIContext();
-  return useMemo(() => new Intl.DateTimeFormat(locales, options), [
+  return useMemo(() => createDateFormatter(locales, options), [
     locales,
     options,
   ]);

src/core/common/date.ts

@@ -0,0 +1,20 @@
+export function createDateFormatter(
+  locales: string | string[] | undefined,
+  options: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+  }
+) {
+  return new Intl.DateTimeFormat(locales, options);
+}
+
+export function formatDate(date: Date, locales: string | string[] | undefined) {
+  const formatter = createDateFormatter(locales);
+  const formattedDate = formatter.format(date);
+
+  return formattedDate;
+}

src/core/server/services/users/download/download.ts

@@ -6,6 +6,7 @@ import htmlToText from "html-to-text";
 import { kebabCase } from "lodash";
 import { Db } from "mongodb";
 
+import { createDateFormatter } from "coral-common/date";
 import { Comment, getLatestRevision } from "coral-server/models/comment";
 import {
   getURLWithCommentID,
@@ -24,7 +25,7 @@ export async function sendUserDownload(
   latestContentDate: Date
 ) {
   // Create the date formatter to format the dates for the CSV.
-  const formatter = Intl.DateTimeFormat(tenant.locale, {
+  const formatter = createDateFormatter(tenant.locale, {
     year: "numeric",
     month: "numeric",
     day: "numeric",

src/core/server/services/users/users.ts

@@ -8,6 +8,7 @@ import {
   DOWNLOAD_LIMIT_TIMEFRAME_DURATION,
   SCHEDULED_DELETION_WINDOW_DURATION,
 } from "coral-common/constants";
+import { formatDate } from "coral-common/date";
 import { Config } from "coral-server/config";
 import {
   DuplicateEmailError,
@@ -431,16 +432,7 @@ export async function requestAccountDeletion(
     deletionDate.toJSDate()
   );
 
-  // TODO: extract out into a common shared formatter
-  // this is being duplicated everywhere
-  const formattedDate = Intl.DateTimeFormat(tenant.locale, {
-    year: "numeric",
-    month: "numeric",
-    day: "numeric",
-    hour: "numeric",
-    minute: "numeric",
-    second: "numeric",
-  }).format(deletionDate.toJSDate());
+  const formattedDate = formatDate(deletionDate.toJSDate(), tenant.locale);
 
   await mailer.add({
     tenantID: tenant.id,
@@ -1238,7 +1230,7 @@ export async function requestCommentsDownload(
         name: "account-notification/download-comments",
         context: {
           username: user.username!,
-          date: Intl.DateTimeFormat(tenant.locale).format(now),
+          date: formatDate(now, tenant.locale),
           downloadUrl,
           organizationName: tenant.organization.name,
           organizationURL: tenant.organization.url,