resources/js/components/protocol/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 { withTranslation } from 'react-i18next';
   6
   7 import Icon from '../common/Icon';
   8 import i18n from '../../i18n';
   9
  10 const getEntryDate = entry => {
  11         const dateStr = moment(entry.created_at).fromNow();
  12         return entry.user
  13                 ? `${entry.user.username} ${dateStr}`
  14                 : dateStr;
  15 };
  16
  17 const getEntryDescription = entry => {
  18         switch (entry.type) {
  19                 case 'round.create':
  20                         return i18n.t(
  21                                 `protocol.description.${entry.type}`,
  22                                 entry,
  23                         );
  24                 default:
  25                         return i18n.t('protocol.description.unknown', entry);
  26         }
  27 };
  28
  29 const getEntryIcon = entry => {
  30         switch (entry.type) {
  31                 default:
  32                         return <Icon.PROTOCOL />;
  33         }
  34 };
  35
  36 const Item = ({ entry }) =>
  37         <ListGroup.Item className="d-flex align-items-center">
  38                 <div className="pe-3 text-muted">
  39                         {getEntryIcon(entry)}
  40                 </div>
  41                 <div>
  42                         <div>
  43                                 {getEntryDescription(entry)}
  44                         </div>
  45                         <div
  46                                 className="text-muted"
  47                                 title={moment(entry.created_at).format('LLLL')}
  48                         >
  49                                 {getEntryDate(entry)}
  50                         </div>
  51                 </div>
  52         </ListGroup.Item>;
  53
  54 Item.propTypes = {
  55         entry: PropTypes.shape({
  56                 created_at: PropTypes.string,
  57         }),
  58 };
  59
  60 Item.defaultProps = {
  61         entry: {},
  62 };
  63
  64 export default withTranslation()(Item);