Refactored collections store and layout components

frontend/scenes/Collection/Collection.js

@@ -0,0 +1,65 @@
+// @flow
+import React from 'react';
+import { observer, inject } from 'mobx-react';
+import { Redirect } from 'react-router';
+import _ from 'lodash';
+import { notFoundUrl } from 'utils/routeHelpers';
+
+import CollectionsStore from 'stores/CollectionsStore';
+
+import Layout from 'components/Layout';
+import CenteredContent from 'components/CenteredContent';
+import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
+
+type Props = {
+  collections: CollectionsStore,
+  match: Object,
+};
+
+type State = {
+  redirectUrl: ?string,
+};
+
+@observer class Collection extends React.Component {
+  props: Props;
+  state: State;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      redirectUrl: null,
+    };
+  }
+
+  componentDidMount = () => {
+    const { id } = this.props.match.params;
+    this.props.collections
+      .getById(id)
+      .then(collection => {
+        if (collection.type !== 'atlas')
+          throw new Error('TODO code up non-atlas collections');
+
+        this.setState({
+          redirectUrl: collection.navigationTree.url,
+        });
+      })
+      .catch(() => {
+        this.setState({
+          redirectUrl: notFoundUrl(),
+        });
+      });
+  };
+
+  render() {
+    return (
+      <Layout>
+        {this.state.redirectUrl && <Redirect to={this.state.redirectUrl} />}
+
+        <CenteredContent>
+          <AtlasPreviewLoading />
+        </CenteredContent>
+      </Layout>
+    );
+  }
+}
+export default inject('collections')(Collection);