Sidebar work

frontend/scenes/Collection/Collection.js

@@ -3,9 +3,9 @@ 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 CollectionStore from './CollectionStore';
 
 import Layout from 'components/Layout';
 import CenteredContent from 'components/CenteredContent';
@@ -16,48 +16,28 @@ type Props = {
   match: Object,
 };
 
-type State = {
-  redirectUrl: ?string,
-};
-
 @observer class Collection extends React.Component {
   props: Props;
-  state: State;
+  store: CollectionStore;
 
   constructor(props) {
     super(props);
-    this.state = {
-      redirectUrl: null,
-    };
+    this.store = new CollectionStore();
   }
 
   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.documents[0].url,
-        });
-      })
-      .catch(() => {
-        this.setState({
-          redirectUrl: notFoundUrl(),
-        });
-      });
+    this.store.fetchCollection(id);
   };
 
   render() {
     return (
       <Layout>
-        {this.state.redirectUrl && <Redirect to={this.state.redirectUrl} />}
-
-        <CenteredContent>
-          <PreviewLoading />
-        </CenteredContent>
+        {this.store.redirectUrl
+          ? <Redirect to={this.store.redirectUrl} />
+          : <CenteredContent>
+              <PreviewLoading />
+            </CenteredContent>}
       </Layout>
     );
   }

frontend/scenes/Collection/CollectionStore.js

@@ -1,37 +1,30 @@
 // @flow
-import { observable, action, computed } from 'mobx';
+import { observable, action } from 'mobx';
 import invariant from 'invariant';
 import { client } from 'utils/ApiClient';
-import Collection from 'models/Collection';
-
-const store = new class AtlasStore {
-  @observable collection: ?(Collection & { recentDocuments?: Object[] });
+import { notFoundUrl } from 'utils/routeHelpers';
 
+class CollectionStore {
+  @observable redirectUrl: ?string;
   @observable isFetching = true;
 
-  /* Computed */
-
-  @computed get isLoaded(): boolean {
-    return !this.isFetching && !!this.collection;
-  }
-
   /* Actions */
 
-  @action fetchCollection = async (id: string, successCallback: Function) => {
+  @action fetchCollection = async (id: string) => {
     this.isFetching = true;
-    this.collection = null;
 
     try {
       const res = await client.get('/collections.info', { id });
       invariant(res && res.data, 'Data should be available');
       const { data } = res;
-      this.collection = new Collection(data);
-      successCallback(data);
+
+      if (data.type === 'atlas') this.redirectUrl = data.documents[0].url;
+      else throw new Error('TODO code up non-atlas collections');
     } catch (e) {
-      console.error('Something went wrong');
+      this.redirectUrl = notFoundUrl();
     }
     this.isFetching = false;
   };
-}();
+}
 
-export default store;
+export default CollectionStore;