Introduce linting with ESLint

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["react-app", "plugin:prettier/recommended"]
+}

.prettierignore

@@ -0,0 +1,3 @@
+node_modules/
+package*.json
+public/

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "arrowParens": "always",
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "printWidth": 120,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2
+}

README.md

@@ -1,8 +1,10 @@
 # Creative-Collab
-A creative collaborative writing app
 
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+
+A creative collaborative writing app
 
-The goal is a real time creative writing collaboration 'game'. 
+The goal is a real time creative writing collaboration 'game'.
 
 Each participant takes a turn to add a limited amount of text (ie: 100 words max) to write a short story. Each story will have a maximum of 10 writers and a minimum of 2 who can be anonymous or invited friends. Once each story is finished, it can be exported as a pdf or doc.
 

package.json

@@ -13,15 +13,27 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "eslint": "eslint --fix .",
+    "check-eslint": "eslint .",
+    "prettier": "prettier --write \"**/*.{js,css,md,json,yaml,yml}\""
   },
-  "eslintConfig": {
-    "extends": "react-app"
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --branch master"
+    }
   },
   "browserslist": [
     ">0.2%",
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "eslint-config-prettier": "^3.1.0",
+    "eslint-plugin-prettier": "^3.0.0",
+    "husky": "^1.1.3",
+    "prettier": "^1.15.1",
+    "pretty-quick": "^1.8.0"
+  }
 }

src/App.js

@@ -6,7 +6,6 @@ import { Debug } from 'boardgame.io/dist/react';
 import React from 'react';
 import { AI } from 'boardgame.io/ai';
 
-
 class TicTacToeBoard extends React.Component {
   onClick(id) {
     if (this.isActive(id)) {
@@ -67,23 +66,21 @@ class TicTacToeBoard extends React.Component {
 
 // Return true if `cells` is in a winning configuration.
 function IsVictory(cells, player) {
-// WINNING LOGIC IS FLAWED
+  // WINNING LOGIC IS FLAWED
   return false;
 }
 
 // Return true if all `cells` are occupied.
 function IsDraw(cells) {
-  return cells.filter(c => c === null).length == 0;
+  return cells.filter((c) => c === null).length == 0;
 }
 
-
 const TicTacToe = Game({
-  setup: () => ({ cells: Array(9).fill(null), }),
-
+  setup: () => ({ cells: Array(9).fill(null) }),
 
   moves: {
     clickCell(G, ctx, id) {
-      const cells = [ ...G.cells ];
+      const cells = [...G.cells];
 
       // Ensure we can't overwrite cells.
       if (cells[id] === null) {
@@ -105,10 +102,9 @@ const TicTacToe = Game({
       }
     },
   },
-
 });
 
-const App = Client({ 
+const App = Client({
   game: TicTacToe,
   board: TicTacToeBoard,
   debug: false,

src/CreativeCollab.css

@@ -1,16 +1,16 @@
-.editor-container{
-    margin: 0 auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+.editor-container {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
-.story-container{
-    position: absolute;
-    border: 1px solid black;
-    padding-left: 1%;
-    bottom: 5%;
-    left: 20%;
-    width: 800px;
-    height:380px;
+.story-container {
+  position: absolute;
+  border: 1px solid black;
+  padding-left: 1%;
+  bottom: 5%;
+  left: 20%;
+  width: 800px;
+  height: 380px;
 }

src/CreativeCollab.jsx

@@ -3,35 +3,42 @@ import TextEditor from './TextEditor';
 import './CreativeCollab.css';
 
 class CreativeCollab extends React.Component {
-    constructor(){
-        super();
-        this.state = {
-            story: ''
-        };
+  constructor() {
+    super();
+    this.state = {
+      story: '',
+    };
 
-        this.updateStory = this.updateStory.bind(this);
-    }
+    this.updateStory = this.updateStory.bind(this);
+  }
 
-    updateStory(newText){
-        this.setState({
-            story: this.state.story + newText
-        });
-    }
+  updateStory(newText) {
+    this.setState({
+      story: this.state.story + newText,
+    });
+  }
 
-    render() {
-        return (
-            <React.Fragment>
-                <div className="editor-container">
-                    <TextEditor handleChange={() => this.updateStory(this.firstEditor.state.text)}
-                        ref={instance => { this.firstEditor = instance; }} 
-                        />
-                    <TextEditor handleChange={() => this.updateStory(this.secondEditor.state.text)}
-                        ref={instance => { this.secondEditor = instance; }}/>
-                </div>
-                <div className="story-container"  dangerouslySetInnerHTML={{ __html: this.state.story }} /> 
-            </React.Fragment>
-        );
-    }
+  render() {
+    return (
+      <React.Fragment>
+        <div className="editor-container">
+          <TextEditor
+            handleChange={() => this.updateStory(this.firstEditor.state.text)}
+            ref={(instance) => {
+              this.firstEditor = instance;
+            }}
+          />
+          <TextEditor
+            handleChange={() => this.updateStory(this.secondEditor.state.text)}
+            ref={(instance) => {
+              this.secondEditor = instance;
+            }}
+          />
+        </div>
+        <div className="story-container" dangerouslySetInnerHTML={{ __html: this.state.story }} />
+      </React.Fragment>
+    );
+  }
 }
 
 export default CreativeCollab;

src/TextEditor.jsx

@@ -3,24 +3,26 @@ import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 
 class TextEditor extends React.Component {
-    constructor(props) {
-        super(props)
-        this.state = { text: '' } // You can also pass a Quill Delta here
-        this.handleChange = this.handleChange.bind(this);
-    }
+  constructor(props) {
+    super(props);
+    this.state = { text: '' }; // You can also pass a Quill Delta here
+    this.handleChange = this.handleChange.bind(this);
+  }
 
-    handleChange(value) {
-        this.setState({ text: value })
-    }
+  handleChange(value) {
+    this.setState({ text: value });
+  }
 
-    render() {
-        return (
-            <ReactQuill value={this.state.text}
-                onChange={this.handleChange}
-                onBlur={this.props.handleChange}
-                style={{width: "500px", height: "300px"}} />
-        )
-    }
+  render() {
+    return (
+      <ReactQuill
+        value={this.state.text}
+        onChange={this.handleChange}
+        onBlur={this.props.handleChange}
+        style={{ width: '500px', height: '300px' }}
+      />
+    );
+  }
 }
 
 export default TextEditor;

src/index.css

@@ -1,14 +1,12 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }

src/serviceWorker.js

@@ -15,9 +15,7 @@ const isLocalhost = Boolean(
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
     // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
 );
 
 export function register(config) {
@@ -57,7 +55,7 @@ export function register(config) {
 function registerValidSW(swUrl, config) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
@@ -93,23 +91,20 @@ function registerValidSW(swUrl, config) {
         };
       };
     })
-    .catch(error => {
+    .catch((error) => {
       console.error('Error during service worker registration:', error);
     });
 }
 
 function checkValidServiceWorker(swUrl, config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
+      if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -120,15 +115,13 @@ function checkValidServiceWorker(swUrl, config) {
       }
     })
     .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
+      console.log('No internet connection found. App is running in offline mode.');
     });
 }
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
+    navigator.serviceWorker.ready.then((registration) => {
       registration.unregister();
     });
   }