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 getEntryRoundNumber = entry =>
  20         (entry && entry.details && entry.details.round && entry.details.round.number) || '?';
  21
  22 const getEntryResultTime = entry => {
  23         if (!entry || !entry.details || !entry.details.result) return 'ERROR';
  24         const result = entry.details.result;
  25         if (result.forfeit) return 'DNF XX';
  26         return formatTime(result);
  27 };
  28
  29 const getEntryDescription = entry => {
  30         switch (entry.type) {
  31                 case 'result.report': {
  32                         const time = getEntryResultTime(entry);
  33                         return <Trans i18nKey={`protocol.description.${entry.type}`}>
  34                                 <Spoiler>{{time}}</Spoiler>,
  35                         </Trans>;
  36                 }
  37                 case 'round.create':
  38                 case 'round.lock':
  39                 case 'round.unlock':
  40                         return i18n.t(
  41                                 `protocol.description.${entry.type}`,
  42                                 {
  43                                         ...entry,
  44                                         number: getEntryRoundNumber(entry),
  45                                 },
  46                         );
  47                 case 'result.comment':
  48                 case 'tournament.lock':
  49                         return i18n.t(
  50                                 `protocol.description.${entry.type}`,
  51                                 entry,
  52                         );
  53                 default:
  54                         return i18n.t('protocol.description.unknown', entry);
  55         }
  56 };
  57
  58 const getEntryIcon = entry => {
  59         switch (entry.type) {
  60                 case 'result.report':
  61                         return <Icon.RESULT />;
  62                 case 'round.create':
  63                         return <Icon.ADD />;
  64                 case 'round.lock':
  65                 case 'tournament.lock':
  66                         return <Icon.LOCKED />;
  67                 case 'round.unlock':
  68                         return <Icon.UNLOCKED />;
  69                 default:
  70                         return <Icon.PROTOCOL />;
  71         }
  72 };
  73
  74 const Item = ({ entry }) =>
  75         <ListGroup.Item className="d-flex align-items-center">
  76                 <div className="pe-3 text-muted">
  77                         {getEntryIcon(entry)}
  78                 </div>
  79                 <div>
  80                         <div>
  81                                 {getEntryDescription(entry)}
  82                         </div>
  83                         <div
  84                                 className="text-muted"
  85                                 title={moment(entry.created_at).format('LLLL')}
  86                         >
  87                                 {getEntryDate(entry)}
  88                         </div>
  89                 </div>
  90         </ListGroup.Item>;
  91
  92 Item.propTypes = {
  93         entry: PropTypes.shape({
  94                 created_at: PropTypes.string,
  95         }),
  96 };
  97
  98 Item.defaultProps = {
  99         entry: {},
 100 };
 101
 102 export default withTranslation()(Item);