+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ListGroup } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+const getEntryDate = entry => {
+ const dateStr = moment(entry.created_at).fromNow();
+ return entry.user
+ ? `${entry.user.username} ${dateStr}`
+ : dateStr;
+};
+
+const getEntryOrigin = (entry, t) => {
+ return t('chatBotLog.origin.chatLog', {
+ channel: entry.origin.params[0],
+ date: new Date(entry.origin.created_at),
+ nick: entry.origin.nick,
+ });
+};
+
+const Item = ({ entry }) => {
+ const { t } = useTranslation();
+
+ return <ListGroup.Item>
+ <div>
+ <div>
+ {entry.text}
+ </div>
+ {entry.origin ?
+ <div
+ className="text-muted"
+ >
+ {getEntryOrigin(entry, t)}
+ </div>
+ : null}
+ <div
+ className="text-muted"
+ title={moment(entry.created_at).format('LLLL')}
+ >
+ {getEntryDate(entry)}
+ </div>
+ </div>
+ </ListGroup.Item>;
+};
+
+Item.propTypes = {
+ entry: PropTypes.shape({
+ created_at: PropTypes.string,
+ origin: PropTypes.shape({}),
+ text: PropTypes.string,
+ }),
+};
+
+Item.defaultProps = {
+ entry: {},
+};
+
+export default Item;