Merge pull request #35 from wordpress-mobile/feature/add-eslint-checks

Add eslint checks

.eslintrc

@@ -0,0 +1,23 @@
+{
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "jest/globals": true
+  },
+  "plugins": [
+    "react",
+    "react-native",
+    "jest",
+    "flowtype"
+  ],
+  "extends": [
+    "./gutenberg/eslint/config.js",
+    "plugin:flowtype/recommended"
+  ],
+  "settings": {
+    "flowtype": {
+      "onlyFilesWithFlowAnnotation": true
+    }
+  },
+  "rules": {}
+}

.travis/travis-checks-js.sh

@@ -15,7 +15,8 @@ fi
 
 if [ "$CHECK_CORRECTNESS" = true ] ; then
   npm run flow || pFail
-  npm run prettier-check || pFail
+  npm run prettier:check || pFail
+  npm run lint || pFail
 fi
 
 if [ "$CHECK_TESTS" = true ] ; then
@@ -26,4 +27,4 @@ if [ "$CHECK_TESTS" = true ] ; then
   else
     npm test || pFail
   fi
-fi
+fi

README.md

@@ -78,14 +78,27 @@ This project is set up to use [jest](https://facebook.github.io/jest/) for tests
 
 Run the style checker with this command that lists the files having at least one style violation:
 ```
-$ npm run prettier-check
+$ npm run prettier:check
 ```
 
 Fix style violations:
 ```
 $ npm run prettier
 ```
 
+## Linter
+
+Note: our linter configuration does some style checking as well. Run the linter to list errors and warnings:
+```
+$ npm run lint
+```
+
+It's capable of fixing _some_ of the lint warnings and errors:
+```
+$ npm run lint:fix
+```
+
+
 ## License
 
 Gutenberg Mobile is an Open Source project covered by the [GNU General Public License version 2](LICENSE).

App.js → app/App.js

@@ -1,12 +1,12 @@
 /** @format */
 
-import React from 'react';
 import { Provider } from 'react-redux';
-import { setupStore } from './store';
+import { setupStore } from '../store';
 import AppContainer from './AppContainer';
 
 const store = setupStore();
 
+// eslint-disable-next-line react/display-name
 export default () => (
 	<Provider store={ store }>
 		<AppContainer />

App.test.js → app/App.test.js

@@ -2,11 +2,10 @@
 
 import './globals';
 
-import React from 'react';
 import renderer from 'react-test-renderer';
 
 import App from './App';
-import BlockHolder from './block-management/block-holder';
+import BlockHolder from '../block-management/block-holder';
 
 describe( 'App', () => {
 	it( 'renders without crashing', () => {
@@ -19,7 +18,7 @@ describe( 'App', () => {
 			.create( <App /> )
 			.root.findAllByType( BlockHolder )
 			.forEach( blockHolder => {
-				if ( blockHolder.props.blockType === 'core/code' ) {
+				if ( 'core/code' === blockHolder.props.blockType ) {
 					// TODO: hardcoded indices are ugly and error prone. Can we do better here?
 					const blockHolderContainer = blockHolder.children[ 0 ].children[ 0 ].children[ 0 ];
 					const contentComponent = blockHolderContainer.children[ 1 ];

AppContainer.js → app/AppContainer.js

@@ -6,7 +6,7 @@ import {
 	moveBlockUpAction,
 	moveBlockDownAction,
 	deleteBlockAction,
-} from './store/actions';
+} from '../store/actions';
 import MainApp from './MainApp';
 
 const mapStateToProps = state => ( {

MainApp.js → app/MainApp.js

@@ -6,8 +6,7 @@ import React from 'react';
 
 import { registerCoreBlocks } from '@gutenberg/blocks/library';
 
-import BlockManager from './block-management/block-manager';
-import type { BlockListType } from './block-management/block-manager';
+import BlockManager, { type BlockListType } from '../block-management/block-manager';
 
 type PropsType = BlockListType;
 type StateType = {};

block-management/block-holder.js

@@ -25,16 +25,17 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 			return (
 				<Toolbar uid={ this.props.uid } onButtonPressed={ this.props.onToolbarButtonPressed } />
 			);
-		} else {
-			// Return empty view, toolbar won't be rendered
-			return <View />;
 		}
+
+		// Return empty view, toolbar won't be rendered
+		return <View />;
 	}
 
 	getBlockForType() {
 		const blockType = getBlockType( this.props.blockType );
 		if ( blockType ) {
 			const Block = blockType.edit;
+
 			// TODO: setAttributes needs to change the state/attributes
 			return (
 				<Block
@@ -43,10 +44,10 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 					setAttributes={ attrs => this.props.onChange( this.props.uid, attrs ) }
 				/>
 			);
-		} else {
-			// Default block placeholder
-			return <Text>{ this.props.attributes.content }</Text>;
 		}
+
+		// Default block placeholder
+		return <Text>{ this.props.attributes.content }</Text>;
 	}
 
 	render() {

block-management/block-manager.js

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { Platform, StyleSheet, Text, View, TextInput, FlatList } from 'react-native';
+import { Platform, StyleSheet, Text, View, FlatList } from 'react-native';
 import RecyclerViewList, { DataSource } from 'react-native-recyclerview-list';
 import BlockHolder from './block-holder';
 import { ToolbarButton } from './constants';
@@ -32,7 +32,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 	constructor( props: PropsType ) {
 		super( props );
 		this.state = {
-			dataSource: new DataSource( this.props.blocks, ( item: BlockType, index ) => item.uid ),
+			dataSource: new DataSource( this.props.blocks, ( item: BlockType ) => item.uid ),
 		};
 	}
 
@@ -41,7 +41,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 	}
 
 	getDataSourceIndexFromUid( uid: string ) {
-		for ( var i = 0; i < this.state.dataSource.size(); ++i ) {
+		for ( let i = 0; i < this.state.dataSource.size(); ++i ) {
 			const block = this.state.dataSource.get( i );
 			if ( block.uid === uid ) {
 				return i;
@@ -80,14 +80,14 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 		// Update datasource UI
 		const index = this.getDataSourceIndexFromUid( uid );
 		const dataSource = this.state.dataSource;
-		var block = dataSource.get( this.getDataSourceIndexFromUid( uid ) );
+		const block = dataSource.get( this.getDataSourceIndexFromUid( uid ) );
 		dataSource.set( index, { ...block, attributes: attributes } );
 		// Update Redux store
 		this.props.onChange( uid, attributes );
 	}
 
 	render() {
-		var list;
+		let list;
 		if ( Platform.OS === 'android' ) {
 			list = (
 				<RecyclerViewList
@@ -109,7 +109,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 					style={ styles.list }
 					data={ this.props.blocks }
 					extraData={ this.props.refresh }
-					keyExtractor={ ( item, index ) => item.uid }
+					keyExtractor={ item => item.uid }
 					renderItem={ this.renderItem.bind( this ) }
 				/>
 			);

block-management/constants.js

@@ -9,6 +9,5 @@ const ToolbarButton = {
 	SETTINGS: 3,
 	DELETE: 4,
 };
-type ToolbarButtonType = $Keys<typeof ToolbarButton>;
 
 export { ToolbarButton };

block-management/toolbar.js

@@ -1,7 +1,8 @@
-/** @format */
+/** @flow
+ * @format */
 
 import React from 'react';
-import { StyleSheet, Text, View, Button } from 'react-native';
+import { StyleSheet, View, Button } from 'react-native';
 import { ToolbarButton } from './constants';
 
 type PropsType = {

index.js

@@ -1,5 +1,5 @@
 /** @format */
 
 import { AppRegistry } from 'react-native';
-import App from './App';
+import App from './app/App';
 AppRegistry.registerComponent( 'gutenberg', () => App );

package.json

@@ -2,12 +2,24 @@
   "name": "gutenberg-mobile",
   "version": "0.1.0",
   "private": true,
+  "config": {
+    "jsfiles": "index.js app/*.js app/**/*.js block-management/*.js block-management/**/*.js store/*.js store/**/*.js"
+  },
   "devDependencies": {
     "@wordpress/babel-preset-default": "^1.1.2",
+    "babel-eslint": "^8.2.2",
     "babel-plugin-react-require": "^3.0.0",
     "babel-plugin-transform-async-generator-functions": "^6.24.1",
     "babel-preset-react-native-stage-0": "^1.0.1",
     "cross-env": "^5.1.4",
+    "eslint": "^4.19.1",
+    "eslint-config-wordpress": "^2.0.0",
+    "eslint-plugin-flowtype": "^2.46.1",
+    "eslint-plugin-jest": "^21.15.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.7.0",
+    "eslint-plugin-react-native": "^3.2.1",
+    "eslint-plugin-wordpress": "git+https://github.com/WordPress-Coding-Standards/eslint-plugin-wordpress.git#1774343f6226052a46b081e01db3fca8793cc9f1",
     "flow-bin": "0.56.0",
     "jest": "^22.4.3",
     "jest-react-native": "^18.0.0",
@@ -21,12 +33,14 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "test": "cross-env NODE_ENV=test node node_modules/jest/bin/jest.js --verbose --config jest.config.js",
-    "test-debug": "cross-env NODE_ENV=test node --inspect-brk node_modules/jest/bin/jest.js --runInBand --verbose --config jest.config.js",
+    "test:debug": "cross-env NODE_ENV=test node --inspect-brk node_modules/jest/bin/jest.js --runInBand --verbose --config jest.config.js",
     "flow": "flow",
-    "prettier": "prettier --write *.js *block-management/*.js",
-    "prettier-check": "prettier -l *.js *block-management/*.js",
+    "prettier": "prettier --write $npm_package_config_jsfiles",
+    "prettier:check": "prettier -l $npm_package_config_jsfiles",
     "clean": "yarn test --clearCache; watchman watch-del-all; rm -rf node_modules; rm -f yarn.lock; rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/metro-cache-*; rm -rf $TMPDIR/jest_*",
-    "clean-install": "yarn clean; yarn"
+    "clean:install": "yarn clean; yarn",
+    "lint": "eslint $npm_package_config_jsfiles",
+    "lint:fix": "eslint $npm_package_config_jsfiles --fix"
   },
   "dependencies": {
     "babel-plugin-module-resolver": "^3.1.0",

store/index.js

@@ -70,7 +70,7 @@ const initialState: StateType = {
 };
 
 const devToolsEnhancer =
-	( process.env.NODE_ENV === 'development' && require( 'remote-redux-devtools' ).default ) ||
+	( 'development' === process.env.NODE_ENV && require( 'remote-redux-devtools' ).default ) ||
 	( () => {} );
 
 export function setupStore( state: StateType = initialState ) {

store/reducers/index.js

@@ -27,7 +27,7 @@ export const reducer = (
 ) => {
 	const blocks = [ ...state.blocks ];
 	switch ( action.type ) {
-		case ActionTypes.BLOCK.UPDATE_ATTRIBUTES:
+		case ActionTypes.BLOCK.UPDATE_ATTRIBUTES: {
 			const block = findBlock( blocks, action.uid );
 
 			// Ignore updates if block isn't known
@@ -60,42 +60,53 @@ export const reducer = (
 			}
 
 			// Otherwise merge attributes into state
-			var index = findBlockIndex( blocks, action.uid );
+			const index = findBlockIndex( blocks, action.uid );
 			blocks[ index ] = {
 				...block,
 				attributes: nextAttributes,
 			};
 			return { blocks: blocks, refresh: ! state.refresh };
-		case ActionTypes.BLOCK.FOCUS:
+		}
+		case ActionTypes.BLOCK.FOCUS: {
 			const destBlock = findBlock( blocks, action.uid );
 			const destBlockState = destBlock.focused;
+
 			// Deselect all blocks
-			for ( let block of blocks ) {
+			for ( const block of blocks ) {
 				block.focused = false;
 			}
+
 			// Select or deselect pressed block
 			destBlock.focused = ! destBlockState;
 			return { blocks: blocks, refresh: ! state.refresh };
-		case ActionTypes.BLOCK.MOVE_UP:
-			if ( blocks[ 0 ].uid === action.uid ) return state;
+		}
+		case ActionTypes.BLOCK.MOVE_UP: {
+			if ( blocks[ 0 ].uid === action.uid ) {
+				return state;
+			}
 
-			var index = findBlockIndex( blocks, action.uid );
-			var tmp = blocks[ index ];
+			const index = findBlockIndex( blocks, action.uid );
+			const tmp = blocks[ index ];
 			blocks[ index ] = blocks[ index - 1 ];
 			blocks[ index - 1 ] = tmp;
 			return { blocks: blocks, refresh: ! state.refresh };
-		case ActionTypes.BLOCK.MOVE_DOWN:
-			if ( blocks[ blocks.length - 1 ].uid === action.uid ) return state;
+		}
+		case ActionTypes.BLOCK.MOVE_DOWN: {
+			if ( blocks[ blocks.length - 1 ].uid === action.uid ) {
+				return state;
+			}
 
-			var index = findBlockIndex( blocks, action.uid );
-			var tmp = blocks[ index ];
+			const index = findBlockIndex( blocks, action.uid );
+			const tmp = blocks[ index ];
 			blocks[ index ] = blocks[ index + 1 ];
 			blocks[ index + 1 ] = tmp;
 			return { blocks: blocks, refresh: ! state.refresh };
-		case ActionTypes.BLOCK.DELETE:
-			var index = findBlockIndex( blocks, action.uid );
+		}
+		case ActionTypes.BLOCK.DELETE: {
+			const index = findBlockIndex( blocks, action.uid );
 			blocks.splice( index, 1 );
 			return { blocks: blocks, refresh: ! state.refresh };
+		}
 		default:
 			return state;
 	}