Separate Layout component

app/components/CenteredContent/CenteredContent.js

@@ -8,7 +8,7 @@ type Props = {
 
 const Container = styled.div`
   width: 100%;
-  margin: 60px 20px;
+  margin: 60px;
 `;
 
 const Content = styled.div`

app/components/Layout/Layout.js

@@ -8,32 +8,21 @@ import { observer, inject } from 'mobx-react';
 import keydown from 'react-keydown';
 import Analytics from 'shared/components/Analytics';
 import Flex from 'shared/components/Flex';
-import { color, layout } from 'shared/styles/constants';
+import { layout } from 'shared/styles/constants';
 import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers';
 
-import Avatar from 'components/Avatar';
 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
-import Scrollable from 'components/Scrollable';
-import HomeIcon from 'components/Icon/HomeIcon';
-import SearchIcon from 'components/Icon/SearchIcon';
-import StarredIcon from 'components/Icon/StarredIcon';
+import Sidebar from 'components/Sidebar';
+import Modals from 'components/Modals';
 import Toasts from 'components/Toasts';
-import AccountMenu from 'menus/AccountMenu';
-
-import SidebarCollections from './components/SidebarCollections';
-import SidebarLink from './components/SidebarLink';
-import HeaderBlock from './components/HeaderBlock';
-import Modals from './components/Modals';
 
 import AuthStore from 'stores/AuthStore';
 import UiStore from 'stores/UiStore';
-import CollectionsStore from 'stores/CollectionsStore';
 import DocumentsStore from 'stores/DocumentsStore';
 
 type Props = {
   history: Object,
   location: Location,
-  collections: CollectionsStore,
   documents: DocumentsStore,
   children?: ?React.Element<any>,
   actions?: ?React.Element<any>,
@@ -75,31 +64,10 @@ class Layout extends React.Component {
     this.props.ui.setActiveModal('keyboard-shortcuts');
   }
 
-  handleCreateCollection = () => {
-    this.props.ui.setActiveModal('collection-new');
-  };
-
-  handleEditCollection = () => {
-    this.props.ui.setActiveModal('collection-edit');
-  };
-
-  setScrollableRef = ref => {
-    this.scrollable = ref;
-  };
-
-  scrollToActiveDocument = ref => {
-    const scrollable = this.scrollable;
-    if (!ref || !scrollable) return;
-
-    const container = scrollable.getBoundingClientRect();
-    const bounds = ref.getBoundingClientRect();
-    const scrollTop = bounds.top + container.top;
-    scrollable.scrollTop = scrollTop;
-  };
-
   render() {
-    const { auth, documents, ui } = this.props;
+    const { auth, ui } = this.props;
     const { user, team } = auth;
+    const showSidebar = auth.authenticated && user && team;
 
     return (
       <Container column auto>
@@ -116,44 +84,7 @@ class Layout extends React.Component {
         {this.props.notifications}
 
         <Flex auto>
-          {auth.authenticated &&
-            user &&
-            team && (
-              <Sidebar column editMode={ui.editMode}>
-                <AccountMenu
-                  label={
-                    <HeaderBlock user={user} team={team}>
-                      <Avatar src={user.avatarUrl} />
-                    </HeaderBlock>
-                  }
-                />
-
-                <Flex auto column>
-                  <Scrollable innerRef={this.setScrollableRef}>
-                    <LinkSection>
-                      <SidebarLink to="/dashboard" icon={<HomeIcon />}>
-                        Home
-                      </SidebarLink>
-                      <SidebarLink to="/search" icon={<SearchIcon />}>
-                        Search
-                      </SidebarLink>
-                      <SidebarLink to="/starred" icon={<StarredIcon />}>
-                        Starred
-                      </SidebarLink>
-                    </LinkSection>
-                    <LinkSection>
-                      <SidebarCollections
-                        history={this.props.history}
-                        location={this.props.location}
-                        activeDocument={documents.active}
-                        onCreateCollection={this.handleCreateCollection}
-                        activeDocumentRef={this.scrollToActiveDocument}
-                      />
-                    </LinkSection>
-                  </Scrollable>
-                </Flex>
-              </Sidebar>
-            )}
+          {showSidebar && <Sidebar />}
 
           <Content auto justify="center" editMode={ui.editMode}>
             {this.props.children}
@@ -177,23 +108,4 @@ const Content = styled(Flex)`
   transition: margin-left 200ms ease-in-out;
 `;
 
-const Sidebar = styled(Flex)`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: ${props => (props.editMode ? `-${layout.sidebarWidth}` : 0)};
-  width: ${layout.sidebarWidth};
-  background: ${color.smoke};
-  transition: left 200ms ease-in-out;
-`;
-
-const LinkSection = styled(Flex)`
-  flex-direction: column;
-  margin: 24px 0;
-  padding: 0 24px;
-  position: relative;
-`;
-
-export default withRouter(
-  inject('user', 'auth', 'ui', 'documents', 'collections')(Layout)
-);
+export default withRouter(inject('user', 'auth', 'ui', 'documents')(Layout));

app/components/Layout/components/Title.js

@@ -1,44 +0,0 @@
-// @flow
-import React from 'react';
-import _ from 'lodash';
-import styled from 'styled-components';
-
-type Props = {
-  content: string,
-  truncate?: number,
-  placeholder?: ?string,
-};
-
-class Title extends React.Component {
-  props: Props;
-
-  render() {
-    let title;
-    if (this.props.truncate) {
-      title = _.truncate(this.props.content, { length: this.props.truncate });
-    } else {
-      title = this.props.content;
-    }
-
-    let usePlaceholder;
-    if (this.props.children === null && this.props.placeholder) {
-      title = this.props.placeholder;
-      usePlaceholder = true;
-    }
-
-    return (
-      <span>
-        {title && <span>&nbsp;/&nbsp;</span>}
-        <TitleText title={this.props.content} untitled={usePlaceholder}>
-          {title}
-        </TitleText>
-      </span>
-    );
-  }
-}
-
-const TitleText = styled.span`
-  opacity: ${props => (props.untitled ? 0.5 : 1)};
-`;
-
-export default Title;

app/components/Layout/index.js

@@ -1,7 +1,3 @@
 // @flow
 import Layout from './Layout';
-import Title from './components/Title';
-
 export default Layout;
-
-export { Title };

app/components/Modals/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Modals from './Modals';
+export default Modals;

app/components/Sidebar/Sidebar.js

@@ -0,0 +1,117 @@
+// @flow
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import type { Location } from 'react-router-dom';
+import styled from 'styled-components';
+import { observer, inject } from 'mobx-react';
+import Flex from 'shared/components/Flex';
+import { color, layout } from 'shared/styles/constants';
+
+import AccountMenu from 'menus/AccountMenu';
+import Avatar from 'components/Avatar';
+import Scrollable from 'components/Scrollable';
+import HomeIcon from 'components/Icon/HomeIcon';
+import SearchIcon from 'components/Icon/SearchIcon';
+import StarredIcon from 'components/Icon/StarredIcon';
+import Collections from './components/Collections';
+import SidebarLink from './components/SidebarLink';
+import HeaderBlock from './components/HeaderBlock';
+
+import AuthStore from 'stores/AuthStore';
+import UiStore from 'stores/UiStore';
+
+type Props = {
+  history: Object,
+  location: Location,
+  auth: AuthStore,
+  ui: UiStore,
+};
+
+@observer
+class Sidebar extends Component {
+  props: Props;
+  scrollable: ?HTMLDivElement;
+
+  handleCreateCollection = () => {
+    this.props.ui.setActiveModal('collection-new');
+  };
+
+  handleEditCollection = () => {
+    this.props.ui.setActiveModal('collection-edit');
+  };
+
+  setScrollableRef = ref => {
+    this.scrollable = ref;
+  };
+
+  scrollToActiveDocument = ref => {
+    const scrollable = this.scrollable;
+    if (!ref || !scrollable) return;
+
+    const container = scrollable.getBoundingClientRect();
+    const bounds = ref.getBoundingClientRect();
+    const scrollTop = bounds.top + container.top;
+    scrollable.scrollTop = scrollTop;
+  };
+
+  render() {
+    const { auth, ui } = this.props;
+    const { user, team } = auth;
+    if (!user || !team) return;
+
+    return (
+      <Container column editMode={ui.editMode}>
+        <AccountMenu
+          label={
+            <HeaderBlock user={user} team={team}>
+              <Avatar src={user.avatarUrl} />
+            </HeaderBlock>
+          }
+        />
+
+        <Flex auto column>
+          <Scrollable innerRef={this.setScrollableRef}>
+            <Section>
+              <SidebarLink to="/dashboard" icon={<HomeIcon />}>
+                Home
+              </SidebarLink>
+              <SidebarLink to="/search" icon={<SearchIcon />}>
+                Search
+              </SidebarLink>
+              <SidebarLink to="/starred" icon={<StarredIcon />}>
+                Starred
+              </SidebarLink>
+            </Section>
+            <Section>
+              <Collections
+                history={this.props.history}
+                location={this.props.location}
+                onCreateCollection={this.handleCreateCollection}
+                activeDocumentRef={this.scrollToActiveDocument}
+              />
+            </Section>
+          </Scrollable>
+        </Flex>
+      </Container>
+    );
+  }
+}
+
+const Container = styled(Flex)`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: ${props => (props.editMode ? `-${layout.sidebarWidth}` : 0)};
+  width: ${layout.sidebarWidth};
+  background: ${color.smoke};
+  transition: left 200ms ease-in-out;
+`;
+
+const Section = styled(Flex)`
+  flex-direction: column;
+  margin: 24px 0;
+  padding: 0 24px;
+  position: relative;
+`;
+
+export default withRouter(inject('user', 'auth', 'ui')(Sidebar));

app/components/Sidebar/components/Collections.js

@@ -25,14 +25,13 @@ type Props = {
   location: Location,
   collections: CollectionsStore,
   documents: DocumentsStore,
-  activeDocument: ?Document,
   onCreateCollection: () => void,
   activeDocumentRef: HTMLElement => void,
   ui: UiStore,
 };
 
 @observer
-class SidebarCollections extends Component {
+class Collections extends Component {
   props: Props;
 
   render() {
@@ -40,7 +39,6 @@ class SidebarCollections extends Component {
       history,
       location,
       collections,
-      activeDocument,
       ui,
       activeDocumentRef,
       documents,
@@ -55,7 +53,7 @@ class SidebarCollections extends Component {
             history={history}
             location={location}
             collection={collection}
-            activeDocument={activeDocument}
+            activeDocument={documents.active}
             activeDocumentRef={activeDocumentRef}
             prefetchDocument={documents.prefetchDocument}
             ui={ui}
@@ -276,4 +274,4 @@ const Children = styled(Flex)`
   margin-left: 12px;
 `;
 
-export default inject('collections', 'ui', 'documents')(SidebarCollections);
+export default inject('collections', 'ui', 'documents')(Collections);

app/components/Sidebar/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Sidebar from './Sidebar';
+export default Sidebar;