Merge pull request #23 from blairg/prettier_support

Prettier support

.eslintrc.json

@@ -1,3 +1,8 @@
 {
-    "extends": "airbnb"
+    "extends": "airbnb",
+    "rules": {
+        "arrow-parens": 0,
+        "function-paren-newline": 0,
+        "import/extensions": 0
+    }
 }

.travis.yml

@@ -21,12 +21,9 @@ cache:
     - "node_modules"
 
 script: 
+  - npm run pretty
   - npm run lint
   - npm run test:coverage
-  # - npm run build:prod
-  # - rm -rf node_modules/
-  # - export NODE_ENV=production
-  # - npm i
   - docker build --build-arg PROD=${PROD} --build-arg HOST=${HOST} --build-arg SOCKET_URL=${SOCKET_URL} --build-arg BUILD_ENV=${BUILD_ENV} --cache-from ${BASE_DOCKER_IMAGE} -t ${DOCKER_DEPLOY_PATH} .
   - if [ "$TRAVIS_BRANCH" = "master" ]; then docker login --username=_ --password=${HEROKU_TOKEN} ${DOCKER_REPOSITORY} && docker push ${DOCKER_DEPLOY_PATH}; fi
 

CHANGELOG.md

@@ -0,0 +1,12 @@
+# Change Log
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/)
+and this project adheres to [Semantic Versioning](http://semver.org/).
+
+## 1.1.0
+### Added
+- Support for Prettier npm package.
+
+## 1.0.0
+- Initial Project release.

CONTRIBUTING.md

@@ -2,4 +2,8 @@
 
 If anyone want's to contribute or for me to change/add/remove anything I'll be deligthed.
 
-Try and keep the coverage to 90% (green badge on coveralls). Also, make sure you are using latest versions of modules where possible. Add tests for new features or changes to existing code.
+Try and keep the coverage to 90% (green badge on coveralls). Also, make sure you are using latest versions of modules where possible. Add tests for new features or changes to existing code.
+
+## Update Changelog
+
+Make sure you bump up the package version and add an entry to `CHANGELOG.md`.

README.md

@@ -1,6 +1,6 @@
 # hapi-socket-react-boilerplate
 
-[![Build Status](https://travis-ci.org/blairg/hapi-socket-react-boilerplate.svg?branch=master)](https://travis-ci.org/blairg/hapi-socket-react-boilerplate) [![Coverage Status](https://coveralls.io/repos/github/blairg/hapi-socket-react-boilerplate/badge.svg?branch=master)](https://coveralls.io/github/blairg/hapi-socket-react-boilerplate?branch=master) [![Known Vulnerabilities](https://snyk.io/test/github/blairg/hapi-socket-react-boilerplate/badge.svg)](https://snyk.io/test/github/blairg/hapi-socket-react-boilerplate) [![dependencies Status](https://david-dm.org/blairg/hapi-socket-react-boilerplate/status.svg)](https://david-dm.org/blairg/hapi-socket-react-boilerplate) [![devDependencies Status](https://david-dm.org/blairg/hapi-socket-react-boilerplate/dev-status.svg)](https://david-dm.org/blairg/hapi-socket-react-boilerplate?type=dev) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/2fdc21a15a3a4c1480982d0568eeec5a)](https://www.codacy.com/app/blairg/hapi-socket-react-boilerplate?utm_source=github.com&utm_medium=referral&utm_content=blairg/hapi-socket-react-boilerplate&utm_campaign=Badge_Grade)
+[![Build Status](https://travis-ci.org/blairg/hapi-socket-react-boilerplate.svg?branch=master)](https://travis-ci.org/blairg/hapi-socket-react-boilerplate) [![Coverage Status](https://coveralls.io/repos/github/blairg/hapi-socket-react-boilerplate/badge.svg?branch=master)](https://coveralls.io/github/blairg/hapi-socket-react-boilerplate?branch=master) [![Known Vulnerabilities](https://snyk.io/test/github/blairg/hapi-socket-react-boilerplate/badge.svg)](https://snyk.io/test/github/blairg/hapi-socket-react-boilerplate) [![dependencies Status](https://david-dm.org/blairg/hapi-socket-react-boilerplate/status.svg)](https://david-dm.org/blairg/hapi-socket-react-boilerplate) [![devDependencies Status](https://david-dm.org/blairg/hapi-socket-react-boilerplate/dev-status.svg)](https://david-dm.org/blairg/hapi-socket-react-boilerplate?type=dev) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/2fdc21a15a3a4c1480982d0568eeec5a)](https://www.codacy.com/app/blairg/hapi-socket-react-boilerplate?utm_source=github.com&utm_medium=referral&utm_content=blairg/hapi-socket-react-boilerplate&utm_campaign=Badge_Grade) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 
 Boilerplate app to get you up and running with Hapi, HTTP2, Web Socket and React.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hapi-socket-react-boilerplate",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Boilerplate app to get you up and running with Hapi, HTTPS, HTTP/2, Web Socket and React/Redux.",
   "main": "src/server/index.js",
   "homepage": "https://hapi-boilerplate-docker.herokuapp.com/index",
@@ -35,6 +35,7 @@
     "dev:server": "npm run build:server && NODE_NO_HTTP2=1 nodemon ./dist/server.js",
     "dev:debug": "NODE_NO_HTTP2=1 nodemon --nolazy --inspect-brk=5858 -w src --exec \"babel-node src/server/index.js --presets es2015,stage-0,react\"",
     "lint": "./node_modules/.bin/eslint src/ --fix",
+    "pretty": "prettier --single-quote --trailing-comma all --write \"{src,test}/**/*.js\"",
     "start": "NODE_NO_HTTP2=1 node ./dist/server.js",
     "test": "mocha -c --require babel-register --require babel-polyfill --require jsdom-global/register --recursive",
     "test:coverage": "babel-node ./node_modules/.bin/babel-istanbul cover --include-all-sources --root ./src _mocha -- --recursive",
@@ -72,6 +73,7 @@
     "mocha-lcov-reporter": "^1.3.0",
     "nodemon": "^1.12.1",
     "npm-run-all": "^4.1.2",
+    "prettier": "^1.9.2",
     "redux-mock-store": "^1.3.0",
     "sinon": "^4.1.2",
     "webpack": "^3.9.1",

src/client/subscribers/todoSubscriber.js

@@ -12,16 +12,16 @@ const createNotification = (title, options) => {
   setTimeout(notification.close.bind(notification), 2500);
 };
 
-const notifyOfChanges = (message) => {
+const notifyOfChanges = message => {
   const title = message ? message.title : 'All Todos Deleted!';
   const options = {
     body: message ? message.body : '',
-    icon: message ?
-      'https://raw.githubusercontent.com/google/material-design-icons/master/places/2x_web/ic_ac_unit_black_36dp.png' :
-      'https://raw.githubusercontent.com/google/material-design-icons/master/alert/2x_web/ic_add_alert_black_48dp.png',
+    icon: message
+      ? 'https://raw.githubusercontent.com/google/material-design-icons/master/places/2x_web/ic_ac_unit_black_36dp.png'
+      : 'https://raw.githubusercontent.com/google/material-design-icons/master/alert/2x_web/ic_add_alert_black_48dp.png',
   };
 
-    // Let's check if the browser supports notifications
+  // Let's check if the browser supports notifications
   if (!('Notification' in window)) {
     console.log('This browser does not support desktop notification');
     return;
@@ -35,7 +35,7 @@ const notifyOfChanges = (message) => {
 
   // Otherwise, we need to ask the user for permission
   if (Notification.permission !== 'denied') {
-    Notification.requestPermission((permission) => {
+    Notification.requestPermission(permission => {
       // If the user accepts, let's create a notification
       if (permission === 'granted') {
         createNotification(title, options);
@@ -47,7 +47,7 @@ const notifyOfChanges = (message) => {
 export default function subscribeToTodos(callback) {
   const client = new Nes.Client(SOCKET_URL);
 
-  client.connect((error) => {
+  client.connect(error => {
     console.log('connecting ');
 
     if (error) {
@@ -57,36 +57,36 @@ export default function subscribeToTodos(callback) {
     const handler = (updates, flags) => {
       if (error) {
         /*eslint-disable */
-                console.error(error);
-                /* eslint-enable */
+        console.error(error);
+        /* eslint-enable */
       }
 
       if (flags) {
         /*eslint-disable */
-                console.log(flags);
-                /* eslint-enable */
+        console.log(flags);
+        /* eslint-enable */
       }
 
       callback(updates);
       notifyOfChanges(updates[0]);
     };
 
-    client.subscribe(`/${socketPrefix}`, handler, (err) => {
+    client.subscribe(`/${socketPrefix}`, handler, err => {
       if (err) {
         /*eslint-disable */
-                console.log(err);
-                /* eslint-enable */
+        console.log(err);
+        /* eslint-enable */
       }
     });
 
     Axios.get(`/${socketPrefix}`)
-      .then((response) => {
+      .then(response => {
         callback(response.data);
       })
-      .catch((getError) => {
+      .catch(getError => {
         /*eslint-disable */
-                console.log(getError);
-                /* eslint-enable */
+        console.log(getError);
+        /* eslint-enable */
       });
   });
 }

src/server/controllers/api.js

@@ -5,7 +5,8 @@ import CacheServiceImport from './../services/cacheService';
 const cacheService = CacheServiceImport();
 const socketPrefix = 'todos';
 
-const badRequestResponse = reply => reply({ 'bad request': 'false' }).code(HttpStatus.BAD_REQUEST);
+const badRequestResponse = reply =>
+  reply({ 'bad request': 'false' }).code(HttpStatus.BAD_REQUEST);
 
 // TODO: Convert to a class
 export default {

src/server/controllers/index.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/extensions */
-
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { Provider } from 'react-redux';
@@ -18,9 +16,9 @@ import Index from './../../client/components/presentation/index.jsx';
 
 const loggerMiddleware = createLogger();
 /*eslint-disable */
-const store = createStore(rootReducer, applyMiddleware(
-  thunkMiddleware,
-  loggerMiddleware)
+const store = createStore(
+  rootReducer,
+  applyMiddleware(thunkMiddleware, loggerMiddleware),
 );
 /* eslint-enable */
 
@@ -33,11 +31,17 @@ export default {
       const todos = cacheService.get();
 
       /* eslint-disable react/jsx-filename-extension */
-      const reduxStore = <Provider store={store}><Todos entries={todos} /></Provider>;
+      const reduxStore = (
+        <Provider store={store}>
+          <Todos entries={todos} />
+        </Provider>
+      );
       const todoComponent = ReactDOMServer.renderToString(reduxStore);
       const indexComponent = <Index todos={todoComponent} />;
 
-      let indexPage = DecodeHtml(ReactDOMServer.renderToStaticMarkup(indexComponent));
+      let indexPage = DecodeHtml(
+        ReactDOMServer.renderToStaticMarkup(indexComponent),
+      );
       indexPage = indexPage.replace(/&quot;/gi, '"');
 
       return reply(indexPage).code(HttpStatus.OK);

src/server/index.js

@@ -26,7 +26,7 @@ const port = process.env.PORT ? process.env.PORT : 3000;
 // Create a server with a host and port
 const server = new Hapi.Server();
 
-if ((process.env.PROD) && (process.env.PROD === 1 || process.env.PROD === '1')) {
+if (process.env.PROD && (process.env.PROD === 1 || process.env.PROD === '1')) {
   server.connection({
     host,
     port,
@@ -52,7 +52,7 @@ if ((process.env.PROD) && (process.env.PROD === 1 || process.env.PROD === '1'))
 const socketPrefix = 'todos';
 
 // Instrument Hapi.js Server
-server.register(Plugins, (error) => {
+server.register(Plugins, error => {
   if (error) {
     logToConsole('error', error);
   }
@@ -65,7 +65,7 @@ server.register(Plugins, (error) => {
 });
 
 // Start the server
-server.start((err) => {
+server.start(err => {
   if (err) {
     throw err;
   }

src/shared/helpers/timeHelper.js

@@ -1,9 +1,10 @@
 import Moment from 'moment';
 
-const timeRangeMessage = (value, label) => `${Math.round(value)} ${label}${(value === 1) ? '' : 's'} ago`;
+const timeRangeMessage = (value, label) =>
+  `${Math.round(value)} ${label}${value === 1 ? '' : 's'} ago`;
 
-const calculateSeconds = (timeDifference) => {
-  const seconds = (timeDifference < 1) ? 1 : timeDifference;
+const calculateSeconds = timeDifference => {
+  const seconds = timeDifference < 1 ? 1 : timeDifference;
 
   return timeRangeMessage(seconds, 'second');
 };
@@ -24,12 +25,29 @@ export default function calculateTimeDifference(todoDate) {
   const timeNow = parseInt(Moment().unix(), 10);
   const timeDifference = timeNow - todoDate;
 
-  if (timeDifference < minuteInSeconds) return calculateSeconds(timeDifference);
-  if (timeDifference < hourInSeconds) return messageToDisplay(timeDifference, minuteInSeconds, 'minute');
-  if (timeDifference < dayInSeconds) return messageToDisplay(timeDifference, hourInSeconds, 'hour');
-  if (timeDifference < weekInSeconds) return messageToDisplay(timeDifference, dayInSeconds, 'day');
-  if (timeDifference < monthInSeconds) return messageToDisplay(timeDifference, weekInSeconds, 'week');
-  if (timeDifference < yearInSeconds) return messageToDisplay(timeDifference, monthInSeconds, 'month');
+  if (timeDifference < minuteInSeconds) {
+    return calculateSeconds(timeDifference);
+  }
+
+  if (timeDifference < hourInSeconds) {
+    return messageToDisplay(timeDifference, minuteInSeconds, 'minute');
+  }
+
+  if (timeDifference < dayInSeconds) {
+    return messageToDisplay(timeDifference, hourInSeconds, 'hour');
+  }
+
+  if (timeDifference < weekInSeconds) {
+    return messageToDisplay(timeDifference, dayInSeconds, 'day');
+  }
+
+  if (timeDifference < monthInSeconds) {
+    return messageToDisplay(timeDifference, weekInSeconds, 'week');
+  }
+
+  if (timeDifference < yearInSeconds) {
+    return messageToDisplay(timeDifference, monthInSeconds, 'month');
+  }
 
   return messageToDisplay(timeDifference, yearInSeconds, 'year');
 }

test/client/actions/index.test.js

@@ -6,7 +6,11 @@ import Axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 
 import * as actionTypes from './../../../src/client/actionTypes';
-import { setTitle, setBody, addPost } from './../../../src/client/actions/index';
+import {
+  setTitle,
+  setBody,
+  addPost,
+} from './../../../src/client/actions/index';
 
 const sandbox = sinon.sandbox.create();
 let mockAxios;
@@ -56,19 +60,16 @@ describe('client/actions/index', () => {
           body: post.body,
         },
       };
-      const getState = () => (initialState);
+      const getState = () => initialState;
       const dispatch = sandbox.spy();
 
       mockAxios.onPost('/todos', post).reply(200, post);
       await addPost()(dispatch, getState);
 
-      sinon.assert.calledWith(
-        dispatch,
-        {
-          type: actionTypes.ADD_POST,
-          payload: post,
-        },
-      );
+      sinon.assert.calledWith(dispatch, {
+        type: actionTypes.ADD_POST,
+        payload: post,
+      });
     });
 
     it('should not dispatch action as post request failed', async () => {
@@ -81,7 +82,7 @@ describe('client/actions/index', () => {
           body: post.body,
         },
       };
-      const getState = () => (initialState);
+      const getState = () => initialState;
       const dispatch = sandbox.spy();
 
       mockAxios.onPost('/todos', post).reply(500);

test/client/components/presentation/index.test.js

@@ -22,16 +22,18 @@ const sandbox = sinon.sandbox.create();
 Enzyme.configure({ adapter: new Adapter() });
 
 describe('client/components/presentation/index -> <Index todos={todos} />', () => {
-  beforeEach(() => {
-  });
-
+  beforeEach(() => {});
   afterEach(() => {
     sandbox.restore();
   });
 
   it('should contain body and title in the Index component', () => {
     const todo = { title: 'my title', body: 'my body' };
-    const todosComponent = <Provider store={store}><Todos entries={[todo]} /></Provider>;
+    const todosComponent = (
+      <Provider store={store}>
+        <Todos entries={[todo]} />
+      </Provider>
+    );
     const wrapper = Enzyme.shallow(<Index todos={todosComponent} />);
 
     assert.equal(wrapper.html().includes(todo.title), true);