js cleanup

harshilsharma63 · Nov 25, 2019 · ba7576b · ba7576b
1 parent cdbb614
commit ba7576b
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 141 deletions.
diff --git 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
@@ -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
@@ -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,100 +30,124 @@ 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(
-                <div key={i} className={'city'} style={style.city}>
-                    <div className={'header'} style={style.header}>
+                <div
+                    key={i}
+                    className={'city'}
+                    style={style.city}
+                >
+                    <div
+                        className={'header'}
+                        style={style.header}
+                    >
                         <div className={'city_name'}>{cityData.data.city}</div>
-                        <div className={'city_weather'} style={style.cityWeather}>
+                        <div
+                            className={'city_weather'}
+                            style={style.cityWeather}
+                        >
                             <img
                                 className={'city_weather_icon'}
                                 src={`https://www.airvisual.com/images/${cityData.data.current.weather.ic}.png`}
                                 alt={' '}
                                 style={style.cityWeatherIcon}
                             />
                             <span className={'city_temperature'}>
-                                {cityData.data.current.weather.tp} °C
+                                {cityData.data.current.weather.tp} {'°C'}
                             </span>
                         </div>
                     </div>
-                    <div className={'footer'} style={style.footer}>
-                        <div className={'city_aqi'} style={style.cityAqi}>
-                            <span className={'city_aqi_value'}
-                                  style={style.cityAqiValue}>{cityData.data.current.pollution.aqius}</span>
-                            <span className={'city_aqi_type'} style={style.cityAqiType}>{'US AQI'}</span>
+                    <div
+                        className={'footer'}
+                        style={style.footer}
+                    >
+                        <div
+                            className={'city_aqi'}
+                            style={style.cityAqi}
+                        >
+                            <span
+                                className={'city_aqi_value'}
+                                style={style.cityAqiValue}
+                            >{cityData.data.current.pollution.aqius}</span>
+                            <span
+                                className={'city_aqi_type'}
+                                style={style.cityAqiType}
+                            >{'US AQI'}</span>
                         </div>
-                        <div className={'pollution_rating'} style={style.rating}>
+                        <div
+                            className={'pollution_rating'}
+                            style={style.rating}
+                        >
                             <div
                                 className={'city_pollution_rating'}
-                                style={style.cityPollutionRating}>{this.getPollutionRating(cityData.data.current.pollution.aqius)}</div>
+                                style={style.cityPollutionRating}
+                            >{this.getPollutionRating(cityData.data.current.pollution.aqius)}</div>
                             <div
                                 className={'primary_pollutant'}
-                                style={style.primaryPollutant}>{this.getPrimaryPollutantDisplayName(cityData.data.current.pollution.mainus)}</div>
+                                style={style.primaryPollutant}
+                            >{this.getPrimaryPollutantDisplayName(cityData.data.current.pollution.mainus)}</div>
                         </div>
                     </div>
                 </div>
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,4 +1,4 @@
-import Constants from "../constants";
+import Constants from '../constants';
 
 const getPluginState = (state) => state[`plugins-${Constants.PLUGIN_NAME}`] || {};