Move to prettier-eslint for better configuration

14 files changed, 116 insertions, 33 deletions

diff --git a/frontend/.eslintrc b/frontend/.eslintrc
new file mode 100644
index 00000000..10bdb12c
--- /dev/null
+++ b/frontend/.eslintrc
@@ -0,0 +1,8 @@
+{
+  "extends": "react-app",
+  "rules": {
+    "semi": ["error", "always"],
+    "quotes": ["error", "single"],
+    "comma-dangle": ["error", "always-multiline"]
+  }
+}
diff --git a/frontend/package.json b/frontend/package.json
index fe363eba..257c050d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,8 +4,8 @@
   "private": true,
   "devDependencies": {
     "babel-polyfill": "latest",
-    "prettier": "^1.3.1",
-    "react-scripts": "^1.0.1"
+    "prettier-eslint-cli": "^4.0.1",
+    "react-scripts": "1.0.5"
   },
   "dependencies": {
     "normalizr": "^3.2.3",
@@ -32,10 +32,7 @@
     "test": "react-scripts test --env=jsdom",
     "test:oneshot": "set CI=true && react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
-    "prettier": "prettier --single-quote --trailing-comma es5 --print-width 120 --write '{src,__{tests,mocks}__}/**/*.js'"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
+    "prettier": "prettier-eslint --write '{src,__{tests,mocks}__}/**/*.js'",
   },
   "proxy": "http://localhost:8080"
 }
diff --git a/frontend/src/components/errors/errorToastContainer.js b/frontend/src/components/errors/errorToastContainer.js
index 7be91007..073b6038 100644
--- a/frontend/src/components/errors/errorToastContainer.js
+++ b/frontend/src/components/errors/errorToastContainer.js
@@ -1,9 +1,14 @@
-import React from 'react'
+import React from 'react';
 import ReduxToastr from 'react-redux-toastr';
 import './react-redux-toastr.min.css';
 
-const ErrorToastContainer = (props) => (
-  <ReduxToastr timeOut={4000} preventDuplicates position="bottom-left" progressBar />
-)
+const ErrorToastContainer = props => (
+  <ReduxToastr
+    timeOut={4000}
+    preventDuplicates
+    position="bottom-left"
+    progressBar
+  />
+);
 
-export default ErrorToastContainer
+export default ErrorToastContainer;
diff --git a/frontend/src/components/modals/username.js b/frontend/src/components/modals/username.js
index c00262a7..bec890b2 100644
--- a/frontend/src/components/modals/username.js
+++ b/frontend/src/components/modals/username.js
@@ -1,5 +1,14 @@
 import React from 'react';
-import { Overlay, Panel, PanelHeader, PanelFooter, Button, Input, Close, Space } from 'rebass';
+import {
+  Overlay,
+  Panel,
+  PanelHeader,
+  PanelFooter,
+  Button,
+  Input,
+  Close,
+  Space,
+} from 'rebass';
 
 const Modal = ({ modalOpen, toggleModal }) => (
   <Overlay open={modalOpen} onDismiss={toggleModal('usernameModal')}>
@@ -9,10 +18,20 @@ const Modal = ({ modalOpen, toggleModal }) => (
         <Space auto />
         <Close onClick={toggleModal('usernameModal')} />
       </PanelHeader>
-      <Input label="Username" name="username" placeholder="Cesar92" rounded type="text" />
+      <Input
+        label="Username"
+        name="username"
+        placeholder="Cesar92"
+        rounded
+        type="text"
+      />
       <PanelFooter>
         <Space auto />
-        <Button theme="success" onClick={toggleModal('usernameModal')} children="Ok" />
+        <Button
+          theme="success"
+          onClick={toggleModal('usernameModal')}
+          children="Ok"
+        />
       </PanelFooter>
     </Panel>
   </Overlay>
diff --git a/frontend/src/containers/lobby.js b/frontend/src/containers/lobby.js
index f3489db4..90714aec 100644
--- a/frontend/src/containers/lobby.js
+++ b/frontend/src/containers/lobby.js
@@ -12,7 +12,7 @@ class Lobby extends Component {
     if (this.props.currentGame) {
       return this.props.currentGame.name + ' — Lobby';
     } else {
-      return "What are you doing here? You haven't joined a game yet!";
+      return 'What are you doing here? You haven\'t joined a game yet!';
     }
   }
 
diff --git a/frontend/src/index.js b/frontend/src/index.js
index a627dd07..37d8fcf8 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -8,7 +8,6 @@ import { Provider } from 'react-redux';
 
 import configureStore from './store';
 import { routes } from './routes';
-
 const initialState = {};
 const { store, history } = configureStore(initialState);
 
diff --git a/frontend/src/redux/errors.js b/frontend/src/redux/errors.js
index ec1e30b6..fdc2242d 100644
--- a/frontend/src/redux/errors.js
+++ b/frontend/src/redux/errors.js
@@ -19,7 +19,10 @@ const initialState = Immutable.from({
 export default (state = initialState, action) => {
   switch (action.type) {
     case types.ERROR_RECEIVED_ON_WS:
-      let error = Object.assign({ id: state.nextId, timestamp: new Date() }, action.error);
+      let error = Object.assign(
+        { id: state.nextId, timestamp: new Date() },
+        action.error
+      );
       let newState = state.set('nextId', state.nextId + 1);
       newState = addErrorToHistory(newState, error);
       return newState;
diff --git a/frontend/src/redux/players.js b/frontend/src/redux/players.js
index b11e920f..db9f1416 100644
--- a/frontend/src/redux/players.js
+++ b/frontend/src/redux/players.js
@@ -39,6 +39,8 @@ export default (state = initialState, action) => {
   }
 };
 
-export const getCurrentPlayer = state => state.players.all && state.players.all[state.players.current];
+export const getCurrentPlayer = state =>
+  state.players.all && state.players.all[state.players.current];
 export const getPlayer = (state, username) => state.players.all[username];
-export const getPlayers = (state, usernames) => usernames.map(u => getPlayer(state, u));
+export const getPlayers = (state, usernames) =>
+  usernames.map(u => getPlayer(state, u));
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
index 29894c3a..e8400a90 100644
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@@ -30,7 +30,10 @@ export const routes = [
   {
     path: '/',
     component: LobbyLayout,
-    childRoutes: [{ path: '/games', component: GameBrowser }, { path: '/lobby/*', component: Lobby }],
+    childRoutes: [
+      { path: '/games', component: GameBrowser },
+      { path: '/lobby/*', component: Lobby },
+    ],
   },
   {
     path: '*',
diff --git a/frontend/src/sagas/errors.js b/frontend/src/sagas/errors.js
index 41eb6902..4fd704a3 100644
--- a/frontend/src/sagas/errors.js
+++ b/frontend/src/sagas/errors.js
@@ -6,7 +6,11 @@ import { actions } from '../redux/errors';
 import { toastr } from 'react-redux-toastr';
 
 export default function* errorHandlingSaga({ socket }) {
-  const errorChannel = yield call(createSubscriptionChannel, socket, '/user/queue/errors');
+  const errorChannel = yield call(
+    createSubscriptionChannel,
+    socket,
+    '/user/queue/errors'
+  );
   try {
     while (true) {
       const error = yield take(errorChannel);
diff --git a/frontend/src/sagas/gameBrowser.js b/frontend/src/sagas/gameBrowser.js
index 5492107a..dd916df9 100644
--- a/frontend/src/sagas/gameBrowser.js
+++ b/frontend/src/sagas/gameBrowser.js
@@ -3,19 +3,28 @@ import { createSubscriptionChannel } from '../utils/websocket';
 import { push } from 'react-router-redux';
 
 import { normalize } from 'normalizr';
-import { game as gameSchema, gameList as gameListSchema } from '../schemas/games';
+import {
+  game as gameSchema,
+  gameList as gameListSchema,
+} from '../schemas/games';
 
 import { actions as gameActions, types } from '../redux/games';
 import { actions as playerActions } from '../redux/players';
 
 function* watchGames({ socket }) {
-  const gamesChannel = yield call(createSubscriptionChannel, socket, '/topic/games');
+  const gamesChannel = yield call(
+    createSubscriptionChannel,
+    socket,
+    '/topic/games'
+  );
   try {
     while (true) {
       const gameList = yield take(gamesChannel);
       const normGameList = normalize(gameList, gameListSchema);
       // for an empty game array, there is no players/games entity maps
-      yield put(playerActions.updatePlayers(normGameList.entities.players || {}));
+      yield put(
+        playerActions.updatePlayers(normGameList.entities.players || {})
+      );
       yield put(gameActions.updateGames(normGameList.entities.games || {}));
     }
   } finally {
@@ -24,7 +33,11 @@ function* watchGames({ socket }) {
 }
 
 function* watchLobbyJoined({ socket }) {
-  const joinedLobbyChannel = yield call(createSubscriptionChannel, socket, '/user/queue/lobby/joined');
+  const joinedLobbyChannel = yield call(
+    createSubscriptionChannel,
+    socket,
+    '/user/queue/lobby/joined'
+  );
   try {
     const joinedLobby = yield take(joinedLobbyChannel);
     const normalized = normalize(joinedLobby, gameSchema);
@@ -41,14 +54,22 @@ function* watchLobbyJoined({ socket }) {
 function* createGame({ socket }) {
   while (true) {
     const { gameName } = yield take(types.REQUEST_CREATE_GAME);
-    yield apply(socket, socket.send, ['/app/lobby/create', JSON.stringify({ gameName }), {}]);
+    yield apply(socket, socket.send, [
+      '/app/lobby/create',
+      JSON.stringify({ gameName }),
+      {},
+    ]);
   }
 }
 
 function* joinGame({ socket }) {
   while (true) {
     const { gameId } = yield take(types.REQUEST_JOIN_GAME);
-    yield apply(socket, socket.send, ['/app/lobby/join', JSON.stringify({ gameId }), {}]);
+    yield apply(socket, socket.send, [
+      '/app/lobby/join',
+      JSON.stringify({ gameId }),
+      {},
+    ]);
   }
 }
 
diff --git a/frontend/src/sagas/home.js b/frontend/src/sagas/home.js
index 579c7fd6..3f06e8f3 100644
--- a/frontend/src/sagas/home.js
+++ b/frontend/src/sagas/home.js
@@ -7,12 +7,19 @@ import { actions, types } from '../redux/players';
 function* sendUsername({ socket }) {
   while (true) {
     const { username } = yield take(types.REQUEST_CHOOSE_USERNAME);
-    yield apply(socket, socket.send, ['/app/chooseName', JSON.stringify({ playerName: username })]);
+    yield apply(socket, socket.send, [
+      '/app/chooseName',
+      JSON.stringify({ playerName: username }),
+    ]);
   }
 }
 
 function* validateUsername({ socket }) {
-  const usernameChannel = yield call(createSubscriptionChannel, socket, '/user/queue/nameChoice');
+  const usernameChannel = yield call(
+    createSubscriptionChannel,
+    socket,
+    '/user/queue/nameChoice'
+  );
   while (true) {
     const user = yield take(usernameChannel);
     yield put(actions.setCurrentPlayer(user));
@@ -23,7 +30,10 @@ function* validateUsername({ socket }) {
 
 function* usernameChoiceSaga(wsConnection) {
   // TODO: Run sendUsername in loop when we have the ability to cancel saga on route change
-  yield [call(sendUsername, wsConnection), call(validateUsername, wsConnection)];
+  yield [
+    call(sendUsername, wsConnection),
+    call(validateUsername, wsConnection),
+  ];
 }
 
 export default usernameChoiceSaga;
diff --git a/frontend/src/sagas/lobby.js b/frontend/src/sagas/lobby.js
index d11511e8..7b52ad29 100644
--- a/frontend/src/sagas/lobby.js
+++ b/frontend/src/sagas/lobby.js
@@ -15,7 +15,11 @@ function getCurrentGameId() {
 
 function* watchLobbyUpdates({ socket }) {
   const currentGameId = getCurrentGameId();
-  const lobbyUpdatesChannel = yield call(createSubscriptionChannel, socket, `/topic/lobby/${currentGameId}/updated`);
+  const lobbyUpdatesChannel = yield call(
+    createSubscriptionChannel,
+    socket,
+    `/topic/lobby/${currentGameId}/updated`
+  );
   try {
     while (true) {
       const lobby = yield take(lobbyUpdatesChannel);
@@ -30,7 +34,11 @@ function* watchLobbyUpdates({ socket }) {
 
 function* watchGameStart({ socket }) {
   const currentGameId = getCurrentGameId();
-  const gameStartedChannel = yield call(createSubscriptionChannel, socket, `/topic/lobby/${currentGameId}/started`);
+  const gameStartedChannel = yield call(
+    createSubscriptionChannel,
+    socket,
+    `/topic/lobby/${currentGameId}/started`
+  );
   try {
     yield take(gameStartedChannel);
     yield put(gameActions.enterGame());
diff --git a/frontend/src/store.js b/frontend/src/store.js
index 4bd22184..a5d9a34a 100644
--- a/frontend/src/store.js
+++ b/frontend/src/store.js
@@ -21,7 +21,11 @@ export default function configureStore(initialState = {}) {
     ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
     : compose;
 
-  const store = createStore(createReducer(), Immutable.from(initialState), composeEnhancers(...enhancers));
+  const store = createStore(
+    createReducer(),
+    Immutable.from(initialState),
+    composeEnhancers(...enhancers)
+  );
 
   sagaMiddleware.run(rootSaga, browserHistory);