Commit 55875b3f authored by Andrew Hrdy's avatar Andrew Hrdy

Update to React 16

Performance is very poor, probably because older version of material-ui.
parent aef8cb0a
Pipeline #3105 passed with stage
in 1 minute and 40 seconds
......@@ -128,7 +128,6 @@
"react/no-typos": "warn",
"react/jsx-indent": "error",
"react/jsx-pascal-case": "error",
"react/jsx-wrap-multilines": "warn",
"react/no-deprecated": "off"
"react/jsx-wrap-multilines": "warn"
}
}
\ No newline at end of file
......@@ -3178,16 +3178,6 @@
"sha.js": "^2.4.8"
}
},
"create-react-class": {
"version": "15.6.3",
"resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
"integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
"requires": {
"fbjs": "^0.8.9",
"loose-envify": "^1.3.1",
"object-assign": "^4.1.1"
}
},
"cross-spawn": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
......@@ -8611,6 +8601,11 @@
}
}
},
"memoize-one": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-4.0.2.tgz",
"integrity": "sha512-ucx2DmXTeZTsS4GPPUZCbULAN7kdPT1G+H49Y34JjbQ5ESc6OGhVxKvb1iKhr9v19ZB9OtnHwNnhUnNR/7Wteg=="
},
"memory-fs": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
......@@ -11394,7 +11389,7 @@
"dependencies": {
"minimist": {
"version": "1.2.0",
"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
}
}
......@@ -11522,15 +11517,25 @@
}
},
"react": {
"version": "15.6.2",
"resolved": "https://registry.npmjs.org/react/-/react-15.6.2.tgz",
"integrity": "sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=",
"version": "16.5.2",
"resolved": "https://registry.npmjs.org/react/-/react-16.5.2.tgz",
"integrity": "sha512-FDCSVd3DjVTmbEAjUNX6FgfAmQ+ypJfHUsqUJOYNCBUp1h8lqmtC+0mXJ+JjsWx4KAVTkk1vKd1hLQPvEviSuw==",
"requires": {
"create-react-class": "^15.6.0",
"fbjs": "^0.8.9",
"loose-envify": "^1.1.0",
"object-assign": "^4.1.0",
"prop-types": "^15.5.10"
"object-assign": "^4.1.1",
"prop-types": "^15.6.2",
"schedule": "^0.5.0"
},
"dependencies": {
"prop-types": {
"version": "15.6.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
"integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
"requires": {
"loose-envify": "^1.3.1",
"object-assign": "^4.1.1"
}
}
}
},
"react-addons-perf": {
......@@ -11572,14 +11577,25 @@
}
},
"react-dom": {
"version": "15.6.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.2.tgz",
"integrity": "sha1-Qc+t9pO3V/rycIRDodH9WgK+9zA=",
"version": "16.5.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.5.2.tgz",
"integrity": "sha512-RC8LDw8feuZOHVgzEf7f+cxBr/DnKdqp56VU0lAs1f4UfKc4cU8wU4fTq/mgnvynLQo8OtlPC19NUFh/zjZPuA==",
"requires": {
"fbjs": "^0.8.9",
"loose-envify": "^1.1.0",
"object-assign": "^4.1.0",
"prop-types": "^15.5.10"
"object-assign": "^4.1.1",
"prop-types": "^15.6.2",
"schedule": "^0.5.0"
},
"dependencies": {
"prop-types": {
"version": "15.6.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
"integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
"requires": {
"loose-envify": "^1.3.1",
"object-assign": "^4.1.1"
}
}
}
},
"react-event-listener": {
......@@ -11659,30 +11675,50 @@
}
},
"react-router": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.2.0.tgz",
"integrity": "sha512-DY6pjwRhdARE4TDw7XjxjZsbx9lKmIcyZoZ+SDO7SBJ1KUeWNxT22Kara2AC7u6/c2SYEHlEDLnzBCcNhLE8Vg==",
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
"integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==",
"requires": {
"history": "^4.7.2",
"hoist-non-react-statics": "^2.3.0",
"invariant": "^2.2.2",
"hoist-non-react-statics": "^2.5.0",
"invariant": "^2.2.4",
"loose-envify": "^1.3.1",
"path-to-regexp": "^1.7.0",
"prop-types": "^15.5.4",
"warning": "^3.0.0"
"prop-types": "^15.6.1",
"warning": "^4.0.1"
},
"dependencies": {
"warning": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
"integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
"requires": {
"loose-envify": "^1.0.0"
}
}
}
},
"react-router-dom": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.2.2.tgz",
"integrity": "sha512-cHMFC1ZoLDfEaMFoKTjN7fry/oczMgRt5BKfMAkTu5zEuJvUiPp1J8d0eXSVTnBh6pxlbdqDhozunOOLtmKfPA==",
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
"integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
"requires": {
"history": "^4.7.2",
"invariant": "^2.2.2",
"invariant": "^2.2.4",
"loose-envify": "^1.3.1",
"prop-types": "^15.5.4",
"react-router": "^4.2.0",
"warning": "^3.0.0"
"prop-types": "^15.6.1",
"react-router": "^4.3.1",
"warning": "^4.0.1"
},
"dependencies": {
"warning": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
"integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
"requires": {
"loose-envify": "^1.0.0"
}
}
}
},
"react-router-redux": {
......@@ -11911,14 +11947,19 @@
}
},
"redux": {
"version": "3.7.2",
"resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz",
"integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==",
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.0.0.tgz",
"integrity": "sha512-NnnHF0h0WVE/hXyrB6OlX67LYRuaf/rJcbWvnHHEPCF/Xa/AZpwhs/20WyqzQae5x4SD2F9nPObgBh2rxAgLiA==",
"requires": {
"lodash": "^4.2.1",
"lodash-es": "^4.2.1",
"loose-envify": "^1.1.0",
"symbol-observable": "^1.0.3"
"symbol-observable": "^1.2.0"
},
"dependencies": {
"symbol-observable": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
"integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
}
}
},
"redux-thunk": {
......@@ -12357,6 +12398,14 @@
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
"dev": true
},
"schedule": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/schedule/-/schedule-0.5.0.tgz",
"integrity": "sha512-HUcJicG5Ou8xfR//c2rPT0lPIRR09vVvN81T9fqfVgBmhERUbDEQoYKjpBxbueJnCPpSu2ujXzOnRQt6x9o/jw==",
"requires": {
"object-assign": "^4.1.1"
}
},
"schema-utils": {
"version": "0.4.5",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz",
......
......@@ -7,6 +7,7 @@ import {getMaxBounds, getCenterOfCampusRegion} from '../utils/mapboxUtils';
import mapboxgl from 'mapbox-gl';
import {Typography} from 'material-ui';
import {removeBrackets} from '../utils/nameUtils';
import memoize from 'memoize-one';
const mapboxToken = 'pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA';
......@@ -21,15 +22,15 @@ const Mark = {
class FacilitiesMap extends React.Component {
constructor(props) {
super(props);
const {facility, interactive = true} = this.props;
const campusRegion = facility && facility.facility_location ? facility.facility_location.campus_region : 'fairfax';
const {interactive = true} = this.props;
//const campusRegion = facility && facility.facility_location ? facility.facility_location.campus_region : 'fairfax';
this.Map = ReactMapboxGl({
accessToken: mapboxToken,
interactive: interactive,
attributionControl: false
});
const facilityLocationExists = facility && facility.facility_location && facility.facility_location.campus_region === campusRegion;
//const facilityLocationExists = facility && facility.facility_location && facility.facility_location.campus_region === campusRegion;
/**
* facilityLocations is an array of the type:
......@@ -39,15 +40,15 @@ class FacilitiesMap extends React.Component {
* }
*/
this.state = {
maxBounds: getMaxBounds(campusRegion),
campusRegion: campusRegion,
zoom: [17],
center: facilityLocationExists ? facility.facility_location.coordinate_location.coordinates : getCenterOfCampusRegion(campusRegion),
//maxBounds: getMaxBounds(campusRegion),
//campusRegion: campusRegion,
//zoom: [17],
//center: facilityLocationExists ? facility.facility_location.coordinate_location.coordinates : getCenterOfCampusRegion(campusRegion),
fitBoundsOptions: {},
facilityLocations: [],
selectedLocation: null,
isLoaded: false
};
// if (interactive) {
// this.state.center = facilityLocationExists ? facility.facility_location.coordinate_location.coordinates : getCenterOfCampusRegion(campusRegion);
// }else{
......@@ -59,18 +60,7 @@ class FacilitiesMap extends React.Component {
// }
}
componentWillReceiveProps(nextProps) {
const {facility, facilities} = nextProps;
const campusRegion = facility && facility.facility_location ? facility.facility_location.campus_region : 'fairfax';
this.changeRegion(campusRegion, facility);
if (this.state.facilityLocations.length === 0) {
this.generateLocationArray(facilities);
}
}
changeRegion = (campusRegion, facility) => {
/*changeRegion = (campusRegion, facility) => {
if (!facility) {
facility = this.props.facility;
}
......@@ -86,9 +76,9 @@ class FacilitiesMap extends React.Component {
setTimeout(() => {
this.setState(newState);
}, 100);
};
};*/
generateLocationArray = (facilities) => {
getLocationArray = memoize((facilities) => {
const locations = [];
facilities.forEach((facility) => {
......@@ -103,10 +93,8 @@ class FacilitiesMap extends React.Component {
}
});
this.setState({
facilityLocations: locations
});
}
return locations;
});
selectLocation = (location) => {
const {interactive = true} = this.props;
......@@ -125,8 +113,19 @@ class FacilitiesMap extends React.Component {
}
render() {
const {interactive = true} = this.props;
const {maxBounds, fitBoundsOptions, facilityLocations, selectedLocation, center, zoom} = this.state;
const {interactive = true, facility, facilities} = this.props;
const {fitBoundsOptions, selectedLocation} = this.state;
const facilityLocations = this.getLocationArray(facilities);
const campusRegion = facility && facility.facility_location ? facility.facility_location.campus_region : 'fairfax';
const facilityLocationExists = facility && facility.facility_location && facility.facility_location.campus_region === campusRegion;
const maxBounds = getMaxBounds(campusRegion);
const center = facilityLocationExists ? facility.facility_location.coordinate_location.coordinates : getCenterOfCampusRegion(campusRegion);
const zoom = [17];
return (
<this.Map
onStyleLoad={(map) => {
......
......@@ -24,11 +24,11 @@ class FavoriteButton extends React.Component {
ReactPiwik.push(['trackEvent', 'card-action', 'un-favorite']);
setTimeout(() => {
this.props.removeFavoriteFacility(this.props.slug);
},0);
}, 0);
} else {
setTimeout(() => {
this.props.addFavoriteFacility(this.props.slug);
},0);
}, 0);
ReactPiwik.push(['trackEvent', 'card-action', 'favorite']);
}
};
......
......@@ -8,7 +8,6 @@ import FacilitiesMap from '../components/FacilitiesMap';
import MapDialog from '../components/MapDialog';
import classNames from 'classnames';
import WeekHours from './WeekHours';
import FacilityLabels from './FacilityLabels';
import CloseIcon from 'material-ui-icons/Close';
import IconButton from 'material-ui/IconButton';
import {removeBrackets} from '../utils/nameUtils';
......
......@@ -13,18 +13,17 @@ import classNames from 'classnames';
import FacilityDialog from '../components/FacilityDialog';
import FacilityUtils from '../utils/facilityUtils';
import ReactPiwik from 'react-piwik';
import Perf from 'react-addons-perf';
class FacilityCard extends React.Component {
constructor(props) {
super(props);
this.state = {
modified: null,
modified: null
};
}
shouldComponentUpdate = (nextProps, nextState) => {
shouldComponentUpdate = (nextProps) => {
if (this.props.isSelected !== nextProps.isSelected) {
return true;
......
......@@ -5,18 +5,16 @@ import Sidebar from '../components/Sidebar';
import {getAlerts, getFacilities, setAlerts, setFacilities, sortFacilityCards} from '../actions/api';
import {setSidebar, setSelectedFacility, setAllFavorites} from '../actions/ui';
import CardContainer from '../components/CardContainer';
import ReactPiwik from 'react-piwik';
class Layout extends React.Component {
constructor(props) {
super(props);
}
componentWillMount = () => {
/*
This is done in order to immediately load the page (retrieving from local storage is faster
than an API call). After retrieving from local storage, then call the API to see if there
are any updates.
*/
*/
try {
if (localStorage.getItem('facilities')) {
const facilities = localStorage.getItem('facilities');
......@@ -34,7 +32,27 @@ class Layout extends React.Component {
this.props.getFacilities();
this.props.getAlerts();
};
}
/**componentWillMount = () => {
try {
if (localStorage.getItem('facilities')) {
const facilities = localStorage.getItem('facilities');
this.props.setFacilities(facilities);
}
if (localStorage.getItem('favorites')) {
const favorites = JSON.parse(localStorage.getItem('favorites'));
this.props.setAllFavorites(favorites);
}
this.props.sortFacilityCards();
} catch (e) {
console.warn('you should enable cookies so we can remember what places you favorite');
}
this.props.getFacilities();
this.props.getAlerts();
};**/
render() {
const {isSidebarOpen, selectedFacility, facilities, searchTerm, campusRegion, setSidebar, setSelectedFacility} = this.props;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment