Merge pull request #314 from parallaxinc/router

Router

Author: phated

client.js

@@ -2,6 +2,21 @@
 
 const _ = require('lodash');
 const Irken = require('irken');
+const React = require('react');
+const { Router, Route, History, Link } = require('react-router');
+const memoryHistory = require('./src/lib/history');
+
+const Layout = require('./src/views/layout');
+const HelpOverlay = require('./src/views/help-overlay');
+const SaveOverlay = require('./src/views/save-overlay');
+const NewVersionOverlay = require('./src/views/new-version-overlay');
+const ProjectOverlay = require('./src/views/project-overlay');
+const DownloadOverlay = require('./src/views/download-overlay');
+const OverwriteOverlay = require('./src/views/overwrite-overlay');
+const DeleteFileOverlay = require('./src/views/delete-file-overlay');
+const DeleteProjectOverlay = require('./src/views/delete-project-overlay');
+
+const store = require('./src/store');
 
 const app = new Irken();
 
@@ -25,9 +40,6 @@ const plugins = [
   {
     register: require('snacks')
   },
-  {
-    register: require('holovisor')
-  },
   {
     register: require('skrim')
   },
@@ -47,24 +59,9 @@ const plugins = [
   {
     register: require('./src/plugins/keyboard-shortcuts')
   },
-  {
-    register: require('./src/plugins/appbar')
-  },
   {
     register: require('./src/plugins/notifications')
   },
-  {
-    register: require('./src/plugins/editor')
-  },
-  {
-    register: require('./src/plugins/terminal')
-  },
-  {
-    register: require('./src/plugins/rxtx')
-  },
-  {
-    register: require('./src/plugins/sidebar')
-  },
   {
     register: require('./src/plugins/overlays')
   }
@@ -114,15 +111,44 @@ function onRender(err){
 
 function onRegister(err){
   console.log('registered', err, app);
+  const addMountpoint = app.addMountpoint.bind(app);
+  const removeMountpoint = app.removeMountpoint.bind(app);
+  const { workspace, handlers } = app;
 
   if(err){
     return;
   }
 
-  app.render(onRender);
+  const RouterLayout = React.createClass({
+    render() {
+      console.log('render layout', this.props);
+      return (<Layout addMountpoint={addMountpoint} removeMountpoint={removeMountpoint} app={app}>
+        {this.props.children && React.cloneElement(this.props.children, { handlers, workspace, store })}
+        </Layout>
+      );
+    }
+  });
+
+  const Component = (
+    <Router history={memoryHistory}>
+      <Route path="/" component={RouterLayout}>
+        <Route path="overlay/help" component={HelpOverlay} />
+        <Route path="overlay/save" component={SaveOverlay} />
+        <Route path="overlay/newversion" component={NewVersionOverlay} />
+        <Route path="overlay/project" component={ProjectOverlay} />
+        <Route path="overlay/download" component={DownloadOverlay} />
+        <Route path="overlay/overwrite" component={OverwriteOverlay} />
+        <Route path="overlay/deletefile" component={DeleteFileOverlay} />
+        <Route path="overlay/deleteproject" component={DeleteProjectOverlay} />
+      </Route>
+    </Router>
+  );
+
+  React.render(Component, document.body.firstChild, onRender);
 }
 
 app.register(plugins, onRegister);
 
 // for debugging purposes
 window.app = app;
+window.memoryHistory = memoryHistory;

package.json

@@ -11,15 +11,17 @@
     "bs2-serial": "^0.15.0",
     "codemirror": "^4.13.0",
     "frylord": "^0.7.4",
-    "holovisor": "^0.2.0",
+    "history": "^1.12.5",
     "iggins": "^0.4.0",
+    "invariant": "^2.1.1",
     "irken": "^0.8.0",
     "lodash": "^3.9.1",
     "raw-loader": "^0.5.1",
     "react": "^0.13.1",
     "react-loader": "^1.2.0",
     "react-material": "git://github.com/iceddev/react-material#fake-release-13",
     "react-mfb-iceddev": "^0.1.0",
+    "react-router": "^1.0.0-rc1",
     "react-style": "^0.4.0",
     "skrim": "0.0.3",
     "snacks": "^0.3.1",

src/components/overlay.js

@@ -15,6 +15,16 @@ const styles = {
   },
   overlayLarge: {
     height: 400
+  },
+  backdrop:{
+    display: 'flex',
+    position: 'fixed',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    zIndex: 10
   }
 };
 
@@ -32,9 +42,11 @@ class Overlay extends React.Component {
     }
 
     return (
-      <Card style={cardStyle}>
-        {children}
-      </Card>
+      <div style={styles.backdrop}>
+        <Card style={cardStyle}>
+          {children}
+        </Card>
+      </div>
     );
   }
 }

src/lib/history.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const memoryHistory = require('history/lib/createMemoryHistory')();
+
+module.exports = memoryHistory;

src/plugins/appbar.js

@@ -2,15 +2,7 @@
 
 const React = require('react');
 
-const HelpOverlay = require('../views/help-overlay');
-const SaveOverlay = require('../views/save-overlay');
-const NewVersionOverlay = require('../views/new-version-overlay');
-const ProjectOverlay = require('../views/project-overlay');
-const DownloadOverlay = require('../views/download-overlay');
-const OverwriteOverlay = require('../views/overwrite-overlay');
-const DeleteFileOverlay = require('../views/delete-file-overlay');
-const DeleteProjectOverlay = require('../views/delete-project-overlay');
-
+const history = require('../lib/history');
 const store = require('../store');
 
 const {
@@ -28,49 +20,41 @@ const {
 
 function overlays(app, opts, done){
 
-  const { overlay, workspace, handlers } = app;
-
-  function renderOverlay(component){
-    function renderer(el){
-      React.render(component, el);
-    }
-
-    overlay.render(renderer, { backdrop: true });
-  }
+  const { workspace, handlers } = app;
 
   function onOverlayChange(){
     const { overlayState } = store.getState();
 
     switch(overlayState){
       case HELP_OVERLAY:
-        renderOverlay(<HelpOverlay workspace={workspace} handlers={handlers} />);
+        history.pushState({}, '/overlay/help');
         break;
       case SAVE_OVERLAY:
-        renderOverlay(<SaveOverlay workspace={workspace} handlers={handlers} />);
+        history.pushState({}, '/overlay/save');
         break;
       case SAVE_ON_CHANGE_OVERLAY:
-        renderOverlay(<SaveOverlay workspace={workspace} handlers={handlers} showDontSaveButton={true} />);
+        history.pushState({}, '/overlay/save?showDontSaveButton=true');
         break;
       case OVERWRITE_OVERLAY:
-        renderOverlay(<OverwriteOverlay store={store} handlers={handlers} />);
+        history.pushState({}, '/overlay/overwrite');
         break;
       case NEW_VERSION_OVERLAY:
-        renderOverlay(<NewVersionOverlay handlers={handlers} />);
+        history.pushState({}, '/overlay/newversion');
         break;
       case DOWNLOAD_OVERLAY:
-        renderOverlay(<DownloadOverlay store={store} handlers={handlers} />);
+        history.pushState({}, '/overlay/download');
         break;
       case PROJECTS_OVERLAY:
-        renderOverlay(<ProjectOverlay workspace={workspace} handlers={handlers} />);
+        history.pushState({}, '/overlay/project');
         break;
       case DELETE_FILE_OVERLAY:
-        renderOverlay(<DeleteFileOverlay workspace={workspace} handlers={handlers} />);
+        history.pushState({}, '/overlay/deletefile');
         break;
       case DELETE_PROJECT_OVERLAY:
-        renderOverlay(<DeleteProjectOverlay store={store} handlers={handlers} />);
+        history.pushState({}, '/overlay/deleteproject');
         break;
       case NO_OVERLAY:
-        overlay.hide();
+        history.pushState({}, '/');
         break;
     }
   }

src/plugins/editor.js

@@ -0,0 +1,41 @@
+'use strict';
+
+const React = require('react');
+
+const cm = require('../code-mirror');
+
+class Editor extends React.Component {
+
+  componentDidMount(){
+    const container = React.findDOMNode(this);
+    const { handleInput } = this.props.handlers;
+    container.style.display = 'flex';
+    container.style.flex = '1';
+    container.style.flexDirection = 'column';
+    container.setAttribute('id', 'editorContainer');
+
+    container.appendChild(cm.getWrapperElement());
+
+    cm.on('change', handleInput);
+  }
+
+  componentWillUnmount(){
+    const container = React.findDOMNode(this);
+    container.removeAll();
+  }
+
+
+  shouldComponentUpdate(){
+    return false;
+  }
+
+  render(){
+
+    return (
+      <div />
+    );
+  }
+
+}
+
+module.exports = Editor;