Renames

frontend/components/Collection/Collection.js

@@ -0,0 +1,40 @@
+// @flow
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Link } from 'react-router-dom';
+
+import DocumentLink from './components/DocumentLink';
+
+import styles from './Collection.scss';
+// import classNames from 'classnames/bind';
+// const cx = classNames.bind(styles);
+
+@observer class Collection extends React.Component {
+  static propTypes = {
+    data: React.PropTypes.object.isRequired,
+  };
+
+  render() {
+    const data = this.props.data;
+
+    return (
+      <div className={styles.container}>
+        <h2>
+          <Link to={data.url} className={styles.atlasLink}>{data.name}</Link>
+        </h2>
+        {data.recentDocuments.length > 0
+          ? data.recentDocuments.map(document => {
+              return <DocumentLink document={document} key={document.id} />;
+            })
+          : <div className={styles.description}>
+              No documents. Why not
+              {' '}
+              <Link to={`${data.url}/new`}>create one</Link>
+              ?
+            </div>}
+      </div>
+    );
+  }
+}
+
+export default Collection;

frontend/components/Collection/Collection.scss

@@ -0,0 +1,19 @@
+@import '~styles/constants.scss';
+
+.container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding-bottom: 40px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.atlasLink {
+  text-decoration: none;
+  color: $textColor;
+}
+
+.description {
+  color: #aaa;
+}

frontend/components/Collection/components/DocumentLink/DocumentLink.js

@@ -0,0 +1,21 @@
+// @flow
+import React from 'react';
+import { observer } from 'mobx-react';
+
+import moment from 'moment';
+import { Link } from 'react-router-dom';
+
+import styles from './DocumentLink.scss';
+
+const DocumentLink = observer(props => {
+  return (
+    <Link to={props.document.url} className={styles.link}>
+      <h3 className={styles.title}>{props.document.title}</h3>
+      <span className={styles.timestamp}>
+        {moment(props.document.updatedAt).fromNow()}
+      </span>
+    </Link>
+  );
+});
+
+export default DocumentLink;

frontend/components/Collection/components/DocumentLink/DocumentLink.scss

@@ -0,0 +1,23 @@
+@import '~styles/constants.scss';
+
+.link {
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+
+  margin-bottom: 20px;
+  text-decoration: none;
+}
+
+.title {
+  font-weight: normal;
+  font-size: 15px;
+  color: $textColor;
+
+  margin: 0;
+}
+
+.timestamp {
+  font-size: 13px;
+  color: #ccc;
+}

frontend/components/Collection/components/DocumentLink/index.js

@@ -0,0 +1,3 @@
+// @flow
+import DocumentLink from './DocumentLink';
+export default DocumentLink;

frontend/components/Collection/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Collection from './Collection';
+export default Collection;