Added subs management (wip)

imports/ui/pages/Subscriptions/Subscriptions.js

@@ -0,0 +1,105 @@
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable import/no-absolute-path */
+/* eslint-disable react/jsx-indent */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Table, Alert, Button, Row } from 'react-bootstrap';
+import { timeago, monthDayYearAtTime } from '@cleverbeagle/dates';
+import { Meteor } from 'meteor/meteor';
+import { withTracker } from 'meteor/react-meteor-data';
+import { Trans, translate } from 'react-i18next';
+import { Bert } from 'meteor/themeteorchef:bert';
+import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
+import Loading from '../../components/Loading/Loading';
+
+import './Subscriptions.scss';
+
+const handleRemove = (subscriptionId) => {
+  if (confirm('Are you sure? This is permanent!')) {
+    Meteor.call('subscriptions.remove', subscriptionId, (error) => {
+      if (error) {
+        Bert.alert(error.reason, 'danger');
+      } else {
+        Bert.alert('Subscription deleted!', 'success');
+      }
+    });
+  }
+};
+
+const Subscriptions = ({
+  loading,
+  subscriptions,
+  match,
+  history
+}) => (!loading ? (
+  <div className="Subscriptions">
+    <div className="page-header clearfix">
+      <h4 className="pull-left"><Trans>Suscripciones a fuegos en áreas de mi interés</Trans></h4>
+      <Link className="btn btn-success pull-right" to={`${match.url}/new`}><Trans>Añadir suscripción</Trans></Link>
+    </div>
+    <br />
+    {subscriptions.length ?
+     <Table responsive>
+       <thead>
+         <tr>
+           <th>Location</th>
+           <th>Last Updated</th>
+           <th>Created</th>
+           <th />
+           <th />
+         </tr>
+       </thead>
+       <tbody>
+         {subscriptions.map(({
+            _id,
+            location,
+            createdAt,
+            updatedAt
+          }) => (
+            <tr key={_id}>
+              <td>{location.lat},{location.lon}</td>
+              <td>{timeago(updatedAt)}</td>
+              <td>{monthDayYearAtTime(createdAt)}</td>
+              <td>
+                <Button
+                    bsStyle="primary"
+                    onClick={() => history.push(`${match.url}/${_id}`)}
+                    block
+                >View
+                </Button>
+              </td>
+              <td>
+                <Button
+                    bsStyle="danger"
+                    onClick={() => handleRemove(_id)}
+                    block
+                >Delete
+                </Button>
+              </td>
+            </tr>
+          ))}
+       </tbody>
+     </Table> :
+     <Alert bsStyle="warning"><Trans>Todavía sin suscriptiones</Trans></Alert>
+    }
+  </div>
+) : <Loading />);
+
+Subscriptions.propTypes = {
+  loading: PropTypes.bool.isRequired,
+  subscriptions: PropTypes.arrayOf(PropTypes.object).isRequired,
+  match: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired
+};
+
+
+export default translate([], { wait: true })(withTracker(() => {
+  const subscription = Meteor.subscribe('subscriptions');
+  // console.log(UserSubsToFiresCollection.find().fetch());
+  return {
+    loading: !subscription.ready(),
+    subscriptions: UserSubsToFiresCollection.find().fetch()
+  };
+})(Subscriptions));