repl and sidebar toggling

- generalize toggle to accept a component name

app/src/activities.js

@@ -1,17 +1,19 @@
 import BoundEditActivity from './bound-edit-activity';
-import BoundReplActivity from './bound-repl-activity';
 import { ICONS } from './svg-icons';
+import { SIDEBAR_COMPONENT, REPL_COMPONENT } from './constants';
 
 const activities = [
     {
         selector: 'editor',
         icon: ICONS['file-text2'],
+        toggle: SIDEBAR_COMPONENT,
         view: BoundEditActivity,
     },
     {
-        selector: 'repl',
+        selector: 'editor',
         icon: ICONS['terminal'],
-        view: BoundReplActivity,
+        toggle: REPL_COMPONENT,
+        view: BoundEditActivity,
     }
 ];
 

app/src/activity-bar.js

@@ -6,13 +6,11 @@ import './activity-bar.css'
 class ActivityBar extends Component {
     render() {
         const items = this.props.activities.map(activity => {
-            const name = activity.selector;
-            const icon = activity.icon;
             return (
                 <IconButton
-                    key={name}
-                    action={() => this.props.buttonAction(name)}
-                    icon={icon}
+                    key={activity.selector + activity.toggle}
+                    action={() => this.props.buttonAction(activity)}
+                    icon={activity.icon}
                     color="#979797"   // FIXME: this should be styled
                     size="24"       // FIXME: this should be configurable?
                 />

app/src/bound-repl-activity.js

@@ -7,7 +7,6 @@ import {
     replConnect,
 } from './model/repl-actions';
 
-
 const isConnected = (state) => {
     return (component) => {
         let conn = state.repl.connections.get(component);
@@ -24,11 +23,12 @@ const isConnected = (state) => {
 const mapStateToProps = (state) => {
     // TODO: pull out the buffer and history for the active repl to avoid re-renders if output to no-active repl is received.
     let { activeRepl, endpoints, buffers, history } = state.repl;
-    return { 
+    return {
         activeRepl,
         endpoints,
-        buffers, 
+        buffers,
         history,
+        hidden: state.ui.replHidden,
         isConnected: isConnected(state),
      };
 }

app/src/bound-workspace.js

@@ -6,7 +6,7 @@ import {
 } from './model/activity-actions';
 
 import {
-    sidebarToggle,
+    toggleComponent,
 } from './model/ui-actions';
 
 import {
@@ -29,8 +29,8 @@ const mapDispatchToProps = (dispatch) => {
         activitySelect: (name) => {
             dispatch(activitySelect(name))
         },
-        sidebarToggle: () => {
-            dispatch(sidebarToggle())
+        toggleComponent: (name) => {
+            dispatch(toggleComponent(name))
         },
         replEndpoints: (api, cb) => {
             dispatch(replEndpoints(api, cb))

app/src/constants.js

@@ -5,4 +5,7 @@ export const UNTITLED_SCRIPT = "UNTITLED_SCRIPT";
 export const MATRON_COMPONENT = "matron";
 export const CRONE_COMPONENT = "crone";
 
+export const SIDEBAR_COMPONENT = "sidebar";
+export const REPL_COMPONENT = "repl";
+
 export const INVALID_NAME_CHARS = new Set(["/"]);

app/src/edit-activity.js

@@ -90,7 +90,7 @@ class EditActivity extends Component {
     }
 
     getEditorHeight() {
-        return this.props.ui.replHidden ? this.props.height - 1 : this.state.editorHeight;
+        return this.props.ui.replHidden ? this.props.height : this.state.editorHeight;
     }
 
     editorSize() {
@@ -99,14 +99,14 @@ class EditActivity extends Component {
         const width = this.props.width - sidebarWidth - toolbarWidth - 1;
         return {
             width,
-            height: this.state.editorHeight,
+            height: this.getEditorHeight(),
         };
     }
 
     editorToolsSize() {
         return {
             width: this.state.toolbarWidth,
-            height: this.state.editorHeight,
+            height: this.getEditorHeight(),
         };
     }
 

app/src/model/ui-actions.js

@@ -1,23 +1,28 @@
-export const SIDEBAR_TOGGLE = 'SIDEBAR_TOGGLE'
-export const SIDEBAR_SIZE = 'SIDEBAR_SIZE'
+import { REPL_COMPONENT, SIDEBAR_COMPONENT } from '../constants';
+
+export const TOGGLE_COMPONENT = 'TOGGLE_COMPONENT'
 
-export const REPL_TOGGLE = 'REPL_TOGGEL'
+export const SIDEBAR_SIZE = 'SIDEBAR_SIZE'
 export const REPL_SIZE = 'REPL_SIZE'
 
 //
 // sync actions
 //
 
+export const toggleComponent = (name) => {
+    return { type: TOGGLE_COMPONENT, name }
+}
+
 export const sidebarToggle = () => {
-    return { type: SIDEBAR_TOGGLE }
+    return { type: TOGGLE_COMPONENT, name: SIDEBAR_COMPONENT }
 }
 
 export const sidebarSize = (width) => {
     return { type: SIDEBAR_SIZE, width }
 }
 
 export const replToggle = () => {
-    return { type: REPL_TOGGLE }
+    return { type: TOGGLE_COMPONENT, name: REPL_COMPONENT }
 }
 
 export const replSize = (height) => {

app/src/model/ui-reducers.js

@@ -1,9 +1,9 @@
 import {
-    SIDEBAR_TOGGLE,
     SIDEBAR_SIZE,
-    REPL_TOGGLE,
     REPL_SIZE,
+    TOGGLE_COMPONENT,
 } from './ui-actions';
+import { SIDEBAR_COMPONENT, REPL_COMPONENT } from '../constants';
 
 /*
 
@@ -26,15 +26,12 @@ const initialState = {
 
 const ui = (state = initialState, action) => {
     switch (action.type) {
-    case SIDEBAR_TOGGLE:
-        return {...state, sidebarHidden: !state.sidebarHidden};
+    case TOGGLE_COMPONENT:
+        return handleToggleComponent(state, action);
 
     case SIDEBAR_SIZE:
         return {...state, sidebarWidth: action.width};
 
-    case REPL_TOGGLE:
-        return {...state, replHidden: !state.replHidden};
-
     case REPL_SIZE:
         return {...state, replHeight: action.height};
 
@@ -43,4 +40,17 @@ const ui = (state = initialState, action) => {
     }
 }
 
+const handleToggleComponent = (state, action) => {
+    switch (action.name) {
+    case SIDEBAR_COMPONENT:
+        return {...state, sidebarHidden: !state.sidebarHidden};
+
+    case REPL_COMPONENT:
+        return {...state, replHidden: !state.replHidden};
+
+    default:
+        return state;
+    }
+}
+
 export default ui;

app/src/repl-activity.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import cx from 'classname';
 import Repl from './repl';
 import ToolBar from './tool-bar';
 import IconButton from './icon-button';
@@ -49,7 +50,7 @@ const ReplConnect = (props) => {
                     action={() => props.connectAction(props.activeRepl)}
                     icon={ICONS['loop2']}
                     color="#979797"       // FIXME:
-                    size="24"           // FIXME:    
+                    size="24"           // FIXME:
                 />
             </div>
         </div>
@@ -84,13 +85,13 @@ class ReplActivity extends Component {
         let endpoint = this.props.endpoints.get(component)
         this.props.replConnect(component, endpoint)
     }
-    
+
     render() {
         let { activeRepl, buffers, history } = this.props;
 
         var replView;
         if (this.props.isConnected(activeRepl)) {
-            replView = <Repl 
+            replView = <Repl
                             className="repl-container"
                             {...this.replSize()}
                             activeRepl={activeRepl}
@@ -99,30 +100,26 @@ class ReplActivity extends Component {
                             replSend={this.props.replSend}
                         />
         } else {
-            replView = <ReplConnect 
-                            {...this.replSize()} 
+            replView = <ReplConnect
+                            {...this.replSize()}
                             activeRepl={activeRepl}
                             connectAction={this.handleConnect}
                         />
         }
 
+        let containerClassName = cx("repl-activity-container", {"hidden": this.props.hidden},);
+
         return (
-            <div className="repl-activity">
-                {/* <Repl 
-                    className="repl-container"
-                    {...this.replSize()}
-                    activeRepl={activeRepl}
-                    buffers={buffers}
-                    history={history}
-                    replSend={this.props.replSend}
-                /> */}
-                {replView}
-                <ReplTools
-                    className="repl-tools"
-                    {...this.toolsSize()}
-                    tools={tools}
-                    buttonAction={this.handleToolInvoke}
-                />
+            <div className={containerClassName}>
+                <div className="repl-activity">
+                    {replView}
+                    <ReplTools
+                        className="repl-tools"
+                        {...this.toolsSize()}
+                        tools={tools}
+                        buttonAction={this.handleToolInvoke}
+                    />
+                </div>
             </div>
         );
     }

app/src/workspace.js

@@ -40,12 +40,12 @@ class Workspace extends Component {
         };
     }
 
-    handleActivitySelection = (name) => {
-        if (name === this.props.selected) {
-            this.props.sidebarToggle()
+    handleActivitySelection = (activity) => {
+        if (activity.selector === this.props.selected) {
+            this.props.toggleComponent(activity.toggle)
         }
         else {
-            this.props.activitySelect(name)
+            this.props.activitySelect(activity.selector)
         }
     }