feat: keep drawer state

keeps drawer state

closes #277

Author: hasanagh

src/actions/layout.js

@@ -1,18 +1,23 @@
 import { MAX_APP_HEIGHT, MIN_APP_HEIGHT } from '../config/layout';
 import { RADIX } from '../config/constants';
-import { OPEN_TOOLS, CLOSE_TOOLS, SET_TOOLS_WIDTH } from '../types';
+import {
+  OPEN_TOOLS,
+  CLOSE_TOOLS,
+  SET_TOOLS_WIDTH,
+  SET_SIDE_BAR_IS_OPEN,
+} from '../types';
 
-const openTools = () => dispatch =>
+const openTools = () => (dispatch) =>
   dispatch({
     type: OPEN_TOOLS,
   });
 
-const closeTools = () => dispatch =>
+const closeTools = () => (dispatch) =>
   dispatch({
     type: CLOSE_TOOLS,
   });
 
-const setToolsWidth = ({ width }) => dispatch =>
+const setToolsWidth = ({ width }) => (dispatch) =>
   dispatch({
     type: SET_TOOLS_WIDTH,
     payload: width,
@@ -26,12 +31,25 @@ const setHeight = (id, height) => {
   localStorage.setItem(id, String(heightToSave));
 };
 
-const getHeight = id => {
+const getHeight = (id) => {
   const height = localStorage.getItem(id);
   if (height) {
     return parseInt(height, RADIX);
   }
   return null;
 };
 
-export { setHeight, getHeight, openTools, closeTools, setToolsWidth };
+const setSideBarIsOpen = (state) => (dispatch) =>
+  dispatch({
+    type: SET_SIDE_BAR_IS_OPEN,
+    payload: state,
+  });
+
+export {
+  setHeight,
+  getHeight,
+  openTools,
+  closeTools,
+  setToolsWidth,
+  setSideBarIsOpen,
+};

src/components/common/Main.js

@@ -8,12 +8,9 @@ import { connect } from 'react-redux';
 import Styles from '../../Styles';
 import Header from './Header';
 import Sidebar from './Sidebar';
+import { setSideBarIsOpen } from '../../actions';
 
 class Main extends Component {
-  state = {
-    open: false,
-  };
-
   static propTypes = {
     classes: PropTypes.shape({
       appBar: PropTypes.string.isRequired,
@@ -42,6 +39,8 @@ class Main extends Component {
     }),
     showSearch: PropTypes.bool,
     handleOnSearch: PropTypes.func,
+    dispatchSetSideBarIsOpen: PropTypes.func.isRequired,
+    open: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -50,14 +49,17 @@ class Main extends Component {
     handleOnSearch: () => {},
     id: null,
     style: {},
+    open: false,
   };
 
   handleDrawerOpen = () => {
-    this.setState({ open: true });
+    const { dispatchSetSideBarIsOpen } = this.props;
+    dispatchSetSideBarIsOpen(true);
   };
 
   handleDrawerClose = () => {
-    this.setState({ open: false });
+    const { dispatchSetSideBarIsOpen } = this.props;
+    dispatchSetSideBarIsOpen(false);
   };
 
   render() {
@@ -69,8 +71,8 @@ class Main extends Component {
       style,
       showSearch,
       handleOnSearch,
+      open,
     } = this.props;
-    const { open } = this.state;
 
     return (
       <div className={classes.root} style={style}>
@@ -102,11 +104,14 @@ class Main extends Component {
   }
 }
 
-const mapStateToProps = ({ authentication }) => ({
+const mapStateToProps = ({ authentication, layout }) => ({
   activity: Boolean(authentication.getIn(['current', 'activity']).size),
+  open: layout.getIn(['sideBarState', 'open']),
 });
 
-const mapDispatchToProps = {};
+const mapDispatchToProps = {
+  dispatchSetSideBarIsOpen: setSideBarIsOpen,
+};
 
 const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Main);
 

src/reducers/layout.js

@@ -1,5 +1,10 @@
 import { Map } from 'immutable';
-import { OPEN_TOOLS, CLOSE_TOOLS, SET_TOOLS_WIDTH } from '../types';
+import {
+  OPEN_TOOLS,
+  CLOSE_TOOLS,
+  SET_TOOLS_WIDTH,
+  SET_SIDE_BAR_IS_OPEN,
+} from '../types';
 import { DEFAULT_TOOLS_WIDTH } from '../config/layout';
 
 const INITIAL_STATE = Map({
@@ -17,6 +22,8 @@ export default (state = INITIAL_STATE, { type, payload }) => {
       return state.setIn(['tools', 'open'], false);
     case SET_TOOLS_WIDTH:
       return state.setIn(['tools', 'width'], payload);
+    case SET_SIDE_BAR_IS_OPEN:
+      return state.setIn(['sideBarState', 'open'], payload);
     default:
       return state;
   }

src/types/layout.js

@@ -2,3 +2,4 @@
 export const OPEN_TOOLS = 'OPEN_TOOLS';
 export const CLOSE_TOOLS = 'CLOSE_TOOLS';
 export const SET_TOOLS_WIDTH = 'SET_TOOLS_WIDTH';
+export const SET_SIDE_BAR_IS_OPEN = 'SET_SIDE_BAR_IS_OPEN';