feat: use consistent datetime format ml-308 (#338)

* feat(frontend, shared): use consistent datetime format ml-308

* fix(frontend): lint errors ml-308

* feat(frontend, shared): create type from enum ml-308

Author: Karpt221

apps/frontend/src/libs/components/meeting-pdf/meeting-pdf.tsx

@@ -1,4 +1,5 @@
 import { Document, Page, Text, View } from "~/libs/components/components.js";
+import { DateTimeFormat } from "~/libs/enums/enums.js";
 import { formatDate } from "~/libs/helpers/helpers.js";
 import { type MeetingPdfProperties } from "~/libs/types/types.js";
 
@@ -11,31 +12,33 @@ const MeetingPdf: React.FC<MeetingPdfProperties> = ({
 	summary,
 	title,
 	transcription,
-}: MeetingPdfProperties): React.ReactElement => (
-	<Document>
-		<Page size="A4" style={styles.page}>
-			<View style={styles.section}>
-				<Text style={styles.title}>{title}</Text>
-				<Text style={styles.text}>
-					Date: {formatDate(new Date(createdAt), "D MMMM hA")}
-				</Text>
-			</View>
+}: MeetingPdfProperties): React.ReactElement => {
+	return (
+		<Document>
+			<Page size="A4" style={styles.page}>
+				<View style={styles.section}>
+					<Text style={styles.title}>{title}</Text>
+					<Text style={styles.text}>
+						Date: {formatDate(new Date(createdAt), DateTimeFormat.MEETING)}
+					</Text>
+				</View>
 
-			<Text style={styles.sectionHeader}>SUMMARY SECTION</Text>
-			<View style={styles.line} />
-			<View style={styles.section}>{renderMarkdown(summary)}</View>
-
-			<Text style={styles.sectionHeader}>ACTION POINTS</Text>
-			<View style={styles.line} />
-			<View style={styles.section}>{renderMarkdown(actionItems)}</View>
+				<Text style={styles.sectionHeader}>SUMMARY SECTION</Text>
+				<View style={styles.line} />
+				<View style={styles.section}>{renderMarkdown(summary)}</View>
 
-			<View style={styles.section}>
-				<Text style={styles.sectionHeader}>TRANSCRIPTION</Text>
+				<Text style={styles.sectionHeader}>ACTION POINTS</Text>
 				<View style={styles.line} />
-				{renderMarkdown(transcription)}
-			</View>
-		</Page>
-	</Document>
-);
+				<View style={styles.section}>{renderMarkdown(actionItems)}</View>
+
+				<View style={styles.section}>
+					<Text style={styles.sectionHeader}>TRANSCRIPTION</Text>
+					<View style={styles.line} />
+					{renderMarkdown(transcription)}
+				</View>
+			</Page>
+		</Document>
+	);
+};
 
 export { MeetingPdf };

apps/frontend/src/libs/enums/enums.ts

@@ -31,6 +31,7 @@ export {
 	APIPath,
 	AppEnvironment,
 	ContentType,
+	DateTimeFormat,
 	HTTPMethod,
 	KeyboardKey,
 	MeetingErrorMessage,

apps/frontend/src/pages/meeting-details/meeting-details.tsx

@@ -14,6 +14,7 @@ import { EMPTY_ARRAY_LENGTH } from "~/libs/constants/constants.js";
 import {
 	AppRoute,
 	DataStatus,
+	DateTimeFormat,
 	MeetingErrorMessage,
 	MeetingStatus,
 	NotificationMessage,
@@ -165,7 +166,8 @@ const MeetingDetails: React.FC = () => {
 			<div className={styles["meeting-details"]}>
 				<div className={styles["meeting-details__header"]}>
 					<h1 className={styles["meeting-details__title"]}>
-						{title} | {formatDate(new Date(meeting.createdAt), "D MMMM hA")}
+						{title} |{" "}
+						{formatDate(new Date(meeting.createdAt), DateTimeFormat.MEETING)}
 						<MeetingStatusBadge status={meeting.status} />
 					</h1>
 					<div className={styles["meeting-details__actions"]}>

packages/shared/src/index.ts

@@ -7,6 +7,7 @@ export {
 	APIPath,
 	AppEnvironment,
 	ContentType,
+	DateTimeFormat,
 	ExceptionMessage,
 	Extension,
 	KeyboardKey,

packages/shared/src/libs/enums/datetime-format.enum.ts

@@ -0,0 +1,6 @@
+const DateTimeFormat = {
+	AUDIO_PLAYER: "mm:ss",
+	MEETING: "MMM D, YYYY, h:mm A",
+} as const;
+
+export { DateTimeFormat };

packages/shared/src/libs/enums/enums.ts

@@ -1,6 +1,7 @@
 export { APIPath } from "./api-path.enum.js";
 export { AppEnvironment } from "./app-environment.enum.js";
 export { ContentType } from "./content-type.enum.js";
+export { DateTimeFormat } from "./datetime-format.enum.js";
 export { ExceptionMessage } from "./exception-message.enum.js";
 export { Extension } from "./extension.enum.js";
 export { KeyboardKey } from "./keyboard-key.enum.js";

packages/shared/src/libs/types/date-format.type.ts

@@ -1,3 +1,6 @@
-type DateFormat = "D MMMM hA" | "MMM D, YYYY, h:mm A";
+import { type DateTimeFormat } from "../enums/enums.js";
+import { type ValueOf } from "./types.js";
+
+type DateFormat = ValueOf<typeof DateTimeFormat>;
 
 export { type DateFormat };