Commit 8d7b1d5e authored by Mattias J Duffy's avatar Mattias J Duffy

Merge branch 'development' into 'master'

Matomo and Maps Hotfix

See merge request !9
parents 9142ec18 47963d0c
Pipeline #3777 passed with stage
in 1 minute and 50 seconds
# Changelog
## [2.2.1] - 2018-09-18
### Added
- Matomo Events API
### Removed
### Changed
- FacilityMap update code for better map performance
### Fixed
- Mapbox updated for beter performance on macOS
## [2.2.0] - 2018-09-05
### Added
......
......@@ -35,19 +35,19 @@
<body>
<script type="text/javascript">
/*
The following code is generated by matomo to use for analytics.
*/
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "//matomo.srct.gmu.edu/";
_paq.push(['setTrackerUrl', u + 'piwik.php']);
_paq.push(['setSiteId', '2']);
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
g.type = 'text/javascript'; g.async = true; g.defer = true; g.src = u + 'piwik.js'; s.parentNode.insertBefore(g, s);
})();
// /*
// The following code is generated by matomo to use for analytics.
// */
// var _paq = _paq || [];
// _paq.push(['trackPageView']);
// _paq.push(['enableLinkTracking']);
// (function () {
// var u = "//matomo.srct.gmu.edu/";
// _paq.push(['setTrackerUrl', u + 'piwik.php']);
// _paq.push(['setSiteId', '2']);
// var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
// g.type = 'text/javascript'; g.async = true; g.defer = true; g.src = u + 'piwik.js'; s.parentNode.insertBefore(g, s);
// })();
</script>
<noscript>
......
......@@ -29,7 +29,6 @@ class FacilitiesMap extends React.Component {
interactive: interactive,
attributionControl: false
});
const facilityLocationExists = facility && facility.facility_location && facility.facility_location.campus_region === campusRegion;
/**
......@@ -42,12 +41,22 @@ class FacilitiesMap extends React.Component {
this.state = {
maxBounds: getMaxBounds(campusRegion),
campusRegion: campusRegion,
zoom: [17],
center: facilityLocationExists ? facility.facility_location.coordinate_location.coordinates : getCenterOfCampusRegion(campusRegion),
zoom: facilityLocationExists ? [17] : [0],
fitBoundsOptions: {},
facilityLocations: [],
selectedLocation: null
selectedLocation: null,
isLoaded: false
};
// if (interactive) {
// this.state.center = facilityLocationExists ? facility.facility_location.coordinate_location.coordinates : getCenterOfCampusRegion(campusRegion);
// }else{
// setTimeout(() => {
// this.setState({
// center: facilityLocationExists ? facility.facility_location.coordinate_location.coordinates : getCenterOfCampusRegion(campusRegion)
// });
// }, 500);
// }
}
componentWillReceiveProps(nextProps) {
......@@ -68,12 +77,15 @@ class FacilitiesMap extends React.Component {
const facilityLocationExists = facility && facility.facility_location && facility.facility_location.campus_region === campusRegion;
this.setState({
const newState = {
maxBounds: getMaxBounds(campusRegion),
campusRegion: campusRegion,
center: facilityLocationExists ? facility.facility_location.coordinate_location.coordinates : getCenterOfCampusRegion(campusRegion),
zoom: facilityLocationExists ? [17] : [0]
});
zoom: [17]
};
setTimeout(() => {
this.setState(newState);
}, 100);
};
generateLocationArray = (facilities) => {
......@@ -108,14 +120,13 @@ class FacilitiesMap extends React.Component {
this.setState({
selectedLocation: oldSelectedLocation !== location ? location : null,
center: location && location.location.coordinate_location.coordinates,
zoom: oldSelectedLocation !== location ? [17] : oldZoom
zoom: [17]
});
}
render() {
const {interactive = true} = this.props;
const {maxBounds, fitBoundsOptions, facilityLocations, selectedLocation, center, zoom} = this.state;
return (
<this.Map
onStyleLoad={(map) => {
......@@ -130,7 +141,7 @@ class FacilitiesMap extends React.Component {
}}
animationOptions={{
animate: true,
duration: 1500
duration: 1250
}}
style="mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde"
movingMethod="easeTo"
......
......@@ -3,6 +3,7 @@ import FavoriteBorderIcon from 'material-ui-icons/FavoriteBorder';
import FavoriteIcon from 'material-ui-icons/Favorite';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import ReactPiwik from 'react-piwik';
class FavoriteButton extends React.Component {
......@@ -17,8 +18,10 @@ class FavoriteButton extends React.Component {
e.stopPropagation(); //Stops the card from being selected in the sidebar.
if (this.props.isFavorite) {
ReactPiwik.push(['trackEvent', 'card-action', 'un-favorite']);
this.props.removeFavoriteFacility(this.props.facility.slug);
} else {
ReactPiwik.push(['trackEvent', 'card-action', 'favorite']);
this.props.addFavoriteFacility(this.props.facility.slug);
}
};
......
......@@ -13,7 +13,7 @@ import CloseIcon from 'material-ui-icons/Close';
import IconButton from 'material-ui/IconButton';
import {removeBrackets} from '../utils/nameUtils';
import phoneFormatter from 'phone-formatter';
import ReactPiwik from 'react-piwik';
class Sidebar extends React.Component {
constructor(props) {
......@@ -30,11 +30,19 @@ class Sidebar extends React.Component {
};
handleMapDialogClose = () => {
ReactPiwik.push(['trackEvent', 'map-action', 'close']);
this.setState({
mapDialogOpen: false
});
};
handleMapDialogOpen = () => {
ReactPiwik.push(['trackEvent', 'map-action', 'open']);
this.setState({
mapDialogOpen: true
});
}
render() {
const {facility, isSidebarOpen, facilities} = this.props;
const {mapDialogOpen} = this.state;
......@@ -68,11 +76,7 @@ class Sidebar extends React.Component {
</div>
</div>
<div className={'sidebar-row2'}>
<div className={'sidebar-map-container'} onClick={() => {
this.setState({
mapDialogOpen: true
});
}}>
<div className={'sidebar-map-container'} onClick={this.handleMapDialogOpen}>
<FacilitiesMap
facilities={facilities}
facility={facility}
......
......@@ -12,6 +12,7 @@ import {removeBrackets} from '../utils/nameUtils';
import classNames from 'classnames';
import FacilityDialog from '../components/FacilityDialog';
import FacilityUtils from '../utils/facilityUtils';
import ReactPiwik from 'react-piwik';
class FacilityCard extends React.Component {
......@@ -23,6 +24,7 @@ class FacilityCard extends React.Component {
}
handleCardClick = () => {
ReactPiwik.push(['trackEvent', 'card-action', 'click']);
const isSelected = this.props.selectedFacility.slug === this.props.facility.slug;
this.props.setSelectedFacility(isSelected ? null : this.props.facility);
this.props.setSidebar(!isSelected);
......
......@@ -5,7 +5,7 @@ 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);
......
......@@ -12,6 +12,7 @@ import {MenuItem} from 'material-ui/Menu';
import Select from 'material-ui/Select';
import {FormControl} from 'material-ui/Form';
import classNames from 'classnames';
import ReactPiwik from 'react-piwik';
class SearchBar extends React.Component {
......@@ -35,6 +36,7 @@ class SearchBar extends React.Component {
};
handleRegionChange = (e) => {
ReactPiwik.push(['trackEvent', 'change-campus', e.target.value]);
this.setState({
campus: e.target.value
});
......@@ -43,6 +45,7 @@ class SearchBar extends React.Component {
};
handleFocus = () => {
ReactPiwik.push(['trackEvent', 'search-action', 'focused']);
this.setState({
isFocused: true
});
......
import React from 'react';
import ReactDOM from 'react-dom';
import ReactPiwik from 'react-piwik';
import {applyMiddleware, compose, createStore} from 'redux';
import './index.css';
import Layout from './containers/Layout';
......@@ -17,8 +18,17 @@ import '../public/manifest.json';
import '../public/favicon.png';
import '../public/apple-app-site-association';
const piwik = new ReactPiwik({
url: 'matomo.srct.gmu.edu/',
siteId: 2,
trackErrors: true,
enableLinkTracking: true,
trackDocumentTitle: true
});
// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory();
const history = piwik.connectToHistory(createHistory());
// const history = createHistory();
const extension = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
const isProduction = process.env.NODE_ENV === 'production';
......
This diff is collapsed.
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