Save active pane state in redux store SuperblocksHQ#278

ostap1010 · Dec 12, 2018 · 7357749 · 7357749
1 parent 6610fae
commit 7357749
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 6 deletions.
diff --git a/src/actions/panes.actions.js b/src/actions/panes.actions.js
@@ -13,5 +13,13 @@ export const panesActions = {
             type: panesActions.REMOVE_PANE,
             data: { id }
         }
+    },
+
+    SET_ACTIVE_PANE: 'SET_ACTIVE_PANE',
+    setActivePane(id) {
+        return {
+            type: panesActions.SET_ACTIVE_PANE,
+            data: { id }
+        };
     }
 };
diff --git a/src/components/projecteditor/panes-header.js b/src/components/projecteditor/panes-header.js
@@ -42,13 +42,13 @@ export default class PanesHeader extends Component {
     getClassnames(paneData) {
         const cls = {};
         cls[style.tab] = true;
-        cls[style.selected] = paneData.id == this.props.activePaneId; // TODO: activePaneId should be in redux store
+        cls[style.selected] = paneData.active;
         return classnames(cls);
     }
 
     render() {
         const html = this.props.panes.map((paneData, index) => {
-            const iconElement = this.props.paneComponents[index].getIcon(); // paneComponent are only needed to get an icon
+            const iconElement = this.props.paneComponents[index].getIcon();
             const contextMenu = this.getContextMenuElement();
 
             return (
@@ -85,7 +85,7 @@ export default class PanesHeader extends Component {
 
 PanesHeader.propTypes = {
     panes: PropTypes.array.isRequired,
-    paneComponents: PropTypes.array.isRequired,
+    paneComponents: PropTypes.array.isRequired,  // paneComponents are only needed to get an icon. TODO: remove it as soon as possible
     closeAllPanes: PropTypes.func,
     closeAllOtherPanes: PropTypes.func,
     tabClicked: PropTypes.func,

diff --git a/src/components/projecteditor/panes.js b/src/components/projecteditor/panes.js
@@ -28,7 +28,7 @@ class Panes extends Component {
     constructor(props) {
         super(props);
         this.panes = [];
-        this.activePaneId = null;
+        this._activePaneId = null;
         props.router.register('panes', this);
     }
 
@@ -38,6 +38,15 @@ class Panes extends Component {
         });
     }
 
+    get activePaneId() {
+        return this._activePaneId;
+    }
+
+    set activePaneId(value) {
+        this._activePaneId = value;
+        this.props.setActivePane(value);
+    }
+
     addWindow = (props, paneId) => {
         var pane, newPaneWasAdded = false;
         if (paneId) {
@@ -313,7 +322,6 @@ class Panes extends Component {
                 <div key="header" id="panes_header" className={style.header}>
                     <PanesHeader
                         panes={this.props.panes}
-                        activePaneId={this.activePaneId}
                         paneComponents={this.panes}
 
                         closeAllPanes={this.closeAllPanes}
@@ -348,8 +356,11 @@ const mapDispatchToProps = (dispatch) => {
         },
         removePane: (id) => {
             dispatch(panesActions.removePane(id))
+        },
+        setActivePane: (id) => {
+            dispatch(panesActions.setActivePane(id));
         }
-    }
+    };
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(Panes);
diff --git a/src/reducers/panes.reducer.js b/src/reducers/panes.reducer.js
@@ -17,6 +17,13 @@ export default function panesReducer(state = initialState, action) {
                 ...state,
                 panes: state.panes.filter(p => p.id !== action.data.id)
             };
+        case panesActions.SET_ACTIVE_PANE: {
+            const deactivatedPanes = replaceInArray(state.panes, p => p.active, p => ({ ...p, active: false }))
+            return {
+                ...state,
+                panes: replaceInArray(deactivatedPanes, p => p.id === action.data.id, p => ({ ...p, active: true }))
+            };
+        }
         case explorerActions.RENAME_FILE: {
             return {
                 ...state,