Fixing collection selection

app/scenes/Collection/Collection.js

@@ -1,10 +1,9 @@
 // @flow
-import React from 'react';
+import React, { Component } from 'react';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
-import { Redirect } from 'react-router';
+import { Redirect } from 'react-router-dom';
 import { Link } from 'react-router-dom';
-import _ from 'lodash';
 import styled from 'styled-components';
 import { newDocumentUrl } from 'utils/routeHelpers';
 
@@ -14,17 +13,17 @@ import Collection from 'models/Collection';
 import CenteredContent from 'components/CenteredContent';
 import LoadingListPlaceholder from 'components/LoadingListPlaceholder';
 import Button from 'components/Button';
-import Flex from 'shared/components/Flex';
 import HelpText from 'components/HelpText';
+import Flex from 'shared/components/Flex';
 
 type Props = {
   collections: CollectionsStore,
   match: Object,
 };
 
-@observer class CollectionScene extends React.Component {
+@observer class CollectionScene extends Component {
   props: Props;
-  collection: ?Collection;
+  @observable collection: ?Collection;
   @observable isFetching = true;
   @observable redirectUrl;
 
@@ -41,7 +40,7 @@ type Props = {
   fetchDocument = async (id: string) => {
     const { collections } = this.props;
 
-    this.collection = await collections.getById(id);
+    this.collection = await collections.fetchById(id);
 
     if (!this.collection) this.redirectUrl = '/404';
 
@@ -51,41 +50,48 @@ type Props = {
     this.isFetching = false;
   };
 
-  renderNewDocument() {
+  renderEmptyCollection() {
+    if (!this.collection) return;
+
     return (
       <NewDocumentContainer auto column justify="center">
         <h1>Create a document</h1>
         <HelpText>
-          Publish your first document to start building your collection.
+          Publish your first document to start building the
+          {' '}
+          <strong>{this.collection.name}</strong>
+          {' '}
+          collection.
         </HelpText>
-        {this.collection &&
-          <Action>
-            <Link to={newDocumentUrl(this.collection)}>
-              <Button>Create new document</Button>
-            </Link>
-          </Action>}
+        <Action>
+          <Link to={newDocumentUrl(this.collection)}>
+            <Button>Create new document</Button>
+          </Link>
+        </Action>
       </NewDocumentContainer>
     );
   }
 
   render() {
+    if (this.redirectUrl) return <Redirect to={this.redirectUrl} />;
+
     return (
       <CenteredContent>
-        {this.redirectUrl && <Redirect to={this.redirectUrl} />}
         {this.isFetching
           ? <LoadingListPlaceholder />
-          : this.renderNewDocument()}
+          : this.renderEmptyCollection()}
       </CenteredContent>
     );
   }
 }
 
 const NewDocumentContainer = styled(Flex)`
-  padding-top: 70px;
+  padding-top: 50%;
+  transform: translateY(-50%);
 `;
 
 const Action = styled(Flex)`
-  margin: 20px 0;
+  margin: 10px 0;
 `;
 
 export default inject('collections')(CollectionScene);

app/scenes/Document/Document.js

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import styled from 'styled-components';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
-import { withRouter, Prompt } from 'react-router';
+import { withRouter, Prompt } from 'react-router-dom';
 import keydown from 'react-keydown';
 import Flex from 'shared/components/Flex';
 import { color, layout } from 'shared/styles/constants';

app/scenes/Document/components/DocumentMove/DocumentMove.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { observable, computed } from 'mobx';
 import { observer, inject } from 'mobx-react';
-import { withRouter } from 'react-router';
+import { withRouter } from 'react-router-dom';
 import { Search } from 'js-search';
 import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
 import _ from 'lodash';

app/scenes/Home/Home.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { observer, inject } from 'mobx-react';
-import { Redirect } from 'react-router';
+import { Redirect } from 'react-router-dom';
 import AuthStore from 'stores/AuthStore';
 
 type Props = {

app/scenes/Search/Search.js

@@ -7,7 +7,7 @@ import { observer, inject } from 'mobx-react';
 import _ from 'lodash';
 import DocumentsStore from 'stores/DocumentsStore';
 
-import { withRouter } from 'react-router';
+import { withRouter } from 'react-router-dom';
 import { searchUrl } from 'utils/routeHelpers';
 import styled from 'styled-components';
 import ArrowKeyNavigation from 'boundless-arrow-key-navigation';

app/scenes/SlackAuth/SlackAuth.js

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { Redirect } from 'react-router';
+import { Redirect } from 'react-router-dom';
 import queryString from 'query-string';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';