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;

frontend/scenes/Document/Document.js

@@ -2,10 +2,12 @@
 import React, { Component } from 'react';
 import get from 'lodash/get';
 import styled from 'styled-components';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
 import { withRouter, Prompt } from 'react-router';
 import { Flex } from 'reflexbox';
 
+import UiStore from 'stores/UiStore';
+
 import DocumentStore from './DocumentStore';
 import Breadcrumbs from './components/Breadcrumbs';
 import Menu from './components/Menu';
@@ -26,6 +28,7 @@ type Props = {
   history: Object,
   keydown: Object,
   newChildDocument?: boolean,
+  ui: UiStore,
 };
 
 @observer class Document extends Component {
@@ -34,10 +37,13 @@ type Props = {
 
   constructor(props: Props) {
     super(props);
-    this.store = new DocumentStore({ history: this.props.history });
+    this.store = new DocumentStore({
+      history: this.props.history,
+      ui: props.ui,
+    });
   }
 
-  componentDidMount = () => {
+  componentDidMount() {
     if (this.props.newDocument) {
       this.store.collectionId = this.props.match.params.id;
       this.store.newDocument = true;
@@ -53,7 +59,11 @@ type Props = {
       this.store.newDocument = false;
       this.store.fetchDocument();
     }
-  };
+  }
+
+  componentWillUnmout() {
+    this.props.ui.clearActiveCollection();
+  }
 
   onEdit = () => {
     const url = `${this.store.document.url}/edit`;
@@ -163,4 +173,4 @@ const Container = styled.div`
   width: 50em;
 `;
 
-export default withRouter(Document);
+export default withRouter(inject('ui')(Document));