Better individual scenes for documents

server/models/Document.js

@@ -4,6 +4,7 @@ import {
 } from '../sequelize';
 import Atlas from './Atlas';
 import Team from './Team';
+import User from './User';
 
 const Document = sequelize.define('document', {
   id: { type: DataTypes.UUID, defaultValue: DataTypes.UUIDV4, primaryKey: true },
@@ -13,5 +14,6 @@ const Document = sequelize.define('document', {
 
 Document.belongsTo(Atlas, { as: 'atlas' });
 Document.belongsTo(Team);
+Document.belongsTo(User);
 
 export default Document;

server/presenters.js

@@ -69,6 +69,9 @@ export async function presentDocument(document, includeAtlas=false) {
   if (includeAtlas) {
     const atlas = await document.getAtlas();
     data.atlas = await presentAtlas(atlas, false);
+
+    const user = await document.getUser();
+    data.user = await presentUser(user, false);
   }
 
   return data;

src/components/Document/Document.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import moment from 'moment';
+
+import { Avatar } from 'rebass';
+import Flex from 'components/Flex';
+
+import styles from './Document.scss';
+
+const Document = (props) => {
+  return (
+    <div className={ styles.container }>
+      <Flex align="center" className={ styles.user }>
+        <Avatar src={ props.document.user.avatarUrl } size={ 24 } />
+        <span className={ styles.userName }>
+          { props.document.user.name } published { moment(document.createdAt).fromNow() }
+        </span>
+      </Flex>
+
+      <div dangerouslySetInnerHTML={{ __html: props.document.html }} />
+    </div>
+  );
+};
+
+export default Document;

src/components/Document/Document.scss

@@ -0,0 +1,11 @@
+.container {
+  padding: 20px 0;
+}
+
+.user {
+  margin-bottom: 40px;
+}
+
+.userName {
+  margin: 0 0 0 10px;
+}

src/components/Document/index.js

@@ -1,2 +1,2 @@
 import Document from './Document';
-export default Document;
+export default Document;

src/index.js

@@ -23,7 +23,7 @@ import Home from 'scenes/Home';
 import Editor from 'scenes/Editor';
 import Dashboard from 'scenes/Dashboard';
 import Atlas from 'scenes/Atlas';
-import Document from 'scenes/Document';
+import DocumentScene from 'scenes/DocumentScene';
 import SlackAuth from 'scenes/SlackAuth';
 
 // Redux
@@ -52,7 +52,7 @@ persistStore(store, {
           <Route path="/dashboard" component={ Dashboard } onEnter={ requireAuth } />
           <Route path="/atlas/:id" component={ Atlas } onEnter={ requireAuth } />
           <Route path="/atlas/:id/new" component={ Editor } onEnter={ requireAuth } />
-          <Route path="/documents/:id" component={ Document } onEnter={ requireAuth } />
+          <Route path="/documents/:id" component={ DocumentScene } onEnter={ requireAuth } />
 
           <Route path="/auth/slack" component={SlackAuth} />
         </Route>

src/scenes/DocumentScene/DocumentScene.js

@@ -6,10 +6,11 @@ import { fetchDocumentAsync } from 'actions/DocumentActions';
 import Layout from 'components/Layout';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
 import CenteredContent from 'components/CenteredContent';
+import Document from 'components/Document';
 
-import styles from './Document.scss';
+import styles from './DocumentScene.scss';
 
-class Document extends React.Component {
+class DocumentScene extends React.Component {
   componentDidMount = () => {
     const documentId = this.props.routeParams.id;
     this.props.fetchDocumentAsync(documentId);
@@ -30,7 +31,7 @@ class Document extends React.Component {
           { this.props.isLoading || !document ? (
             <AtlasPreviewLoading />
           ) : (
-            <div dangerouslySetInnerHTML={{ __html: document.html }} />
+            <Document document={ document } />
           ) }
         </CenteredContent>
       </Layout>
@@ -55,4 +56,4 @@ const mapDispatchToProps = (dispatch) => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(Document);
+)(DocumentScene);

src/scenes/DocumentScene/index.js

@@ -0,0 +1,2 @@
+import DocumentScene from './DocumentScene';
+export default DocumentScene;