]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/protocol/Item.js
tournament admins
[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 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);