Extract date formatting into separate file

Change-Id: I0004617349253450c6c706e4334d63924203a804

src/components/EventReports.tsx

@@ -21,15 +21,7 @@ import { MXCField } from "./media";
 import PageviewIcon from "@mui/icons-material/Pageview";
 import ReportIcon from "@mui/icons-material/Warning";
 import ViewListIcon from "@mui/icons-material/ViewList";
-
-const date_format: Intl.DateTimeFormatOptions = {
-  year: "numeric",
-  month: "2-digit",
-  day: "2-digit",
-  hour: "2-digit",
-  minute: "2-digit",
-  second: "2-digit",
-};
+import { date_format } from "./date";
 
 const ReportPagination = () => (
   <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />

src/components/RegistrationTokens.tsx

@@ -22,41 +22,12 @@ import {
   Toolbar,
 } from "react-admin";
 import RegistrationTokenIcon from "@mui/icons-material/ConfirmationNumber";
-
-const date_format = {
-  year: "numeric",
-  month: "2-digit",
-  day: "2-digit",
-  hour: "2-digit",
-  minute: "2-digit",
-  second: "2-digit",
-};
+import { date_format, dateFormatter, dateParser } from "./date";
 
 const validateToken = [regex(/^[A-Za-z0-9._~-]{0,64}$/)];
 const validateUsesAllowed = [number()];
 const validateLength = [number(), maxValue(64)];
 
-const dateParser = v => {
-  const d = new Date(v);
-  if (isNaN(d)) return 0;
-  return d.getTime();
-};
-
-const dateFormatter = v => {
-  if (v === undefined || v === null) return;
-  const d = new Date(v);
-
-  const pad = "00";
-  const year = d.getFullYear().toString();
-  const month = (pad + (d.getMonth() + 1).toString()).slice(-2);
-  const day = (pad + d.getDate().toString()).slice(-2);
-  const hour = (pad + d.getHours().toString()).slice(-2);
-  const minute = (pad + d.getMinutes().toString()).slice(-2);
-
-  // target format yyyy-MM-ddThh:mm
-  return `${year}-${month}-${day}T${hour}:${minute}`;
-};
-
 const registrationTokenFilters = [<BooleanInput source="valid" alwaysOn />];
 
 export const RegistrationTokenList = (props: ListProps) => (

src/components/date.ts

@@ -1,4 +1,4 @@
-export const DATE_FORMAT: Intl.DateTimeFormatOptions = {
+export const date_format: Intl.DateTimeFormatOptions = {
   year: "numeric",
   month: "2-digit",
   day: "2-digit",

src/components/destinations.tsx

@@ -29,7 +29,7 @@ import {
   useTranslate,
 } from "react-admin";
 
-import { DATE_FORMAT } from "./date";
+import { date_format } from "./date";
 
 const DestinationPagination = () => (
   <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
@@ -112,8 +112,8 @@ export const DestinationList = (props: ListProps) => {
         bulkActionButtons={false}
       >
         <TextField source="destination" />
-        <DateField source="failure_ts" showTime options={DATE_FORMAT} />
-        <DateField source="retry_last_ts" showTime options={DATE_FORMAT} />
+        <DateField source="failure_ts" showTime options={date_format} />
+        <DateField source="retry_last_ts" showTime options={date_format} />
         <TextField source="retry_interval" />
         <TextField source="last_successful_stream_ordering" />
         <DestinationReconnectButton />
@@ -133,8 +133,8 @@ export const DestinationShow = (props: ShowProps) => {
       <TabbedShowLayout>
         <Tab label="status" icon={<ViewListIcon />}>
           <TextField source="destination" />
-          <DateField source="failure_ts" showTime options={DATE_FORMAT} />
-          <DateField source="retry_last_ts" showTime options={DATE_FORMAT} />
+          <DateField source="failure_ts" showTime options={date_format} />
+          <DateField source="retry_last_ts" showTime options={date_format} />
           <TextField source="retry_interval" />
           <TextField source="last_successful_stream_ordering" />
         </Tab>

src/components/media.tsx

@@ -34,17 +34,12 @@ import LockIcon from "@mui/icons-material/Lock";
 import LockOpenIcon from "@mui/icons-material/LockOpen";
 import FileOpenIcon from "@mui/icons-material/FileOpen";
 import { alpha, useTheme } from "@mui/material/styles";
+import { dateParser } from "./date";
 import { getMediaUrl } from "../synapse/synapse";
 
 const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
   const translate = useTranslate();
 
-  const dateParser = v => {
-    const d = new Date(v);
-    if (isNaN(d)) return 0;
-    return d.getTime();
-  };
-
   const DeleteMediaToolbar = (props: ToolbarProps) => (
     <Toolbar {...props}>
       <SaveButton

src/components/rooms.tsx

@@ -43,15 +43,7 @@ import {
   RoomDirectoryUnpublishButton,
   RoomDirectoryPublishButton,
 } from "./RoomDirectory";
-
-const date_format = {
-  year: "numeric",
-  month: "2-digit",
-  day: "2-digit",
-  hour: "2-digit",
-  minute: "2-digit",
-  second: "2-digit",
-};
+import { date_format } from "./date";
 
 const RoomPagination = () => (
   <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />

src/components/users.tsx

@@ -57,6 +57,7 @@ import {
   ProtectMediaButton,
   QuarantineMediaButton,
 } from "./media";
+import { date_format } from "./date";
 
 const choices_medium = [
   { id: "email", name: "resources.users.email" },
@@ -68,15 +69,6 @@ const choices_type = [
   { id: "support", name: "support" },
 ];
 
-const date_format: Intl.DateTimeFormatOptions = {
-  year: "numeric",
-  month: "2-digit",
-  day: "2-digit",
-  hour: "2-digit",
-  minute: "2-digit",
-  second: "2-digit",
-};
-
 const UserListActions = () => {
   const { isLoading, total } = useListContext();
   return (