make ts lint happy

fix npm vulnerabilities
add preferred browser to package.jon

Author: Daniel Baah

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-seafood",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "homepage": "https://map.seafoodfest.org",
   "dependencies": {
@@ -16,7 +16,7 @@
     "react-dom": "^16.4.0",
     "react-ga": "^2.5.3",
     "react-redux": "^5.0.7",
-    "react-scripts": "1.1.4",
+    "react-scripts": "^3.0.1",
     "react-window-size": "^1.2.0",
     "redux": "^4.0.0"
   },
@@ -25,5 +25,17 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/app.js

@@ -4,7 +4,6 @@ import { Provider } from 'react-redux';
 import { store } from './redux/store'
 import Map from './components/map/map.js';
 import BottomSheet from './components/bottomDrawer/bottomDrawer'
-import RightMenu from './components/rightDrawer/rightDrawer';
 import Main from './components/main/main';
 import { config } from './config';
 
@@ -20,13 +19,13 @@ class App extends Component {
 
     // Initialize Google Analytics
     const { ga } = config;
-    ReactGA.initialize(ga.id),{
+    ReactGA.initialize(ga.id,{
       debug: true,
       titleCase: false,
       gaOptions: {
         name: 'dev2018'
       }
-    };
+    });
     ReactGA.pageview(window.location.pathname + window.location.search);
   }
 

src/components/bottomDrawer/beerGarden/beerGarden.js

@@ -1,8 +1,6 @@
 import React, {Component} from 'react';
 import './beerGarden.css';
 import { breweries } from "../../../redux/constants";
-import { Tabs, Tab } from '@material-ui/core';
-import { TabContainer } from '../../../helpers';
 
 class BeerGarden extends Component {
 

src/components/bottomDrawer/bottomDrawer.js

@@ -204,7 +204,7 @@ class BottomSheet extends Component {
     if (typeof svgIcon !== "undefined") {
       return (<div className="key-wrapper">
           <div className="svg-icon">
-            <img src={svgIcon}/>
+            <img alt="Featured vendor icon" src={svgIcon}/>
           </div>
         </div>
       )
@@ -216,15 +216,15 @@ class BottomSheet extends Component {
             {data.id}
           </div>
           <div className="svg-pin">
-            <img src={svgPin}/>
+            <img alt="Vendor icon" src={svgPin}/>
           </div>
         </div>)
       // Show nothing
     }  else if (data.details === "games") {
       return (
         <div className="key-wrapper">
           <div className="svg-games">
-          <img src={imgIconGames}/>
+          <img alt="Games icon" src={imgIconGames}/>
           </div>
       </div>)
     } else {

src/components/bottomDrawer/crabShack/crabShack.js

@@ -1,7 +1,5 @@
 import React, {Component} from 'react';
 import './crabShack.css';
-import { Tabs, Tab } from '@material-ui/core';
-import { TabContainer } from '../../../helpers';
 
 class CrabShack extends Component {
 

src/components/bottomDrawer/purpleSlide/purpleSlide.js

@@ -1,7 +1,5 @@
 import React, {Component} from 'react';
 import './purpleSlide.css';
-import { Tabs, Tab } from '@material-ui/core';
-import { TabContainer } from '../../../helpers';
 
 class PurpleSlide extends Component {
 

src/components/leftDrawer/leftDrawer.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types';
-import { isBrowser } from 'react-device-detect';
 import { withStyles } from '@material-ui/core/styles';
 import withWidth from '@material-ui/core/withWidth';
 import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
@@ -107,35 +106,35 @@ class LeftDrawer extends Component {
         }}
       >
         {/* Drawer Flier Image */}
-        <img className="Flier" src={imgFlier}/>
+        <img alt="Official Seafood Fest Flier" className="Flier" src={imgFlier}/>
 
         {/*  Map Legend */}
         <div className="Legend">
           <div className="legend-title">Map legend:</div>
           <div className="legend-item-wrapper">
             <span className="legend-box">
-              <img className="map-pin" src={imgIconEntertainment}/>
+              <img alt="Entertainment" className="map-pin" src={imgIconEntertainment}/>
             </span>
             <span className="legend-item-text">Entertainment</span>
           </div>
           <div className="legend-item-wrapper">
             <span className="legend-box">
-              <img className="map-pin" src={imgIconArts}/></span>
+              <img alt="Arts & Crafts" className="map-pin" src={imgIconArts}/></span>
             <span className="legend-item-text">Arts & Crafts</span>
           </div>
           <div className="legend-item-wrapper">
             <span className="legend-box">
-              <img className="map-pin" src={imgIconFoods}/></span>
+              <img alt="Food" className="map-pin" src={imgIconFoods}/></span>
             <span className="legend-item-text">Food</span>
           </div>
           <div className="legend-item-wrapper">
             <span className="legend-box">
-              <img className="map-pin" src={imgIconSponsors}/></span>
+              <img alt="Sponsors" className="map-pin" src={imgIconSponsors}/></span>
             <span className="legend-item-text">Sponsors/Non-Profits</span>
           </div>
           <div className="legend-item-wrapper">
             <span className="legend-box">
-              <img className="map-pin" src={imgIconMisc}/></span>
+              <img alt="Miscellaneous" className="map-pin" src={imgIconMisc}/></span>
             <span className="legend-item-text">Other</span>
           </div>
           <div className="legend-item-wrapper">
@@ -151,7 +150,7 @@ class LeftDrawer extends Component {
         <div className="legend-title sub-section">Don't Miss:</div>
         <List>
           <ListItem className="list-item-wrapper" button onClick={() => {
-            {/*  Close the right & left menu */}
+            // Close the right & left menu
             toggleRightDrawer(true);
             toggleLeftDrawer(false);
             setTabValue({index: 1, name: "Food"});
@@ -170,7 +169,7 @@ class LeftDrawer extends Component {
           })}
           <Divider/>
           {/*  Go to seafoodfest.org */}
-          <a className="list-link" href="https://seafoodfest.org/" target="_blank">
+          <a className="list-link" href="https://seafoodfest.org/" target="_blank" rel="noopener noreferrer">
             <ListItem classes={{root: classes.list }} className="list-item-wrapper" button>
               <ListItemText disableTypography={true} classes={{root: 'list-item-text'}} primary="Seafood Fest Org"/>
             </ListItem>

src/components/main/main.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types';
-import { isBrowser } from 'react-device-detect';
 import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
@@ -87,8 +86,7 @@ class Main extends Component {
   }
 
   render() {
-    const { classes, leftDrawerOptions } = this.props;
-    const { anchor, open } = leftDrawerOptions;
+    const { classes } = this.props;
 
     return (
       <div className={classes.root}>
@@ -104,7 +102,7 @@ class Main extends Component {
               </IconButton>
               </Hidden>
               <div className={classes.flex}>
-                <img onClick={()=>{this.resetView()}} className={classes.navLogo} src={imgNavLogo} />
+                <img alt="Reset application" onClick={()=>{this.resetView()}} className={classes.navLogo} src={imgNavLogo} />
               </div>
               <Button  onClick={()=>{toggleRightDrawer(true)}} className="vendorButton">Vendor List</Button>
             </Toolbar>

src/components/map/map.js

@@ -160,7 +160,7 @@ class Map extends Component {
    * see https://developer.mozilla.org/en-US/docs/Web/API/PositionError
    * @param error
    */
-  handleGeolocationError = (error: PositionError) => {
+  handleGeolocationError = (error) => {
 
     let message;
     switch (error.code) {
@@ -173,6 +173,8 @@ class Map extends Component {
       case error.TIMEOUT:
         message = "The request to get user location timed out.";
         break;
+      default:
+        message = "Error handling Geolocation button select."
     }
 
     findMyLocation({type: FIND_MY_LOCATION_ERROR, payload: message})

src/redux/reducer.js

@@ -3,15 +3,14 @@ import {
   SET_TAB_VALUE, SET_MAP
 } from './constants'
 import polygonData from '../data/polygons_2018'
-import { isBrowser } from 'react-device-detect';
 
 // Sort feature collection by vendor name
 const sortFeatures = (a,b) => {
   if( a.properties.name > b.properties.name) return 1;
   if( a.properties.name < b.properties.name) return -1;
 }
 
-const initialState: State = {
+const initialState = {
   polygonData: {
     ...polygonData,
     features: polygonData.features.sort(sortFeatures)