add eslint

.eslintrc

@@ -0,0 +1,72 @@
+{
+  "parser": "babel-eslint",
+  "extends": ["airbnb"],
+  "plugins": ["import", "react"],
+  "env": {
+    "browser": true,
+    "node": true,
+    "jest": true
+  },
+  "rules": {
+    "arrow-parens": [
+      "warn",
+      "as-needed",
+      {
+        "requireForBlockBody": true
+      }
+    ],
+    "comma-dangle": ["error", "never"],
+    "function-paren-newline": ["error", "consistent"],
+    "jsx-quotes": ["error", "prefer-single"],
+    "max-len": [
+      "error",
+      {
+        "code": 80,
+        "ignoreUrls": true,
+        "ignoreStrings": true
+      }
+    ],
+    "no-return-assign": "warn",
+    "no-underscore-dangle": [
+      "error",
+      {
+        "allowAfterThis": true,
+        "allow": ["_id"]
+      }
+    ],
+    "quotes": ["error", "single"],
+    "react/button-has-type": "off",
+    "react/destructuring-assignment": "off",
+    "react/prop-types": [
+      1,
+      {
+        "skipUndeclared": true
+      }
+    ],
+    "react/forbid-prop-types": [
+      1,
+      {
+        "forbid": ["any", "array"]
+      }
+    ],
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [".js", ".jsx"]
+      }
+    ],
+    "react/jsx-no-bind": "error",
+    "react/sort-comp": [
+      1,
+      {
+        "order": [
+          "type-annotations",
+          "static-methods",
+          "lifecycle",
+          "everything-else",
+          "render"
+        ]
+      }
+    ]
+  }
+}

package.json

@@ -9,14 +9,18 @@
     "react": "16.5.2",
     "react-day-picker": "7.2.4",
     "react-dom": "16.5.2",
-    "react-scripts": "2.0.5",
     "styled-components": "4.0.2"
   },
+  "devDependencies": {
+    "eslint-config-airbnb": "17.1.0",
+    "react-scripts": "2.0.5"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint src"
   },
   "eslintConfig": {
     "extends": "react-app"

src/Components/App/App.js

@@ -5,7 +5,7 @@ import GlobalStyle from './GlobalStyle';
 import './index.css';
 import octocat from './kotik.svg';
 import urbica from './urbica-logo.svg';
-import arrowurbica from './arrow_urbica.svg'
+import arrowurbica from './arrow_urbica.svg';
 
 import Map from '../Map';
 import Intro from '../Intro';
@@ -18,36 +18,58 @@ class App extends PureComponent {
         <GlobalStyle />
         <Intro />
         <Description />
-        <div className="martin_items">
-         <div className="feature">
-           <h1 className="feature-description">Turning Data into Vector Tiles</h1>
-           <h2>Martin creates Mapbox Vector Tiles from any PostGIS table or view </h2>
-         </div>
-         <div className="feature">
-           <h1 className="feature-description">Generating Tiles with Functions</h1>
-           <h2>Martin is the only vector tile server capable of creating tiles using database functions directly</h2>
-         </div>
-         <div className="feature">
-           <h1 className="feature-description">Filtering and Aggregating Data on the Fly</h1>
-           <h2>Martin is ideal for large datasets as it allows passing parameters from a URL into a user function to filter features and aggregate attribute values</h2>
-         </div>
+        <div className='martin_items'>
+          <div className='feature'>
+            <h1 className='feature-description'>
+              Turning Data into Vector Tiles
+            </h1>
+            <h2>
+              Martin creates Mapbox Vector Tiles from any PostGIS table or view
+            </h2>
+          </div>
+          <div className='feature'>
+            <h1 className='feature-description'>
+              Generating Tiles with Functions
+            </h1>
+            <h2>
+              Martin is the only vector tile server capable of creating tiles
+              using database functions directly
+            </h2>
+          </div>
+          <div className='feature'>
+            <h1 className='feature-description'>
+              Filtering and Aggregating Data
+              on the Fly
+            </h1>
+            <h2>
+              Martin is ideal for large datasets as it allows passing
+              parameters from a URL into a user function to filter features and
+              aggregate attribute values
+            </h2>
+          </div>
+        </div>
+        <div className='try-it'>
+          This is a demo of how Martin works. We used 2017
+          New York City taxi trips dataset: about 114 million records and a 13GB
+          database. Martin uses a database function to filter the data by
+          selected dates, days of the week, and hours and to sum or average the
+          numbers by areas.
         </div>
-        <div className="try-it">This is a demo of how Martin works. We used 2017 New York City taxi trips dataset: about 114 million records and a 13GB database. Martin uses a database function to filter the data by selected dates, days of the week, and hours and to sum or average the numbers by areas.</div>
         <Map />
-        <div className="development">
+        <div className='development'>
           <div>Start building with Martin!</div>
-          <a href="https://github.com/urbica/martin" className="git-button">
+          <a href='https://github.com/urbica/martin' className='git-button'>
             View on Github
-            <img src={octocat} alt="octocat"/>
+            <img src={octocat} alt='octocat' />
           </a>
         </div>
-        <footer className="footer">
-          <div className="footerdescription">MADE BY</div>
-          <a href="https://urbica.co">
-            <img src={urbica} alt="urbica" />
+        <footer className='footer'>
+          <div className='footerdescription'>MADE BY</div>
+          <a href='https://urbica.co'>
+            <img src={urbica} alt='urbica' />
           </a>
-          <a href="https://urbica.co" className="footerarrow">
-            <img src={arrowurbica} alt="arrowurbica" />
+          <a href='https://urbica.co' className='footerarrow'>
+            <img src={arrowurbica} alt='arrowurbica' />
           </a>
         </footer>
       </>

src/Components/App/GlobalStyle.js

@@ -1,12 +1,11 @@
+/* eslint-disable max-len */
 import { createGlobalStyle } from 'styled-components';
 
-
 import media from './media';
 import fontSize from './fontSize';
 
 // vremenaGroteskBook
 import vremenaGroteskBook from './assets/fonts/VremenaGroteskBook.otf';
-
 import vremenaGroteskBookWoff2 from './assets/fonts/VremenaGroteskBookWoff2.woff2';
 
 // vremenaGroteskBold
@@ -14,8 +13,6 @@ import vremenaGroteskBold from './assets/fonts/VremenaGroteskBold.otf';
 import vremenaGroteskBoldWoff2 from './assets/fonts/VremenaGroteskBoldWoff2.woff2';
 
 
-
-
 export default createGlobalStyle`
   * {
     box-sizing: border-box;
@@ -53,8 +50,6 @@ export default createGlobalStyle`
       ${media.tablet`font-size: ${fontSize.size.tablet} line-height: ${fontSize.lineHeight.tablet};`}
       ${media.phone`font-size: ${fontSize.size.phone}; line-height: ${fontSize.lineHeight.phone};`}
     }
-  
-
 
   body {
     background-image: linear-gradient(to bottom,  #0e0e1e 50%, #1c1c30);

src/Components/App/fontSize.js

@@ -1,18 +1,16 @@
 export default {
-    size: {
-        phone: '16px',
-        tablet: '16px',
-        desktop: '18px',
-        giant: '1.4vw',
-        more: '1.5vw'
-      },
-      lineHeight: {
-        phone: '20px',
-        tablet: '20px',
-        desktop: '16px',
-        giant: '1.2vw',
-        more: '1.5vw'
-      }
-    };
-    
-  
+  size: {
+    phone: '16px',
+    tablet: '16px',
+    desktop: '18px',
+    giant: '1.4vw',
+    more: '1.5vw'
+  },
+  lineHeight: {
+    phone: '20px',
+    tablet: '20px',
+    desktop: '16px',
+    giant: '1.2vw',
+    more: '1.5vw'
+  }
+};

src/Components/App/media.js

@@ -2,12 +2,12 @@ import { css } from 'styled-components';
 import sizes from './viewportSize';
 
 export default Object.keys(sizes).reduce((accumulator, label) => {
-    const emSize = sizes[label] / 16;
-    const result = accumulator;
-    result[label] = (...args) => css`
+  const emSize = sizes[label] / 16;
+  const result = accumulator;
+  result[label] = (...args) => css`
       @media (max-width: ${emSize}em) {
         ${css(...args)};
       }
     `;
-    return result;
-  }, {});
+  return result;
+}, {});

src/Components/App/viewportSize.js

@@ -1,9 +1,9 @@
 const sizes = {
-    more: 5000,
-    giant: 2000,
-    desktop: 1170,
-    tablet: 768,
-    phone: 450
-  };
-  
-  export default sizes;
+  more: 5000,
+  giant: 2000,
+  desktop: 1170,
+  tablet: 768,
+  phone: 450
+};
+
+export default sizes;

src/Components/Description/Description.js

@@ -1,12 +1,16 @@
 import React from 'react';
 
-import DescriptionBlock from './DescriptionStyle'
+import DescriptionBlock from './DescriptionStyle';
 
 const Description = () => (
   <DescriptionBlock>
-    Martin is an Open Source<br></br>PostGIS
-    vector tile server<br></br>created by Urbica 
+    Martin is an Open Source
+    <br />
+PostGIS
+    vector tile server
+    <br />
+created by Urbica
   </DescriptionBlock>
 );
 
-export default Description;
+export default Description;

src/Components/Description/DescriptionStyle.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from 'styled-components';
 
 export default styled.div`
     display: flex;
@@ -11,5 +11,4 @@ export default styled.div`
     font-size: 50px;
     font-weight: normal;
     color: white;
-`
-
+`;

src/Components/Description/index.js

@@ -1 +1 @@
-export { default } from './Description';
+export { default } from './Description';

src/Components/Intro/Intro.js

@@ -4,13 +4,17 @@ import './Intro.css';
 import octocat from './kotik.svg';
 
 const Intro = () => (
-  <div className="intro">
-    <div className="introblock">
-      <div className="martin">Martin</div>
-      <div className="slogan">Vector Tiles from Large Databases<br></br>on the Fly</div>
-      <a href="https://github.com/urbica/martin" className="gitbutton">
+  <div className='intro'>
+    <div className='introblock'>
+      <div className='martin'>Martin</div>
+      <div className='slogan'>
+Vector Tiles from Large Databases
+        <br />
+on the Fly
+      </div>
+      <a href='https://github.com/urbica/martin' className='gitbutton'>
           View on Github
-          <img src={octocat} alt="octocat"/>
+        <img src={octocat} alt='octocat' />
       </a>
     </div>
   </div>

src/Components/Map/Filters/AvgTime.js

@@ -3,5 +3,5 @@ import styled from 'styled-components';
 export default styled.div`
   font-size: 16px;
   font-weight: bold;
-  color: ${({isEnabled}) => (isEnabled ? '#dadfee' : '#6c7495')};
+  color: ${({ isEnabled }) => (isEnabled ? '#dadfee' : '#6c7495')};
 `;

src/Components/Map/Filters/DayPicker/DayPicker.js

@@ -1,5 +0,0 @@
-import React from 'react';
-
-const foo = () => {
-
-}

src/Components/Map/Filters/Filters.js

@@ -4,13 +4,13 @@ import { debounce } from 'debounce';
 import 'react-day-picker/lib/style.css';
 
 import Container from './Container';
-import Title from "./Title";
-import Description from "./Description";
-import Range from "./Range";
-import DayPickerContainer from "./DayPicker";
-import TimePicker from "./TimePicker";
-import AvgTime from "./AvgTime";
-import Input from "./Input";
+import Title from './Title';
+import Description from './Description';
+import Range from './Range';
+import DayPickerContainer from './DayPicker';
+import TimePicker from './TimePicker';
+import AvgTime from './AvgTime';
+import Input from './Input';
 
 class Filters extends PureComponent {
   state = {
@@ -30,7 +30,9 @@ class Filters extends PureComponent {
   dateConverter = date => date && `${date.getDate()}.${date.getMonth() + 1}`;
 
   toggleDayPicker = () => {
-    this.setState(({isDayPickerEnabled}) => ({isDayPickerEnabled: !isDayPickerEnabled}))
+    this.setState(
+      ({ isDayPickerEnabled }) => ({ isDayPickerEnabled: !isDayPickerEnabled })
+    );
   };
 
   render() {
@@ -47,7 +49,7 @@ class Filters extends PureComponent {
           Conducted from an area
         </Description>
         <Range onClick={this.toggleDayPicker}>
-          {this.dateConverter(from)} – {this.dateConverter(to)}
+          {`${this.dateConverter(from)} – ${this.dateConverter(to)}`}
         </Range>
         {this.state.isDayPickerEnabled && (
           <DayPickerContainer>
@@ -56,7 +58,7 @@ class Filters extends PureComponent {
               selectedDays={[from, { from, to }]}
               modifiers={modifiers}
               onDayClick={this.handleDayClick}
-              captionElement={({date, localeUtils, locale}) => {
+              captionElement={({ date, localeUtils, locale }) => {
                 const months = localeUtils.getMonths(locale);
 
                 return (
@@ -88,7 +90,9 @@ class Filters extends PureComponent {
             onChange={this.changeTime}
           />
           {hour !== -1 && (
-            <div>{hour}:00</div>
+            <div>
+              {`${hour}:00`}
+            </div>
           )}
         </TimePicker>
       </Container>

src/Components/Map/Map.js

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import mapboxgl from 'mapbox-gl';
-import { DateUtils } from 'react-day-picker';
-import 'mapbox-gl/dist/mapbox-gl.css'
+import 'mapbox-gl/dist/mapbox-gl.css';
 import Container from './Container';
 import Filters from './Filters';
 
@@ -14,7 +13,7 @@ class Map extends PureComponent {
   state = {
     range: {
       from: new Date(2017, 0, 1),
-      to: new Date(2017, 4, 4),
+      to: new Date(2017, 4, 4)
     },
     hour: 9
   };
@@ -38,7 +37,9 @@ class Map extends PureComponent {
 
     const dateFrom = this.dateConverter(from);
     const dateTo = this.dateConverter(to);
-    const queryParams = encodeURI(`date_from=${dateFrom}&date_to=${dateTo}&hour=${hour}`);
+    const queryParams = encodeURI(
+      `date_from=${dateFrom}&date_to=${dateTo}&hour=${hour}`
+    );
 
     const newStyle = this.map.getStyle();
     newStyle.sources['public.get_trips'].url = `/tiles/rpc/public.get_trips.json?${queryParams}`;
@@ -56,10 +57,10 @@ class Map extends PureComponent {
       source: 'public.get_trips',
       'source-layer': 'trips',
       paint: {
-        "fill-extrusion-height": [
-          "interpolate",
-          ["exponential", 1.3],
-          ["get", "trips"],
+        'fill-extrusion-height': [
+          'interpolate',
+          ['exponential', 1.3],
+          ['get', 'trips'],
           17,
           10,
           1204,
@@ -71,33 +72,36 @@ class Map extends PureComponent {
           6249,
           600
         ],
-        "fill-extrusion-color": [
-          "interpolate",
-          ["exponential", 1.3],
-          ["get", "trips"],
+        'fill-extrusion-color': [
+          'interpolate',
+          ['exponential', 1.3],
+          ['get', 'trips'],
           0,
-          "#f2a8ff",
+          '#f2a8ff',
           2,
-          "#f2a8ff",
+          '#f2a8ff',
           15,
-          "#dc70ff",
+          '#dc70ff',
           26,
-          "#bc39fe",
+          '#bc39fe',
           540,
-          "#9202fd",
+          '#9202fd',
           900,
-          "#6002c5"
+          '#6002c5'
         ],
-        "fill-extrusion-opacity": 0.75
+        'fill-extrusion-opacity': 0.75
       }
-    })
+    });
   };
 
   changeFilter = (filter, value) => {
-    this.setState(state => ({...state, [filter]: value}));
+    this.setState(state => ({
+      ...state,
+      [filter]: value
+    }));
   };
 
-  dateConverter = date => {
+  dateConverter = (date) => {
     const year = date.getFullYear();
     const month = date.getMonth() + 1;
     const day = date.getDate();

src/index.js

@@ -3,4 +3,4 @@ import ReactDOM from 'react-dom';
 
 import App from './Components/App';
 
-ReactDOM.render(<App/>, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'));

yarn.lock

@@ -3326,6 +3326,24 @@ escodegen@~1.9.0:
   optionalDependencies:
     source-map "~0.6.1"
 
+eslint-config-airbnb-base@^13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-13.1.0.tgz#b5a1b480b80dfad16433d6c4ad84e6605052c05c"
+  integrity sha512-XWwQtf3U3zIoKO1BbHh6aUhJZQweOwSt4c2JrPDg9FP3Ltv3+YfEv7jIDB8275tVnO/qOHbfuYg3kzw6Je7uWw==
+  dependencies:
+    eslint-restricted-globals "^0.1.1"
+    object.assign "^4.1.0"
+    object.entries "^1.0.4"
+
+eslint-config-airbnb@17.1.0:
+  version "17.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-17.1.0.tgz#3964ed4bc198240315ff52030bf8636f42bc4732"
+  integrity sha512-R9jw28hFfEQnpPau01NO5K/JWMGLi6aymiF6RsnMURjTk+MqZKllCqGK/0tOvHkPi/NWSSOU2Ced/GX++YxLnw==
+  dependencies:
+    eslint-config-airbnb-base "^13.1.0"
+    object.assign "^4.1.0"
+    object.entries "^1.0.4"
+
 eslint-config-react-app@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-3.0.4.tgz#83f394d765e7d5af623d773e64609e9c9f2cbeb5"
@@ -3408,6 +3426,11 @@ eslint-plugin-react@7.11.1:
     jsx-ast-utils "^2.0.1"
     prop-types "^15.6.2"
 
+eslint-restricted-globals@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-restricted-globals/-/eslint-restricted-globals-0.1.1.tgz#35f0d5cbc64c2e3ed62e93b4b1a7af05ba7ed4d7"
+  integrity sha1-NfDVy8ZMLj7WLpO0saevBbp+1Nc=
+
 eslint-scope@3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
@@ -6651,6 +6674,16 @@ object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
+object.entries@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.0.4.tgz#1bf9a4dd2288f5b33f3a993d257661f05d161a5f"
+  integrity sha1-G/mk3SKI9bM/Opk9JXZh8F0WGl8=
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.6.1"
+    function-bind "^1.1.0"
+    has "^1.0.1"
+
 object.getownpropertydescriptors@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"