57 lines
1.7 KiB
JavaScript
57 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import { Typography } from '@material-ui/core';
|
|
import './Thread.css';
|
|
|
|
const Thread = (props) =>
|
|
props.messages.map((m, midx) => {
|
|
const userUid = window.localStorage.getItem('watchPartyUserUid');
|
|
if (m.uid === '<system>') {
|
|
return (
|
|
<Typography variant="body2" className="thread-item system-message" key={m.id} disabled>
|
|
{m.text}
|
|
</Typography>
|
|
);
|
|
} else if (m.uid === userUid) {
|
|
return (
|
|
<div
|
|
className={`thread-item ${
|
|
midx > 0 ? (props.messages[midx - 1].uid !== m.uid ? '' : 'no-space') : ''
|
|
}`}
|
|
key={m.id}
|
|
>
|
|
{m.type === 'giphy' ? (
|
|
<img className="my-message" alt="giphy gif" src={m.text} />
|
|
) : (
|
|
<Typography variant="body1" className="my-message">
|
|
{m.text}
|
|
</Typography>
|
|
)}
|
|
<span className="time">{new Date(m.time).toLocaleTimeString()}</span>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div
|
|
className={`thread-item ${
|
|
midx > 0 ? (props.messages[midx - 1].uid !== m.uid ? '' : 'no-space') : ''
|
|
}`}
|
|
key={m.id}
|
|
>
|
|
<Typography variant="caption" className="name">
|
|
{midx > 0 ? (props.messages[midx - 1].uid !== m.uid ? m.name : '') : m.name}
|
|
</Typography>
|
|
{m.type === 'giphy' ? (
|
|
<img className="party-message" alt="giphy gif" src={m.text} />
|
|
) : (
|
|
<Typography variant="body1" className="party-message">
|
|
{m.text}
|
|
</Typography>
|
|
)}
|
|
<span className="time">{new Date(m.time).toLocaleTimeString()}</span>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
export default Thread;
|