From 6dca99f948151654eecb2dd0447a7ed3ef34d73a Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Fri, 5 Aug 2016 18:37:21 +0300
Subject: [PATCH] Moved sidebar to its own component

---
 .../scenes/DocumentScene/DocumentScene.js     | 60 +++++-------------
 .../scenes/DocumentScene/DocumentScene.scss   | 29 ---------
 .../components/Sidebar/Sidebar.js             | 61 +++++++++++++++++++
 .../components/Sidebar/Sidebar.scss           | 28 +++++++++
 .../DocumentScene/components/Sidebar/index.js |  2 +
 5 files changed, 105 insertions(+), 75 deletions(-)
 create mode 100644 frontend/scenes/DocumentScene/components/Sidebar/Sidebar.js
 create mode 100644 frontend/scenes/DocumentScene/components/Sidebar/Sidebar.scss
 create mode 100644 frontend/scenes/DocumentScene/components/Sidebar/index.js

diff --git a/frontend/scenes/DocumentScene/DocumentScene.js b/frontend/scenes/DocumentScene/DocumentScene.js
index 954db49cd..19fbf8ea6 100644
--- a/frontend/scenes/DocumentScene/DocumentScene.js
+++ b/frontend/scenes/DocumentScene/DocumentScene.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
-import { toJS } from 'mobx';
 import { Link, browserHistory } from 'react-router';
 import { observer } from 'mobx-react';
+import { toJS } from 'mobx';
 import keydown from 'react-keydown';
 import _ from 'lodash';
 
@@ -14,14 +14,12 @@ import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
 import CenteredContent from 'components/CenteredContent';
 import Document from 'components/Document';
 import DropdownMenu, { MenuItem, MoreIcon } from 'components/DropdownMenu';
-import Flex from 'components/Flex';
-import Tree from 'components/Tree';
+import { Flex } from 'reflexbox';
+import Sidebar from './components/Sidebar';
 
 import styles from './DocumentScene.scss';
-import classNames from 'classnames/bind';
-const cx = classNames.bind(styles);
-
-import treeStyles from 'components/Tree/Tree.scss';
+// import classNames from 'classnames/bind';
+// const cx = classNames.bind(styles);
 
 @keydown(['cmd+/', 'ctrl+/', 'c', 'e'])
 @observer(['ui', 'cache'])
@@ -59,7 +57,7 @@ class DocumentScene extends React.Component {
     const key = nextProps.keydown.event;
     if (key) {
       if (key.key === '/' && (key.metaKey || key.ctrl.Key)) {
-        this.toggleSidebar();
+        this.props.ui.toggleSidebar();
       }
 
       if (key.key === 'c') {
@@ -123,18 +121,6 @@ class DocumentScene extends React.Component {
     a.click();
   }
 
-  toggleSidebar = () => {
-    this.props.ui.toggleSidebar();
-  }
-
-  renderNode = (node) => {
-    return (
-      <span className={ treeStyles.nodeLabel } onClick={ this.onClickNode.bind(null, node) }>
-        { node.module.name }
-      </span>
-    );
-  }
-
   render() {
     const {
       sidebar,
@@ -179,33 +165,15 @@ class DocumentScene extends React.Component {
             <AtlasPreviewLoading />
           </CenteredContent>
         ) : (
-          <Flex flex>
+          <Flex auto>
             { this.store.isCollection && (
-              <Flex>
-                { sidebar && (
-                  <div className={ cx(styles.sidebar) }>
-                    <Tree
-                      paddingLeft={ 10 }
-                      tree={ toJS(this.store.collectionTree) }
-                      onChange={ this.store.updateNavigationTree }
-                      onCollapse={ this.store.onNodeCollapse }
-                      isNodeCollapsed={ this.isNodeCollapsed }
-                      renderNode={ this.renderNode }
-                    />
-                  </div>
-                ) }
-                <div
-                  onClick={ this.toggleSidebar }
-                  className={ styles.sidebarToggle }
-                  title="Toggle sidebar (Cmd+/)"
-                >
-                  <img
-                    src={ require("assets/icons/menu.svg") }
-                    className={ styles.menuIcon }
-                    alt="Menu"
-                  />
-                </div>
-              </Flex>
+              <Sidebar
+                open={ sidebar }
+                onToggle={ this.props.ui.toggleSidebar }
+                navigationTree={ toJS(this.store.collectionTree) }
+                onNavigationUpdate={ this.store.updateNavigationTree }
+                onNodeCollapse={ this.store.onNodeCollapse }
+              />
             ) }
             <Flex flex justify="center" className={ styles.content }>
               <CenteredContent>
diff --git a/frontend/scenes/DocumentScene/DocumentScene.scss b/frontend/scenes/DocumentScene/DocumentScene.scss
index caea1ed9f..91ad443b6 100644
--- a/frontend/scenes/DocumentScene/DocumentScene.scss
+++ b/frontend/scenes/DocumentScene/DocumentScene.scss
@@ -3,35 +3,6 @@
   flex-direction: row;
 }
 
-.sidebar {
-  width: 250px;
-  padding: 20px 20px 20px 5px;
-
-  border-right: 1px solid #eee;
-}
-
 .content {
   position: relative;
 }
-
-.sidebarToggle {
-  display: flex;
-  position: relative;
-  width: 60px;
-  cursor: pointer;
-  justify-content: center;
-
-  &:hover {
-    background-color: #f5f5f5;
-
-    .menuIcon {
-      opacity: 1;
-    }
-  }
-}
-
-.menuIcon {
-  margin-top: 18px;
-  height: 28px;
-  opacity: 0.15;
-}
diff --git a/frontend/scenes/DocumentScene/components/Sidebar/Sidebar.js b/frontend/scenes/DocumentScene/components/Sidebar/Sidebar.js
new file mode 100644
index 000000000..396b4d8b2
--- /dev/null
+++ b/frontend/scenes/DocumentScene/components/Sidebar/Sidebar.js
@@ -0,0 +1,61 @@
+import React, { PropTypes } from 'react';
+import { observer } from 'mobx-react';
+
+import { Flex } from 'reflexbox';
+import Tree from 'components/Tree';
+
+import styles from './Sidebar.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
+
+import treeStyles from 'components/Tree/Tree.scss';
+
+@observer
+class Sidebar extends React.Component {
+  static propTypes = {
+    open: PropTypes.bool,
+    onToggle: PropTypes.func.isRequired,
+    navigationTree: PropTypes.object.isRequired,
+    onNavigationUpdate: PropTypes.func.isRequired,
+    onNodeCollapse: PropTypes.func.isRequired,
+  }
+
+  renderNode = (node) => {
+    return (
+      <span className={ treeStyles.nodeLabel } onClick={ this.onClickNode.bind(null, node) }>
+        { node.module.name }
+      </span>
+    );
+  }
+
+  render() {
+    return (
+      <Flex>
+        { this.props.open && (
+          <div className={ cx(styles.sidebar) }>
+            <Tree
+              paddingLeft={ 10 }
+              tree={ this.props.navigationTree }
+              onChange={ this.props.onNavigationUpdate }
+              onCollapse={ this.props.onNodeCollapse }
+              renderNode={ this.renderNode }
+            />
+          </div>
+        ) }
+        <div
+          onClick={ this.props.onToggle }
+          className={ styles.sidebarToggle }
+          title="Toggle sidebar (Cmd+/)"
+        >
+          <img
+            src={ require("assets/icons/menu.svg") }
+            className={ styles.menuIcon }
+            alt="Menu"
+          />
+        </div>
+      </Flex>
+    );
+  }
+}
+
+export default Sidebar;
diff --git a/frontend/scenes/DocumentScene/components/Sidebar/Sidebar.scss b/frontend/scenes/DocumentScene/components/Sidebar/Sidebar.scss
new file mode 100644
index 000000000..ce43556c4
--- /dev/null
+++ b/frontend/scenes/DocumentScene/components/Sidebar/Sidebar.scss
@@ -0,0 +1,28 @@
+.sidebar {
+  width: 250px;
+  padding: 20px 20px 20px 5px;
+
+  border-right: 1px solid #eee;
+}
+
+.sidebarToggle {
+  display: flex;
+  position: relative;
+  width: 60px;
+  cursor: pointer;
+  justify-content: center;
+
+  &:hover {
+    background-color: #f5f5f5;
+
+    .menuIcon {
+      opacity: 1;
+    }
+  }
+}
+
+.menuIcon {
+  margin-top: 18px;
+  height: 28px;
+  opacity: 0.15;
+}
diff --git a/frontend/scenes/DocumentScene/components/Sidebar/index.js b/frontend/scenes/DocumentScene/components/Sidebar/index.js
new file mode 100644
index 000000000..0f9e1036d
--- /dev/null
+++ b/frontend/scenes/DocumentScene/components/Sidebar/index.js
@@ -0,0 +1,2 @@
+import Sidebar from './Sidebar';
+export default Sidebar;