Add prettier config and ignore files, lint all js files

Author: Edvinas Jurele

.editorconfig

@@ -0,0 +1,15 @@
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# do not remove trailing whitespace in mardown (2 spaces equal <br> in markdown)
+[*.md]
+trim_trailing_whitespace = false

.prettierignore

@@ -0,0 +1,10 @@
+*.*
+!*.js
+!*.css
+!*.scss
+!*.json
+!*.md
+
+# npm files
+node_modules
+package.json

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

src/App.js

@@ -1,8 +1,8 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
 
-import { Ticket, Sphere, Input, Status } from "./components";
+import { Ticket, Sphere, Input, Status } from './components';
 
-const STORAGE_KEY = "appState";
+const STORAGE_KEY = 'appState';
 
 const tickets = [
   {
@@ -11,20 +11,20 @@ const tickets = [
       [7, 23, 44, 46, 72],
       [11, 26, 43, 50, 64],
       [14, 29, 35, 48, 66],
-      [6, 24, 41, 60, 69]
+      [6, 24, 41, 60, 69],
     ],
-    number: "0642953"
+    number: '0642953',
   },
   {
     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]
+      [10, 30, 37, 52, 72],
     ],
-    number: "0657387"
-  }
+    number: '0657387',
+  },
 ];
 
 class App extends Component {
@@ -36,15 +36,15 @@ class App extends Component {
   getInitialState = () => {
     const initialState = {
       rolledValues: [],
-      value: "",
-      removeValue: "",
+      value: '',
+      removeValue: '',
       status: {
-        color: "default",
-        message: ""
+        color: 'default',
+        message: '',
       },
       options: {
-        isTicketsClickable: false
-      }
+        isTicketsClickable: false,
+      },
     };
 
     return initialState;
@@ -69,7 +69,7 @@ class App extends Component {
   countOccurencies = number => {
     let occurenciesCount = 0;
     tickets.map(ticket => {
-      const arr = ticket.values.toString().split(",");
+      const arr = ticket.values.toString().split(',');
       occurenciesCount += arr.reduce((a, v) => (v === number ? ++a : a), 0);
     });
     return occurenciesCount;
@@ -80,10 +80,10 @@ class App extends Component {
     const count = this.countOccurencies(number);
     if (count > 0) {
       count === 1
-        ? this.setStatusMessage("green", `Išbrauktas ${count} langelis`)
-        : this.setStatusMessage("green", `Išbraukti ${count} langeliai`);
+        ? this.setStatusMessage('green', `Išbrauktas ${count} langelis`)
+        : this.setStatusMessage('green', `Išbraukti ${count} langeliai`);
     } else {
-      this.setStatusMessage("default", "Nerasta");
+      this.setStatusMessage('default', 'Nerasta');
     }
 
     this.pushStateToStorage();
@@ -93,8 +93,8 @@ class App extends Component {
     const regexDigits = /\D/;
     const regexTwoDigits = /(^[\d]{2})[\d]/;
     const value = inputValue
-      .replace(regexDigits, "")
-      .replace(regexTwoDigits, "$1");
+      .replace(regexDigits, '')
+      .replace(regexTwoDigits, '$1');
     return value;
   };
 
@@ -113,12 +113,12 @@ class App extends Component {
     ) {
       this.crossOutNumber(value);
     }
-    this.setState({ value: "" });
+    this.setState({ value: '' });
   };
 
   invalidateCache = () => {
     if (
-      window.confirm("Ar tikrai? Bus ištrinti bilietai ir kamuoliukų istorija.")
+      window.confirm('Ar tikrai? Bus ištrinti bilietai ir kamuoliukų istorija.')
     ) {
       localStorage.removeItem(STORAGE_KEY);
       this.resetState();
@@ -127,7 +127,7 @@ class App extends Component {
 
   removeLastRolledValue = () => {
     if (
-      window.confirm("Ar tikrai norite pašalinti paskutinį ridentą kamuoliuką?")
+      window.confirm('Ar tikrai norite pašalinti paskutinį ridentą kamuoliuką?')
     ) {
       this.setState({ rolledValues: this.state.rolledValues.slice(0, -1) });
       this.resetStatusMessage();
@@ -138,24 +138,24 @@ class App extends Component {
   componentWillMount() {
     var cache = JSON.parse(localStorage.getItem(STORAGE_KEY));
     if (cache != null) {
-      this.setState({ ...cache, value: "" });
+      this.setState({ ...cache, value: '' });
     }
   }
 
   handleIsClickableChange = () =>
     this.setState({
       options: {
         ...this.state.options,
-        isTicketsClickable: !this.state.options.isTicketsClickable
-      }
+        isTicketsClickable: !this.state.options.isTicketsClickable,
+      },
     });
 
   render() {
     const {
       rolledValues,
       value,
       status,
-      options: { isTicketsClickable }
+      options: { isTicketsClickable },
     } = this.state;
     return (
       <div className="App">

src/components/Input/index.js

@@ -1,32 +1,32 @@
-import React from "react";
-import PropTypes from "prop-types";
-import cx from "classnames";
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
 
-import "./index.css";
+import './index.css';
 
 const Input = ({ className, size, ...props }) => {
   const inputSize = {
-    lg: "form-control-lg",
-    sm: "form-control-sm"
+    lg: 'form-control-lg',
+    sm: 'form-control-sm',
   }[size];
 
   return (
     <input
       type="text"
       {...props}
-      className={cx("Input form-control", inputSize, className)}
+      className={cx('Input form-control', inputSize, className)}
     />
   );
 };
 
 Input.propTypes = {
   className: PropTypes.string,
-  size: PropTypes.oneOf(["lg", "sm", undefined])
+  size: PropTypes.oneOf(['lg', 'sm', undefined]),
 };
 
 Input.defaultProps = {
   className: undefined,
-  size: undefined
+  size: undefined,
 };
 
 export default Input;

src/components/Sphere/index.js

@@ -1,32 +1,32 @@
-import React from "react";
-import PropTypes from "prop-types";
-import cx from "classnames";
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
 
-import "./index.css";
+import './index.css';
 
 const Sphere = ({ value, className }) => {
   const getSphereColor = color => {
-    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";
+    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 (
-    <div className={cx("Sphere", className, getSphereColor())}>
+    <div className={cx('Sphere', className, getSphereColor())}>
       {value.toString().length === 1 ? `0${value}` : value}
     </div>
   );
 };
 
 Sphere.propTypes = {
   value: PropTypes.string.isRequired,
-  className: PropTypes.string
+  className: PropTypes.string,
 };
 
 Sphere.defaultProps = {
-  className: undefined
+  className: undefined,
 };
 
 export default Sphere;

src/components/Status/index.js

@@ -1,19 +1,19 @@
-import React from "react";
-import PropTypes from "prop-types";
-import cx from "classnames";
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
 
-import "./index.css";
+import './index.css';
 
 const Status = ({ color, message }) => {
   const colorClass = {
-    green: "Status--green"
+    green: 'Status--green',
   }[color];
 
-  return <p className={cx("Status d-inline-block", colorClass)}>{message}</p>;
+  return <p className={cx('Status d-inline-block', colorClass)}>{message}</p>;
 };
 
 Status.propTypes = {
-  color: PropTypes.oneOf(["green", "default"]).isRequired
+  color: PropTypes.oneOf(['green', 'default']).isRequired,
 };
 
 export default Status;

src/components/Ticket/index.js

@@ -1,11 +1,11 @@
-import React from "react";
-import PropTypes from "prop-types";
-import cx from "classnames";
-import TicketField from "../TicketField";
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import TicketField from '../TicketField';
 
-import "./index.css";
+import './index.css';
 
-const headerLetters = ["M", "J", "R", "G", "Ž"];
+const headerLetters = ['M', 'J', 'R', 'G', 'Ž'];
 
 const Ticket = ({
   values,
@@ -16,7 +16,7 @@ const Ticket = ({
   className,
   ...props
 }) => (
-  <div className={cx("Ticket", className)} {...props}>
+  <div className={cx('Ticket', className)} {...props}>
     <table>
       <thead>
         <tr>
@@ -52,12 +52,12 @@ const Ticket = ({
 Ticket.propTypes = {
   values: PropTypes.arrayOf(PropTypes.array.isRequired).isRequired,
   rolledValues: PropTypes.arrayOf(PropTypes.string),
-  className: PropTypes.string
+  className: PropTypes.string,
 };
 
 Ticket.defaultProps = {
   rolledValues: [],
-  className: undefined
+  className: undefined,
 };
 
 export default Ticket;

src/components/TicketField/index.js

@@ -1,8 +1,8 @@
-import React from "react";
-import PropTypes from "prop-types";
-import cx from "classnames";
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
 
-import "./index.css";
+import './index.css';
 
 const TicketField = ({
   value,
@@ -15,9 +15,9 @@ const TicketField = ({
   return (
     <td
       className={cx(
-        "TicketField",
-        { "TicketField--crossed-out": isCrossedOut },
-        { "TicketField--clickable": shouldInteract }
+        'TicketField',
+        { 'TicketField--crossed-out': isCrossedOut },
+        { 'TicketField--clickable': shouldInteract }
       )}
       onClick={shouldInteract ? () => clickHandler(+value) : undefined}
       {...props}
@@ -29,11 +29,11 @@ const TicketField = ({
 
 TicketField.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  isCrossedOut: PropTypes.bool
+  isCrossedOut: PropTypes.bool,
 };
 
 TicketField.defaultProps = {
-  isCrossedOut: false
+  isCrossedOut: false,
 };
 
 export default TicketField;

src/components/index.js

@@ -1,6 +1,6 @@
-import Ticket from "./Ticket";
-import Sphere from "./Sphere";
-import Input from "./Input";
-import Status from "./Status";
+import Ticket from './Ticket';
+import Sphere from './Sphere';
+import Input from './Input';
+import Status from './Status';
 
 export { Ticket, Sphere, Input, Status };