Avoid rendering "Invalid date"

src/components/events/partials/EventsDateCell.tsx

@@ -6,6 +6,7 @@ import { getFilters } from "../../../selectors/tableFilterSelectors";
 import { connect } from "react-redux";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchEvents } from "../../../slices/eventSlice";
+import { renderValidDate } from "../../../utils/dateUtils";
 
 /**
  * This component renders the start date cells of events in the table view
@@ -39,7 +40,7 @@ const EventsDateCell = ({
 			title={t("EVENTS.EVENTS.TABLE.TOOLTIP.START")}
 			onClick={() => addFilter(row.date)}
 		>
-			{t("dateFormats.date.short", { date: new Date(row.date) })}
+			{t("dateFormats.date.short", { date: renderValidDate(row.date) })}
 		</button>
 	);
 };

src/components/events/partials/EventsTechnicalDateCell.tsx

@@ -6,6 +6,7 @@ import { loadEventsIntoTable } from "../../../thunks/tableThunks";
 import { connect } from "react-redux";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchEvents } from "../../../slices/eventSlice";
+import { renderValidDate } from "../../../utils/dateUtils";
 
 /**
  * This component renders the technical date cells of events in the table view
@@ -40,7 +41,7 @@ const EventsTechnicalDateCell = ({
 // @ts-expect-error TS(2554): Expected 1 arguments, but got 0.
 			onClick={() => addFilter()}
 		>
-			{t("dateFormats.date.short", { date: new Date(row.technical_start) })}
+			{t("dateFormats.date.short", { date: renderValidDate(row.technical_start) })}
 		</button>
 	);
 };

src/components/events/partials/ModalTabsAndPages/EventDetailsCommentsTab.tsx

@@ -17,6 +17,7 @@ import {
 	deleteComment as deleteOneComment,
 	deleteCommentReply,
 } from "../../../../slices/eventDetailsSlice";
+import { renderValidDate } from "../../../../utils/dateUtils";
 
 /**
  * This component manages the comment tab of the event details modal
@@ -133,7 +134,7 @@ const EventDetailsCommentsTab = ({
 											{/* details about the comment */}
 											<div className="date">
 												{t("dateFormats.dateTime.short", {
-													dateTime: new Date(comment.creationDate),
+													dateTime: renderValidDate(comment.creationDate),
 												}) || ""}
 											</div>
 											<h4>{comment.author.name}</h4>
@@ -188,7 +189,7 @@ const EventDetailsCommentsTab = ({
 														{/* details about the reply and reply text */}
 														<div className="date">
 															{t("dateFormats.dateTime.short", {
-																dateTime: new Date(reply.creationDate),
+																dateTime: renderValidDate(reply.creationDate),
 															}) || ""}
 														</div>
 														<h4>{reply.author.name}</h4>

src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx

@@ -28,6 +28,7 @@ import {
 	changeStartHour,
 	changeStartMinute,
 	makeDate,
+	renderValidDate,
 } from "../../../../utils/dateUtils";
 import { hours, minutes } from "../../../../configs/modalConfig";
 import {
@@ -225,12 +226,12 @@ const EventDetailsSchedulingTab = ({
 											<td>{conflict.title}</td>
 											<td>
 												{t("dateFormats.dateTime.medium", {
-													dateTime: new Date(conflict.start),
+													dateTime: renderValidDate(conflict.start),
 												})}
 											</td>
 											<td>
 												{t("dateFormats.dateTime.medium", {
-													dateTime: new Date(conflict.end),
+													dateTime: renderValidDate(conflict.end),
 												})}
 											</td>
 										</tr>

src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowDetails.tsx

@@ -14,6 +14,7 @@ import {
 	fetchWorkflowOperations,
 } from "../../../../slices/eventDetailsSlice";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
+import { renderValidDate } from "../../../../utils/dateUtils";
 
 /**
  * This component manages the workflow details for the workflows tab of the event details modal
@@ -117,7 +118,7 @@ const EventDetailsWorkflowDetails = ({
 												</td>
 												<td>
 													{t("dateFormats.dateTime.medium", {
-														dateTime: new Date(workflowData.submittedAt),
+														dateTime: renderValidDate(workflowData.submittedAt),
 													})}
 												</td>
 											</tr>

src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrorDetails.tsx

@@ -8,6 +8,7 @@ import { error_detail_style } from "../../../../utils/eventDetailsUtils";
 import EventDetailsTabHierarchyNavigation from "./EventDetailsTabHierarchyNavigation";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
+import { renderValidDate } from "../../../../utils/dateUtils";
 
 /**
  * This component manages the workflow error details for the workflows tab of the event details modal
@@ -112,7 +113,7 @@ const EventDetailsWorkflowErrorDetails = ({
 											</td>
 											<td>
 												{t("dateFormats.dateTime.medium", {
-													dateTime: new Date(errorDetails.timestamp),
+													dateTime: renderValidDate(errorDetails.timestamp),
 												})}
 											</td>
 										</tr>

src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrors.tsx

@@ -9,6 +9,7 @@ import EventDetailsTabHierarchyNavigation from "./EventDetailsTabHierarchyNaviga
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
 import { fetchWorkflowErrorDetails } from "../../../../slices/eventDetailsSlice";
+import { renderValidDate } from "../../../../utils/dateUtils";
 
 /**
  * This component manages the workflow errors for the workflows tab of the event details modal
@@ -119,7 +120,7 @@ const EventDetailsWorkflowErrors = ({
 														</td>
 														<td>
 															{t("dateFormats.dateTime.medium", {
-																dateTime: new Date(item.timestamp),
+																dateTime: renderValidDate(item.timestamp),
 															})}
 														</td>
 														<td>{item.title}</td>

src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperationDetails.tsx

@@ -7,6 +7,7 @@ import {
 import EventDetailsTabHierarchyNavigation from "./EventDetailsTabHierarchyNavigation";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
+import { renderValidDate } from "../../../../utils/dateUtils";
 
 /**
  * This component manages the workflow operation details for the workflows tab of the event details modal
@@ -132,7 +133,7 @@ const EventDetailsWorkflowOperationDetails = ({
 											</td>
 											<td>
 												{t("dateFormats.dateTime.medium", {
-													dateTime: new Date(operationDetails.started),
+													dateTime: renderValidDate(operationDetails.started),
 												})}
 											</td>
 										</tr>
@@ -146,7 +147,7 @@ const EventDetailsWorkflowOperationDetails = ({
 											</td>
 											<td>
 												{t("dateFormats.dateTime.medium", {
-													dateTime: new Date(operationDetails.completed),
+													dateTime: renderValidDate(operationDetails.completed),
 												})}
 											</td>
 										</tr>

src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowTab.tsx

@@ -26,6 +26,7 @@ import {
 	updateWorkflow,
 } from "../../../../slices/eventDetailsSlice";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
+import { renderValidDate } from "../../../../utils/dateUtils";
 
 /**
  * This component manages the workflows tab of the event details modal
@@ -213,7 +214,7 @@ const EventDetailsWorkflowTab = ({
 															<td>{item.submitter}</td>
 															<td>
 																{t("dateFormats.dateTime.medium", {
-																	dateTime: new Date(item.submitted),
+																	dateTime: renderValidDate(item.submitted),
 																})}
 															</td>
 															<td>{t(item.status)}</td>

src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx

@@ -35,6 +35,7 @@ import {
 	changeStartHourMultiple,
 	changeStartMinute,
 	changeStartMinuteMultiple,
+	renderValidDate,
 } from "../../../../utils/dateUtils";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { Recording, fetchRecordings } from "../../../../slices/recordingSlice";
@@ -76,7 +77,7 @@ const NewSourcePage = <T extends RequiredFormProps>({
 	const user = useAppSelector(state => getUserInformation(state));
 	const inputDevices = useAppSelector(state => getRecordings(state));
 
-	const [conflicts, setConflicts] = useState<{title: string, start: number, end: number}[]>([]);
+	const [conflicts, setConflicts] = useState<{title: string, start: string, end: string}[]>([]);
 
 	useEffect(() => {
 		// Load recordings that can be used for input
@@ -115,12 +116,12 @@ const NewSourcePage = <T extends RequiredFormProps>({
                         <td>{conflict.title}</td>
                         <td>
                           {t("dateFormats.dateTime.medium", {
-                            dateTime: new Date(conflict.start),
+                            dateTime: renderValidDate(conflict.start),
                           })}
                         </td>
                         <td>
                           {t("dateFormats.dateTime.medium", {
-                            dateTime: new Date(conflict.end),
+                            dateTime: renderValidDate(conflict.end),
                           })}
                         </td>
                       </tr>

src/components/events/partials/wizards/NewEventSummary.tsx

@@ -14,6 +14,7 @@ import { translateOverrideFallback } from "../../../../utils/utils";
 import { useAppSelector } from "../../../../store";
 import { FormikProps } from "formik";
 import { TransformedAcl } from "../../../../slices/aclDetailsSlice";
+import { renderValidDate } from "../../../../utils/dateUtils";
 
 /**
  * This component renders the summary page for new events in the new event wizard.
@@ -181,7 +182,7 @@ const NewEventSummary = <T extends RequiredFormProps>({
 												</td>
 												<td>
 													{t("dateFormats.date.short", {
-														date: new Date(formik.values.startDate),
+														date: renderValidDate(formik.values.startDate),
 													})}
 												</td>
 											</tr>

src/components/shared/RenderDate.tsx

@@ -1,8 +1,9 @@
 import { useTranslation } from "react-i18next";
+import { renderValidDate } from "../../utils/dateUtils";
 
 const RenderDate: React.FC<{ date: string }> = ({ date }) => {
     const { t } = useTranslation();
-    return <>{t("dateFormats.dateTime.short", { dateTime: new Date(date) })}</>;
+    return <>{t("dateFormats.dateTime.short", { dateTime: renderValidDate(date) })}</>;
 };
 
 export default RenderDate;

src/components/shared/TableFilters.tsx

@@ -24,6 +24,7 @@ import { getResourceType } from "../../selectors/tableSelectors";
 import { useHotkeys } from "react-hotkeys-hook";
 import moment from "moment";
 import { useAppDispatch, useAppSelector } from "../../store";
+import { renderValidDate } from "../../utils/dateUtils";
 
 /**
  * This component renders the table filters in the upper right corner of the table
@@ -309,11 +310,11 @@ const TableFilters = ({
 														<span>
 															{t(filter.label).substr(0, 40)}:
 															{t("dateFormats.date.short", {
-																date: new Date(filter.value.split("/")[0]),
+																date: renderValidDate(filter.value.split("/")[0]),
 															})}
 															-
 															{t("dateFormats.date.short", {
-																date: new Date(filter.value.split("/")[1]),
+																date: renderValidDate(filter.value.split("/")[1]),
 															})}
 														</span>
 													</span>

src/components/shared/wizard/RenderField.tsx

@@ -10,6 +10,7 @@ import RenderDate from "../RenderDate";
 import { parseISO } from "date-fns";
 import { FieldProps } from "formik";
 import { MetadataField } from "../../../slices/eventSlice";
+import { renderValidDate } from "../../../utils/dateUtils";
 
 const childRef = React.createRef<HTMLDivElement>();
 /**
@@ -420,7 +421,7 @@ const EditableSingleValueTime = ({
 	) : (
 		<div onClick={() => setEditMode(true)} className="show-edit">
 			<span className="editable preserve-newlines">
-				{t("dateFormats.dateTime.short", { dateTime: new Date(text) }) || ""}
+				{t("dateFormats.dateTime.short", { dateTime: renderValidDate(text) }) || ""}
 			</span>
 			<div>
 				<i className="edit fa fa-pencil-square" />

src/components/systems/partials/JobsSubmittedCell.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { renderValidDate } from "../../../utils/dateUtils";
 
 /**
  * This component renders the submitted date cells of jobs in the table view
@@ -11,7 +12,7 @@ const JobsSubmittedCell = ({
 
 	return (
 		<span>
-			{t("dateFormats.dateTime.short", { dateTime: new Date(row.submitted) })}
+			{t("dateFormats.dateTime.short", { dateTime: renderValidDate(row.submitted) })}
 		</span>
 	);
 };

src/components/systems/partials/MeanRunTimeCell.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { renderValidDate } from "../../../utils/dateUtils";
 
 /**
  * This component renders the mean run time cells of systems in the table view
@@ -11,7 +12,7 @@ const MeanRunTimeCell = ({
 
 	return (
 		<span>
-			{t("dateFormats.time.medium", { time: new Date(row.meanRunTime) })}
+			{t("dateFormats.time.medium", { time: renderValidDate(row.meanRunTime) })}
 		</span>
 	);
 };