Nicer document previews

src/components/AtlasPreview/AtlasPreview.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import moment from 'moment';
 import Link from 'react-router/lib/Link';
 
 import styles from './AtlasPreview.scss';
@@ -16,7 +17,17 @@ class AtlasPreview extends React.Component {
     return (
       <div className={ styles.container }>
         <h2><Link to={ `/atlas/${data.id}` } className={ styles.atlasLink }>{ data.name }</Link></h2>
-        <div className={ styles.description }>No documents. Why not <Link to={ `/atlas/${data.id}/new` }>create one</Link>?</div>
+        { data.recentDocuments.length > 0 ?
+          data.recentDocuments.map(document => {
+            return (
+              <Link to={ `/documents/${document.id}` } className={ styles.documentPreview }>
+                <h3>{ document.title }</h3>
+                <span>{ moment(document.updatedAt).fromNow() }</span>
+              </Link>)
+          })
+        : (
+          <div className={ styles.description }>No documents. Why not <Link to={ `/atlas/${data.id}/new` }>create one</Link>?</div>
+        ) }
       </div>
     );
   }

src/components/AtlasPreview/AtlasPreview.scss

@@ -16,4 +16,26 @@
 
 .description {
   color: #aaa;
+}
+
+.documentPreview {
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+
+  margin-bottom: 20px;
+  text-decoration: none;
+
+  h3 {
+    font-weight: normal;
+    font-size: 15px;
+    color: $textColor;
+
+    margin: 0;
+  }
+
+  span {
+    font-size: 13px;
+    color: #ccc;
+  }
 }

src/scenes/Dashboard/Dashboard.js

@@ -27,7 +27,7 @@ class Dashboard extends React.Component {
             { this.props.isLoading ? (
               <AtlasPreviewLoading />
             ) : this.props.items.map((item) => {
-             return  (<AtlasPreview data={ item } />);
+             return  (<AtlasPreview key={ item.id } data={ item } />);
             }) }
           </Flex>
         </CenteredContent>