From 7810808f1103acc385315535c3e89e053500a698 Mon Sep 17 00:00:00 2001 From: sellnat77 Date: Sun, 9 Feb 2020 15:54:00 -0800 Subject: [PATCH] Fixes #235 Enforced a frontend linting step to protect PRs Actually running linting Addressed all linting errors Removed unused test --- .eslintignore | 2 + .../Continuous_Integration_Frontend.yml | 2 + package.json | 3 +- src/Tests/Legend.test.js | 16 -- src/Util/DataService.js | 28 ++-- src/components/PinMap/PinMap.jsx | 8 + src/components/PinMap/old/app.js | 150 +++++++++--------- src/components/main/menu/Menu.jsx | 7 +- src/redux/reducers/data.js | 2 +- 9 files changed, 114 insertions(+), 104 deletions(-) create mode 100644 .eslintignore delete mode 100644 src/Tests/Legend.test.js diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 000000000..334e01e38 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,2 @@ +*.json +*.test.js* diff --git a/.github/workflows/Continuous_Integration_Frontend.yml b/.github/workflows/Continuous_Integration_Frontend.yml index b4ae78b79..c5a65625a 100644 --- a/.github/workflows/Continuous_Integration_Frontend.yml +++ b/.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 diff --git a/package.json b/package.json index f5f92d620..5aa952d56 100644 --- a/package.json +++ b/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" }, diff --git a/src/Tests/Legend.test.js b/src/Tests/Legend.test.js deleted file mode 100644 index e3268c17e..000000000 --- a/src/Tests/Legend.test.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import Enzyme, {shallow, mount} from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; - -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(); - // expect(wrapper.exists()).toBe(true); - // }); -}); diff --git a/src/Util/DataService.js b/src/Util/DataService.js index d71a476a3..5179c250e 100644 --- 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 index 10cf959d9..bead131b5 100644 --- 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 index d5598e748..3d9fb9380 100644 --- 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/main/menu/Menu.jsx b/src/components/main/menu/Menu.jsx index 78bdabdd9..923c5b0fc 100644 --- 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' }} > - { handleTabClick(tab); }}> + ))} diff --git a/src/redux/reducers/data.js b/src/redux/reducers/data.js index bf96d9fe4..5d3838f27 100644 --- 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',