You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
1.1 KiB
32 lines
1.1 KiB
/* eslint-disable react/no-danger */ |
|
import { useEffect, useState } from 'react'; |
|
import { ChatMessage } from '../../../interfaces/chat-message.model'; |
|
import { formatTimestamp, formatMessageText } from './messageFmt'; |
|
import s from './ChatUserMessage.module.scss'; |
|
|
|
interface Props { |
|
message: ChatMessage; |
|
showModeratorMenu: boolean; |
|
} |
|
|
|
export default function ChatUserMessage({ message, showModeratorMenu }: Props) { |
|
const { body, user, timestamp } = message; |
|
const { displayName, displayColor } = user; |
|
const color = `hsl(${displayColor}, 100%, 70%)`; |
|
const formattedTimestamp = `Sent at ${formatTimestamp(timestamp)}`; |
|
const [formattedMessage, setFormattedMessage] = useState<string>(body); |
|
|
|
useEffect(() => { |
|
setFormattedMessage(formatMessageText(body)); |
|
}, [message]); |
|
|
|
return ( |
|
<div className={s.root} style={{ borderColor: color }} title={formattedTimestamp}> |
|
<div className={s.user} style={{ color }}> |
|
{displayName} |
|
</div> |
|
<div className={s.message} dangerouslySetInnerHTML={{ __html: formattedMessage }} /> |
|
{showModeratorMenu && <div>Moderator menu</div>} |
|
</div> |
|
); |
|
}
|
|
|