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 'result.report':
  20                 case 'round.create':
  21                         return i18n.t(
  22                                 `protocol.description.${entry.type}`,
  23                                 entry,
  24                         );
  25                 default:
  26                         return i18n.t('protocol.description.unknown', entry);
  27         }
  28 };
  29
  30 const getEntryIcon = entry => {
  31         switch (entry.type) {
  32                 default:
  33                         return <Icon.PROTOCOL />;
  34         }
  35 };
  36
  37 const Item = ({ entry }) =>
  38         <ListGroup.Item className="d-flex align-items-center">
  39                 <div className="pe-3 text-muted">
  40                         {getEntryIcon(entry)}
  41                 </div>
  42                 <div>
  43                         <div>
  44                                 {getEntryDescription(entry)}
  45                         </div>
  46                         <div
  47                                 className="text-muted"
  48                                 title={moment(entry.created_at).format('LLLL')}
  49                         >
  50                                 {getEntryDate(entry)}
  51                         </div>
  52                 </div>
  53         </ListGroup.Item>;
  54
  55 Item.propTypes = {
  56         entry: PropTypes.shape({
  57                 created_at: PropTypes.string,
  58         }),
  59 };
  60
  61 Item.defaultProps = {
  62         entry: {},
  63 };
  64
  65 export default withTranslation()(Item);