Standardize date display

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console/src/components/SnapshotBanner.tsx

@@ -3,7 +3,7 @@ import { useTranslate } from "@probo/i18n";
 import { useLazyLoadQuery, graphql } from "react-relay";
 import { useLocation } from "react-router";
 import type { SnapshotBannerQuery } from "./__generated__/SnapshotBannerQuery.graphql";
-import { getSnapshotTypeUrlPath, getSnapshotTypeLabel, sprintf } from "@probo/helpers";
+import { getSnapshotTypeUrlPath, getSnapshotTypeLabel, sprintf, formatDate } from "@probo/helpers";
 
 const snapshotQuery = graphql`
   query SnapshotBannerQuery($snapshotId: ID!) {
@@ -28,7 +28,7 @@ type Props = {
 };
 
 export function SnapshotBanner({ snapshotId }: Props) {
-  const { __, dateFormat } = useTranslate();
+  const { __ } = useTranslate();
   const location = useLocation();
 
   const data = useLazyLoadQuery<SnapshotBannerQuery>(snapshotQuery, { snapshotId });
@@ -53,7 +53,7 @@ export function SnapshotBanner({ snapshotId }: Props) {
           {sprintf(
             __("You are viewing a %s snapshot from %s"),
             getSnapshotTypeLabel(__, snapshot.type).toLocaleLowerCase(),
-            dateFormat(snapshot.createdAt, { year: "numeric", month: "short", day: "numeric" })
+            formatDate(snapshot.createdAt)
           )}
         </p>
       </div>

apps/console/src/components/snapshots/LinkedSnapshotsCard.tsx

@@ -18,7 +18,7 @@ import { useTranslate } from "@probo/i18n";
 import type { LinkedSnapshotsCardFragment$key } from "./__generated__/LinkedSnapshotsCardFragment.graphql";
 import { useFragment } from "react-relay";
 import { useMemo, useState } from "react";
-import { sprintf, getSnapshotTypeLabel, getSnapshotTypeUrlPath } from "@probo/helpers";
+import { sprintf, getSnapshotTypeLabel, getSnapshotTypeUrlPath, formatDate } from "@probo/helpers";
 import { useOrganizationId } from "/hooks/useOrganizationId";
 import { LinkedSnapshotsDialog } from "./LinkedSnapshotsDialog";
 import clsx from "clsx";
@@ -165,7 +165,7 @@ function SnapshotRow(props: {
 }) {
   const snapshot = useFragment(linkedSnapshotFragment, props.snapshot);
   const organizationId = useOrganizationId();
-  const { __, dateFormat } = useTranslate();
+  const { __ } = useTranslate();
 
   const urlPath = getSnapshotTypeUrlPath(snapshot.type);
   const snapshotUrl = `/organizations/${organizationId}/snapshots/${snapshot.id}${urlPath}`;
@@ -184,7 +184,7 @@ function SnapshotRow(props: {
         </Td>
       )}
       <Td className="text-txt-tertiary">
-        {dateFormat(snapshot.createdAt, { year: "numeric", month: "short", day: "numeric" })}
+        {formatDate(snapshot.createdAt)}
       </Td>
       <Td noLink width={50} className="text-end">
         <Button

apps/console/src/components/snapshots/LinkedSnapshotsDialog.tsx

@@ -12,7 +12,7 @@ import {
   IconTrashCan,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
-import { getSnapshotTypeLabel } from "@probo/helpers";
+import { getSnapshotTypeLabel, formatDate } from "@probo/helpers";
 import { Suspense, useMemo, useState, type ReactNode } from "react";
 import { graphql } from "relay-runtime";
 import { useLazyLoadQuery, usePaginationFragment } from "react-relay";
@@ -155,7 +155,7 @@ type RowProps = {
 };
 
 function SnapshotRow(props: RowProps) {
-  const { __, dateFormat } = useTranslate();
+  const { __ } = useTranslate();
 
   const isLinked = props.linkedSnapshots.has(props.snapshot.id);
   const onClick = isLinked ? props.onUnlink : props.onLink;
@@ -177,7 +177,7 @@ function SnapshotRow(props: RowProps) {
           {props.snapshot.description || __("No description")}
         </div>
         <div className="text-sm text-txt-tertiary flex-shrink-0">
-          {dateFormat(props.snapshot.createdAt, { year: "numeric", month: "short", day: "numeric" })}
+          {formatDate(props.snapshot.createdAt)}
         </div>
       </div>
       <Button

apps/console/src/components/trustCenter/TrustCenterAuditsCard.tsx

@@ -16,7 +16,7 @@ import {
 import { useTranslate } from "@probo/i18n";
 import { useFragment } from "react-relay";
 import { useMemo, useState } from "react";
-import { sprintf, getAuditStateVariant, getAuditStateLabel } from "@probo/helpers";
+import { sprintf, getAuditStateVariant, getAuditStateLabel, formatDate } from "@probo/helpers";
 import { useOrganizationId } from "/hooks/useOrganizationId";
 import clsx from "clsx";
 import type { TrustCenterAuditsCardFragment$key } from "./__generated__/TrustCenterAuditsCardFragment.graphql";
@@ -131,7 +131,7 @@ function AuditRow(props: {
   const { __ } = useTranslate();
 
   const validUntilFormatted = audit.validUntil
-    ? new Date(audit.validUntil).toLocaleDateString()
+    ? formatDate(audit.validUntil)
     : __("No expiry");
 
   return (