Fix eslint errors

Author: Edvinas Jurele

.eslintignore

@@ -3,3 +3,5 @@ node_modules
 
 # Project specific
 /public
+/src/App.test.js
+/src/registerServiceWorker.js

.eslintrc.json

@@ -16,6 +16,7 @@
     "react/default-props-match-prop-types": [0],
     "import/no-named-as-default": [0],
     "import/prefer-default-export": [0],
-    "jsx-a11y/label-has-for": [0]
+    "jsx-a11y/label-has-for": [0],
+    "jsx-a11y/click-events-have-key-events": [0]
   }
 }

package.json

@@ -18,16 +18,20 @@
     "build-js": "react-scripts build",
     "build": "npm-run-all build-css build-js",
     "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint src"
   },
   "devDependencies": {
+    "classnames": "^2.2.5",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.10.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "^7.7.0",
-    "prettier": "^1.11.1"
+    "prettier": "^1.11.1",
+    "prop-types": "^15.6.1",
+    "react-required-if": "^1.0.3"
   }
 }

src/App.js

@@ -11,6 +11,7 @@ import {
 } from './components';
 import { handleLottoInput } from './utils';
 import { DEMO_TICKETS } from './constants';
+
 const STORAGE_KEY = 'appState';
 
 class App extends Component {
@@ -39,41 +40,63 @@ class App extends Component {
     return initialState;
   };
 
+  componentDidMount() {
+    if (window.localStorage) {
+      const cache = JSON.parse(window.localStorage.getItem(STORAGE_KEY));
+      if (cache != null) {
+        this.setState({ ...cache, value: '' }); // eslint-disable-line react/no-did-mount-set-state
+      }
+    }
+    window.addEventListener('beforeunload', this.componentUnmount);
+  }
+
+  componentWillUnmount() {
+    this.componentUnmount();
+  }
+
   getDemoTickets = () => {
     this.setState({ tickets: DEMO_TICKETS });
     this.disableEditMode();
   };
 
-  addTicket = () => {
-    console.log('TODO: Add a ticket functionality');
+  setStatus = status => {
+    this.setState({ status });
+  };
+
+  resetStatus = () => {
+    this.setState({ status: this.getInitialState().status });
   };
 
   resetState = () => {
     this.setState(this.getInitialState());
   };
 
   removeLocalStorage = () => {
-    localStorage.removeItem(STORAGE_KEY);
+    if (window.localStorage) window.localStorage.removeItem(STORAGE_KEY);
   };
 
   pushStateToStorage = () => {
     this.removeLocalStorage();
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state));
+    if (window.localStorage)
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state));
   };
 
-  setStatus = status => {
-    this.setState({ status });
-  };
-
-  resetStatus = () => {
-    this.setState({ status: this.getInitialState().status });
+  addTicket = () => {
+    // eslint-disable-next-line no-console
+    console.log('TODO: Add a ticket functionality');
   };
 
   countOccurencies = number => {
     let occurenciesCount = 0;
     this.state.tickets.map(ticket => {
       const arr = ticket.values.toString().split(',');
-      occurenciesCount += arr.reduce((a, v) => (v === number ? ++a : a), 0);
+      occurenciesCount += arr.reduce((a, v) => {
+        if (v === number) {
+          const increment = a + 1;
+          return increment;
+        }
+        return a;
+      }, 0);
       return true;
     });
     return occurenciesCount;
@@ -104,7 +127,7 @@ class App extends Component {
 
   handleEnteredNumberCrossout = e => {
     e.preventDefault();
-    const value = this.state.value;
+    const { value } = this.state;
     if (
       value.length >= 1 &&
       value >= 1 &&
@@ -118,6 +141,7 @@ class App extends Component {
 
   invalidateCache = () => {
     if (
+      // eslint-disable-next-line no-alert
       window.confirm('Ar tikrai? Bus ištrinti bilietai ir kamuoliukų istorija.')
     ) {
       this.removeLocalStorage();
@@ -127,6 +151,7 @@ class App extends Component {
 
   removeLastRolledValue = () => {
     if (
+      // eslint-disable-next-line no-alert
       window.confirm('Ar tikrai norite pašalinti paskutinį ridentą kamuoliuką?')
     ) {
       this.setState({ rolledValues: this.state.rolledValues.slice(0, -1) });
@@ -163,12 +188,15 @@ class App extends Component {
   };
 
   handleEditModeChange = () => {
-    this.state.options.isEditMode
-      ? this.disableEditMode()
-      : this.enableEditMode();
+    if (this.state.options.isEditMode) {
+      this.disableEditMode();
+    } else {
+      this.enableEditMode();
+    }
   };
 
   removeTicketByIndex = id => {
+    // eslint-disable-next-line no-alert
     if (window.confirm('Ar tikrai? Bus ištrintas pasirinktas bilietas.')) {
       this.setState({
         tickets: this.state.tickets.filter((item, index) => index !== id),
@@ -181,18 +209,6 @@ class App extends Component {
     window.removeEventListener('beforeunload', this.componentUnmount);
   };
 
-  componentWillMount() {
-    var cache = JSON.parse(localStorage.getItem(STORAGE_KEY));
-    if (cache != null) {
-      this.setState({ ...cache, value: '' });
-    }
-    window.addEventListener('beforeunload', this.componentUnmount);
-  }
-
-  componentWillUnmount() {
-    this.componentUnmount();
-  }
-
   openCreateTicketModal = () => {
     this.setState({ modalCreateTicketOpen: true });
   };
@@ -260,10 +276,10 @@ class App extends Component {
             {rolledValues.length ? (
               <div className="d-flex align-items-center w-100">
                 <div style={{ flex: 1 }}>
-                  {rolledValues.map((value, index) => (
+                  {rolledValues.map((rolledValue, index) => (
                     <Sphere
                       key={index}
-                      value={value}
+                      value={rolledValue}
                       className="d-inline-block mr-1 my-1"
                     />
                   ))}
@@ -288,16 +304,14 @@ class App extends Component {
             {tickets.map((ticket, index) => (
               <div key={index} className="col-12 col-md-6 col-lg-4">
                 <Ticket
-                  index={index}
+                  ticketIndex={index}
                   onTicketRemove={
-                    isEditMode
-                      ? value => this.removeTicketByIndex(value)
-                      : undefined
+                    isEditMode ? this.removeTicketByIndex : undefined
                   }
                   className="d-inline-block text-center my-2"
                   rolledValues={this.state.rolledValues}
                   isClickable={isTicketsClickable}
-                  clickHandler={value => this.crossOutNumber(value)}
+                  clickHandler={this.crossOutNumber}
                   // isEditable
                   {...ticket}
                 />

src/components/EditableInput/index.js

@@ -24,10 +24,12 @@ EditableInput.propTypes = {
   placeholder: PropTypes.string,
   id: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
+  isTransparent: PropTypes.bool,
 };
 
 EditableInput.defaultProps = {
   placeholder: undefined,
+  isTransparent: undefined,
 };
 
 export default EditableInput;

src/components/Modal/index.js

@@ -26,7 +26,11 @@ const ReactModal = ({ children, onRequestClose, ...props }) => (
     overlayClassName="Overlay"
     {...props}
   >
-    <div className="Modal__close" onClick={() => onRequestClose()}>
+    <div
+      className="Modal__close"
+      onClick={() => onRequestClose()}
+      role="presentation"
+    >
       ✕
     </div>
     {children}
@@ -38,4 +42,8 @@ ReactModal.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
+ReactModal.defaultProps = {
+  onRequestClose: undefined,
+};
+
 export default ReactModal;

src/components/ModalCreateTicket.js

@@ -4,37 +4,21 @@ import Modal from './Modal';
 
 import Ticket from './Ticket';
 
-class ModalCreateTicket extends React.Component {
-  state = {
-    ticket: {
-      values: [
-        [7, 27, 39, 51, 66],
-        [11, 20, 33, 49, 68],
-        [8, 18, 45, 57, 75],
-        [13, 21, 36, 53, 65],
-        [10, 30, 37, 52, 72],
-      ],
-      number: '0657387',
-    },
-  };
-
-  render() {
-    const { addTicket } = this.props;
-    return (
-      <Modal {...this.props}>
-        <div className="text-center">
-          <Ticket isEditable />
-          <button
-            type="button"
-            className="btn btn-outline-secondary my-2"
-            onClick={() => addTicket()}
-          >
-            + Prideti
-          </button>
-        </div>
-      </Modal>
-    );
-  }
+function ModalCreateTicket({ addTicket, ...props }) {
+  return (
+    <Modal {...props}>
+      <div className="text-center">
+        <Ticket isEditable />
+        <button
+          type="button"
+          className="btn btn-outline-secondary my-2"
+          onClick={() => addTicket()}
+        >
+          + Prideti
+        </button>
+      </div>
+    </Modal>
+  );
 }
 
 ModalCreateTicket.propTypes = {

src/components/Sphere/index.js

@@ -6,12 +6,13 @@ import './index.css';
 import { padZero } from '../../utils';
 
 const Sphere = ({ value, className }) => {
-  const getSphereColor = color => {
+  const getSphereColor = () => {
     if (value > 0 && value < 16) return 'Sphere--blue';
     if (value >= 16 && value < 31) return 'Sphere--black';
     if (value >= 31 && value < 46) return 'Sphere--red';
     if (value >= 46 && value < 61) return 'Sphere--yellow';
     if (value >= 61 && value < 76) return 'Sphere--green';
+    return '';
   };
 
   return (

src/components/Status/index.js

@@ -13,6 +13,7 @@ const Status = ({ color, message }) => {
 };
 
 Status.propTypes = {
+  message: PropTypes.string.isRequired,
   color: PropTypes.oneOf(['green', 'default']).isRequired,
 };
 

src/components/Ticket/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import requiredIf from 'react-required-if';
 import cx from 'classnames';
-import { TicketField, EditableInput } from '../';
 
+import { TicketField, EditableInput } from '../';
 import './index.css';
 
 import { handleLottoInput, handleLottoTicketInput, padZero } from '../../utils';
@@ -26,11 +27,11 @@ class Ticket extends React.Component {
   handleInputChange = inputData => {
     const { id, value } = inputData;
     const [x, y] = id.split('_');
-    const newValues = this.state.editableTicket.values;
+    const newValues = [...this.state.editableTicket.values];
     newValues[x][y] = handleLottoInput(value);
-    this.setState({ ...this.state.editableTicket, values: newValues });
-    console.log(inputData);
-    console.log(this.state.editableTicket);
+    this.setState({ ...this.state.editableTicket });
+    // console.log(inputData);
+    // console.log(this.state.editableTicket);
   };
 
   handleTicketNumberChange = e =>
@@ -43,7 +44,7 @@ class Ticket extends React.Component {
 
   render() {
     const {
-      index,
+      ticketIndex,
       values,
       rolledValues,
       number,
@@ -60,7 +61,7 @@ class Ticket extends React.Component {
           <a
             href="#remove"
             className="Ticket__close"
-            onClick={() => onTicketRemove(index)}
+            onClick={() => onTicketRemove(ticketIndex)}
           >
             ✕
           </a>
@@ -117,15 +118,25 @@ class Ticket extends React.Component {
 }
 
 Ticket.propTypes = {
+  ticketIndex: PropTypes.number,
   values: PropTypes.arrayOf(PropTypes.array.isRequired).isRequired,
   rolledValues: PropTypes.arrayOf(PropTypes.string),
   number: PropTypes.string.isRequired,
   className: PropTypes.string,
+  isClickable: PropTypes.bool,
+  isEditable: PropTypes.bool,
+  clickHandler: requiredIf(PropTypes.func, props => props.isEditable),
+  onTicketRemove: requiredIf(PropTypes.func, props => props.isEditable),
 };
 
 Ticket.defaultProps = {
   rolledValues: [],
+  ticketIndex: undefined,
   className: undefined,
+  isClickable: undefined,
+  isEditable: undefined,
+  clickHandler: undefined,
+  onTicketRemove: undefined,
 };
 
 export default Ticket;