wip wiring up account forms

imports/ui/pages/Documents/Documents.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Table, Alert, Button } from 'react-bootstrap';
+import { timeago, monthDayYearAtTime } from '@cleverbeagle/dates';
+import { Meteor } from 'meteor/meteor';
+import { createContainer } from 'meteor/react-meteor-data';
+import { Bert } from 'meteor/themeteorchef:bert';
+import DocumentsCollection from '../../../api/Documents/Documents';
+
+import './Documents.scss';
+
+const handleRemove = (documentId) => {
+  if (confirm('Are you sure? This is permanent!')) {
+    Meteor.call('documents.remove', documentId, (error) => {
+      if (error) {
+        Bert.alert(error.reason, 'danger');
+      } else {
+        Bert.alert('Document deleted!', 'success');
+      }
+    });
+  }
+};
+
+const Documents = ({ documents, match, history }) => (
+  <div className="Documents">
+    <div className="page-header clearfix">
+      <h4 className="pull-left">Documents</h4>
+      <Link className="btn btn-success pull-right" to={`${match.url}/new`}>Add Document</Link>
+    </div>
+    {documents.length ? <Table responsive>
+      <thead>
+        <tr>
+          <th>Title</th>
+          <th>Last Updated</th>
+          <th>Created</th>
+          <th />
+          <th />
+        </tr>
+      </thead>
+      <tbody>
+        {documents.map(({ _id, title, createdAt, updatedAt }) => (
+          <tr key={_id}>
+            <td>{title}</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">No documents yet!</Alert>}
+  </div>
+);
+
+Documents.propTypes = {
+  documents: PropTypes.arrayOf(PropTypes.object).isRequired,
+  match: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired,
+};
+
+export default createContainer(() => {
+  const subscription = Meteor.subscribe('documents');
+  return {
+    loading: !subscription.ready(),
+    documents: DocumentsCollection.find().fetch(),
+  };
+}, Documents);

imports/ui/pages/Documents/Documents.scss

@@ -0,0 +1,3 @@
+.Documents table tbody tr td {
+  vertical-align: middle;
+}