From 7357749de70d97fded9834e7f9cc7cf39b278d74 Mon Sep 17 00:00:00 2001
From: unknown <ostap@superblocks.com>
Date: Wed, 12 Dec 2018 11:55:32 +0100
Subject: [PATCH] Save active pane state in redux store #278

---
 src/actions/panes.actions.js                 |  8 ++++++++
 src/components/projecteditor/panes-header.js |  6 +++---
 src/components/projecteditor/panes.js        | 17 ++++++++++++++---
 src/reducers/panes.reducer.js                |  7 +++++++
 4 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/actions/panes.actions.js b/src/actions/panes.actions.js
index 4aa21310..48517628 100644
--- 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
index 365c5f24..c55c8562 100644
--- 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
index 1eee338e..55aa38dc 100644
--- 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);
\ No newline at end of file
diff --git a/src/reducers/panes.reducer.js b/src/reducers/panes.reducer.js
index 2c556763..f10d20a7 100644
--- 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,