Addressed all linting errors

hackforla · Feb 10, 2020 · d284321 · d284321
1 parent 6ff1e84
commit d284321
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 105 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,2 @@
 *.json
+*.test.js*
diff --git a/src/Tests/Legend.test.js b/src/Tests/Legend.test.js
@@ -1,16 +1,16 @@
 import React from 'react';
-import Enzyme, {shallow, mount} from 'enzyme';
+import Enzyme, { shallow, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
-Enzyme.configure({adapter: new Adapter()});
+Enzyme.configure({ adapter: new Adapter() });
 
 describe('Tree map legend component test suite', () => {
   test('Ensure jest is working', () => {
     expect(true).toEqual(true);
   });
 
-  // test('renders', () => {
-  //   const wrapper = shallow(<Legend />);
-  //   expect(wrapper.exists()).toBe(true);
-  // });
+  test('renders', () => {
+    const wrapper = shallow(<Legend />);
+    expect(wrapper.exists()).toBe(true);
+  });
 });
diff --git a/src/Util/DataService.js b/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);
   });
 }
diff --git a/src/components/PinMap/PinMap.jsx b/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;
diff --git a/src/components/PinMap/old/app.js b/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();
+// }());
diff --git a/src/components/common/Dropdown.jsx b/src/components/common/Dropdown.jsx
@@ -3,31 +3,51 @@ import React from 'react';
 const Dropdown = () => (
   <div className="dropdown is-active">
     <div className="dropdown-trigger">
-      <button className="button" aria-haspopup="true" aria-controls="dropdown-menu">
+      <button className="button" type="button" aria-haspopup="true" aria-controls="dropdown-menu">
         <span>Dropdown button</span>
         <span className="icon is-small">
-          <i className="fas fa-angle-down" aria-hidden="true"></i>
+          <i className="fas fa-angle-down" aria-hidden="true" />
         </span>
       </button>
     </div>
     <div className="dropdown-menu" id="dropdown-menu" role="menu">
       <div className="dropdown-content">
-        <a href="#" className="dropdown-item">
+        <button
+          type="button"
+          className="dropdown-item"
+          onClick={() => {}}
+        >
           Dropdown item
-        </a>
-        <a className="dropdown-item">
+        </button>
+        <button
+          type="button"
+          className="dropdown-item"
+          onClick={() => {}}
+        >
           Other dropdown item
-        </a>
-        <a href="#" className="dropdown-item is-active">
+        </button>
+        <button
+          type="button"
+          className="dropdown-item is-active"
+          onClick={() => {}}
+        >
           Active dropdown item
-        </a>
-        <a href="#" className="dropdown-item">
+        </button>
+        <button
+          type="button"
+          className="dropdown-item"
+          onClick={() => {}}
+        >
           Other dropdown item
-        </a>
+        </button>
         <hr className="dropdown-divider" />
-        <a href="#" className="dropdown-item">
+        <button
+          type="button"
+          className="dropdown-item"
+          onClick={() => {}}
+        >
           With a divider
-        </a>
+        </button>
       </div>
     </div>
   </div>

diff --git a/src/components/main/menu/Menu.jsx b/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>

diff --git a/src/redux/reducers/data.js b/src/redux/reducers/data.js
@@ -1,4 +1,4 @@
-import axios from 'axios';
+// import axios from 'axios';
 
 const types = {
   UPDATE_YEAR: 'UPDATE_YEAR',