65 lines
1.4 KiB
JavaScript
65 lines
1.4 KiB
JavaScript
import React from "react";
|
|
import { Row } from "react-bootstrap";
|
|
import StorageImage from "./StorageImage";
|
|
import { useSelector } from "react-redux";
|
|
|
|
const Message = (props) => {
|
|
const { message, ...rest } = props;
|
|
|
|
const userID = useSelector((state) => state.user.id);
|
|
|
|
const senderStyle = {
|
|
width: "75%",
|
|
backgroundColor: "dodgerblue",
|
|
color: "white",
|
|
padding: "16px",
|
|
borderRadius: "16px",
|
|
};
|
|
|
|
const receiverStyle = {
|
|
width: "75%",
|
|
backgroundColor: "lightgray",
|
|
color: "black",
|
|
padding: "16px",
|
|
borderRadius: "16px",
|
|
};
|
|
|
|
return (
|
|
<Row
|
|
{...rest}
|
|
className={
|
|
message.sender === userID
|
|
? "justify-content-end"
|
|
: "justify-content-start"
|
|
}
|
|
>
|
|
<div
|
|
style={{
|
|
fontSize: "12px",
|
|
margin: "auto",
|
|
}}
|
|
>
|
|
{new Date(message.timestamp).toLocaleString()}
|
|
</div>
|
|
{message.isPhoto && (
|
|
<div className="w-100 p-3">
|
|
<StorageImage
|
|
alt=""
|
|
storagePath={message.photoURL}
|
|
style={{
|
|
display: "block",
|
|
width: "50%",
|
|
margin: "auto",
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
<p style={message.sender === userID ? senderStyle : receiverStyle}>
|
|
{message.text}
|
|
</p>
|
|
</Row>
|
|
);
|
|
};
|
|
|
|
export default Message;
|