Skip to content

W
whats-open-web
Commit 09a3da6e authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files
Options

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
    Showing with 158 additions and 186 deletions
    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