Fix scrim scheduled notification timestamp using server time

app/features/notifications/components/NotificationList.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { Image } from "~/components/Image";
 import type { LoaderNotification } from "~/components/layout/NotificationPopover";
 import {
+	mapMetaForTranslation,
 	notificationLink,
 	notificationNavIcon,
 } from "~/features/notifications/notifications-utils";
@@ -20,7 +21,7 @@ export function NotificationItem({
 }: {
 	notification: LoaderNotification;
 }) {
-	const { t } = useTranslation(["common"]);
+	const { t, i18n } = useTranslation(["common"]);
 
 	return (
 		<Link to={notificationLink(notification)} className={styles.item}>
@@ -28,7 +29,10 @@ export function NotificationItem({
 				{!notification.seen ? <div className={styles.unseenDot} /> : null}
 			</NotificationImage>
 			<div className={styles.itemHeader}>
-				{t(`common:notifications.text.${notification.type}`, notification.meta)}
+				{t(
+					`common:notifications.text.${notification.type}`,
+					mapMetaForTranslation(notification, i18n.language),
+				)}
 			</div>
 			<div className={styles.timestamp}>
 				{formatDistance(

app/features/notifications/notifications-types.ts

@@ -62,7 +62,7 @@ export type Notification =
 	  >
 	| NotificationItem<"SEASON_STARTED", { seasonNth: number }>
 	| NotificationItem<"SCRIM_NEW_REQUEST", { fromUsername: string }>
-	| NotificationItem<"SCRIM_SCHEDULED", { id: number; timeString: string }>;
+	| NotificationItem<"SCRIM_SCHEDULED", { id: number; at: number }>;
 
 type NotificationItem<
 	T extends string,

app/features/notifications/notifications-utils.ts

@@ -85,3 +85,25 @@ export const notificationLink = (notification: Notification) => {
 			assertUnreachable(notification);
 	}
 };
+
+/** Takes the `meta` object of a notification and transforms it (if needed) to show the translated string to user */
+export const mapMetaForTranslation = (
+	notification: Notification,
+	language: string,
+) => {
+	if (notification.type === "SCRIM_SCHEDULED") {
+		return {
+			...notification.meta,
+			timeString: notification.meta.at // TODO: after two weeks this check can be removed (all notifications will have `at`)
+				? new Date(notification.meta.at).toLocaleString(language, {
+						day: "numeric",
+						month: "numeric",
+						hour: "numeric",
+						minute: "numeric",
+					})
+				: undefined,
+		};
+	}
+
+	return notification.meta;
+};

app/features/scrims/actions/scrims.server.ts

@@ -2,7 +2,7 @@ import type { ActionFunctionArgs } from "@remix-run/node";
 import { requireUser } from "~/features/auth/core/user.server";
 import { notify } from "~/features/notifications/core/notify.server";
 import { requirePermission } from "~/modules/permissions/guards.server";
-import { databaseTimestampToDate } from "~/utils/dates";
+import { databaseTimestampToJavascriptTimestamp } from "~/utils/dates";
 import { errorToastIfFalsy, parseRequestPayload } from "~/utils/remix.server";
 import { assertUnreachable } from "~/utils/types";
 import * as ScrimPostRepository from "../ScrimPostRepository.server";
@@ -79,15 +79,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 					type: "SCRIM_SCHEDULED",
 					meta: {
 						id: post.id,
-						timeString: databaseTimestampToDate(post.at).toLocaleString(
-							"en-US",
-							{
-								day: "numeric",
-								month: "numeric",
-								hour: "numeric",
-								minute: "numeric",
-							},
-						),
+						at: databaseTimestampToJavascriptTimestamp(post.at),
 					},
 				},
 			});