From bf57dc21260b8276e3c5c24148695c81bcd2db71 Mon Sep 17 00:00:00 2001
From: antoKeinanen <anto.keinanen@gmail.com>
Date: Wed, 26 Jun 2024 01:27:06 +0300
Subject: [PATCH] fix: discord live should display accurate timestamps

---
 components/DiscordLive/DiscordMessageList.tsx |  9 ++++++++-
 utils/TimeUtil.ts                             | 12 ++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/components/DiscordLive/DiscordMessageList.tsx b/components/DiscordLive/DiscordMessageList.tsx
index fa69ae56..3643df26 100644
--- a/components/DiscordLive/DiscordMessageList.tsx
+++ b/components/DiscordLive/DiscordMessageList.tsx
@@ -2,6 +2,7 @@ import { DiscordMessage, DiscordMessages } from "@skyra/discord-components-react
 import { ReactNode } from "react"
 import styles from './DiscordLive.module.css'
 import { formatDiscordContent } from "./DiscordLive"
+import { TimeUtil } from "../../utils/TimeUtil"
 
 type DiscordMessageType = {
   id: number,
@@ -22,7 +23,13 @@ type DiscordMessageListProps = {
 export default function DiscordMessageList({ visibleMessages, recursiveContent }: DiscordMessageListProps) {
   return <DiscordMessages className={styles.discordMessages}>
     {visibleMessages.map((message, i) => visibleMessages[i - 1]?.author?.name != visibleMessages[i].author.name ? (
-      <DiscordMessage key={message.id} avatar={`/discordlive/avatars/${message.author.avatar}`} author={message.author.name} roleColor={message.author.color}>
+      <DiscordMessage
+        key={message.id}
+        avatar={`/discordlive/avatars/${message.author.avatar}`}
+        timestamp={TimeUtil.formatTimestamp(message.timestamp)}
+        author={message.author.name}
+        roleColor={message.author.color}
+      >
         <span className="discord-message-markup">{formatDiscordContent(message.content)}</span>
         <span className="discord-message-markup">{recursiveContent(i)}</span>
       </DiscordMessage>
diff --git a/utils/TimeUtil.ts b/utils/TimeUtil.ts
index 9c8a822f..4447d9a6 100644
--- a/utils/TimeUtil.ts
+++ b/utils/TimeUtil.ts
@@ -62,4 +62,16 @@ export class TimeUtil {
                 .join(" ") || "0 secs"
         );
     }
+
+    /**
+     * Formats a timestamp into a string representation of the date and time.
+     * 
+     * Format: DD.MM.YYYY hh.mm
+     */
+    static formatTimestamp(timestamp: number) {
+        const date = new Date(timestamp);
+        const day = date.toLocaleDateString("Fi");
+        const time = date.toLocaleTimeString("Fi", {timeStyle: "short"});
+        return `${day} ${time}`;
+    }
 }