From ba7576ba976533cb579d68195b6ec1f7185db744 Mon Sep 17 00:00:00 2001 From: Harshil Sharma Date: Mon, 25 Nov 2019 09:07:30 +0530 Subject: [PATCH] js cleanup --- webapp/src/actions/index.js | 4 +- .../components/left_sidebar_header/index.js | 3 +- .../left_sidebar_header.jsx | 178 ++++++++++-------- webapp/src/index.jsx | 4 +- webapp/src/reducers/index.js | 2 +- .../src/reducers/leftSidebarHeaderReducer.js | 10 +- webapp/src/selectors/index.js | 2 +- .../left_sidebar_header_selectors.js | 2 +- webapp/src/utils/index.js | 51 +---- 9 files changed, 115 insertions(+), 141 deletions(-) diff --git a/webapp/src/actions/index.js b/webapp/src/actions/index.js index ea33524..a2140ce 100644 --- a/webapp/src/actions/index.js +++ b/webapp/src/actions/index.js @@ -1,5 +1,5 @@ -import {receivePollutionData} from "./left_sidebar_header_actions"; +import {receivePollutionData} from './left_sidebar_header_actions'; export default { receivePollutionData, -} +}; diff --git a/webapp/src/components/left_sidebar_header/index.js b/webapp/src/components/left_sidebar_header/index.js index 4d1db3e..7206c80 100644 --- a/webapp/src/components/left_sidebar_header/index.js +++ b/webapp/src/components/left_sidebar_header/index.js @@ -1,5 +1,6 @@ import {connect} from 'react-redux'; -import Selectors from '../../selectors' + +import Selectors from '../../selectors'; import LeftSidebarHeader from './left_sidebar_header'; diff --git a/webapp/src/components/left_sidebar_header/left_sidebar_header.jsx b/webapp/src/components/left_sidebar_header/left_sidebar_header.jsx index 1669ccd..1e87946 100644 --- a/webapp/src/components/left_sidebar_header/left_sidebar_header.jsx +++ b/webapp/src/components/left_sidebar_header/left_sidebar_header.jsx @@ -1,11 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Client from '../../client'; -import Constants from "../../constants"; +import Client from '../../client'; +import Constants from '../../constants'; export default class LeftSidebarHeader extends React.Component { - constructor(props) { super(props); this.state = LeftSidebarHeader.getInitialState(); @@ -14,15 +13,14 @@ export default class LeftSidebarHeader extends React.Component { static getInitialState() { return { pollutionData: { - id: "", + id: '', data: [], - } + }, }; } async componentDidMount() { const pollutionData = await Client.doGet(Constants.URL_REFRESH_DATA); - console.log(pollutionData); this.setState({ pollutionData, }); @@ -32,76 +30,84 @@ export default class LeftSidebarHeader extends React.Component { if (this.props.pollutionData.id !== prevProps.pollutionData.id) { this.setState({ pollutionData: this.props.pollutionData, - }) + }); } } getPollutionRating = (aqi) => { if (aqi <= 50) { - return "Good"; + return 'Good'; } else if (aqi <= 100) { - return "Moderate"; + return 'Moderate'; } else if (aqi <= 150) { - return "Unhealthy for Sensitive Groups"; + return 'Unhealthy for Sensitive Groups'; } else if (aqi <= 200) { - return "Unhealthy"; + return 'Unhealthy'; } else if (aqi <= 300) { - return "Very Unhealthy"; + return 'Very Unhealthy'; } else if (aqi <= 500) { - return "Hazardous"; - } else { - return "Beyond Scale" + return 'Hazardous'; } + return 'Beyond Scale'; }; getPollutionColor = (aqi) => { if (aqi <= 50) { - return "#a8e05f"; + return '#a8e05f'; } else if (aqi <= 100) { - return "#fdd74b"; + return '#fdd74b'; } else if (aqi <= 150) { - return "#fe9b57"; + return '#fe9b57'; } else if (aqi <= 200) { - return "#fe6a69"; + return '#fe6a69'; } else if (aqi <= 300) { - return "#a97abc"; + return '#a97abc'; } else if (aqi <= 500) { - return "#a87383"; - } else { - return "#ff0000" + return '#a87383'; } + return '#ff0000'; }; getPrimaryPollutantDisplayName = (pollutantCode) => { const pollutantDisplayNames = { - "p2": "PM2.5", - "p1": "PM10", - "o3": "OZONE", - "n2": "NO2", - "s2": "SO2", - "co": "CO", + p2: 'PM2.5', + p1: 'PM10', + o3: 'OZONE', + n2: 'NO2', + s2: 'SO2', + co: 'CO', }; return pollutantDisplayNames[pollutantCode]; }; render() { - let rows = []; + const rows = []; if (this.state.pollutionData.data === undefined) { return null; } - for (let i=0; i < this.state.pollutionData.data.length; ++i) { - let cityData = this.state.pollutionData.data[i]; - let aqiColorCode = this.getPollutionColor(cityData.data.current.pollution.aqius); - let style = getStyle(this.props.theme, aqiColorCode); + for (let i = 0; i < this.state.pollutionData.data.length; ++i) { + const cityData = this.state.pollutionData.data[i]; + const aqiColorCode = this.getPollutionColor(cityData.data.current.pollution.aqius); + const style = getStyle(this.props.theme, aqiColorCode); rows.push( -
-
+
+
{cityData.data.city}
-
+
- {cityData.data.current.weather.tp} °C + {cityData.data.current.weather.tp} {'°C'}
-
-
- {cityData.data.current.pollution.aqius} - {'US AQI'} +
+
+ {cityData.data.current.pollution.aqius} + {'US AQI'}
-
+
{this.getPollutionRating(cityData.data.current.pollution.aqius)}
+ style={style.cityPollutionRating} + >{this.getPollutionRating(cityData.data.current.pollution.aqius)}
{this.getPrimaryPollutantDisplayName(cityData.data.current.pollution.mainus)}
+ style={style.primaryPollutant} + >{this.getPrimaryPollutantDisplayName(cityData.data.current.pollution.mainus)}
@@ -148,59 +170,59 @@ LeftSidebarHeader.propTypes = { const getStyle = (theme, aqiColorCode) => { return { city: { - margin: "4px", - border: "1px solid gray", - boxShadow: "0px 0px 2px #666", - borderRadius: "5px" + margin: '4px', + border: '1px solid gray', + boxShadow: '0px 0px 2px #666', + borderRadius: '5px', }, header: { - display: "flex", - padding: "5px 10px", - backgroundColor: "black", - color: "white", - borderRadius: "5px 5px 0 0", + display: 'flex', + padding: '5px 10px', + backgroundColor: 'black', + color: 'white', + borderRadius: '5px 5px 0 0', }, footer: { - display: "flex", - flexDirection: "row", - height: "unset", + display: 'flex', + flexDirection: 'row', + height: 'unset', backgroundColor: aqiColorCode, - color: "#0000007a", - borderRadius: "0 0 5px 5px", + color: '#0000007a', + borderRadius: '0 0 5px 5px', }, cityWeather: { - marginLeft: "auto", + marginLeft: 'auto', }, cityWeatherIcon: { - width: "20px", - marginRight: "5px", + width: '20px', + marginRight: '5px', }, cityAqi: { - width: "80px", - display: "flex", - flexDirection: "column", - textAlign: "center", + width: '80px', + display: 'flex', + flexDirection: 'column', + textAlign: 'center', }, cityAqiValue: { - fontSize: "200%", + fontSize: '200%', }, cityAqiType: { - fontSize: "70%", + fontSize: '70%', }, rating: { - display: "flex", - flexDirection: "column", - flexGrow: "1", - textAlign: "center", - padding: "0 10px", - justifyContent: "center", + display: 'flex', + flexDirection: 'column', + flexGrow: '1', + textAlign: 'center', + padding: '0 10px', + justifyContent: 'center', }, cityPollutionRating: { - fontSize: "100%", + fontSize: '100%', }, primaryPollutant: { - fontSize: "70%", - } + fontSize: '70%', + }, }; }; diff --git a/webapp/src/index.jsx b/webapp/src/index.jsx index c1c66b3..4b984af 100644 --- a/webapp/src/index.jsx +++ b/webapp/src/index.jsx @@ -1,9 +1,9 @@ import React from 'react'; + import Actions from './actions'; import Reducers from './reducers'; -import Util from './utils'; -import LeftSidebarHeader from "./components/left_sidebar_header"; +import LeftSidebarHeader from './components/left_sidebar_header'; import Constants from './constants'; diff --git a/webapp/src/reducers/index.js b/webapp/src/reducers/index.js index ba34f39..bd7a13c 100644 --- a/webapp/src/reducers/index.js +++ b/webapp/src/reducers/index.js @@ -1,6 +1,6 @@ import {combineReducers} from 'redux'; -import {pollutionData} from "./leftSidebarHeaderReducer"; +import {pollutionData} from './leftSidebarHeaderReducer'; export default combineReducers({ pollutionData, diff --git a/webapp/src/reducers/leftSidebarHeaderReducer.js b/webapp/src/reducers/leftSidebarHeaderReducer.js index b2d846b..52af05d 100644 --- a/webapp/src/reducers/leftSidebarHeaderReducer.js +++ b/webapp/src/reducers/leftSidebarHeaderReducer.js @@ -4,10 +4,10 @@ let prevPollutionData; export const pollutionData = (state = false, action) => { switch (action.type) { - case Constants.ACTIONS.RECEIVE_POLLUTION_DATA: - prevPollutionData = action.pollutionData; - return action.pollutionData; - default: - return prevPollutionData || {}; + case Constants.ACTIONS.RECEIVE_POLLUTION_DATA: + prevPollutionData = action.pollutionData; + return action.pollutionData; + default: + return prevPollutionData || {}; } }; diff --git a/webapp/src/selectors/index.js b/webapp/src/selectors/index.js index 5bf91e4..f69dd57 100644 --- a/webapp/src/selectors/index.js +++ b/webapp/src/selectors/index.js @@ -1,4 +1,4 @@ -import {getPollutionData} from "./left_sidebar_header_selectors"; +import {getPollutionData} from './left_sidebar_header_selectors'; export default { getPollutionData, diff --git a/webapp/src/selectors/left_sidebar_header_selectors.js b/webapp/src/selectors/left_sidebar_header_selectors.js index a2ec616..a932aa1 100644 --- a/webapp/src/selectors/left_sidebar_header_selectors.js +++ b/webapp/src/selectors/left_sidebar_header_selectors.js @@ -1,4 +1,4 @@ -import Constants from "../constants"; +import Constants from '../constants'; const getPluginState = (state) => state[`plugins-${Constants.PLUGIN_NAME}`] || {}; diff --git a/webapp/src/utils/index.js b/webapp/src/utils/index.js index 3da91d0..381abca 100644 --- a/webapp/src/utils/index.js +++ b/webapp/src/utils/index.js @@ -4,60 +4,11 @@ * * @return {string} instance base URL */ + function getBaseURL() { const url = new URL(window.location.href); return `${url.protocol}//${url.host}`; } - -function popupCenter(url, title, w, h) { - // Fixes dual-screen position Most browsers Firefox - const dualScreenLeft = window.screenLeft === undefined ? window.screenX : window.screenLeft; // eslint-disable-line no-undefined - const dualScreenTop = window.screenTop === undefined ? window.screenY : window.screenTop; // eslint-disable-line no-undefined - - let width; - let height; - - if (window.innerWidth) { - width = window.innerWidth; - } else { - width = document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width; - } - - if (window.innerHeight) { - height = window.innerHeight; - } else { - height = document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height; - } - - const left = ((width / 2) - (w / 2)) + dualScreenLeft; - const top = ((height / 2) - (h / 2)) + dualScreenTop; - const newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left); - - if (newWindow != null) { - newWindow.focus(); - } - - return newWindow; -} - -var lut = []; -for (var i = 0; i < 256; i++) { - lut[i] = (i < 16 ? '0' : '') + (i).toString(16); -} - -function uuidv4() { - var d0 = Math.random() * 0xffffffff | 0; - var d1 = Math.random() * 0xffffffff | 0; - var d2 = Math.random() * 0xffffffff | 0; - var d3 = Math.random() * 0xffffffff | 0; - return lut[d0 & 0xff] + lut[d0 >> 8 & 0xff] + lut[d0 >> 16 & 0xff] + lut[d0 >> 24 & 0xff] + '-' + - lut[d1 & 0xff] + lut[d1 >> 8 & 0xff] + '-' + lut[d1 >> 16 & 0x0f | 0x40] + lut[d1 >> 24 & 0xff] + '-' + - lut[d2 & 0x3f | 0x80] + lut[d2 >> 8 & 0xff] + '-' + lut[d2 >> 16 & 0xff] + lut[d2 >> 24 & 0xff] + - lut[d3 & 0xff] + lut[d3 >> 8 & 0xff] + lut[d3 >> 16 & 0xff] + lut[d3 >> 24 & 0xff]; -} - export default { getBaseURL, - popupCenter, - uuidv4, };