Skip to content

Commit

Permalink
Upgrade frontend dependencies (#144)
Browse files Browse the repository at this point in the history
* Upgrade frontend dependencies

Major changes:

- react 16 => 16.2
- mapbox-gl-style-spec 9 => 11
- react-apollo 1 => 2
  - required some code changes to the middleware and import path to gql
  - https://www.apollographql.com/docs/react/2.0-migration.html
- react-mapbox-gl 2 => 3
  - required some changes to the layerOptions prop
  - https://github.com/alex3165/react-mapbox-gl/releases/tag/v3.1.0

 #143

* Remove unused dependencies and peer dependency

* Downgrade graphql to avoid test bug

Running into this issue: graphql/graphql-js#1248.

Need to wait for this PR to get merged: facebook/create-react-app#4085.

* Cleanup
  • Loading branch information
Luqmaan Dawoodjee committed Mar 1, 2018
1 parent 206035d commit 4694655
Show file tree
Hide file tree
Showing 6 changed files with 1,803 additions and 1,385 deletions.
46 changes: 24 additions & 22 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/Dashboard/LoginPage/LoginPage.js
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
40 changes: 16 additions & 24 deletions frontend/src/components/Shared/Map/CrossingMap.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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 (
Expand All @@ -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 (
Expand All @@ -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 (
Expand Down
40 changes: 19 additions & 21 deletions frontend/src/services/apolloClientService.js
Original file line number Diff line number Diff line change
@@ -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;
3 changes: 2 additions & 1 deletion frontend/src/stories/userList.js
Original file line number Diff line number Diff line change
@@ -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';

Expand Down

0 comments on commit 4694655

Please sign in to comment.