Store opened panes in the redux store (SuperblocksHQ#278)

ostap1010 · Dec 11, 2018 · 17224cc · 17224cc
1 parent 258fa1d
commit 17224cc
Show file tree

Hide file tree

Showing 15 changed files with 102 additions and 49 deletions.
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -0,0 +1,2 @@
+export * from './panes.actions';
+export * from './projects.actions';
diff --git a/src/actions/panes.actions.js b/src/actions/panes.actions.js
@@ -0,0 +1,17 @@
+export const panesActions = {
+    ADD_PANE: 'ADD_PANE',
+    addPane(id, name) {
+        return {
+            type: panesActions.ADD_PANE,
+            data: { id, name } 
+        }
+    },
+
+    REMOVE_PANE: 'REMOVE_PANE',
+    removePane(id) {
+        return {
+            type: panesActions.REMOVE_PANE,
+            data: { id }
+        }
+    }
+};
diff --git a/src/actions/projects.actions.js b/src/actions/projects.actions.js
@@ -0,0 +1,6 @@
+export function selectProject(id, name) {
+    return {
+        type: 'SELECT_PROJECT',
+        data: { id, name }
+    };
+}
diff --git a/src/actions/projects.js b/src/actions/projects.js
diff --git a/src/actions/projects.test.js b/src/actions/projects.test.js
@@ -1,17 +1,11 @@
 import * as actions from './projects';
-import ProjectItem from '../components/projecteditor/control/item/projectItem';
-jest.mock('../components/projecteditor/control/item/projectItem'); // ProjectItem is now a mock constructor
 
 describe('actions', () => {
     it('should create an action to select the projec to open when re-loading the app', () => {
-        const projectItem = new ProjectItem();
-
         const expectedAction = {
             type: 'SELECT_PROJECT',
-            data: {
-                project: projectItem
-            },
+            data: { id: 23, name: 'test' },
         };
-        expect(actions.selectProject(projectItem)).toEqual(expectedAction);
+        expect(actions.selectProject(23, 'test')).toEqual(expectedAction);
     });
 });
diff --git a/src/actions/view.js b/src/actions/view.js
@@ -1,4 +1,3 @@
-export const closeAllPanels = () => ({ type: 'CLOSE_ALL_PANELS' });
 export const toggleTransactionsHistoryPanel = () => ({ type: 'TOGGLE_TRANSACTIONS_HISTORY_PANEL' });
 export const openTransactionsHistoryPanel = () => ({ type: 'OPEN_TRANSACTIONS_HISTORY_PANEL' });
 export const closeTransactionsHistoryPanel = () => ({ type: 'CLOSE_TRANSACTIONS_HISTORY_PANEL' });
diff --git a/src/actions/view.test.js b/src/actions/view.test.js
@@ -1,13 +1,6 @@
 import * as actions from './view';
 
 describe('actions', () => {
-    it('should create an action to close all the panels', () => {
-        const expectedAction = {
-            type: 'CLOSE_ALL_PANELS'
-        };
-        expect(actions.closeAllPanels()).toEqual(expectedAction);
-    });
-
     it('should create an action to toggle the transactions history panel', () => {
         const expectedAction = {
             type: 'TOGGLE_TRANSACTIONS_HISTORY_PANEL'

diff --git a/src/components/projecteditor/control/control.js b/src/components/projecteditor/control/control.js
@@ -166,15 +166,15 @@ export default class Control extends Component {
      * if all windows successfully closed then remove project from explorer.
      */
     _closeProject = cb => {
-        const { router, closeAllPanels } = this.props;
+        const { router, closeTransactionsHistoryPanel } = this.props;
         router.panes.closeAll(status => {
             if (status == 0) {
                 this.setState({ activeProject: null });
             }
             if (cb) cb(status);
         });
 
-        closeAllPanels();
+        closeTransactionsHistoryPanel();
     };
 
     /**
@@ -224,7 +224,7 @@ export default class Control extends Component {
      */
     _setProjectActive = project => {
         this.setState({ activeProject: project });
-        this.props.selectProject(project);
+        this.props.selectProject(project.getInode(), project.getName());
     };
 
     /**

diff --git a/src/components/projecteditor/control/index.js b/src/components/projecteditor/control/index.js
@@ -3,8 +3,8 @@ import { connect } from 'react-redux';
 import Control from './control';
 import { getAppVersion } from '../../../selectors/app';
 import { getSelectedProjectId } from '../../../selectors/projects';
-import { selectProject } from '../../../actions/projects';
-import { closeAllPanels } from '../../../actions/view';
+import { selectProject } from '../../../actions';
+import { closeTransactionsHistoryPanel } from '../../../actions/view';
 
 const mapStateToProps = state => ({
     appVersion: getAppVersion(state),
@@ -13,11 +13,11 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => {
     return {
-        selectProject: project => {
-            dispatch(selectProject(project));
+        selectProject: (id, name) => {
+            dispatch(selectProject(id, name));
         },
-        closeAllPanels: () => {
-            dispatch(closeAllPanels())
+        closeTransactionsHistoryPanel: () => {
+            dispatch(closeTransactionsHistoryPanel())
         }
     };
 };

diff --git a/src/components/projecteditor/pane.js b/src/components/projecteditor/pane.js
@@ -135,7 +135,7 @@ export class Pane {
         } else {
             this.props.parent.closePane(this.id);
         }
-        this.props.parent.redraw();
+        // this.props.parent.redraw();
     };
 
     focusWindow = (winId, rePerform, cb) => {

diff --git a/src/components/projecteditor/panes.js b/src/components/projecteditor/panes.js
@@ -15,14 +15,16 @@
 // along with Superblocks Lab.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { panesActions } from '../../actions';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import style from './style.less';
 import { Pane, PaneComponent } from './pane';
 import { IconClose } from '../icons';
 import { DropdownContainer } from '../dropdown';
 
-export default class Panes extends Component {
+class Panes extends Component {
     constructor(props) {
         super(props);
         this.panes = [];
@@ -37,7 +39,7 @@ export default class Panes extends Component {
     }
 
     addWindow = (props, paneId) => {
-        var pane;
+        var pane, newPaneWasAdded = false;
         if (paneId) {
             pane = this.getPane(paneId).pane;
         }
@@ -48,8 +50,12 @@ export default class Panes extends Component {
                 parent: this,
             });
             this.panes.unshift(pane);
+            newPaneWasAdded = true;
         }
         var winId = pane.addWindow(props);
+        if (newPaneWasAdded) {
+            this.props.addPane(pane.id, pane.getTitle()); // lifting some state to redux store
+        }
         if (winId == null) return {};
         return { pane, winId };
     };
@@ -69,6 +75,7 @@ export default class Panes extends Component {
         this.panes = this.panes.filter(pane => {
             return pane.id != id;
         });
+        this.props.removePane(id);
     };
 
     getPane = id => {
@@ -245,7 +252,9 @@ export default class Panes extends Component {
     renderHeader = () => {
         const tab = style.tab;
         const selected = style.selected;
-        const html = this.panes.map((pane, index) => {
+        const html = this.props.panes.map((paneData, index) => {
+            const pane = this.panes[index];
+
             const contextMenu = (
                 <div className={style.contextMenu}>
                     <div className={style.item} onClick={this.closeAllPanes}>
@@ -256,16 +265,17 @@ export default class Panes extends Component {
                     </div>
                 </div>
             );
-            var isSelected = pane.id == this.activePaneId;
+
+            var isSelected = paneData.id == this.activePaneId;
             const cls = {};
             cls[tab] = true;
             cls[selected] = isSelected;
             return (
                 <div key={index}>
                     <div
                         className={classnames(cls)}
-                        onMouseDown={e => this.tabClicked(e, pane.id)}
-                        onContextMenu={e => this.tabRightClicked(e, pane.id)}
+                        onMouseDown={e => this.tabClicked(e, paneData.id)}
+                        onContextMenu={e => this.tabRightClicked(e, paneData.id)}
                     >
                         <DropdownContainer
                             dropdownContent={contextMenu}
@@ -277,13 +287,13 @@ export default class Panes extends Component {
                                         {pane.getIcon()}
                                     </div>
                                     <div className={style.title2}>
-                                        {pane.getTitle()}
+                                        {paneData.name}
                                     </div>
                                 </div>
                                 <div className={style.close}>
                                     <button className="btnNoBg"
                                         onClick={ e =>
-                                            this.tabClickedClose(e, pane.id)
+                                            this.tabClickedClose(e, paneData.id)
                                         }
                                     >
                                         <IconClose />
@@ -374,3 +384,20 @@ Panes.propTypes = {
     functions: PropTypes.object.isRequired,
     isActionPanelShowing: PropTypes.bool.isRequired,
 };
+
+const mapStateToProps = state => ({
+    panes: state.panes.panes,
+});
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        addPane: (id, name) => {
+            dispatch(panesActions.addPane(id, name))
+        },
+        removePane: (id) => {
+            dispatch(panesActions.removePane(id))
+        }
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Panes);
diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -1,7 +1,8 @@
 import app from './app';
-import projects from './projects';
+import projects from './projects.reducer';
 import settings from './settings';
 import view from './view';
+import panes from './panes.reducer';
 
 const rehydrated = (state = false, action) => {
     switch (action.type) {
@@ -17,5 +18,6 @@ export default {
     app,
     settings,
     projects,
-    view
+    view,
+    panes
 };
diff --git a/src/reducers/panes.reducer.js b/src/reducers/panes.reducer.js
@@ -0,0 +1,24 @@
+import { panesActions } from '../actions'
+
+export const initialState = {
+    panes: []
+};
+
+export default function panesReducer(state = initialState, action) {
+    switch (action.type) {
+        case panesActions.ADD_PANE: {
+            return {
+                ...state,
+                panes: state.panes.concat([ { ... action.data } ])
+            };
+        }
+        case panesActions.REMOVE_PANE: {
+            return {
+                ...state,
+                panes: state.panes.filter(p => p.id !== action.data.id)
+            }
+        }
+        default:
+            return state;
+    }
+}
diff --git a/src/reducers/projects.js → src/reducers/projects.reducer.js b/src/reducers/projects.js → src/reducers/projects.reducer.js
@@ -7,10 +7,7 @@ export default function projectsReducer(state = initialState, action) {
         case 'SELECT_PROJECT': {
             return {
                 ...state,
-                selectedProject: {
-                    id: action.data.project.getInode(),
-                    name: action.data.project.getName()
-                },
+                selectedProject: { ...action.data },
             };
         }
         default:

diff --git a/src/store/index.js b/src/store/index.js
@@ -37,7 +37,7 @@ const config = {
     key: 'root',
     storage,
     version: 2,
-    blacklist: ['app', 'view'],
+    blacklist: ['app', 'view', 'panes'],
     migrate: createMigrate(migrations, { debug: true })
 };