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 { Trans, withTranslation } from 'react-i18next';
   6
   7 import Icon from '../common/Icon';
   8 import Spoiler from '../common/Spoiler';
   9 import { formatTime } from '../../helpers/Result';
  10 import i18n from '../../i18n';
  11
  12 const getEntryDate = entry => {
  13         const dateStr = moment(entry.created_at).fromNow();
  14         return entry.user
  15                 ? `${entry.user.username} ${dateStr}`
  16                 : dateStr;
  17 };
  18
  19 const getEntryResultTime = entry => {
  20         if (!entry || !entry.details || !entry.details.result) return 'ERROR';
  21         const result = entry.details.result;
  22         if (result.forfeit) return 'DNF XX';
  23         return formatTime(result);
  24 };
  25
  26 const getEntryDescription = entry => {
  27         switch (entry.type) {
  28                 case 'result.report': {
  29                         const time = getEntryResultTime(entry);
  30                         return <Trans i18nKey={`protocol.description.${entry.type}`}>
  31                                 <Spoiler>{{time}}</Spoiler>,
  32                         </Trans>;
  33                 }
  34                 case 'round.create':
  35                 case 'round.lock':
  36                 case 'tournament.lock':
  37                         return i18n.t(
  38                                 `protocol.description.${entry.type}`,
  39                                 entry,
  40                         );
  41                 default:
  42                         return i18n.t('protocol.description.unknown', entry);
  43         }
  44 };
  45
  46 const getEntryIcon = entry => {
  47         switch (entry.type) {
  48                 default:
  49                         return <Icon.PROTOCOL />;
  50         }
  51 };
  52
  53 const Item = ({ entry }) =>
  54         <ListGroup.Item className="d-flex align-items-center">
  55                 <div className="pe-3 text-muted">
  56                         {getEntryIcon(entry)}
  57                 </div>
  58                 <div>
  59                         <div>
  60                                 {getEntryDescription(entry)}
  61                         </div>
  62                         <div
  63                                 className="text-muted"
  64                                 title={moment(entry.created_at).format('LLLL')}
  65                         >
  66                                 {getEntryDate(entry)}
  67                         </div>
  68                 </div>
  69         </ListGroup.Item>;
  70
  71 Item.propTypes = {
  72         entry: PropTypes.shape({
  73                 created_at: PropTypes.string,
  74         }),
  75 };
  76
  77 Item.defaultProps = {
  78         entry: {},
  79 };
  80
  81 export default withTranslation()(Item);