protocol frontend

[alttp.git] / resources / js / components / protocol / Item.js

diff --git a/resources/js/components/protocol/Item.js b/resources/js/components/protocol/Item.js
new file mode 100644 (file)
index 0000000..6127a92
--- /dev/null
+++ b/resources/js/components/protocol/Item.js
@@ -0,0 +1,64 @@
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ListGroup } from 'react-bootstrap';
+import { withTranslation } from 'react-i18next';
+
+import Icon from '../common/Icon';
+import i18n from '../../i18n';
+
+const getEntryDate = entry => {
+       const dateStr = moment(entry.created_at).fromNow();
+       return entry.user
+               ? `${entry.user.username} ${dateStr}`
+               : dateStr;
+};
+
+const getEntryDescription = entry => {
+       switch (entry.type) {
+               case 'round.create':
+                       return i18n.t(
+                               `protocol.description.${entry.type}`,
+                               entry,
+                       );
+               default:
+                       return i18n.t('protocol.description.unknown', entry);
+       }
+};
+
+const getEntryIcon = entry => {
+       switch (entry.type) {
+               default:
+                       return <Icon.PROTOCOL />;
+       }
+};
+
+const Item = ({ entry }) =>
+       <ListGroup.Item className="d-flex align-items-center">
+               <div className="pe-3 text-muted">
+                       {getEntryIcon(entry)}
+               </div>
+               <div>
+                       <div>
+                               {getEntryDescription(entry)}
+                       </div>
+                       <div
+                               className="text-muted"
+                               title={moment(entry.created_at).format('LLLL')}
+                       >
+                               {getEntryDate(entry)}
+                       </div>
+               </div>
+       </ListGroup.Item>;
+
+Item.propTypes = {
+       entry: PropTypes.shape({
+               created_at: PropTypes.string,
+       }),
+};
+
+Item.defaultProps = {
+       entry: {},
+};
+
+export default withTranslation()(Item);