]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/protocol/Item.js
3b16eeb11c9da1307a9f7b142affaba2e89c7060
[alttp.git] / 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 'tournament.lock':
48                         return i18n.t(
49                                 `protocol.description.${entry.type}`,
50                                 entry,
51                         );
52                 default:
53                         return i18n.t('protocol.description.unknown', entry);
54         }
55 };
56
57 const getEntryIcon = entry => {
58         switch (entry.type) {
59                 default:
60                         return <Icon.PROTOCOL />;
61         }
62 };
63
64 const Item = ({ entry }) =>
65         <ListGroup.Item className="d-flex align-items-center">
66                 <div className="pe-3 text-muted">
67                         {getEntryIcon(entry)}
68                 </div>
69                 <div>
70                         <div>
71                                 {getEntryDescription(entry)}
72                         </div>
73                         <div
74                                 className="text-muted"
75                                 title={moment(entry.created_at).format('LLLL')}
76                         >
77                                 {getEntryDate(entry)}
78                         </div>
79                 </div>
80         </ListGroup.Item>;
81
82 Item.propTypes = {
83         entry: PropTypes.shape({
84                 created_at: PropTypes.string,
85         }),
86 };
87
88 Item.defaultProps = {
89         entry: {},
90 };
91
92 export default withTranslation()(Item);