Fixes #235 Enforced a frontend linting step to protect PRs

.eslintignore

@@ -0,0 +1,2 @@
+*.json
+*.test.js*

.github/workflows/Continuous_Integration_Frontend.yml

@@ -15,6 +15,8 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - name: Install Packages
       run: npm install
+    - name: Lint
+      run: npm run lint
     - name: Build project
       run: npm run build
     - name: Run Tests

package.json

@@ -33,7 +33,8 @@
     "start": "npm run dev",
     "dev": "webpack-dev-server --config webpack.dev.js --host 0.0.0.0",
     "build": "webpack --config webpack.prod.js",
-    "test": "jest",
+    "lint": "eslint src/**/*.js*",
+    "test": "jest --passWithNoTests",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist"
   },

src/Util/DataService.js

@@ -46,7 +46,7 @@ export function getColorMap(discrete) {
 }
 
 export function getBroadCallVolume(year, startMonth = 0, endMonth = 13, onBroadDataReady) {
-  const treemap_data = { title: 'Broad 311 Calls Map', color: '#FFFFFF', children: [] };
+  const treemapData = { title: 'Broad 311 Calls Map', color: '#FFFFFF', children: [] };
   const start = Math.min(startMonth, endMonth);
   const end = Math.max(startMonth, endMonth);
 
@@ -70,28 +70,38 @@ export function getBroadCallVolume(year, startMonth = 0, endMonth = 13, onBroadD
       const colorMap = getColorMap(false);
       totalCounts.toCollection().forEach((row) => {
         const biggestProblem = biggestProblems[`${row.ncname}_biggestproblem`];
-        const data_point = {
+        const dataPoint = {
           title: row.ncname,
           color: colorMap[biggestProblem],
           size: row.callvolume,
         };
-        treemap_data.children.push(data_point);
+        treemapData.children.push(dataPoint);
       });
-      onBroadDataReady(treemap_data);
+      onBroadDataReady(treemapData);
     });
 }
 
-export function getZoomedCallVolume(ncName, year, startMonth = 0, endMonth = 13, onZoomedDataReady) {
-  const treemap_data = { title: 'Zoomed 311 Calls Map', color: '#FFFFFF', children: [] };
+export function getZoomedCallVolume(
+  ncName,
+  year,
+  startMonth = 0,
+  endMonth = 13,
+  onZoomedDataReady,
+) {
+  const treemapData = { title: 'Zoomed 311 Calls Map', color: '#FFFFFF', children: [] };
   const start = Math.min(startMonth, endMonth);
   const end = Math.max(startMonth, endMonth);
 
   DataFrame.fromJSON(`https://data.lacity.org/resource/${dataResources[year]}.json?$select=count(*)+AS+CallVolume,NCName,RequestType&$where=NCName+=+'${ncName}'+and+date_extract_m(CreatedDate)+between+${start}+and+${end}&$group=NCName,RequestType&$order=CallVolume DESC`).then((df) => {
     const colorMap = getColorMap(false);
     df.toCollection().forEach((row) => {
-      const data_point = { title: row.requesttype, color: colorMap[row.requesttype], size: row.callvolume };
-      treemap_data.children.push(data_point);
+      const dataPoint = {
+        title: row.requesttype,
+        color: colorMap[row.requesttype],
+        size: row.callvolume,
+      };
+      treemapData.children.push(dataPoint);
     });
-    onZoomedDataReady(treemap_data);
+    onZoomedDataReady(treemapData);
   });
 }

src/components/PinMap/PinMap.jsx

@@ -3,12 +3,18 @@ import {
   Map, Marker, Popup, TileLayer, Rectangle, Tooltip,
 } from 'react-leaflet';
 import Choropleth from 'react-leaflet-choropleth';
+import PropTypes from 'proptypes';
 
 // import neighborhoodOverlay from '../../data/la-county-neighborhoods-v6.json';
 // import municipalOverlay from '../../data/la-county-municipal-regions-current.json';
 // import councilDistrictsOverlay from '../../data/la-city-council-districts-2012.json';
 import ncOverlay from '../../data/nc-boundary-2019.json';
 
+const pinMapProps = {
+  data: PropTypes.string.isRequired,
+  showMarkers: PropTypes.boolean.isRequired,
+};
+
 
 class PinMap extends Component {
   constructor(props) {
@@ -176,4 +182,6 @@ class PinMap extends Component {
   }
 }
 
+PinMap.propTypes = pinMapProps;
+
 export default PinMap;

src/components/PinMap/old/app.js

@@ -1,75 +1,75 @@
-(function(){
-  let chartData = [];
-
-  const chart = c3.generate({
-    bindto: '#chart',
-    data: {
-      type: getChartTypeDisplay(),
-      columns: [],
-    },
-    axis: {
-        x: {
-          show: false,
-        }
-      }
-  });
-
-  function getChartTypeDisplay() {
-    return document.querySelector('.chart-type').value;
-  };
-
-  function getDatasetsToDisplay() {
-    return document.querySelectorAll('.data-dropdown');
-  };
-
-  function getRequestType() {
-    return document.querySelector('.request-dropdown').value;
-  };
-
-  function getDisplayTotal() {
-    return document.querySelector('input[name="total"]').checked;
-  }
-
-  function getData(year, requestType) {
-    return fetch(`/soda/${year}/${requestType}`)
-      .then(res => res.json())
-      .then(data => { chartData.push(...data); })
-      .catch(err => { console.error('Fetch Error :-S', err); });
-  };
-
-  function getTotal(year, requestType) {
-    return fetch(`/soda/${year}/${requestType}/total`)
-      .then(res => res.json())
-      .then(data => { chartData.push(data); })
-      .catch(err => { console.error('Fetch Error :-S', err); })
-  };
-
-  function buildChart() {
-    const requestType = getRequestType();
-    const chartType = getChartTypeDisplay();
-    const displayTotal = getDisplayTotal();
-    const datasets = [...getDatasetsToDisplay()]
-                      .map(dataset => {
-                        const { value } = dataset;
-                        if (!displayTotal) return getData(value, requestType);
-                        else return getTotal(value, requestType);
-                      });
-
-    Promise.all(datasets)
-      .then(() => { renderChart(chartData, chartType); })
-      .catch(err => { console.error('Render Error :-S', err)});
-   };
-
-  function renderChart(columns, type) {
-    chart.load({ columns, type });
-  };
-
-  document.querySelector('button').onclick = e => {
-    e.preventDefault();
-    chart.unload();
-    chartData = [];
-    buildChart();
-  };
-
-  buildChart();
-})();
+// (function () {
+//   let chartData = [];
+//
+//   const chart = c3.generate({
+//     bindto: '#chart',
+//     data: {
+//       type: getChartTypeDisplay(),
+//       columns: [],
+//     },
+//     axis: {
+//       x: {
+//         show: false,
+//       },
+//     },
+//   });
+//
+//   function getChartTypeDisplay() {
+//     return document.querySelector('.chart-type').value;
+//   }
+//
+//   function getDatasetsToDisplay() {
+//     return document.querySelectorAll('.data-dropdown');
+//   }
+//
+//   function getRequestType() {
+//     return document.querySelector('.request-dropdown').value;
+//   }
+//
+//   function getDisplayTotal() {
+//     return document.querySelector('input[name="total"]').checked;
+//   }
+//
+//   function getData(year, requestType) {
+//     return fetch(`/soda/${year}/${requestType}`)
+//       .then((res) => res.json())
+//       .then((data) => { chartData.push(...data); })
+//       .catch((err) => { console.error('Fetch Error :-S', err); });
+//   }
+//
+//   function getTotal(year, requestType) {
+//     return fetch(`/soda/${year}/${requestType}/total`)
+//       .then((res) => res.json())
+//       .then((data) => { chartData.push(data); })
+//       .catch((err) => { console.error('Fetch Error :-S', err); });
+//   }
+//
+//   function buildChart() {
+//     const requestType = getRequestType();
+//     const chartType = getChartTypeDisplay();
+//     const displayTotal = getDisplayTotal();
+//     const datasets = [...getDatasetsToDisplay()]
+//       .map((dataset) => {
+//         const { value } = dataset;
+//         if (!displayTotal) return getData(value, requestType);
+//         return getTotal(value, requestType);
+//       });
+//
+//     Promise.all(datasets)
+//       .then(() => { renderChart(chartData, chartType); })
+//       .catch((err) => { console.error('Render Error :-S', err); });
+//   }
+//
+//   function renderChart(columns, type) {
+//     chart.load({ columns, type });
+//   }
+//
+//   document.querySelector('button').onclick = (e) => {
+//     e.preventDefault();
+//     chart.unload();
+//     chartData = [];
+//     buildChart();
+//   };
+//
+//   buildChart();
+// }());

src/components/main/menu/Menu.jsx

@@ -67,9 +67,12 @@ const Menu = () => {
                   className={handleActiveTab(tab)}
                   style={{ width: '254px' }}
                 >
-                  <a onClick={() => { handleTabClick(tab); }}>
+                  <button
+                    type="button"
+                    onClick={() => { handleTabClick(tab); }}
+                  >
                     {tab}
-                  </a>
+                  </button>
                 </li>
               ))}
             </ul>

src/redux/reducers/data.js

@@ -1,4 +1,4 @@
-import axios from 'axios';
+// import axios from 'axios';
 
 const types = {
   UPDATE_YEAR: 'UPDATE_YEAR',