Add pre-commit hook to run eslint, jest and webpack build before commiting

src/components/Apple.js

@@ -1,3 +1,4 @@
+/* eslint-disable indent */
 import styled, { keyframes, css } from "styled-components";
 
 const fade = keyframes`
@@ -20,12 +21,11 @@ const Apple = styled.div.attrs(({ theme, zoom }) => ({
   &:after {
     content: "${props => (!props.died ? "🍎" : "🐛")}";
     display: inline-block;
-    animation: ${props =>
-      props.died
-        ? "none"
-        : css`
-            ${fade} 1s ease-out alternate infinite
-          `};
+    animation: ${({ died }) =>
+      !died &&
+      css`
+        ${fade} 1s ease-out alternate infinite
+      `};
   }
 `;
 

src/containers/Snake.js

@@ -87,7 +87,7 @@ const Snake = ({
               (cell.type === "snake" && <SnakePart zoom={zoom} value={cell} died={died} />)
             }
           </Stage>
-          {!started && <Banner fade>Press 'r' to start the game</Banner>}
+          {!started && <Banner fade>Press &apos;r&apos; to start the game</Banner>}
           {died && lastGameId !== gameId && hasHighscore(score) && (
             <HighscoreInput score={score} gameId={gameId} name={lastUsername} onSubmit={onSubmitHighscore} />
           )}

src/redux/Module.js

@@ -1,6 +1,6 @@
 export class Middleware {
-  #action = null;
-  #middleware = null;
+  _action = null;
+  _middleware = null;
 
   constructor(action, middleware) {
     if (!action) {
@@ -15,26 +15,26 @@ export class Middleware {
     if (typeof middleware !== "function") {
       throw new Error("Argument 'middleware' must be a string.");
     }
-    this.#action = action;
-    this.#middleware = middleware;
+    this._action = action;
+    this._middleware = middleware;
   }
 
   get action() {
-    return this.#action;
+    return this._action;
   }
 
   get middleware() {
-    return this.#middleware;
+    return this._middleware;
   }
 
   invoke(dispatch, state, action, getState) {
-    return this.#middleware(dispatch, state, action, getState);
+    return this._middleware(dispatch, state, action, getState);
   }
 }
 
 export class After {
-  #action = null;
-  #handler = null;
+  _action = null;
+  _handler = null;
 
   constructor(action, handler) {
     if (!action) {
@@ -49,26 +49,26 @@ export class After {
     if (typeof handler !== "function") {
       throw new Error("Argument 'handler' must be a string.");
     }
-    this.#action = action;
-    this.#handler = handler;
+    this._action = action;
+    this._handler = handler;
   }
 
   get action() {
-    return this.#action;
+    return this._action;
   }
 
   get handler() {
-    return this.#handler;
+    return this._handler;
   }
 
   invoke(dispatch, state, action, getState) {
-    return this.#handler(dispatch, state, action, getState);
+    return this._handler(dispatch, state, action, getState);
   }
 }
 
 export class Reducer {
-  #action = null;
-  #reducer = null;
+  _action = null;
+  _reducer = null;
 
   constructor(action, reducer) {
     if (!action) {
@@ -83,55 +83,55 @@ export class Reducer {
     if (typeof reducer !== "function") {
       throw new Error("Argument 'reducer' must be a string.");
     }
-    this.#action = action;
-    this.#reducer = reducer;
+    this._action = action;
+    this._reducer = reducer;
   }
 
   get action() {
-    return this.#action;
+    return this._action;
   }
 
   get reducer() {
-    return this.#reducer;
+    return this._reducer;
   }
 
   invoke(state, action) {
-    return this.#reducer(state, action);
+    return this._reducer(state, action);
   }
 }
 
 export class Module {
-  #name = null;
-  #initialState = null;
-  #actions = {};
-  #after = {};
+  _name = null;
+  _initialState = null;
+  _actions = {};
+  _after = {};
 
   constructor(name, initialState) {
     if (!name) {
       throw new Error("Argument 'name' is required.");
     }
-    this.#name = name;
-    this.#initialState = initialState;
+    this._name = name;
+    this._initialState = initialState;
     this.middlewares = this.middlewares.bind(this);
   }
 
   get name() {
-    return this.#name;
+    return this._name;
   }
 
   middleware(action, middleware) {
-    this.#register(new Middleware(action, middleware));
+    this._register(new Middleware(action, middleware));
   }
 
   reducer(action, reducer) {
-    this.#register(new Reducer(action, reducer));
+    this._register(new Reducer(action, reducer));
   }
 
   after(action, middleware) {
-    this.#register(new After(action, middleware));
+    this._register(new After(action, middleware));
   }
 
-  #register(reducerOrMiddleware) {
+  _register(reducerOrMiddleware) {
     if (
       !(reducerOrMiddleware instanceof Reducer) &&
       !(reducerOrMiddleware instanceof Middleware) &&
@@ -140,12 +140,12 @@ export class Module {
       throw new Error("Only objects of type Reducer, Middleware or After can register");
     }
     if (!(reducerOrMiddleware instanceof After)) {
-      if (this.#actions[reducerOrMiddleware.action]) {
+      if (this._actions[reducerOrMiddleware.action]) {
         throw new Error(`Reducer or middleware with action "${reducerOrMiddleware.action}" is already registered`);
       }
-      this.#actions[reducerOrMiddleware.action] = reducerOrMiddleware;
+      this._actions[reducerOrMiddleware.action] = reducerOrMiddleware;
     } else {
-      this.#after[reducerOrMiddleware.action] = reducerOrMiddleware;
+      this._after[reducerOrMiddleware.action] = reducerOrMiddleware;
     }
     return reducerOrMiddleware;
   }
@@ -157,28 +157,28 @@ export class Module {
     if (typeof action !== "function") {
       throw new Error("Argument 'action' must be function");
     }
-    const type = `[${this.#name}] ${name}`;
+    const type = `[${this._name}] ${name}`;
     const typedAction = (...args) => ({ ...action.apply(this, args), type });
     return [type, typedAction];
   }
 
-  #getActionByType(Type) {
-    return Object.keys(this.#actions)
-      .map(key => ({ key, action: this.#actions[key] }))
+  _getActionByType(Type) {
+    return Object.keys(this._actions)
+      .map(key => ({ key, action: this._actions[key] }))
       .reduce((actions, { key, action }) => (action instanceof Type ? { ...actions, [key]: action } : actions), {});
   }
 
   middlewares({ dispatch, getState }) {
     return next => action => {
       next(action);
-      const middlewares = this.#getActionByType(Middleware);
+      const middlewares = this._getActionByType(Middleware);
       const middleware = middlewares[action.type];
       if (middleware) {
-        middleware.invoke(dispatch, getState()[this.#name], action, getState);
+        middleware.invoke(dispatch, getState()[this._name], action, getState);
       }
-      const after = this.#after[action.type];
+      const after = this._after[action.type];
       if (after) {
-        after.invoke(dispatch, getState()[this.#name], action, getState);
+        after.invoke(dispatch, getState()[this._name], action, getState);
       }
       return null;
     };
@@ -186,8 +186,8 @@ export class Module {
 
   get reducers() {
     return {
-      [this.#name]: (state = this.#initialState, action) => {
-        const reducers = this.#getActionByType(Reducer);
+      [this._name]: (state = this._initialState, action) => {
+        const reducers = this._getActionByType(Reducer);
         const reducer = reducers[action.type];
         if (reducer) {
           return reducer.invoke(state, action);
@@ -199,16 +199,16 @@ export class Module {
 
   state(selector) {
     return state => {
-      if (!this.#name) {
+      if (!this._name) {
         throw new Error("Unable to detect module name");
       }
       if (!state) {
         throw new Error("No state was passed to the state selector");
       }
-      if (!state[this.#name]) {
-        throw new Error(`There is no state for module '${this.#name}'`);
+      if (!state[this._name]) {
+        throw new Error(`There is no state for module '${this._name}'`);
       }
-      return selector(state[this.#name]);
+      return selector(state[this._name]);
     };
   }
 
@@ -225,24 +225,3 @@ export class Module {
 }
 
 export default Module;
-
-export const attach = (modules, Component) => {
-  console.log("modules, Component", modules, Component);
-  return (...args) => {
-    console.log("args", args);
-    const component = Component({
-      GAME: {
-        actions: {
-          startLoop() {
-            console.log("=== START LOOP ===");
-          }
-        },
-        state: {}
-      }
-    });
-    return component;
-    component.props = { ...component.props };
-    console.log("component", component);
-    return component.render.apply(this, args);
-  };
-};