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) {