From ebfd1fce0d9ea04e4e4ee357e8227dcadda0f175 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Fri, 8 Jul 2016 15:58:49 -0400
Subject: [PATCH] add Sidebar click to change Editor content

---
 client/modules/IDE/actions/ide.js        |  7 +++++++
 client/modules/IDE/components/Editor.js  | 16 ++++++++++------
 client/modules/IDE/components/Sidebar.js |  4 +++-
 client/modules/IDE/pages/IDEView.js      |  8 +++++---
 client/styles/components/_sidebar.scss   |  3 +--
 5 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js
index 1d40ed12..0bcbc414 100644
--- a/client/modules/IDE/actions/ide.js
+++ b/client/modules/IDE/actions/ide.js
@@ -17,3 +17,10 @@ export function stopSketch() {
     type: ActionTypes.STOP_SKETCH
   };
 }
+
+export function setSelectedFile(fileId) {
+  return {
+    type: ActionTypes.SET_SELECTED_FILE,
+    selectedFile: fileId
+  };
+}
diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js
index b028d705..21956a58 100644
--- a/client/modules/IDE/components/Editor.js
+++ b/client/modules/IDE/components/Editor.js
@@ -8,21 +8,22 @@ class Editor extends React.Component {
   componentDidMount() {
     this._cm = CodeMirror(this.refs.container, { // eslint-disable-line
       theme: 'p5-widget',
-      value: this.props.content,
+      value: this.props.file.content,
       lineNumbers: true,
       styleActiveLine: true,
       mode: 'javascript'
     });
     this._cm.on('change', () => { // eslint-disable-line
-      this.props.updateFileContent('sketch.js', this._cm.getValue());
+      // this.props.updateFileContent('sketch.js', this._cm.getValue());
+      this.props.updateFileContent(this.props.file.name, this._cm.getValue());
     });
     this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.content !== prevProps.content &&
-        this.props.content !== this._cm.getValue()) {
-      this._cm.setValue(this.props.content); // eslint-disable-line no-underscore-dangle
+    if (this.props.file.content !== prevProps.file.content &&
+        this.props.file.content !== this._cm.getValue()) {
+      this._cm.setValue(this.props.file.content); // eslint-disable-line no-underscore-dangle
     }
     if (this.props.fontSize !== prevProps.fontSize) {
       this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
@@ -41,7 +42,10 @@ class Editor extends React.Component {
 }
 
 Editor.propTypes = {
-  content: PropTypes.string.isRequired,
+  file: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired
+  }),
   updateFileContent: PropTypes.func.isRequired,
   fontSize: PropTypes.number.isRequired
 };
diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js
index 4fe0b85b..cd75d0a7 100644
--- a/client/modules/IDE/components/Sidebar.js
+++ b/client/modules/IDE/components/Sidebar.js
@@ -14,6 +14,7 @@ function Sidebar(props) {
             <li
               className={itemClass}
               key={file.id}
+              onClick={() => props.setSelectedFile(file.id)}
             >{file.name}</li>
           );
         })}
@@ -26,7 +27,8 @@ Sidebar.propTypes = {
   files: PropTypes.array.isRequired,
   selectedFile: PropTypes.shape({
     id: PropTypes.string.isRequired
-  })
+  }),
+  setSelectedFile: PropTypes.func.isRequired
 };
 
 export default Sidebar;
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index 6d891791..95d1876d 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -49,9 +49,10 @@ class IDEView extends React.Component {
         <Sidebar
           files={this.props.files}
           selectedFile={this.props.selectedFile}
+          setSelectedFile={this.props.setSelectedFile}
         />
         <Editor
-          content={this.props.selectedFile.content}
+          file={this.props.selectedFile}
           updateFileContent={this.props.updateFileContent}
           fontSize={this.props.preferences.fontSize}
           files={this.props.files}
@@ -96,9 +97,10 @@ IDEView.propTypes = {
   files: PropTypes.array.isRequired,
   updateFileContent: PropTypes.func.isRequired,
   selectedFile: PropTypes.shape({
-    id: PropTypes.string,
+    id: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired
-  })
+  }),
+  setSelectedFile: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index afa53bc9..f7fb4ff8 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -1,10 +1,9 @@
 .sidebar__file-list {
-  padding: #{4 / $base-font-size}rem #{20 / $base-font-size}rem;
   border-top: 1px solid $ide-border-color; 
 }
 
 .sidebar__file-item {
-  padding: #{4 / $base-font-size}rem 0;
+  padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
   color: $light-inactive-text-color;
 }