add Sidebar click to change Editor content

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
+  };
+}

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

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;

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

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