Commit 09a3da6e authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Refactored FacilitiesMap and MapDialog to keep adhere to DRY.

parent 04151bbf
Pipeline #2190 passed with stage
in 1 minute and 42 seconds
import React from 'react'; import React from 'react';
import ReactMapboxGl, {Marker} from 'react-mapbox-gl'; import ReactMapboxGl, {Marker} from 'react-mapbox-gl';
import {withStyles} from 'material-ui/styles';
import {getMaxBounds} from '../utils/mapboxUtils'; import {getMaxBounds} from '../utils/mapboxUtils';
import MapDialog from './MapDialog'; import mapboxgl from 'mapbox-gl';
const mapboxToken = 'pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA'; const mapboxToken = 'pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA';
const Map = ReactMapboxGl({
accessToken: mapboxToken,
interactive: false,
attributionControl: false
});
const Mark = { const Mark = {
backgroundColor: '#e74c3c', backgroundColor: '#e74c3c',
borderRadius: '50%', borderRadius: '50%',
...@@ -20,39 +13,32 @@ const Mark = { ...@@ -20,39 +13,32 @@ const Mark = {
border: '3px solid #EAA29B' border: '3px solid #EAA29B'
}; };
class FacilitiesMap extends React.Component { class FacilitiesMap extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const maxBounds = getMaxBounds(props.campusRegion);
// const southWestBounds = [-77.321649, 38.823919]; //Coordinates for the south-west bound const {campusRegion, interactive = true} = this.props;
// const northEastBounds = [-77.295213, 38.835720]; //Coordinates for the north-east bound
const maxBounds = getMaxBounds(campusRegion);
const southWestBounds = maxBounds[0]; //Coordinates for the south-west bound const southWestBounds = maxBounds[0]; //Coordinates for the south-west bound
const northEastBounds = maxBounds[1]; //Coordinates for the north-east bound const northEastBounds = maxBounds[1]; //Coordinates for the north-east bound
this.Map = ReactMapboxGl({
accessToken: mapboxToken,
interactive: interactive,
attributionControl: false
});
this.state = { this.state = {
positionReady: false,
position: {
longitude: 0,
latitude: 0
},
mappedRoute: false,
fitBounds: [southWestBounds, northEastBounds], fitBounds: [southWestBounds, northEastBounds],
maxBounds: maxBounds, maxBounds: maxBounds,
fitBoundsOptions: {}, fitBoundsOptions: {}
mapDialogOpen: false
}; };
} }
handleRequestClose = () => {
this.setState({
mapDialogOpen: false
});
};
render() { render() {
const {facilities, facility, classes} = this.props; const {facilities, facility, interactive = true} = this.props;
const {fitBounds, maxBounds, fitBoundsOptions, mapDialogOpen} = this.state; const {fitBounds, maxBounds, fitBoundsOptions} = this.state;
let center, zoom; let center, zoom;
try { try {
...@@ -64,60 +50,46 @@ class FacilitiesMap extends React.Component { ...@@ -64,60 +50,46 @@ class FacilitiesMap extends React.Component {
} }
return ( return (
<div className={classes.mapContainer}> <this.Map
<Map onStyleLoad={(map) => {
animationOptions={{ if (interactive) {
animate: false map.addControl(new mapboxgl.GeolocateControl({
}} positionOptions: {
onClick={() => { enableHighAccuracy: true
this.setState({ },
mapDialogOpen: true trackUserLocation: true
}); }));
}} }
style="mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde" }}
movingMethod={'easeTo'} animationOptions={{
containerStyle={{ animate: false
height: '200px', }}
width: '380px', style="mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde"
margin: '10px', movingMethod={'easeTo'}
borderRadius: '3px', containerStyle={{
cursor: 'pointer' height: '100%',
}} width: '100%',
center={center} borderRadius: '5px',
fitBounds={fitBounds} cursor: 'pointer'
fitBoundsOptions={fitBoundsOptions} }}
zoom={zoom} center={center}
maxBounds={maxBounds}> fitBounds={fitBounds}
{(facilities.length > 0) && facilities.map((item) => { fitBoundsOptions={fitBoundsOptions}
return ( zoom={zoom}
<Marker maxBounds={maxBounds}>
key={item.slug} {(facilities.length > 0) && facilities.map((item) => {
coordinates={item.facility_location.coordinate_location.coordinates} return (
anchor="bottom"> <Marker
<div style={Mark} /> key={item.slug}
</Marker> coordinates={item.facility_location.coordinate_location.coordinates}
); anchor="bottom">
})} <div style={Mark}/>
</Map> </Marker>
<MapDialog );
open={mapDialogOpen} })}
facilities={facilities} </this.Map>
maxBounds={maxBounds}
zoom={zoom}
center={center}
onClose={this.handleRequestClose}
/>
</div>
); );
} }
} }
const styleSheet = { export default FacilitiesMap;
mapContainer: { \ No newline at end of file
transition: '250ms ease-in-out',
width: '100%'
}
};
export default withStyles(styleSheet)(FacilitiesMap);
\ No newline at end of file
...@@ -10,7 +10,6 @@ import MapDialog from './MapDialog'; ...@@ -10,7 +10,6 @@ import MapDialog from './MapDialog';
import CloseIcon from 'material-ui-icons/Close'; import CloseIcon from 'material-ui-icons/Close';
import IconButton from 'material-ui/IconButton'; import IconButton from 'material-ui/IconButton';
import LocationOnIcon from 'material-ui-icons/LocationOn'; import LocationOnIcon from 'material-ui-icons/LocationOn';
// import {getMaxBounds} from '../utils/mapboxUtils';
import {removeBrackets} from '../utils/nameUtils'; import {removeBrackets} from '../utils/nameUtils';
class FacilityDialog extends React.Component { class FacilityDialog extends React.Component {
...@@ -19,13 +18,11 @@ class FacilityDialog extends React.Component { ...@@ -19,13 +18,11 @@ class FacilityDialog extends React.Component {
super(props); super(props);
this.state = { this.state = {
isMapOpen: false, isMapOpen: false
maxBounds: props.maxBounds,
}; };
} }
toggleMap = (e) => { toggleMap = () => {
e.stopPropagation();
this.setState({ this.setState({
isMapOpen: !this.state.isMapOpen isMapOpen: !this.state.isMapOpen
}); });
...@@ -33,16 +30,8 @@ class FacilityDialog extends React.Component { ...@@ -33,16 +30,8 @@ class FacilityDialog extends React.Component {
render() { render() {
const {facility, facilities, isOpen, onClose} = this.props; const {facility, facilities, isOpen, onClose} = this.props;
const {isMapOpen, maxBounds} = this.state; const {isMapOpen} = this.state;
let mapCenter, mapZoom;
try {
mapCenter = facility.facility_location.coordinate_location.coordinates;
mapZoom = [17];
} catch (e) {
mapCenter = [(maxBounds[0][0] + maxBounds[1][0]) / 2, (maxBounds[0][1] + maxBounds[1][1]) / 2];
mapZoom = [13];
}
return ( return (
<Dialog classes={{ <Dialog classes={{
...@@ -91,9 +80,8 @@ class FacilityDialog extends React.Component { ...@@ -91,9 +80,8 @@ class FacilityDialog extends React.Component {
<MapDialog <MapDialog
open={isMapOpen} open={isMapOpen}
facilities={facilities} facilities={facilities}
maxBounds={maxBounds} facility={facility}
zoom={mapZoom} campusRegion={facility.facility_location.campus_region}
center={mapCenter}
onClose={this.toggleMap} onClose={this.toggleMap}
/> />
</Dialog> </Dialog>
......
import React from 'react'; import React from 'react';
import ReactMapboxGl, {Marker} from 'react-mapbox-gl';
import mapboxgl from 'mapbox-gl';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Dialog from 'material-ui/Dialog'; import Dialog from 'material-ui/Dialog';
import FacilitiesMap from './FacilitiesMap';
const mapboxToken = 'pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA';
const Map = ReactMapboxGl({
accessToken: mapboxToken,
attributionControl: false
});
class MapDialog extends React.Component { class MapDialog extends React.Component {
handleRequestClose = () => { handleRequestClose = () => {
...@@ -17,48 +9,21 @@ class MapDialog extends React.Component { ...@@ -17,48 +9,21 @@ class MapDialog extends React.Component {
}; };
render() { render() {
const {facilities, zoom, center, maxBounds, ...other} = this.props; const {facility, facilities, campusRegion, open} = this.props;
return ( return (
<Dialog onClose={this.handleRequestClose} {...other}> <Dialog onClose={this.handleRequestClose} open={open}>
<Map <div style={{
onStyleLoad={(map) => { height: '500px',
map.addControl(new mapboxgl.GeolocateControl({ width: '600px'
positionOptions: { }}>
enableHighAccuracy: true <FacilitiesMap
}, facilities={facilities}
trackUserLocation: true facility={facility}
})); interactive={true}
campusRegion={campusRegion}
}} />
onClick={() => { </div>
this.setState({
mapDialogOpen: true
});
}}
style="mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde"
movingMethod={'easeTo'}
containerStyle={{
height: '500px',
width: '600px',
borderRadius: '5px'
}}
center={center}
zoom={zoom}
maxBounds={maxBounds}>
{(facilities.length > 0) && facilities.map((item) => {
return (
<Marker
key={item.slug}
coordinates={item.facility_location.coordinate_location.coordinates}
anchor="bottom">
<img style={{
objectFit: 'contain'
}} height={40} width={40} src={item.logo} />
</Marker>
);
})}
</Map>
</Dialog> </Dialog>
); );
} }
......
...@@ -5,6 +5,7 @@ import Typography from 'material-ui/Typography'; ...@@ -5,6 +5,7 @@ import Typography from 'material-ui/Typography';
import Divider from 'material-ui/Divider'; import Divider from 'material-ui/Divider';
import TextwTitle from '../components/TextwTitle'; import TextwTitle from '../components/TextwTitle';
import FacilitiesMap from '../components/FacilitiesMap'; import FacilitiesMap from '../components/FacilitiesMap';
import MapDialog from '../components/MapDialog';
import classNames from 'classnames'; import classNames from 'classnames';
import WeekHours from './WeekHours'; import WeekHours from './WeekHours';
import FacilityLabels from './FacilityLabels'; import FacilityLabels from './FacilityLabels';
...@@ -13,48 +14,86 @@ import IconButton from 'material-ui/IconButton'; ...@@ -13,48 +14,86 @@ import IconButton from 'material-ui/IconButton';
import {removeBrackets} from '../utils/nameUtils'; import {removeBrackets} from '../utils/nameUtils';
import phoneFormatter from 'phone-formatter'; import phoneFormatter from 'phone-formatter';
const Sidebar = ({facility, isSidebarOpen, facilities, setSidebar, setSelectedFacility, campusRegion}) => { class Sidebar extends React.Component {
const handleSidebarClose = () => { constructor(props) {
setSelectedFacility(null); super(props);
setSidebar(false);
this.state = {
mapDialogOpen: false
};
}
handleSidebarClose = () => {
this.props.setSelectedFacility(null);
this.props.setSidebar(false);
};
handleMapDialogClose = () => {
this.setState({
mapDialogOpen: false
});
}; };
return ( render() {
<div const {facility, isSidebarOpen, facilities, campusRegion} = this.props;
className={classNames(['card-container-offset', (isSidebarOpen && 'card-container-offset-open'), (!isSidebarOpen && 'card-container-offset-closed')])}> const {mapDialogOpen} = this.state;
<meta></meta>
<Paper return (
className={classNames(['sidebar-root', (isSidebarOpen && 'sidebar-open'), (!isSidebarOpen && 'sidebar-closed')])}> <div
<IconButton className={'sidebar-close-btn'} onClick={handleSidebarClose}> className={classNames(['card-container-offset', (isSidebarOpen && 'card-container-offset-open'), (!isSidebarOpen && 'card-container-offset-closed')])}>
<CloseIcon /> <meta></meta>
</IconButton> <Paper
<div className={'sidebar-row1'}> className={classNames(['sidebar-root', (isSidebarOpen && 'sidebar-open'), (!isSidebarOpen && 'sidebar-closed')])}>
<Avatar className={'sidebar-avatar'} src={facility.logo} /> <IconButton className={'sidebar-close-btn'} onClick={this.handleSidebarClose}>
<div className={'sidebar-title'}> <CloseIcon />
<Typography type="display1">{removeBrackets(facility.facility_name)}</Typography> </IconButton>
<div className={'sidebar-row1'}>
<Avatar className={'sidebar-avatar'} src={facility.logo} />
<div className={'sidebar-title'}>
<Typography type="display1">{removeBrackets(facility.facility_name)}</Typography>
</div>
</div> </div>
</div> <Divider className={'sidebar-divider'} />
<Divider className={'sidebar-divider'} /> <div className={'sidebar-scroll'}>
<div className={'sidebar-scroll'}> <div className={'sidebar-label-holder'}>
<div className={'sidebar-label-holder'}> <TextwTitle label="Building"
<TextwTitle label="Building" content={facility.facility_location && facility.facility_location.building} />
content={facility.facility_location && facility.facility_location.building} /> <TextwTitle label="Address"
<TextwTitle label="Address" content={facility.facility_location && facility.facility_location.address} />
content={facility.facility_location && facility.facility_location.address} /> <TextwTitle label="Phone Number"
<TextwTitle label="Phone Number" content={facility.phone_number ? phoneFormatter.format(facility.phone_number, '(NNN) NNN-NNNN') : 'Unknown'} />
content={facility.phone_number ? phoneFormatter.format(facility.phone_number, "(NNN) NNN-NNNN") : 'Unknown'} /> <TextwTitle label="Labels" content={<FacilityLabels facility={facility} />} />
<TextwTitle label="Labels" content={<FacilityLabels facility={facility} />} /> <TextwTitle label="Hours" content={<WeekHours facility={facility} />} />
<TextwTitle label="Hours" content={<WeekHours facility={facility} />} /> </div>
</div> </div>
</div> <div className={'sidebar-row2'}>
<div className={'sidebar-row2'}> <div className={'sidebar-map-container'} onClick={() => {
<FacilitiesMap facilities={facilities} facility={facility} campusRegion={campusRegion} /> this.setState({
</div> mapDialogOpen: true
</Paper> });
</div> }}>
); <FacilitiesMap
}; facilities={facilities}
facility={facility}
export default Sidebar; interactive={false}
campusRegion={campusRegion}
/>
</div>
<MapDialog
open={mapDialogOpen}
facilities={facilities}
facility={facility}
campusRegion={campusRegion}
height={'500px'}
width={'600px'}
onClose={this.handleMapDialogClose}
/>
</div>
</Paper>
</div>
);
}
}
export default Sidebar;
\ No newline at end of file
...@@ -93,6 +93,14 @@ ...@@ -93,6 +93,14 @@
width: 100%; width: 100%;
} }
.sidebar-map-container {
transition: 250ms ease-in-out;
width: 100%;
height: 200px;
padding: 10px;
box-sizing: border-box;
}
.sidebar-toggle-map-btn { .sidebar-toggle-map-btn {
width: 100%; width: 100%;
} }
......
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