update eslint and fix linting errors

client/components/Nav.jsx

@@ -404,7 +404,8 @@ class Nav extends React.PureComponent {
                   onFocus={this.handleFocus.bind(this, 'help')}
                   onBlur={this.handleBlur}
                   onClick={this.setDropdown.bind(this, 'none')}
-                >Reference</a>
+                >Reference
+                </a>
               </li>
               <li className="nav__dropdown-item">
                 <Link

client/modules/App/components/DevTools.jsx

@@ -3,11 +3,9 @@ import { createDevTools } from 'redux-devtools';
 import LogMonitor from 'redux-devtools-log-monitor';
 import DockMonitor from 'redux-devtools-dock-monitor';
 
-export default createDevTools(
+export default createDevTools(<DockMonitor
-  <DockMonitor
   toggleVisibilityKey="ctrl-h"
   changePositionKey="ctrl-w"
 >
   <LogMonitor />
-  </DockMonitor>
+</DockMonitor>);
-);

client/modules/IDE/actions/project.js

@@ -273,9 +273,7 @@ export function setServeSecure(serveSecure, { redirect = true } = {}) {
 
     if (redirect === true) {
       dispatch(saveProject(false /* autosave */))
-        .then(
+        .then(() => redirectToProtocol(serveSecure === true ? protocols.https : protocols.http));
-          () => redirectToProtocol(serveSecure === true ? protocols.https : protocols.http)
-        );
     }
 
     return null;

client/modules/IDE/actions/uploader.js

@@ -47,7 +47,8 @@ export function dropzoneAcceptCallback(userId, file, done) {
         });
     } else {
       file.postData = []; // eslint-disable-line
-      axios.post(`${ROOT_URL}/S3/sign`, {
+      axios.post(
+        `${ROOT_URL}/S3/sign`, {
           name: file.name,
           type: file.type,
           size: file.size,
@@ -56,7 +57,8 @@ export function dropzoneAcceptCallback(userId, file, done) {
         },
         {
           withCredentials: true
-        })
+        }
+      )
         .then((response) => {
         file.custom_status = 'ready'; // eslint-disable-line
         file.postData = response.data; // eslint-disable-line

client/modules/IDE/components/About.jsx

@@ -34,7 +34,8 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
-          Examples</a>
+          Examples
+          </a>
         </p>
         <p className="about__content-column-list">
           <a
@@ -43,7 +44,8 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
-          Learn</a>
+          Learn
+          </a>
         </p>
       </div>
       <div className="about__content-column">
@@ -55,7 +57,8 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
-          Libraries</a>
+          Libraries
+          </a>
         </p>
         <p className="about__content-column-list">
           <a
@@ -64,7 +67,8 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
-          Reference</a>
+          Reference
+          </a>
         </p>
         <p className="about__content-column-list">
           <a
@@ -73,7 +77,8 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
-          Forum</a>
+          Forum
+          </a>
         </p>
       </div>
       <div className="about__footer">
@@ -82,21 +87,24 @@ function About(props) {
             href="https://github.com/processing/p5.js-web-editor"
             target="_blank"
             rel="noopener noreferrer"
-          >Contribute</a>
+          >Contribute
+          </a>
         </p>
         <p className="about__footer-list">
           <a
             href="https://github.com/processing/p5.js-web-editor/issues/new"
             target="_blank"
             rel="noopener noreferrer"
-          >Report a bug</a>
+          >Report a bug
+          </a>
         </p>
         <p className="about__footer-list">
           <a
             href="https://twitter.com/p5xjs?lang=en"
             target="_blank"
             rel="noopener noreferrer"
-          >Twitter</a>
+          >Twitter
+          </a>
         </p>
       </div>
     </div>

client/modules/IDE/components/AssetList.jsx

@@ -44,13 +44,12 @@ class AssetList extends React.Component {
             </thead>
             <tbody>
               {this.props.assets.map(asset =>
-                <tr className="asset-table__row" key={asset.key}>
+                (<tr className="asset-table__row" key={asset.key}>
                   <td>{asset.name}</td>
                   <td>{prettyBytes(asset.size)}</td>
                   <td><Link to={asset.url} target="_blank">View</Link></td>
                   <td><Link to={`/${this.props.username}/sketches/${asset.sketchId}`}>{asset.sketchName}</Link></td>
-                </tr>
+                 </tr>))}
-              )}
             </tbody>
           </table>}
       </div>

client/modules/IDE/components/Console.jsx

@@ -44,7 +44,7 @@ class Console extends React.Component {
             if (Object.keys(args).length === 0) {
               return (
                 <div key={consoleEvent.id} className="preview-console__undefined">
-                  <span key={`${consoleEvent.id}-0`}>{'undefined'}</span>
+                  <span key={`${consoleEvent.id}-0`}>undefined</span>
                 </div>
               );
             }
@@ -58,7 +58,6 @@ class Console extends React.Component {
       </div>
     );
   }
-
 }
 
 Console.propTypes = {

client/modules/IDE/components/EditorAccessibility.jsx

@@ -9,18 +9,14 @@ class EditorAccessibility extends React.Component {
     const messages = [];
     if (this.props.lintMessages.length > 0) {
       this.props.lintMessages.forEach((lintMessage, i) => {
-        messages.push(
+        messages.push(<li key={lintMessage.id}>
-          <li key={lintMessage.id}>
           {lintMessage.severity} in line
           {lintMessage.line} :
           {lintMessage.message}
-          </li>
+        </li>);
-        );
       });
     } else {
-      messages.push(
+      messages.push(<li tabIndex="0" key={0}> There are no lint messages </li>);
-        <li tabIndex="0" key={0}> There are no lint messages </li>
-      );
     }
     return (
       <div className="editor-accessibility">

client/modules/IDE/components/Feedback.jsx

@@ -40,7 +40,8 @@ function Feedback(props) {
             href="https://docs.google.com/forms/d/e/1FAIpQLSexU8W2EIhXjktl-_XzwjH6vgnelHirH4Yn4liN5BXltPWqBg/viewform"
             target="_blank"
             rel="noopener noreferrer"
-          >Go to Form</a>
+          >Go to Form
+          </a>
         </p>
       </div>
     </div>

client/modules/IDE/components/PreviewFrame.jsx

@@ -23,7 +23,6 @@ import { hijackConsole, hijackConsoleErrorsScript, startTag, getAllScriptOffsets
 
 
 class PreviewFrame extends React.Component {
-
   componentDidMount() {
     if (this.props.isPlaying) {
       this.renderFrameContents();
@@ -144,9 +143,7 @@ class PreviewFrame extends React.Component {
       hijackConsole
     ];
     const accessiblelib = sketchDoc.createElement('script');
-    accessiblelib.setAttribute(
+    accessiblelib.setAttribute('src', 'https://cdn.rawgit.com/processing/p5.accessibility/v0.1.1/dist/p5-accessibility.js');
-      'src', 'https://cdn.rawgit.com/processing/p5.accessibility/v0.1.1/dist/p5-accessibility.js'
-    );
     const accessibleOutputs = sketchDoc.createElement('section');
     accessibleOutputs.setAttribute('id', 'accessible-outputs');
     accessibleOutputs.setAttribute('aria-label', 'accessible-output');

client/modules/IDE/components/SketchList.jsx

@@ -75,8 +75,7 @@ class SketchList extends React.Component {
                   <th scope="row"><Link to={`/${username}/sketches/${sketch.id}`}>{sketch.name}</Link></th>
                   <td>{moment(sketch.createdAt).format('MMM D, YYYY h:mm A')}</td>
                   <td>{moment(sketch.updatedAt).format('MMM D, YYYY h:mm A')}</td>
-                </tr>
+                </tr>)}
-              )}
             </tbody>
           </table>}
       </div>

client/modules/IDE/pages/IDEView.jsx

@@ -311,7 +311,7 @@ class IDEView extends React.Component {
             />
             <SplitPane
               split="vertical"
-              defaultSize={'50%'}
+              defaultSize="50%"
               onChange={() => { this.overlay.style.display = 'block'; }}
               onDragFinished={() => { this.overlay.style.display = 'none'; }}
               resizerStyle={{ marginRight: '5px' }}
@@ -691,7 +691,9 @@ function mapStateToProps(state) {
 }
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators(Object.assign({},
+  return bindActionCreators(
+    Object.assign(
+      {},
       EditorAccessibilityActions,
       FileActions,
       ProjectActions,
@@ -699,8 +701,10 @@ function mapDispatchToProps(dispatch) {
       PreferencesActions,
       UserActions,
       ToastActions,
-    ConsoleActions),
+      ConsoleActions
-  dispatch);
+    ),
+    dispatch
+  );
 }
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(IDEView));

client/modules/IDE/reducers/editorAccessibility.js

@@ -10,8 +10,9 @@ const editorAccessibility = (state = initialState, action) => {
     case ActionTypes.UPDATE_LINT_MESSAGE:
       messageId += 1;
       return Object.assign({}, state, {
-        lintMessages: state.lintMessages.concat(
+        lintMessages: state.lintMessages.concat({
-          { severity: action.severity, line: action.line, message: action.message, id: messageId })
+          severity: action.severity, line: action.line, message: action.message, id: messageId
+        })
       });
     case ActionTypes.CLEAR_LINT_MESSAGE:
       return Object.assign({}, state, { lintMessages: [] });

client/modules/IDE/reducers/files.js

@@ -145,13 +145,15 @@ const files = (state, action) => {
         return file;
       });
       return [...newState,
-          { name: action.name,
+        {
+          name: action.name,
           id: action.id,
           _id: action._id,
           content: action.content,
           url: action.url,
           children: action.children,
-            fileType: action.fileType || 'file' }];
+          fileType: action.fileType || 'file'
+        }];
     }
     case ActionTypes.SHOW_FILE_OPTIONS:
       return state.map((file) => {

client/modules/IDE/reducers/projects.js

@@ -6,8 +6,7 @@ const sketches = (state = [], action) => {
       return action.projects;
     case ActionTypes.DELETE_PROJECT:
       return state.filter(sketch =>
-        sketch.id !== action.id
+        sketch.id !== action.id);
-      );
     default:
       return state;
   }

client/modules/User/actions.js

@@ -17,7 +17,8 @@ export function signUpUser(previousPath, formValues) {
   return (dispatch) => {
     axios.post(`${ROOT_URL}/signup`, formValues, { withCredentials: true })
       .then((response) => {
-        dispatch({ type: ActionTypes.AUTH_USER,
+        dispatch({
+          type: ActionTypes.AUTH_USER,
           user: response.data
         });
         dispatch(justOpenedProject());
@@ -49,7 +50,8 @@ export function validateAndLoginUser(previousPath, formProps, dispatch) {
   return new Promise((resolve, reject) => {
     loginUser(formProps)
       .then((response) => {
-        dispatch({ type: ActionTypes.AUTH_USER,
+        dispatch({
+          type: ActionTypes.AUTH_USER,
           user: response.data
         });
         dispatch({

client/modules/User/components/AccountForm.jsx

@@ -4,7 +4,9 @@ import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 function AccountForm(props) {
   const {
-    fields: { username, email, currentPassword, newPassword },
+    fields: {
+      username, email, currentPassword, newPassword
+    },
     user,
     handleSubmit,
     initiateVerification,
@@ -45,7 +47,8 @@ function AccountForm(props) {
                     <button
                       className="form__action"
                       onClick={handleInitiateVerification}
-                    >Resend confirmation email</button>
+                    >Resend confirmation email
+                    </button>
                   )
               }
             </p>

client/modules/User/components/LoginForm.jsx

@@ -3,7 +3,9 @@ import React from 'react';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 function LoginForm(props) {
-  const { fields: { email, password }, handleSubmit, submitting, pristine } = props;
+  const {
+    fields: { email, password }, handleSubmit, submitting, pristine
+  } = props;
   return (
     <form className="form" onSubmit={handleSubmit(props.validateAndLoginUser.bind(this, props.previousPath))}>
       <p className="form__field">

client/modules/User/components/NewPasswordForm.jsx

@@ -3,7 +3,9 @@ import React from 'react';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 function NewPasswordForm(props) {
-  const { fields: { password, confirmPassword }, handleSubmit, submitting, invalid, pristine } = props;
+  const {
+    fields: { password, confirmPassword }, handleSubmit, submitting, invalid, pristine
+  } = props;
   return (
     <form className="form" onSubmit={handleSubmit(props.updatePassword.bind(this, props.params.reset_password_token))}>
       <p className="form__field">

client/modules/User/components/ResetPasswordForm.jsx

@@ -3,7 +3,9 @@ import React from 'react';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 function ResetPasswordForm(props) {
-  const { fields: { email }, handleSubmit, submitting, invalid, pristine } = props;
+  const {
+    fields: { email }, handleSubmit, submitting, invalid, pristine
+  } = props;
   return (
     <form className="form" onSubmit={handleSubmit(props.initiateResetPassword.bind(this))}>
       <p className="form__field">

client/modules/User/components/SignupForm.jsx

@@ -3,7 +3,11 @@ import React from 'react';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 function SignupForm(props) {
-  const { fields: { username, email, password, confirmPassword }, handleSubmit, submitting, invalid, pristine } = props;
+  const {
+    fields: {
+      username, email, password, confirmPassword
+    }, handleSubmit, submitting, invalid, pristine
+  } = props;
   return (
     <form className="form" onSubmit={handleSubmit(props.signUpUser.bind(this, props.previousPath))}>
       <p className="form__field">

client/modules/User/reducers.js

@@ -3,8 +3,10 @@ import * as ActionTypes from '../../constants';
 const user = (state = { authenticated: false }, action) => {
   switch (action.type) {
     case ActionTypes.AUTH_USER:
-      return { ...action.user,
+      return {
-        authenticated: true };
+        ...action.user,
+        authenticated: true
+      };
     case ActionTypes.UNAUTH_USER:
       return {
         authenticated: false

package.json

@@ -36,11 +36,11 @@
     "chunk-manifest-webpack-plugin": "^1.1.2",
     "css-loader": "^0.23.1",
     "cssnano": "^3.7.1",
-    "eslint": "^3.14.0",
+    "eslint": "^4.9.0",
-    "eslint-config-airbnb": "^14.0.0",
+    "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^3.0.2",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^6.9.0",
+    "eslint-plugin-react": "^7.7.0",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^0.8.5",
     "node-sass": "^4.5.3",

server/controllers/file.controller.js

@@ -9,7 +9,8 @@ import { deleteObjectsFromS3, getObjectKey } from './aws.controller';
 // be fixed in mongoose soon
 // https://github.com/Automattic/mongoose/issues/4049
 export function createFile(req, res) {
-  Project.findByIdAndUpdate(req.params.project_id,
+  Project.findByIdAndUpdate(
+    req.params.project_id,
     {
       $push: {
         files: req.body
@@ -33,7 +34,8 @@ export function createFile(req, res) {
         }
         res.json(updatedProject.files[updatedProject.files.length - 1]);
       });
-    });
+    }
+  );
 }
 
 function getAllDescendantIds(files, nodeId) {

server/controllers/project.controller.js

@@ -20,7 +20,8 @@ export function createProject(req, res) {
       res.json({ success: false });
       return;
     }
-    Project.populate(newProject,
+    Project.populate(
+      newProject,
       { path: 'user', select: 'username' },
       (innerErr, newProjectWithUser) => {
         if (innerErr) {
@@ -28,7 +29,8 @@ export function createProject(req, res) {
           return;
         }
         res.json(newProjectWithUser);
-      });
+      }
+    );
   });
 }
 
@@ -42,13 +44,15 @@ export function updateProject(req, res) {
     //   res.status(409).send({ success: false, message: 'Attempted to save stale version of project.' });
     //   return;
     // }
-    Project.findByIdAndUpdate(req.params.project_id,
+    Project.findByIdAndUpdate(
+      req.params.project_id,
       {
         $set: req.body
       },
       {
         new: true
-      })
+      }
+    )
       .populate('user', 'username')
       .exec((updateProjectErr, updatedProject) => {
         if (updateProjectErr) {
@@ -100,8 +104,7 @@ export function getProject(req, res) {
 }
 
 function deleteFilesFromS3(files) {
-  deleteObjectsFromS3(
+  deleteObjectsFromS3(files.filter((file) => {
-    files.filter((file) => {
     if (file.url) {
       if (!process.env.S3_DATE || (process.env.S3_DATE && moment(process.env.S3_DATE) < moment(file.createdAt))) {
         return true;

server/controllers/user.controller.js

@@ -16,10 +16,12 @@ const random = (done) => {
 };
 
 export function findUserByUsername(username, cb) {
-  User.findOne({ username },
+  User.findOne(
+    { username },
     (err, user) => {
       cb(user);
-    });
+    }
+  );
 }
 
 const EMAIL_VERIFY_TOKEN_EXPIRY_TIME = Date.now() + (3600000 * 24); // 24 hours
@@ -35,7 +37,8 @@ export function createUser(req, res, next) {
       verifiedTokenExpires: EMAIL_VERIFY_TOKEN_EXPIRY_TIME,
     });
 
-    User.findOne({ email: req.body.email },
+    User.findOne(
+      { email: req.body.email },
       (err, existingUser) => {
         if (err) {
           res.status(404).send({ error: err });
@@ -77,7 +80,8 @@ export function createUser(req, res, next) {
             });
           });
         });
-    });
+      }
+    );
   });
 }
 

server/examples-gg-latest.js

@@ -156,9 +156,7 @@ function getSketchDirectories(sketchRootList) {
     }).catch((err) => {
       throw err;
     });
-  })
+  })).then((output) => {
-
-  ).then((output) => {
     const sketchList = [];
     output.forEach((l) => {
       l.forEach((i) => {

server/examples.js

@@ -112,8 +112,10 @@ function getSketchContent(projectsInAllCategories) {
       if (noNumberprojectName === 'Instance Mode : Instance Container ') {
         for (let i = 0; i < 4; i += 1) {
           const splitedRes = `${res.split('*/')[1].split('</html>')[i]}</html>\n`;
-          project.sketchContent = splitedRes.replace('p5.js',
+          project.sketchContent = splitedRes.replace(
-            'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js');
+            'p5.js',
+            'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js'
+          );
         }
       } else {
         project.sketchContent = res;

server/utils/filePath.js

@@ -12,9 +12,7 @@ export function resolvePathToFile(filePath, files) {
     let foundChild = false;
     const childFiles = currentFile.children.map(childFileId =>
       files.find(file =>
-        file._id.valueOf().toString() === childFileId.valueOf()
+        file._id.valueOf().toString() === childFileId.valueOf()));
-      )
-    );
     childFiles.some((childFile) => {
       if (childFile.name === filePathSegment) {
         currentFile = childFile;

server/views/404Page.js

@@ -100,10 +100,14 @@ export function get404Sketch(callback) {
         htmlFile = html.join('</head>');
 
         // Fix links to assets
-        htmlFile = htmlFile.replace(/'assets/g,
+        htmlFile = htmlFile.replace(
-          "'https://rawgit.com/processing/p5.js-website/master/dist/assets/examples/assets/");
+          /'assets/g,
-        htmlFile = htmlFile.replace(/"assets/g,
+          "'https://rawgit.com/processing/p5.js-website/master/dist/assets/examples/assets/"
-          '"https://rawgit.com/processing/p5.js-website/master/dist/assets/examples/assets/');
+        );
+        htmlFile = htmlFile.replace(
+          /"assets/g,
+          '"https://rawgit.com/processing/p5.js-website/master/dist/assets/examples/assets/'
+        );
 
         // Change canvas size
         htmlFile = htmlFile.replace(/createCanvas\(\d+, ?\d+/g, instanceMode ?