60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import React, { useContext } from "react";
|
|
import { Message, MessageType } from "./messageTypes";
|
|
import { LangContext } from "../context";
|
|
import strings from "../Intl/strings.json";
|
|
import "./MessageDisplay.css";
|
|
export const MessageDisplay = ({
|
|
type,
|
|
fromUserId,
|
|
toUserId,
|
|
content,
|
|
timeMillis,
|
|
}: Message): React.ReactElement<Message> => {
|
|
const dateTime: Date = new Date(timeMillis);
|
|
const lang = useContext(LangContext);
|
|
const msgPage = strings[lang].chat;
|
|
/* FIXED funny error
|
|
* DESCRIPTION
|
|
* The line below was
|
|
* return (<p>[{dateTime.toLocaleString(Intl.DateTimeFormat().resolvedOptions().timeZone)}]...</p>)
|
|
* The line incorrectly generated a value of "UTC" as the parameter to toLocaleString()
|
|
* While "UTC" is an accepted string value, in EEST, aka. "Europe/Athens" timezone string is not an acceptable parameter.
|
|
* This caused the return statement to fail, and the message fails to render, despite it being correctly committed to the db.
|
|
* Funny clown moment 🤡
|
|
*/
|
|
const timeString = `${
|
|
dateTime.getHours() > 12
|
|
? dateTime.getHours() - 12
|
|
: dateTime.getHours()
|
|
}:${dateTime.getMinutes()} ${dateTime.getHours() > 12 ? "PM" : "AM"}`;
|
|
switch (type) {
|
|
case MessageType.HELLO as MessageType:
|
|
return (
|
|
<p className="msg">
|
|
[{timeString}]{" "}
|
|
{msgPage.joinMessage.replace("$userName", fromUserId)}
|
|
</p>
|
|
);
|
|
case MessageType.MESSAGE as MessageType:
|
|
return (
|
|
<p className="msg">
|
|
[{timeString}]{" "}
|
|
{msgPage.serverMessage
|
|
.replace("$userName", fromUserId)
|
|
.replace("$content", content)}
|
|
</p>
|
|
);
|
|
case MessageType.DATA as MessageType:
|
|
return <></>;
|
|
case MessageType.CHNAME as MessageType:
|
|
return <></>;
|
|
default:
|
|
console.error("Illegal MessageType reported!");
|
|
return (
|
|
<p className="msg-err">
|
|
[{timeString}] **THIS MESSAGE CANNOT BE CORRECTLY SHOWN
|
|
BECAUSE THE CLIENT ENCOUNTERED AN ERROR**
|
|
</p>
|
|
);
|
|
}
|
|
};
|