Commit a43e65b5 authored by Mattias J Duffy's avatar Mattias J Duffy
Browse files

sidebar is now not shown when no facility seletected + map flicker reduction

parent c5c973ec
Pipeline #1857 passed with stage
in 2 minutes and 11 seconds
export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';
export const SET_SIDEBAR = 'SET_SIDEBAR';
export const TOGGLE_SIDEBAR_MAP = 'TOGGLE_SIDEBAR_MAP';
export const SET_FACILITIES = 'SET_FACILITIES';
export const GET_FACILITIES = 'GET_FACILITIES';
......
......@@ -4,13 +4,20 @@ import {
SET_SEARCH_TERM,
TOGGLE_SIDEBAR,
TOGGLE_SIDEBAR_MAP,
SET_ALL_FAVORITES, SET_SELECTED_FACILITY
SET_ALL_FAVORITES, SET_SELECTED_FACILITY, SET_SIDEBAR
} from './action-types';
export const toggleSidebar = () => ({
type: TOGGLE_SIDEBAR,
});
export const setSidebar = (setOpen) => ({
type: SET_SIDEBAR,
setOpen,
});
export const toggleSidebarMap = () => ({
type: TOGGLE_SIDEBAR_MAP,
});
......
......@@ -107,7 +107,7 @@ class FacilitiesMap extends React.Component {
zoom = [17];
}catch(e){
center = [(maxBounds[0][0]+maxBounds[1][0])/2,(maxBounds[0][1]+maxBounds[1][1])/2]
zoom=[13];
zoom=[17];
}
return(
<div className={classes.mapContainer} style={{'transform': isMapOpen ? 'translateY(0px)' : 'translateY(436px)'}}>
......@@ -120,6 +120,9 @@ class FacilitiesMap extends React.Component {
// trackUserLocation: true
// }));
}}
animationOptions={{
animate:false
}}
onClick={(map,e)=>{
this.setState({
......@@ -138,7 +141,7 @@ class FacilitiesMap extends React.Component {
}}
center={center}
zoom={zoom}
zoom={17}
fitBounds={fitBounds}
fitBoundsOptions={fitBoundsOptions}
zoom={zoom}
......@@ -149,8 +152,8 @@ class FacilitiesMap extends React.Component {
key={item.slug}
coordinates={item.facility_location.coordinate_location.coordinates}
anchor="bottom">
<img height={20} width={20} src={require('../images/starbucksSVG.svg')}/>
{/* <div style={Mark}></div> */}
{/*<img height={20} width={20} src={require('../images/starbucksSVG.svg')}/>*/}
<div style={Mark}></div>
</Marker>
)
})}
......
......@@ -39,7 +39,7 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
return (
<Paper
className={classNames(['sidebar-root', (!isSidebarOpen && 'sidebar-open'), (isSidebarOpen && 'sidebar-closed')])}>
className={classNames(['sidebar-root', (isSidebarOpen && 'sidebar-open'), (!isSidebarOpen && 'sidebar-closed')])}>
<div className={'sidebar-row1'}>
<Avatar className={'sidebar-avatar'} src={require('../images/chipotleLogo.png')}/>
<div className={'sidebar-title'}>
......
......@@ -6,7 +6,7 @@ import FacilityStatus from '../components/FacilityStatus';
import FavoriteButton from '../components/FavoriteButton';
import FacilityCategory from '../components/FacilityCategory';
import {connect} from 'react-redux';
import {addFavoriteFacility, removeFavoriteFacility, setSelectedFacility} from '../actions/ui';
import {addFavoriteFacility, removeFavoriteFacility, setSelectedFacility,setSidebar} from '../actions/ui';
import LocationOnIcon from 'material-ui-icons/LocationOn';
import {removeBrackets} from '../utils/nameUtils';
import classnames from 'classnames';
......@@ -24,6 +24,7 @@ class FacilityCard extends React.Component {
handleCardClick = () => {
const isSelected = this.props.selectedFacility.slug === this.props.facility.slug;
this.props.setSelectedFacility(isSelected ? null : this.props.facility);
this.props.setSidebar(!isSelected);
};
......@@ -101,5 +102,6 @@ const mapStateToProps = state => ({
export default connect(mapStateToProps, {
setSelectedFacility,
addFavoriteFacility,
removeFavoriteFacility
removeFavoriteFacility,
setSidebar,
})(FacilityCard);
\ No newline at end of file
......@@ -22,7 +22,6 @@ class Layout extends React.Component {
are any updates.
*/
try {
if (localStorage.getItem('facilities')) {
const facilities = localStorage.getItem('facilities');
this.props.setFacilities(facilities)
......@@ -53,16 +52,6 @@ class Layout extends React.Component {
facilities={facilities} />
</div>
</div>
<div className={'layout-sidebar-toggle-container'}>
<button onClick={toggleSidebar} className={'layout-sidebar-toggle-btn'}>
{isSidebarOpen &&
<KeyboardArrowLeft className={'layout-arrow-icon'}/>
}
{!isSidebarOpen &&
<KeyboardArrowRight className={'layout-arrow-icon'}/>
}
</button>
</div>
<Sidebar facilities={facilities} facility={selectedFacility} isSidebarOpen={isSidebarOpen}
isSidebarMapOpen={isSidebarMapOpen} toggleSidebarMap={toggleSidebarMap}/>
......
import {
TOGGLE_SIDEBAR, SET_SELECTED_FACILITY, SET_SEARCH_TERM, SET_FILTERED_LIST,
ADD_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY, SET_ALL_FAVORITES, TOGGLE_SIDEBAR_MAP
ADD_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY, SET_ALL_FAVORITES, TOGGLE_SIDEBAR_MAP, SET_SIDEBAR,
} from '../actions/action-types'
const selectedFacility = (state = {}, action) => {
......@@ -22,7 +22,11 @@ const sidebar = (state=sidebarDefault,action) => {
case TOGGLE_SIDEBAR:
return Object.assign({},state,{
isOpen:!state.isOpen
});
});
case SET_SIDEBAR:
return Object.assign({},state,{
isOpen:action.setOpen,
});
case TOGGLE_SIDEBAR_MAP:
return Object.assign({}, state, {
isMapOpen: !state.isMapOpen
......
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