Merge pull request #133 from hackforla/eslint

Eslint
hackforla · Dec 24, 2019 · 949fde9 · 949fde9
2 parents a941a2a + c52d9b8
commit 949fde9
Show file tree

Hide file tree

Showing 20 changed files with 488 additions and 383 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,29 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  extends: [
+    'airbnb',
+    'eslint:recommended',
+    'plugin:react/recommended',
+  ],
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+  },
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  plugins: [
+    'react',
+  ],
+  rules: {
+  },
+};
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "gh-pages": "^2.1.1",
     "jest": "^24.9.0",
     "leaflet": "^1.5.1",
+    "proptypes": "^1.1.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-leaflet": "^2.4.0",
@@ -31,10 +32,17 @@
     "@babel/plugin-proposal-class-properties": "^7.7.0",
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-react": "^7.7.0",
+    "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.2.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
+    "eslint": "^6.7.2",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-react-hooks": "^1.7.0",
     "file-loader": "^4.2.0",
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.0",

diff --git a/src/App.js b/src/App.js
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+
+import { getDataResources } from './Util/DataService';
+import { REQUESTS, COUNCILS } from './components/common/CONSTANTS';
+
+import Header from './components/main/header/Header';
+import Body from './components/main/body/Body';
+import Footer from './components/main/footer/Footer';
+
+class App extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      data: [],
+      year: '2015',
+      startMonth: '1',
+      endMonth: '12',
+      request: REQUESTS[0],
+      council: COUNCILS[0],
+      showMarkers: false,
+      showMarkersDropdown: true,
+    };
+  }
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  updateState = (key, value, cb = () => null) => {
+    this.setState({ [key]: value }, () => {
+      this.fetchData(); // This is only for the dropdown component to fetch data on change
+      cb();
+    });
+  }
+
+  toggleShowMarkers = () => {
+    const { showMarkers } = this.state;
+    this.setState({ showMarkers: !showMarkers });
+  }
+
+  fetchData = () => {
+    const dataUrl = this.buildDataUrl();
+
+    axios.get(dataUrl)
+      .then(({ data }) => {
+        this.setState({ data });
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }
+
+  buildDataUrl = () => {
+    const {
+      startMonth, endMonth, year, request,
+    } = this.state;
+    const dataResources = getDataResources();
+    return `https://data.lacity.org/resource/${dataResources[year]}.json?$select=location,zipcode,address,requesttype,status,ncname,streetname,housenumber&$where=date_extract_m(CreatedDate)+between+${startMonth}+and+${endMonth}+and+requesttype='${request}'`;
+  }
+
+  render() {
+    const { data, showMarkers, showMarkersDropdown } = this.state;
+
+    return (
+      <div className="main">
+        <Header
+          updateState={this.updateState}
+          toggleShowMarkers={this.toggleShowMarkers}
+          showMarkers={showMarkers}
+          showMarkersDropdown={showMarkersDropdown}
+        />
+        <Body
+          data={data}
+          showMarkers={showMarkers}
+        />
+        <Footer />
+      </div>
+    );
+  }
+}
+
+export default App;