Fix all eslint warnings and errors. (codesandbox#169)

* [WIP] Fixed all eslint warnings and errors.

* Fixed all eslint warning and errors (for src/app), take two.

* PreferenceNumber: restored 'step' prop.

* Updated jest snapshots.

Author: lbogdan

.eslintrc

@@ -17,7 +17,8 @@
     "import/no-extraneous-dependencies": 0,
     "arrow-parens": 0,
     "import/prefer-default-export": 0,
-    "class-methods-use-this": 0
+    "class-methods-use-this": 0,
+    "no-console": ["error", { "allow": ["error"] } ]
   },
   "settings": {
     "import/resolver": {

package.json

@@ -38,7 +38,8 @@
     "eslint-plugin-flowtype": "^2.34.0",
     "eslint-plugin-import": "^2.3.0",
     "eslint-plugin-jsx-a11y": "^5.0.3",
-    "eslint-plugin-react": "^7.0.1",
+    "eslint-plugin-react":
+      "https://github.com/yannickcr/eslint-plugin-react.git#master",
     "express": "^4.15.3",
     "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "^0.11.1",
@@ -160,9 +161,9 @@
     "start": "cross-env LOCAL_SERVER=1 node scripts/start.js",
     "start:dev_api": "node scripts/start.js",
     "build": "cross-env NODE_ENV=production node scripts/build.js && gulp",
-    "test": "jest --env=jsdom",
+    "test": "npm run lint:app && jest --env=jsdom",
     "test:watch": "jest --watch --env=jsdom",
-    "lint:app": "eslint src/app && npm run typecheck",
+    "lint:app": "eslint src/app",
     "typecheck": "flow check",
     "lint:embed": "eslint src/embed",
     "add": "all-contributors add",

src/app/components/ConfirmLink.js

@@ -12,7 +12,7 @@ export default class ConfirmLink extends React.PureComponent<Props> {
     const { enabled, message } = this.props;
 
     if (enabled) {
-      const yes = confirm(message);
+      const yes = confirm(message); // eslint-disable-line no-alert
 
       if (!yes) {
         e.preventDefault();

src/app/components/Preference/PreferenceNumber.js

@@ -8,6 +8,8 @@ const StyledInput = styled(Input)`text-align: center;`;
 type Props = {
   value: boolean,
   setValue: boolean => any,
+  style: Object,
+  step: number,
 };
 
 export default class PreferenceInput extends React.PureComponent {

src/app/components/Preference/PreferenceText.js

@@ -5,6 +5,7 @@ import Input from 'app/components/Input';
 type Props = {
   value: boolean,
   setValue: boolean => any,
+  placeholder: string,
 };
 
 export default class PreferenceText extends React.PureComponent {

src/app/components/sandbox/CodeEditor/CodeMirror.js

@@ -28,6 +28,9 @@ type Props = {
   preferences: Preferences,
   onlyViewMode: boolean,
   setCurrentModule: ?(sandboxId: string, moduleId: string) => void,
+  sandboxId: string,
+  modules: Array,
+  directories: Array,
 };
 
 const Container = styled.div`
@@ -322,7 +325,7 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
           cm.toggleComment({ lineComment: '//' });
         });
       },
-      'Cmd-P': cm => {
+      'Cmd-P': () => {
         this.setState({ fuzzySearchEnabled: true });
       },
     };

src/app/components/sandbox/CodeEditor/Monaco.js

@@ -7,9 +7,11 @@ import { getModulePath } from 'app/store/entities/sandboxes/modules/selectors';
 
 import theme from 'common/theme';
 
+/* eslint-disable import/no-webpack-loader-syntax */
 import SyntaxHighlightWorker from 'worker-loader!./monaco/workers/syntax-highlighter';
 import LinterWorker from 'worker-loader!./monaco/workers/linter';
 import TypingsFetcherWorker from 'worker-loader!./monaco/workers/fetch-dependency-typings';
+/* eslint-enable import/no-webpack-loader-syntax */
 
 import enableEmmet from './monaco/enable-emmet';
 import Header from './Header';
@@ -46,13 +48,15 @@ const Container = styled.div`
   z-index: 30;
 `;
 
+/*
 const fontFamilies = (...families) =>
   families
     .filter(Boolean)
     .map(
       family => (family.indexOf(' ') !== -1 ? JSON.stringify(family) : family)
     )
     .join(', ');
+*/
 
 const CodeContainer = styled.div`
   position: relative;
@@ -125,10 +129,7 @@ const handleError = (
   monaco,
   editor,
   currentErrors: ?Array<ModuleError>,
-  nextErrors: ?Array<ModuleError>,
-  nextCode: ?string,
-  prevId: string,
-  nextId: string
+  nextErrors: ?Array<ModuleError>
 ) => {
   if (!monaco) return;
   if (nextErrors && nextErrors.length > 0) {
@@ -329,7 +330,6 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
   swapDocuments = async ({
     currentId,
     nextId,
-    nextCode,
     nextTitle,
   }: {
     currentId: string,
@@ -488,6 +488,7 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
     this.editor = editor;
     this.monaco = monaco;
 
+    // eslint-disable-next-line no-underscore-dangle
     window._cs = {
       editor: this.editor,
       monaco: this.monaco,
@@ -544,7 +545,7 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
       label: 'Open Module',
 
       // An optional array of keybindings for the action.
-      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_P],
+      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_P], // eslint-disable-line no-bitwise
 
       // A precondition for this action.
       precondition: null,
@@ -558,7 +559,7 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
 
       // Method that will be executed when the action is triggered.
       // @param editor The editor instance is passed in as a convinience
-      run: ed => {
+      run: () => {
         this.setState({
           fuzzySearchEnabled: true,
         });
@@ -579,7 +580,7 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
 
   addKeyCommands = () => {
     this.editor.addCommand(
-      this.monaco.KeyMod.CtrlCmd | this.monaco.KeyCode.KEY_S,
+      this.monaco.KeyMod.CtrlCmd | this.monaco.KeyCode.KEY_S, // eslint-disable-line no-bitwise
       () => {
         this.handleSaveCode();
       }

src/app/components/sandbox/CodeEditor/index.js

@@ -1,14 +1,19 @@
 import React from 'react';
 import Loadable from 'react-loadable';
+import { Preferences } from 'common/types';
 
 import Monaco from './Monaco';
 
+type Props = {
+  preferences: Preferences,
+};
+
 const CodeMirror = Loadable({
   loader: () => import('./CodeMirror'),
   LoadingComponent: 'div',
 });
 
-export default props => {
+export default (props: Props) => {
   // We are phasing towards Monaco, the only thing missing is vim mode. So use
   // CodeMirror until we have proper support
   if (props.preferences.vimMode || props.preferences.codeMirror) {

src/app/components/sandbox/CodeEditor/monaco/MonacoReactComponent.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 var _extends =
   Object.assign ||
   function(target) {

src/app/components/sandbox/CodeEditor/monaco/enable-emmet.js

@@ -1,17 +1,16 @@
 import extractAbbreviation from '@emmetio/extract-abbreviation';
 import { expand } from '@emmetio/expand-abbreviation';
 
-const field = (index, placeholder) => '';
+const field = () => '';
 
-const expandAbbreviation = (source, language) => {
-  return expand(source.abbreviation, {
+const expandAbbreviation = (source, language) =>
+  expand(source.abbreviation, {
     field,
     syntax: language,
     addons: {
       jsx: true,
     },
   });
-};
 
 const enableEmmet = (editor, monaco) => {
   if (!editor) {
@@ -26,7 +25,7 @@ const enableEmmet = (editor, monaco) => {
     label: 'Emmet: Expand abbreviation',
 
     // An optional array of keybindings for the action.
-    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10],
+    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10], // eslint-disable-line no-bitwise
 
     // A precondition for this action.
     precondition: null,
@@ -39,8 +38,8 @@ const enableEmmet = (editor, monaco) => {
     contextMenuOrder: 1.5,
 
     // Method that will be executed when the action is triggered.
-    // @param editor The editor instance is passed in as a convinience
-    run: function(ed) {
+    // @param editor The editor instance is passed in as a convenience
+    run: () => {
       let word = editor.model.getValueInRange(editor.getSelection());
       const pos = editor.getPosition();
       if (!word) {
@@ -66,12 +65,11 @@ const enableEmmet = (editor, monaco) => {
             forceMoveMarkers: true,
           };
           editor.executeEdits('', [op]);
-        } else {
-          return false;
+          return null;
         }
-      } else {
         return false;
       }
+      return false;
     },
   });
 };