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