Fixing collection selection

app/components/Editor/components/Toolbar/components/LinkToolbar.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { observable, action } from 'mobx';
 import { observer, inject } from 'mobx-react';
-import { withRouter } from 'react-router';
+import { withRouter } from 'react-router-dom';
 import styled from 'styled-components';
 import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
 import ToolbarButton from './ToolbarButton';

app/components/Layout/components/SidebarCollections.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import React, { Component } from 'react';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import Flex from 'shared/components/Flex';
@@ -28,7 +28,7 @@ type Props = {
   ui: UiStore,
 };
 
-@observer class SidebarCollections extends React.PureComponent {
+@observer class SidebarCollections extends Component {
   props: Props;
 
   render() {
@@ -68,7 +68,7 @@ type Props = {
   }
 }
 
-@observer class CollectionLink extends React.Component {
+@observer class CollectionLink extends Component {
   dropzoneRef;
 
   @observable menuOpen = false;

app/components/Layout/components/SidebarLink.js

@@ -13,9 +13,6 @@ const activeStyle = {
   fontWeight: fontWeight.semiBold,
 };
 
-// This is a hack for `styleComponent()` as NavLink fails to render without `to` prop
-const StyleableDiv = props => <div {...props} />;
-
 const StyledGoTo = styled(CollapsedIcon)`
   margin-bottom: -4px;
   margin-right: 0;
@@ -28,7 +25,7 @@ const IconWrapper = styled.span`
   height: 24px;
 `;
 
-const styleComponent = component => styled(component)`
+const StyledNavLink = styled(NavLink)`
   display: flex;
   width: 100%;
   position: relative;
@@ -51,6 +48,8 @@ const styleComponent = component => styled(component)`
   }
 `;
 
+const StyledDiv = StyledNavLink.withComponent('div');
+
 type Props = {
   to?: string,
   onClick?: SyntheticEvent => *,
@@ -62,6 +61,7 @@ type Props = {
 
 @observer class SidebarLink extends Component {
   props: Props;
+  @observable expanded: boolean = false;
 
   componentDidMount() {
     if (this.props.expand) this.handleExpand();
@@ -71,8 +71,6 @@ type Props = {
     if (nextProps.expand) this.handleExpand();
   }
 
-  @observable expanded: boolean = false;
-
   @action handleClick = (event: SyntheticEvent) => {
     event.preventDefault();
     event.stopPropagation();
@@ -85,7 +83,7 @@ type Props = {
 
   render() {
     const { icon, children, expandedContent, ...rest } = this.props;
-    const Component = styleComponent(rest.to ? NavLink : StyleableDiv);
+    const Component = rest.to ? StyledNavLink : StyledDiv;
 
     return (
       <Flex column>

app/components/ScrollToTop/ScrollToTop.js

@@ -1,7 +1,7 @@
 // @flow
 // based on: https://reacttraining.com/react-router/web/guides/scroll-restoration
 import { Component } from 'react';
-import { withRouter } from 'react-router';
+import { withRouter } from 'react-router-dom';
 
 class ScrollToTop extends Component {
   componentDidUpdate(prevProps) {

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';