refactor SidePanel, update Quit component

Author: ShMcK

lib/actions.js

@@ -30,3 +30,4 @@ exports.editorSave = core_coderoad_1.editorSave;
 exports.editorSet = core_coderoad_1.editorSet;
 exports.routeSet = core_coderoad_1.routeSet;
 exports.windowToggle = core_coderoad_1.windowToggle;
+exports.quit = core_coderoad_1.quit;

lib/components/Alert/index.js

@@ -1,11 +1,41 @@
 "use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 var React = require('react');
-var subscriptions_1 = require('../../../subscriptions');
+var react_redux_1 = require('react-redux');
 var MenuItem_1 = require('material-ui/MenuItem');
+var actions_1 = require('../../../actions');
 var styles = {
-    textAlign: 'center',
-    padding: '0px 2px',
+    menuItem: {
+        textAlign: 'center',
+        padding: '0px 2px',
+    },
 };
-var Quit = function () { return (React.createElement(MenuItem_1.default, {style: styles, key: 'quit', onClick: subscriptions_1.onDeactivate}, "quit")); };
+var Quit = (function (_super) {
+    __extends(Quit, _super);
+    function Quit() {
+        _super.apply(this, arguments);
+    }
+    Quit.prototype.render = function () {
+        return (React.createElement(MenuItem_1.default, {style: styles.menuItem, key: 'quit', onClick: this.props.quit}, "quit"));
+    };
+    Quit = __decorate([
+        react_redux_1.connect(null, { quit: actions_1.quit }), 
+        __metadata('design:paramtypes', [])
+    ], Quit);
+    return Quit;
+}(React.Component));
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Quit;

lib/components/AppMenu/Quit/index.js

@@ -0,0 +1,5 @@
+"use strict";
+var SideRoot_1 = require('./SideRoot');
+exports.SideRoot = SideRoot_1.default;
+var sideElement_1 = require('./sideElement');
+exports.sideElement = sideElement_1.default;

lib/components/SidePanel/root.js renamed to lib/components/SidePanel/SideRoot.js

@@ -1,6 +1,6 @@
 "use strict";
 var ReactDOM = require('react-dom');
-var sidePanelElement = {
+var sideElement = {
     root: null,
     init: function () {
         this.root = document.createElement('div');
@@ -12,4 +12,4 @@ var sidePanelElement = {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = sidePanelElement;
+exports.default = sideElement;

lib/components/SidePanel/index.js

@@ -1,6 +1,6 @@
 "use strict";
-var render_1 = require('./components/render');
-var element_1 = require('./components/SidePanel/element');
+var ReactDOM = require('react-dom');
+var SidePanel_1 = require('./components/SidePanel');
 var core_coderoad_1 = require('core-coderoad');
 var subscriptions_1 = require('./subscriptions');
 var store_1 = require('./store');
@@ -11,15 +11,15 @@ var Main = (function () {
         injectTapEventPlugin();
         core_coderoad_1.loadPolyfills();
         store_1.default.dispatch(setup_1.setupVerify());
-        this.root = element_1.default.init();
+        this.side = SidePanel_1.sideElement.init();
     }
     Main.prototype.activate = function () {
         atom.workspace.addRightPanel({
-            item: this.root,
+            item: this.side,
             priority: 0,
         });
-        subscriptions_1.onActivate();
-        render_1.default(this.root);
+        subscriptions_1.onActivate(store_1.default);
+        ReactDOM.render(SidePanel_1.SideRoot(store_1.default), this.side);
     };
     Main.prototype.consumeStatusBar = function (statusBar) {
         this.statusBarTile = subscriptions_1.addToStatusBar(statusBar);
@@ -29,7 +29,8 @@ var Main = (function () {
             this.statusBarTile.destroy();
             this.statusBarTile = null;
         }
-        subscriptions_1.onDeactivate();
+        subscriptions_1.onDeactivate(store_1.default);
+        SidePanel_1.sideElement.unmount();
     };
     return Main;
 }());

lib/components/SidePanel/element.js renamed to lib/components/SidePanel/sideElement.js

@@ -1,23 +1,21 @@
 "use strict";
-var CompositeDisposable = require('atom').CompositeDisposable;
+var atom_1 = require('atom');
 var store_1 = require('./store');
 var actions_1 = require('./actions');
-var element_1 = require('./components/SidePanel/element');
 var subscriptions = null;
-function onActivate() {
-    subscriptions = new CompositeDisposable;
+function onActivate(store) {
+    subscriptions = new atom_1.CompositeDisposable;
     subscriptions.add(atom.commands.add('atom-workspace', {
-        'cr-viewer:toggle': function () { return store_1.default.dispatch({ type: 'WINDOW_TOGGLE' }); }
+        'cr-viewer:toggle': function () { return store.dispatch(actions_1.windowToggle()); }
     }));
     atom.workspace.observeTextEditors(function (editor) {
-        subscriptions.add(editor.onDidSave(function () { return store_1.default.dispatch(actions_1.testRun()); }));
+        subscriptions.add(editor.onDidSave(function () { return store.dispatch(actions_1.testRun()); }));
     });
     return subscriptions;
 }
 exports.onActivate = onActivate;
-function onDeactivate() {
-    element_1.default.unmount();
-    store_1.default.subscribe(function () { return null; });
+function onDeactivate(store) {
+    store.subscribe(function () { return null; });
     subscriptions.dispose();
 }
 exports.onDeactivate = onDeactivate;

lib/components/common/Markdown.js

@@ -11,5 +11,5 @@ export {
   editorDevToolsToggle, editorOpen, editorInsert,
   editorSave, editorSet,
   routeSet,
-  windowToggle
+  windowToggle, quit
 } from 'core-coderoad';

lib/components/remove-later.js

@@ -1,21 +1,28 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
-import {quit} from 'core-coderoad';
-import {onDeactivate} from '../../../subscriptions';
 import MenuItem from 'material-ui/MenuItem';
+import {quit} from '../../../actions';
 
 const styles = {
-  textAlign: 'center',
-  padding: '0px 2px',
+    menuItem: {
+    textAlign: 'center',
+    padding: '0px 2px',
+  },
 };
 
-const Quit = () => (
-  <MenuItem
-    style={styles}
-    key='quit'
-    onClick={onDeactivate}
-  >
-    quit
-  </MenuItem>
-);
-export default Quit;
+@connect(null, {quit})
+export default class Quit extends React.Component<{
+  quit?: () => Redux.ActionCreator
+}, {}> {
+  render() {
+    return (
+      <MenuItem
+        style={styles.menuItem}
+        key='quit'
+        onClick={this.props.quit}
+      >
+        quit
+      </MenuItem>
+    );
+  }
+}

lib/components/render.js

@@ -0,0 +1,2 @@
+export {default as SideRoot} from './SideRoot';
+export {default as sideElement} from './sideElement';

lib/index.js

@@ -1,6 +1,6 @@
 import * as ReactDOM from 'react-dom';
 
-const sidePanelElement = {
+const sideElement = {
   root: null,
   init() {
     this.root = document.createElement('div');
@@ -11,4 +11,4 @@ const sidePanelElement = {
     ReactDOM.unmountComponentAtNode(this.root);
   }
 };
-export default sidePanelElement;
+export default sideElement;

lib/subscriptions.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import sidePanelElement from './components/SidePanel/element';
-import sidePanelRoot from './components/SidePanel/root';
+import * as ReactDOM from 'react-dom';
+import {sideElement, SideRoot} from './components/SidePanel';
 import {loadPolyfills, render} from 'core-coderoad';
 import {onActivate, onDeactivate, addToStatusBar} from './subscriptions';
 // activate Redux
@@ -9,24 +9,27 @@ import {setupVerify} from './modules/setup';
 import * as injectTapEventPlugin from 'react-tap-event-plugin';
 
 class Main {
-  root: HTMLElement;
+  side: HTMLElement;
   statusBarTile: StatusBar.IStatusBarView;
   constructor() {
     injectTapEventPlugin(); // remove later
     loadPolyfills();
     // run startup checks
     store.dispatch(setupVerify());
-    this.root = sidePanelElement.init();
+    this.side = sideElement.init();
   }
   activate(): void {
     // create atom panel
     atom.workspace.addRightPanel({
-      item: this.root,
+      item: this.side,
       priority: 0,
     });
-    onActivate();
+
+    // activate subscriptions
+    onActivate(store);
+
     // render React component
-    render(this.root, sidePanelRoot(store));
+    ReactDOM.render(SideRoot(store), this.side);
   }
   consumeStatusBar(statusBar) {
     this.statusBarTile = addToStatusBar(statusBar);
@@ -38,7 +41,9 @@ class Main {
       this.statusBarTile = null;
     }
     // remove subscriptions & unmount react app
-    onDeactivate();
+    onDeactivate(store);
+    // unmount React
+    sideElement.unmount();
   }
 };
 export = new Main();

src/actions.ts

@@ -1,17 +1,16 @@
-const CompositeDisposable = require('atom').CompositeDisposable;
+import {CompositeDisposable} from 'atom';
 import store from './store';
-import {testRun, alertReplay} from './actions';
-import sidePanelElement from './components/SidePanel/element';
+import {testRun, alertReplay, windowToggle} from './actions';
 
 let subscriptions = null;
 
-export function onActivate(): AtomCore.Disposable {
+export function onActivate(store: Redux.Store): AtomCore.Disposable {
   // Atom Listeners
   subscriptions = new CompositeDisposable;
 
   subscriptions.add(
     atom.commands.add('atom-workspace', {
-      'cr-viewer:toggle': () => store.dispatch({ type: 'WINDOW_TOGGLE'})
+      'cr-viewer:toggle': () => store.dispatch(windowToggle())
     })
   );
 
@@ -23,9 +22,7 @@ export function onActivate(): AtomCore.Disposable {
   return subscriptions;
 }
 
-export function onDeactivate(): void {
-  // unmount React
-  sidePanelElement.unmount();
+export function onDeactivate(store: Redux.Store): void {
   // unsubscribe from Redux store
   store.subscribe(() => null);
   // cleanup subscriptions