Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

973 on change bug front #974

Merged
merged 2 commits into from
Mar 1, 2021
Merged

973 on change bug front #974

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
afa65e3
Added closeMenu redux method to close menu on 'on Escape clikc'
rufataliy Feb 28, 2021
8710971
Removed preventDefault which caused SearchBar onChange event not to …
rufataliy Feb 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 45 additions & 20 deletions client/components/main/shared/PersistentDrawerLeft.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import LinkIcon from '@material-ui/icons/Link';
import { connect } from 'react-redux';
import { toggleMenu as reduxToggleMenu } from '@reducers/ui';
import {
toggleMenu as reduxToggleMenu,
closeMenu as reduxCloseMenu,
} from '@reducers/ui';
import Radio from '@material-ui/core/Radio';

const drawerWidth = 275;
Expand Down Expand Up @@ -60,11 +63,13 @@ const useStyles = makeStyles(theme => ({
},
}));

const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu }) => {
const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu, closeMenu }) => {
// TODO ADD FUNCTIONALITY
const [selectedMapStyleValue, setMapStyleValue] = React.useState('Point Map');
const [selectedMapModeValue, setMapModeValue] = React.useState('Dark');
const [selectedDataColorScheme, setDataColorScheme] = React.useState('Original');
const [selectedDataColorScheme, setDataColorScheme] = React.useState(
'Original',
);
const [selectedBoundariesValue, setBoundariesValue] = React.useState('None');

const handleChangeMapStyle = event => {
Expand Down Expand Up @@ -92,16 +97,15 @@ const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu }) => {

useEffect(() => {
const escFunction = e => {
e.preventDefault();
if (e.key === 'Escape') {
toggleMenu();
closeMenu();
}
};

document.addEventListener('keypress', escFunction, false);
document.addEventListener('keyup', escFunction, false);

return () => document.removeEventListener('keypress', escFunction, false);
}, [toggleMenu]);
return () => document.removeEventListener('keyup', escFunction, false);
}, [closeMenu]);

return (
<div className={classes.root}>
Expand All @@ -117,7 +121,11 @@ const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu }) => {
>
<div className={classes.drawerHeader}>
<IconButton onClick={toggleMenu}>
{theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
{theme.direction === 'ltr' ? (
<ChevronLeftIcon />
) : (
<ChevronRightIcon />
)}
</IconButton>
</div>
<Divider />
Expand All @@ -126,7 +134,12 @@ const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu }) => {
<ListItemText primary="Map Style" />
</ListItem>
{['Point Map', 'Heat Map'].map(text => (
<ListItem className={classes.listItem} style={{ color: selectedMapStyleValue === text && '#87C8BC' }} button key={text}>
<ListItem
className={classes.listItem}
style={{ color: selectedMapStyleValue === text && '#87C8BC' }}
button
key={text}
>
<ListItemIcon>
<Radio
checked={selectedMapStyleValue === text}
Expand All @@ -142,18 +155,21 @@ const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu }) => {
))}
</List>
<Divider />
{
/**
* TODO ADD DYNAMIC LIST OF ITEMS
* ADD COLOR TO RADIO BUTTONS
*/
}
{/**
* TODO ADD DYNAMIC LIST OF ITEMS
* ADD COLOR TO RADIO BUTTONS
*/}
<List>
<ListItem key="Map Mode" className={classes.listItemTitle}>
<ListItemText primary="Map Mode" />
</ListItem>
{['Dark', 'Light', 'Street'].map(text => (
<ListItem style={{ color: selectedMapModeValue === text && '#87C8BC' }} button key={text} className={classes.listItem}>
<ListItem
style={{ color: selectedMapModeValue === text && '#87C8BC' }}
button
key={text}
className={classes.listItem}
>
<ListItemIcon>
<Radio
checked={selectedMapModeValue === text}
Expand Down Expand Up @@ -185,7 +201,9 @@ const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu }) => {
checked={selectedDataColorScheme === text}
onChange={handleChangeDataColorScheme}
value={text}
style={{ color: selectedDataColorScheme === text && '#87C8BC' }}
style={{
color: selectedDataColorScheme === text && '#87C8BC',
}}
name="radio-button"
inputProps={{ 'aria-label': text }}
/>
Expand All @@ -212,7 +230,9 @@ const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu }) => {
checked={selectedBoundariesValue === text}
onChange={handleChangeBoundaries}
value={text}
style={{ color: selectedBoundariesValue === text && '#87C8BC' }}
style={{
color: selectedBoundariesValue === text && '#87C8BC',
}}
name="radio-button"
inputProps={{ 'aria-label': text }}
/>
Expand All @@ -238,6 +258,7 @@ const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu }) => {
PersistentDrawerLeft.propTypes = {
menuIsOpen: PropTypes.bool.isRequired,
toggleMenu: PropTypes.func.isRequired,
closeMenu: PropTypes.func.isRequired,
};

const mapStateToProps = state => ({
Expand All @@ -246,6 +267,10 @@ const mapStateToProps = state => ({

const mapDispatchToProps = dispatch => ({
toggleMenu: () => dispatch(reduxToggleMenu()),
closeMenu: () => dispatch(reduxCloseMenu()),
});

export default connect(mapStateToProps, mapDispatchToProps)(PersistentDrawerLeft);
export default connect(
mapStateToProps,
mapDispatchToProps,
)(PersistentDrawerLeft);
13 changes: 13 additions & 0 deletions client/redux/reducers/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { MAP_MODES } from '@components/common/CONSTANTS';

export const types = {
TOGGLE_MENU: 'TOGGLE_MENU',
CLOSE_MENU: 'CLOSE_MENU',
SET_MENU_TAB: 'SET_MENU_TAB',
SET_ERROR_MODAL: 'SET_ERROR_MODAL',
SHOW_DATA_CHARTS: 'SHOW_DATA_CHARTS',
Expand All @@ -16,6 +17,10 @@ export const toggleMenu = () => ({
type: types.TOGGLE_MENU,
});

export const closeMenu = () => ({
type: types.CLOSE_MENU,
});

export const setMenuTab = tab => ({
type: types.SET_MENU_TAB,
payload: tab,
Expand Down Expand Up @@ -74,6 +79,14 @@ const initialState = {

export default (state = initialState, action) => {
switch (action.type) {
case types.CLOSE_MENU:
return {
...state,
menu: {
...state.menu,
isOpen: false,
},
};
case types.TOGGLE_MENU:
return {
...state,
Expand Down