Merge branch 'master' into login-signup-issue

Author: catarak

.github/CONTRIBUTING.md

@@ -33,6 +33,8 @@ Don't know where to begin? Here are some suggestions to get started:
   - Front end: React/Redux, CSS/Sass, CodeMirror
   - Back end: Node, Express, MongoDB, Jest, AWS
   - DevOps: Travis CI, Jest, Docker, Kubernetes, AWS
+  - Documentation
+  - Translations: Application and documentation
 * Use the [p5.js Web Editor](https://editor.p5js.org)! Find a bug? Think of something you think would add to the project? Open an issue.
 * Expand an existing issue. Sometimes issues are missing steps to reproduce, or need suggestions for potential solutions. Sometimes they need another voice saying, "this is really important!"
 * Try getting the project running locally on your computer by following the [installation steps](./../developer_docs/installation.md).

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: https://processingfoundation.org/support

README.md

@@ -1,5 +1,12 @@
 # [p5.js Web Editor](https://editor.p5js.org)
 
+
+Documentation is also available in the following languages:
+
+[한국어](https://github.com/processing/p5.js-web-editor/blob/master/translations/ko)
+
+## Welcome! 👋👋🏿👋🏽👋🏻👋🏾👋🏼
+
 The p5.js Web Editor is a platform for creative coding, with a focus on making coding accessible for as many people as possible, including artists, designers, educators, beginners, and anyone who wants to learn. Simply by opening the website you can get started writing p5.js sketches without downloading or configuring anything. The editor is designed with simplicity in mind by limiting features and frills. We strive to listen to the community to drive the editor’s development, and to be intentional with every change. The editor is free and open-source.
 
 We also strive to give the community as much ownership and control as possible. You can download your sketches so that you can edit them locally or host them elsewhere. You can also host your own version of the editor, giving you control over its data.

client/components/Nav.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
-import { Link, browserHistory } 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';
@@ -167,8 +167,6 @@ class Nav extends React.PureComponent {
 
   handleLogout() {
     this.props.logoutUser();
-    // if you're on the settings page, probably.
-    browserHistory.push('/');
     this.setDropdown('none');
   }
 
@@ -184,7 +182,8 @@ class Nav extends React.PureComponent {
   }
 
   handleShare() {
-    this.props.showShareModal();
+    const { username } = this.props.params;
+    this.props.showShareModal(this.props.project.id, this.props.project.name, username);
     this.setDropdown('none');
   }
 
@@ -228,7 +227,7 @@ class Nav extends React.PureComponent {
 
   renderDashboardMenu(navDropdownState) {
     return (
-      <ul className="nav__items-left" title="project-menu">
+      <ul className="nav__items-left">
         <li className="nav__item-logo">
           <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
         </li>
@@ -246,7 +245,7 @@ class Nav extends React.PureComponent {
 
   renderProjectMenu(navDropdownState) {
     return (
-      <ul className="nav__items-left" title="project-menu">
+      <ul className="nav__items-left">
         <li className="nav__item-logo">
           <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
         </li>
@@ -717,6 +716,7 @@ Nav.propTypes = {
   }).isRequired,
   project: PropTypes.shape({
     id: PropTypes.string,
+    name: PropTypes.string,
     owner: PropTypes.shape({
       id: PropTypes.string
     })
@@ -742,7 +742,10 @@ Nav.propTypes = {
   layout: PropTypes.oneOf(['dashboard', 'project']),
   rootFile: PropTypes.shape({
     id: PropTypes.string.isRequired
-  }).isRequired
+  }).isRequired,
+  params: PropTypes.shape({
+    username: PropTypes.string
+  })
 };
 
 Nav.defaultProps = {
@@ -752,7 +755,10 @@ Nav.defaultProps = {
   },
   cmController: {},
   layout: 'project',
-  warnIfUnsavedChanges: undefined
+  warnIfUnsavedChanges: undefined,
+  params: {
+    username: undefined
+  }
 };
 
 function mapStateToProps(state) {

client/components/NavBasic.jsx

@@ -13,7 +13,7 @@ class NavBasic extends React.PureComponent {
   render() {
     return (
       <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
-        <ul className="nav__items-left" title="project-menu">
+        <ul className="nav__items-left">
           <li className="nav__item-logo">
             <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
           </li>

client/components/__test__/FileNode.test.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { FileNode } from '../../modules/IDE/components/FileNode';
+
+beforeAll(() => {});
+describe('<FileNode />', () => {
+  let component;
+  let props = {};
+
+  describe('with valid props', () => {
+    beforeEach(() => {
+      props = {
+        ...props,
+        id: '0',
+        children: [],
+        name: 'test.jsx',
+        fileType: 'dunno',
+        setSelectedFile: jest.fn(),
+        deleteFile: jest.fn(),
+        updateFileName: jest.fn(),
+        resetSelectedFile: jest.fn(),
+        newFile: jest.fn(),
+        newFolder: jest.fn(),
+        showFolderChildren: jest.fn(),
+        hideFolderChildren: jest.fn(),
+        canEdit: true,
+        authenticated: false
+      };
+      component = shallow(<FileNode {...props} />);
+    });
+
+    describe('when changing name', () => {
+      let input;
+      let renameTriggerButton;
+      const changeName = (newFileName) => {
+        renameTriggerButton.simulate('click');
+        input.simulate('change', { target: { value: newFileName } });
+        input.simulate('blur');
+      };
+
+      beforeEach(() => {
+        input = component.find('.sidebar__file-item-input');
+        renameTriggerButton = component
+          .find('.sidebar__file-item-option')
+          .first();
+        component.setState({ isEditing: true });
+      });
+      it('should render', () => expect(component).toBeDefined());
+
+      // it('should debug', () => console.log(component.debug()));
+
+      describe('to a valid filename', () => {
+        const newName = 'newname.jsx';
+        beforeEach(() => changeName(newName));
+
+        it('should save the name', () => {
+          expect(props.updateFileName).toBeCalledWith(props.id, newName);
+        });
+      });
+
+      describe('to an empty filename', () => {
+        const newName = '';
+        beforeEach(() => changeName(newName));
+
+        it('should not save the name', () => {
+          expect(props.updateFileName).not.toHaveBeenCalled();
+        });
+      });
+    });
+  });
+});

client/components/__test__/__snapshots__/Nav.test.jsx.snap

@@ -7,7 +7,6 @@ exports[`Nav renders correctly 1`] = `
 >
   <ul
     className="nav__items-left"
-    title="project-menu"
   >
     <li
       className="nav__item-logo"

client/modules/IDE/actions/collections.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { browserHistory } from 'react-router';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from './loader';
 import { setToastText, showToast } from './toast';
@@ -47,20 +48,22 @@ export function createCollection(collection) {
         });
         dispatch(stopLoader());
 
-        const collectionName = response.data.name;
-        dispatch(setToastText(`Created "${collectionName}"`));
+        const newCollection = response.data;
+        dispatch(setToastText(`Created "${newCollection.name}"`));
         dispatch(showToast(TOAST_DISPLAY_TIME_MS));
 
-        return response.data;
+        const pathname = `/${newCollection.owner.username}/collections/${newCollection.id}`;
+        const location = { pathname, state: { skipSavingPath: true } };
+
+        browserHistory.push(location);
       })
       .catch((response) => {
+        console.error('Error creating collection', response.data);
         dispatch({
           type: ActionTypes.ERROR,
           error: response.data
         });
         dispatch(stopLoader());
-
-        return response.data;
       });
   };
 }

client/modules/IDE/actions/files.js

@@ -136,10 +136,13 @@ export function createFolder(formProps) {
 }
 
 export function updateFileName(id, name) {
-  return {
-    type: ActionTypes.UPDATE_FILE_NAME,
-    id,
-    name
+  return (dispatch) => {
+    dispatch(setUnsavedChanges(true));
+    dispatch({
+      type: ActionTypes.UPDATE_FILE_NAME,
+      id,
+      name
+    });
   };
 }
 

client/modules/IDE/actions/project.js

@@ -133,6 +133,7 @@ export function saveProject(selectedFile = null, autosave = false) {
     }
     const formParams = Object.assign({}, state.project);
     formParams.files = [...state.files];
+
     if (selectedFile) {
       const fileToUpdate = formParams.files.find(file => file.id === selectedFile.id);
       fileToUpdate.content = selectedFile.content;