Simplify date formatting for the Account Console (v3) (#21703)

js/apps/account-ui/src/account-security/DeviceActivity.tsx

@@ -31,16 +31,15 @@ import {
   DeviceRepresentation,
   SessionRepresentation,
 } from "../api/representations";
-import useFormatter from "../components/formatter/format-date";
 import { Page } from "../components/page/Page";
 import { TFuncKey } from "../i18n";
 import { keycloak } from "../keycloak";
+import { formatDate } from "../utils/formatDate";
 import { usePromise } from "../utils/usePromise";
 
 const DeviceActivity = () => {
   const { t } = useTranslation();
   const { addAlert, addError } = useAlerts();
-  const { formatTime } = useFormatter();
 
   const [devices, setDevices] = useState<DeviceRepresentation[]>();
   const [key, setKey] = useState(0);
@@ -201,7 +200,7 @@ const DeviceActivity = () => {
                             {t("lastAccessedOn")}
                           </DescriptionListTerm>
                           <DescriptionListDescription>
-                            {formatTime(session.lastAccess)}
+                            {formatDate(new Date(session.lastAccess * 1000))}
                           </DescriptionListDescription>
                         </DescriptionListGroup>
                         <DescriptionListGroup>
@@ -217,7 +216,7 @@ const DeviceActivity = () => {
                             {t("started")}
                           </DescriptionListTerm>
                           <DescriptionListDescription>
-                            {formatTime(session.started)}
+                            {formatDate(new Date(session.started * 1000))}
                           </DescriptionListDescription>
                         </DescriptionListGroup>
                         <DescriptionListGroup>
@@ -225,7 +224,7 @@ const DeviceActivity = () => {
                             {t("expires")}
                           </DescriptionListTerm>
                           <DescriptionListDescription>
-                            {formatTime(session.expires)}
+                            {formatDate(new Date(session.expires * 1000))}
                           </DescriptionListDescription>
                         </DescriptionListGroup>
                       </DescriptionList>

js/apps/account-ui/src/account-security/SigningIn.tsx

@@ -25,10 +25,10 @@ import {
   CredentialRepresentation,
 } from "../api/representations";
 import { EmptyRow } from "../components/datalist/EmptyRow";
-import useFormatter from "../components/format/format-date";
 import { Page } from "../components/page/Page";
 import { TFuncKey } from "../i18n";
 import { keycloak } from "../keycloak";
+import { formatDate } from "../utils/formatDate";
 import { usePromise } from "../utils/usePromise";
 
 type MobileLinkProps = {
@@ -65,7 +65,6 @@ const MobileLink = ({ title, onClick }: MobileLinkProps) => {
 
 const SigningIn = () => {
   const { t } = useTranslation();
-  const { formatDate } = useFormatter();
   const { addAlert, addError } = useAlerts();
   const { login } = keycloak;
 

js/apps/account-ui/src/applications/Applications.tsx

@@ -27,6 +27,7 @@ import { deleteConsent, getApplications } from "../api/methods";
 import { ClientRepresentation } from "../api/representations";
 import { Page } from "../components/page/Page";
 import { TFuncKey } from "../i18n";
+import { formatDate } from "../utils/formatDate";
 import { usePromise } from "../utils/usePromise";
 
 type Application = ClientRepresentation & {
@@ -227,14 +228,7 @@ const Applications = () => {
                         {t("accessGrantedOn")}
                       </DescriptionListTerm>
                       <DescriptionListDescription>
-                        {new Intl.DateTimeFormat("en", {
+                        {formatDate(new Date(application.consent.createdDate))}
-                          year: "numeric",
-                          month: "long",
-                          day: "numeric",
-                          hour: "numeric",
-                          minute: "numeric",
-                          second: "numeric",
-                        }).format(application.consent.createdDate)}
                       </DescriptionListDescription>
                     </DescriptionListGroup>
                   </>

js/apps/account-ui/src/components/format/format-date.ts

@@ -1,30 +0,0 @@
-const DATE_AND_TIME_FORMAT: Intl.DateTimeFormatOptions = {
-  dateStyle: "long",
-  timeStyle: "short",
-};
-
-const TIME_FORMAT: Intl.DateTimeFormatOptions = {
-  year: "numeric",
-  month: "long",
-  day: "numeric",
-  hour: "numeric",
-  minute: "numeric",
-};
-
-//todo use user local
-export default function useFormatter() {
-  return {
-    formatDate: function (
-      date: Date,
-      options: Intl.DateTimeFormatOptions | undefined = DATE_AND_TIME_FORMAT,
-    ) {
-      return date.toLocaleString("en", options);
-    },
-    formatTime: function (
-      time: number,
-      options: Intl.DateTimeFormatOptions | undefined = TIME_FORMAT,
-    ) {
-      return new Intl.DateTimeFormat("en", options).format(time);
-    },
-  };
-}

js/apps/account-ui/src/components/formatter/format-date.ts

@@ -1,29 +0,0 @@
-const DATE_AND_TIME_FORMAT: Intl.DateTimeFormatOptions = {
-  dateStyle: "long",
-  timeStyle: "short",
-};
-
-const TIME_FORMAT: Intl.DateTimeFormatOptions = {
-  year: "numeric",
-  month: "long",
-  day: "numeric",
-  hour: "numeric",
-  minute: "numeric",
-};
-
-export default function useFormatter() {
-  return {
-    formatDate: function (
-      date: Date,
-      options: Intl.DateTimeFormatOptions | undefined = DATE_AND_TIME_FORMAT,
-    ) {
-      return date.toLocaleString("en", options);
-    },
-    formatTime: function (
-      time: number,
-      options: Intl.DateTimeFormatOptions | undefined = TIME_FORMAT,
-    ) {
-      return new Intl.DateTimeFormat("en", options).format(time);
-    },
-  };
-}

js/apps/account-ui/src/utils/formatDate.ts

@@ -0,0 +1,18 @@
+import { i18n } from "../i18n";
+
+export const FORMAT_DATE_ONLY: Intl.DateTimeFormatOptions = {
+  dateStyle: "long",
+};
+
+export const FORMAT_TIME_ONLY: Intl.DateTimeFormatOptions = {
+  timeStyle: "short",
+};
+
+export const FORMAT_DATE_AND_TIME: Intl.DateTimeFormatOptions = {
+  ...FORMAT_DATE_ONLY,
+  ...FORMAT_TIME_ONLY,
+};
+
+export function formatDate(date: Date, options = FORMAT_DATE_AND_TIME) {
+  return date.toLocaleString(i18n.languages, options);
+}