Renamed /src to /frontend

frontend/scenes/Atlas/Atlas.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Link, browserHistory } from 'react-router';
+import keydown, { keydownScoped } from 'react-keydown';
+import _ from 'lodash';
+
+import store from './AtlasStore';
+
+import Layout, { Title, HeaderAction } from 'components/Layout';
+import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
+import CenteredContent from 'components/CenteredContent';
+import DocumentList from 'components/DocumentList';
+import Divider from 'components/Divider';
+import DropdownMenu, { MenuItem, MoreIcon } from 'components/DropdownMenu';
+import Flex from 'components/Flex';
+
+import styles from './Atlas.scss';
+
+@keydown(['c'])
+@observer
+class Atlas extends React.Component {
+  componentDidMount = () => {
+    const { id } = this.props.params;
+    store.fetchAtlas(id, data => {
+
+      // Forward directly to root document
+      if (data.type === 'atlas') {
+        browserHistory.replace(data.navigationTree.url);
+      }
+    })
+  }
+
+  componentWillReceiveProps = (nextProps) => {
+    const key = nextProps.keydown.event;
+    if (key) {
+      if (key.key === 'c') {
+        _.defer(this.onCreate);
+      }
+    }
+  }
+
+  onCreate = (event) => {
+    if (event) event.preventDefault();
+    browserHistory.push(`/atlas/${store.atlas.id}/new`);
+  }
+
+  render() {
+    const atlas = store.atlas;
+
+    let actions;
+    let title;
+    let titleText;
+
+    if (atlas) {
+      actions = (
+        <Flex direction="row">
+          <DropdownMenu label={ <MoreIcon /> } >
+            <MenuItem onClick={ this.onCreate }>
+              New document
+            </MenuItem>
+          </DropdownMenu>
+        </Flex>
+      );
+      title = <Title>{ atlas.name }</Title>;
+      titleText = atlas.name;
+    }
+
+    return (
+      <Layout
+        actions={ actions }
+        title={ title }
+        titleText={ titleText }
+      >
+        <CenteredContent>
+          { store.isFetching ? (
+            <AtlasPreviewLoading />
+          ) : (
+            <div className={ styles.container }>
+              <div className={ styles.atlasDetails }>
+                <h2>{ atlas.name }</h2>
+                <blockquote>
+                  { atlas.description }
+                </blockquote>
+              </div>
+
+              <Divider />
+
+              <DocumentList documents={ atlas.recentDocuments } preview={ true } />
+            </div>
+          ) }
+        </CenteredContent>
+      </Layout>
+    );
+  }
+}
+export default Atlas;

frontend/scenes/Atlas/Atlas.scss

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.atlasDetails {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  blockquote {
+    padding: 0;
+    margin: 0 0 20px 0;
+    font-style: italic;
+  }
+}

frontend/scenes/Atlas/AtlasStore.js

@@ -0,0 +1,27 @@
+import { observable, action } from 'mobx';
+import { client } from 'utils/ApiClient';
+
+const store = new class AtlasStore {
+  @observable atlas;
+
+  @observable isFetching = true;
+
+  /* Actions */
+
+  @action fetchAtlas = async (id, successCallback) => {
+    this.isFetching = true;
+    this.atlas = null;
+
+    try {
+      const res = await client.get('/atlases.info', { id: id });
+      const { data } = res;
+      this.atlas = data;
+      successCallback(data);
+    } catch (e) {
+      console.error("Something went wrong");
+    }
+    this.isFetching = false;
+  }
+}();
+
+export default store;

frontend/scenes/Atlas/index.js

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