Upgrade frontend dependencies

frontend/package.json

@@ -3,42 +3,44 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@mapbox/mapbox-gl-style-spec": "^9.0.1",
+    "@mapbox/mapbox-gl-style-spec": "11.1.1",
     "@mapbox/spritezero-cli": "^2.1.0",
-    "@storybook/addon-storyshots": "^3.1.9",
-    "@storybook/cli": "^3.2.9",
-    "@storybook/react": "^3.1.9",
-    "amazon-cognito-identity-js": "^1.16.0",
-    "apollo-client": "^1.9.2",
-    "aws-sdk": "^2.117.0",
+    "@storybook/addon-storyshots": "3.3.14",
+    "@storybook/cli": "3.3.14",
+    "@storybook/react": "3.3.14",
+    "apollo-cache-inmemory": "1.1.9",
+    "apollo-client": "2.2.5",
+    "apollo-link-http": "1.5.2",
     "classnames": "^2.2.5",
     "formatcoords": "^1.1.3",
     "get-graphql-schema": "^2.1.0",
+    "graphql": "0.13.0",
+    "graphql-tag": "2.8.0",
     "jwt-decode": "^2.2.0",
     "mapbox": "^1.0.0-beta9",
-    "mapbox-gl": "^0.40.0",
+    "mapbox-gl": "0.44.0",
     "mobile-detect": "^1.4.1",
-    "moment": "^2.18.1",
+    "moment": "2.20.1",
     "node-sass-chokidar": "^0.0.3",
-    "npm-run-all": "^4.0.2",
-    "prettier": "^1.10.2",
-    "prop-types": "^15.6.0",
-    "react": "^16.0.0-rc.3",
-    "react-apollo": "^1.4.2",
-    "react-autosuggest": "^9.3.3",
-    "react-container-query": "^0.9.1",
-    "react-csv": "^1.0.8",
-    "react-dom": "^16.0.0-rc.3",
+    "npm-run-all": "4.1.2",
+    "prettier": "1.11.1",
+    "prop-types": "15.6.1",
+    "react": "16.2.0",
+    "react-apollo": "2.0.4",
+    "react-autosuggest": "9.3.4",
+    "react-container-query": "0.11.0",
+    "react-csv": "1.0.12",
+    "react-dom": "16.2.0",
     "react-fontawesome": "^1.6.1",
     "react-full-screen": "^0.2.2",
-    "react-mapbox-gl": "^2.5.0",
+    "react-mapbox-gl": "3.8.0",
     "react-router-dom": "^4.1.1",
-    "react-test-renderer": "^16.0.0-rc.3",
-    "react-virtualized": "^9.12.0",
+    "react-test-renderer": "16.2.0",
+    "react-virtualized": "9.18.5",
     "storybook-addon-apollo-graphql": "^0.1.2"
   },
   "devDependencies": {
-    "react-scripts": "1.0.13"
+    "react-scripts": "1.1.1"
   },
   "scripts": {
     "start-js": "NODE_PATH=src react-scripts start",

frontend/src/components/Dashboard/LoginPage/LoginPage.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { gql, graphql } from 'react-apollo';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
 
 import 'components/Dashboard/LoginPage/LoginPage.css';
 

frontend/src/components/Shared/Map/CrossingMap.js

@@ -308,12 +308,10 @@ class CrossingMap extends React.Component {
               type="symbol"
               id="openCrossings"
               layout={{ 'icon-image': 'open', 'icon-allow-overlap': true }}
-              layerOptions={{
-                filter: [
-                  'all',
-                  ['!=', 'crossingId', this.state.selectedCrossingId],
-                ],
-              }}
+              filter={[
+                'all',
+                ['!=', 'crossingId', this.state.selectedCrossingId],
+              ]}
             >
               {openCrossings.map((crossing, i) => {
                 return (
@@ -339,12 +337,10 @@ class CrossingMap extends React.Component {
               type="symbol"
               id="longtermCrossings"
               layout={{ 'icon-image': 'longterm', 'icon-allow-overlap': true }}
-              layerOptions={{
-                filter: [
-                  'all',
-                  ['!=', 'crossingId', this.state.selectedCrossingId],
-                ],
-              }}
+              filter={[
+                'all',
+                ['!=', 'crossingId', this.state.selectedCrossingId],
+              ]}
             >
               {longtermCrossings.map((crossing, i) => {
                 return (
@@ -370,12 +366,10 @@ class CrossingMap extends React.Component {
               type="symbol"
               id="cautionCrossings"
               layout={{ 'icon-image': 'caution', 'icon-allow-overlap': true }}
-              layerOptions={{
-                filter: [
-                  'all',
-                  ['!=', 'crossingId', this.state.selectedCrossingId],
-                ],
-              }}
+              filter={[
+                'all',
+                ['!=', 'crossingId', this.state.selectedCrossingId],
+              ]}
             >
               {cautionCrossings.map((crossing, i) => {
                 return (
@@ -401,12 +395,10 @@ class CrossingMap extends React.Component {
               type="symbol"
               id="closedCrossings"
               layout={{ 'icon-image': 'closed', 'icon-allow-overlap': true }}
-              layerOptions={{
-                filter: [
-                  'all',
-                  ['!=', 'crossingId', this.state.selectedCrossingId],
-                ],
-              }}
+              filter={[
+                'all',
+                ['!=', 'crossingId', this.state.selectedCrossingId],
+              ]}
             >
               {closedCrossings.map((crossing, i) => {
                 return (

frontend/src/services/apolloClientService.js

@@ -1,33 +1,31 @@
-import ApolloClient, { createNetworkInterface } from 'apollo-client';
+import ApolloClient from 'apollo-client';
+import { ApolloLink, concat } from 'apollo-link';
+import { createHttpLink } from 'apollo-link-http';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+
 import { isTokenExpired } from './jwtHelper';
 
-const networkInterface = createNetworkInterface({
+const httpLink = createHttpLink({
   uri: process.env.REACT_APP_AWS_ENDPOINT,
 });
 
-networkInterface.use([
-  {
-    applyMiddleware(req, next) {
-      if (!req.options.headers) {
-        req.options.headers = {}; // Create the header object if needed.
-      }
+const jwtMiddleware = new ApolloLink((operation, forward) => {
+  const token = localStorage.getItem('jwt_user_token');
 
-      var token = localStorage.getItem('jwt_user_token');
+  if (token !== null && token !== 'null' && !isTokenExpired(token)) {
+    operation.setContext({
+      headers: {
+        authorization: `Bearer ${token}`,
+      },
+    });
+  }
 
-      if (token !== null && token !== 'null') {
-        if (!isTokenExpired(token)) {
-          req.options.headers.Authorization = `Bearer ${token}`;
-        } else {
-          req.options.headers = {};
-        }
-      }
-      next();
-    },
-  },
-]);
+  return forward(operation);
+});
 
 const client = new ApolloClient({
-  networkInterface,
+  link: concat(jwtMiddleware, httpLink),
+  cache: new InMemoryCache(),
 });
 
 export default client;

frontend/src/stories/userList.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withApolloProvider } from 'storybook-addon-apollo-graphql';
-import { gql, graphql } from 'react-apollo';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
 import UserList from 'components/Dashboard/ManageUsersPage/UserList';
 import schema from 'stories/schema/schema';