Skip to content

GitLab

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