resources/js/components/chat-bot-logs/Item.js

   1 import moment from 'moment';
   2 import PropTypes from 'prop-types';
   3 import React from 'react';
   4 import { ListGroup } from 'react-bootstrap';
   5 import { useTranslation } from 'react-i18next';
   6
   7 import { getUserName } from '../../helpers/User';
   8
   9 const getEntryDate = entry => moment(entry.created_at).fromNow();
  10
  11 const getEntryOrigin = (entry, t) => {
  12         return t('chatBotLog.origin.chatLog', {
  13                 channel: entry.origin.params[0],
  14                 date: new Date(entry.origin.created_at),
  15                 nick: entry.origin.nick,
  16         });
  17 };
  18
  19 const getEntryInfo = (entry, t) => {
  20         if (entry.user && entry.category) {
  21                 return t('chatBotLog.info.userCat', {
  22                         category: t(`twitchBot.chatCategories.${entry.category}`),
  23                         date: getEntryDate(entry),
  24                         user: getUserName(entry.user),
  25                 });
  26         }
  27         if (entry.category) {
  28                 return t('chatBotLog.info.cat', {
  29                         category: t(`twitchBot.chatCategories.${entry.category}`),
  30                         date: getEntryDate(entry),
  31                 });
  32         }
  33         if (entry.user) {
  34                 return t('chatBotLog.info.user', {
  35                         date: getEntryDate(entry),
  36                         user: getUserName(entry.user),
  37                 });
  38         }
  39         return getEntryDate(entry);
  40 };
  41
  42 const Item = ({ entry }) => {
  43         const { t } = useTranslation();
  44
  45         return <ListGroup.Item>
  46                 <div>
  47                         <div>
  48                                 {entry.text}
  49                         </div>
  50                         {entry.origin ?
  51                                 <div
  52                                         className="text-muted"
  53                                 >
  54                                         {getEntryOrigin(entry, t)}
  55                                 </div>
  56                         : null}
  57                         <div
  58                                 className="text-muted"
  59                                 title={moment(entry.created_at).format('LLLL')}
  60                         >
  61                                 {getEntryInfo(entry, t)}
  62                         </div>
  63                 </div>
  64         </ListGroup.Item>;
  65 };
  66
  67 Item.propTypes = {
  68         entry: PropTypes.shape({
  69                 created_at: PropTypes.string,
  70                 origin: PropTypes.shape({}),
  71                 text: PropTypes.string,
  72         }),
  73 };
  74
  75 Item.defaultProps = {
  76         entry: {},
  77 };
  78
  79 export default Item;