Merge branch 'master' into feature/sketch-list

Author: LakshSingla

.github/CONTRIBUTING.md

@@ -6,13 +6,17 @@ Here are links to all the sections in this document:
 
 <!-- If you change any of the headings in this document, remember to update the table of contents. -->
 
-- [Code of Conduct](#code-of-conduct)
-- [How Can I Contribute?](#how-can-i-contribute)
-  - [First Timers](#first-timers)
-  - [Want something more challenging](#want-something-more-challenging)
-  - [Feature Enhancement](#feature-enhancement)
-- [Creating a Pull request](#creating-a-pull-request)
-  - - [Tips](#tips)
+- [Contributing to the p5.js Web Editor](#contributing-to-the-p5js-web-editor)
+  - [Code of Conduct](#code-of-conduct)
+  - [How Can I Contribute?](#how-can-i-contribute)
+    - [First Timers](#first-timers)
+    - [Milestones](#milestones)
+    - [Project Ideas](#project-ideas)
+    - [Issue Search and Tagging](#issue-search-and-tagging)
+    - [Beginning Work](#beginning-work)
+    - [Contribution Guides](#contribution-guides)
+  - [Writing Commit Messages](#writing-commit-messages)
+  - [Tips](#tips)
 
 ## Code of Conduct
 
@@ -23,21 +27,27 @@ Please follow the guidelines mentioned at [CODE OF CONDUCT.md](https://github.co
 ### First Timers
 For first-time contributors or those who want to start with a small task: [check out our list of good first bugs](https://github.com/processing/p5.js-web-editor/labels/good%20first%20issue). First read the github discussion on that issue and find out if there's currently a person working on that or not. If no one is working on it or if there has was one claimed to but has not been active for a while, ask if it is up for grabs. It's okay to not know how to fix an issue and feel free to ask questions about to approach the problem! We are all just here to learn and make something awesome. Someone from the community would help you out and these are great issues for learning about the web editor, its file structure and its development process.
 
-### Want something more challenging
-If you're already familiar with the project or would like take on something a little more challenging, please take a look at the [priority: high](https://github.com/processing/p5.js-web-editor/labels/priority%3Ahigh) issues.
+### Milestones
+A good place to check for tickets to work on is [milestones](https://github.com/processing/p5.js-web-editor/milestones), as miletones have a due date, and will give you a sense of tickets the tickets that maintainers would like to be completed sooner rather than later.
 
-### Feature Enhancement
-If you want to work on building new things, please take a look at [type: feature](https://github.com/processing/p5.js-web-editor/labels/type%3Afeature).
+### Project Ideas
+If you're looking for inspiration for Google Summer of Code or a bigger project, there's a [project list](https://github.com/processing/processing/wiki/Project-List#p5js-web-editor) maintained on the Processing wiki.
 
-If you'd like to work on a bug, please comment on it to let the maintainers know.
-If someone else has already commented and taken up that bug, please refrain from working on it and submitting a PR without asking the maintainers as it leads to unnecessary duplication of effort.
+### Issue Search and Tagging
+If you're looking for issues to work on, a good place to start is with tickets labeled [high priority](https://github.com/processing/p5.js-web-editor/labels/priority%3Ahigh). You can also look for tickets that are [feature enhancements](https://github.com/processing/p5.js-web-editor/labels/type%3Afeature), [bug fixes](https://github.com/processing/p5.js-web-editor/labels/type%3Abug), and a few other tags. 
 
-### Contribution guides
+If you feel like an issue is tagged incorrectly (e.g. it's low priority and you think it should be high), please update the issue!
+
+### Beginning Work
+
+If you'd like to work on an issue, please comment on it to let the maintainers know. If someone else has already commented and taken up that issue, please refrain from working on it and submitting a PR without asking the maintainers as it leads to unnecessary duplication of effort.
+
+### Contribution Guides
 
 * [https://guides.github.com/activities/hello-world/](https://guides.github.com/activities/hello-world/)
 * [https://guides.github.com/activities/forking/](https://guides.github.com/activities/forking/)
 
-## Writing commit messages
+## Writing Commit Messages
 
 Good commit messages serve at least three important purposes:
 
@@ -69,7 +79,6 @@ Structure your commit message like this:
 * Always leave the second line blank.
 * Be as descriptive as possible in the description. It helps reasoning about the intention of commits and gives more context about why changes happened.
 
-Tips
-----
+## Tips
 
 * If it seems difficult to summarize what your commit does, it may be because it includes several logical changes or bug fixes, and are better split up into several commits using `git add -p`.

client/components/Nav.jsx

@@ -1,12 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { Link } from 'react-router';
 import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
 import * as IDEActions from '../modules/IDE/actions/ide';
+import * as projectActions from '../modules/IDE/actions/project';
+import { setAllAccessibleOutput } from '../modules/IDE/actions/preferences';
+import { logoutUser } from '../modules/User/actions';
 
 import { metaKeyName, } from '../utils/metaKey';
 
@@ -155,7 +157,7 @@ class Nav extends React.PureComponent {
                 <button
                   onClick={() => {
                     if (this.props.user.authenticated) {
-                      this.props.saveProject();
+                      this.props.saveProject(this.props.cmController.getContent());
                     } else {
                       this.props.showErrorModal('forceAuthentication');
                     }
@@ -583,7 +585,8 @@ Nav.propTypes = {
     tidyCode: PropTypes.func,
     showFind: PropTypes.func,
     findNext: PropTypes.func,
-    findPrev: PropTypes.func
+    findPrev: PropTypes.func,
+    getContent: PropTypes.func
   }),
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
@@ -600,15 +603,20 @@ Nav.defaultProps = {
   cmController: {}
 };
 
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(
-    Object.assign(
-      {},
-      IDEActions
-    ),
-    dispatch
-  );
+function mapStateToProps(state) {
+  return {
+    project: state.project,
+    user: state.user,
+    unsavedChanges: state.ide.unsavedChanges
+  };
 }
 
-export default withRouter(connect(() => ({}), mapDispatchToProps)(Nav));
+const mapDispatchToProps = {
+  ...IDEActions,
+  ...projectActions,
+  logoutUser,
+  setAllAccessibleOutput
+};
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Nav));
 export { Nav as NavComponent };

client/modules/IDE/actions/files.js

@@ -29,10 +29,10 @@ function createUniqueName(name, parentId, files) {
   return testName;
 }
 
-export function updateFileContent(name, content) {
+export function updateFileContent(id, content) {
   return {
     type: ActionTypes.UPDATE_FILE_CONTENT,
-    name,
+    id,
     content
   };
 }
@@ -206,7 +206,7 @@ export function hideFolderChildren(id) {
 export function setBlobUrl(file, blobURL) {
   return {
     type: ActionTypes.SET_BLOB_URL,
-    name: file.name,
+    id: file.id,
     blobURL
   };
 }

client/modules/IDE/actions/project.js

@@ -66,14 +66,19 @@ export function clearPersistedState() {
   };
 }
 
-export function saveProject(autosave = false) {
+export function saveProject(selectedFile = null, autosave = false) {
   return (dispatch, getState) => {
     const state = getState();
     if (state.user.id && state.project.owner && state.project.owner.id !== state.user.id) {
       return Promise.reject();
     }
     const formParams = Object.assign({}, state.project);
     formParams.files = [...state.files];
+    if (selectedFile) {
+      console.log('selected file being updated');
+      const fileToUpdate = formParams.files.find(file => file.id === selectedFile.id);
+      fileToUpdate.content = selectedFile.content;
+    }
     if (state.project.id) {
       return axios.put(`${ROOT_URL}/projects/${state.project.id}`, formParams, { withCredentials: true })
         .then((response) => {
@@ -156,7 +161,7 @@ export function saveProject(autosave = false) {
 
 export function autosaveProject() {
   return (dispatch, getState) => {
-    saveProject(true)(dispatch, getState);
+    saveProject(null, true)(dispatch, getState);
   };
 }
 

client/modules/IDE/components/Editor.jsx

@@ -69,6 +69,7 @@ class Editor extends React.Component {
     this.showFind = this.showFind.bind(this);
     this.findNext = this.findNext.bind(this);
     this.findPrev = this.findPrev.bind(this);
+    this.getContent = this.getContent.bind(this);
   }
 
   componentDidMount() {
@@ -96,7 +97,7 @@ class Editor extends React.Component {
           'asi': true,
           'eqeqeq': false,
           '-W041': false,
-          'esversion': 6
+          'esversion': 7
         }
       }
     });
@@ -116,7 +117,7 @@ class Editor extends React.Component {
 
     this._cm.on('change', debounce(() => {
       this.props.setUnsavedChanges(true);
-      this.props.updateFileContent(this.props.file.name, this._cm.getValue());
+      this.props.updateFileContent(this.props.file.id, this._cm.getValue());
       if (this.props.autorefresh && this.props.isPlaying) {
         this.props.clearConsole();
         this.props.startRefreshSketch();
@@ -144,7 +145,8 @@ class Editor extends React.Component {
       tidyCode: this.tidyCode,
       showFind: this.showFind,
       findNext: this.findNext,
-      findPrev: this.findPrev
+      findPrev: this.findPrev,
+      getContent: this.getContent
     });
   }
 
@@ -230,13 +232,24 @@ class Editor extends React.Component {
     return mode;
   }
 
-  initializeDocuments(files) {
-    this._docs = {};
-    files.forEach((file) => {
-      if (file.name !== 'root') {
-        this._docs[file.id] = CodeMirror.Doc(file.content, this.getFileMode(file.name)); // eslint-disable-line
-      }
-    });
+  getContent() {
+    const content = this._cm.getValue();
+    const updatedFile = Object.assign({}, this.props.file, { content });
+    return updatedFile;
+  }
+
+  findPrev() {
+    this._cm.focus();
+    this._cm.execCommand('findPrev');
+  }
+
+  findNext() {
+    this._cm.focus();
+    this._cm.execCommand('findNext');
+  }
+
+  showFind() {
+    this._cm.execCommand('findPersistent');
   }
 
   tidyCode() {
@@ -255,18 +268,13 @@ class Editor extends React.Component {
     }
   }
 
-  showFind() {
-    this._cm.execCommand('findPersistent');
-  }
-
-  findNext() {
-    this._cm.focus();
-    this._cm.execCommand('findNext');
-  }
-
-  findPrev() {
-    this._cm.focus();
-    this._cm.execCommand('findPrev');
+  initializeDocuments(files) {
+    this._docs = {};
+    files.forEach((file) => {
+      if (file.name !== 'root') {
+        this._docs[file.id] = CodeMirror.Doc(file.content, this.getFileMode(file.name)); // eslint-disable-line
+      }
+    });
   }
 
   toggleEditorOptions() {

client/modules/IDE/components/Toolbar.jsx

@@ -1,9 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import classNames from 'classnames';
 import InlineSVG from 'react-inlinesvg';
 
+import * as IDEActions from '../actions/ide';
+import * as preferenceActions from '../actions/preferences';
+import * as projectActions from '../actions/project';
+
 const playUrl = require('../../../images/play.svg');
 const stopUrl = require('../../../images/stop.svg');
 const preferencesUrl = require('../../../images/preferences.svg');
@@ -186,4 +191,22 @@ Toolbar.defaultProps = {
   currentUser: undefined
 };
 
-export default Toolbar;
+function mapStateToProps(state) {
+  return {
+    autorefresh: state.preferences.autorefresh,
+    currentUser: state.user.username,
+    infiniteLoop: state.ide.infiniteLoop,
+    isPlaying: state.ide.isPlaying,
+    owner: state.project.owner,
+    preferencesIsVisible: state.ide.preferencesIsVisible,
+    project: state.project,
+  };
+}
+
+const mapDispatchToProps = {
+  ...IDEActions,
+  ...preferenceActions,
+  ...projectActions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Toolbar);