Add DisplayResultView to wrap all results

src/app/cmd.js

@@ -61,7 +61,7 @@ var cmd = {
 
     function invokeHandler (input, handler) {
         console.log('[invokeHandler]: ' + input);
-        var cmdResult = handler.handle(input);
+        var cmdResult = handler.handle({ input: input});
         if(cmdResult != null) {
             console.log(cmdResult);
         }

src/app/commands.js

@@ -1,18 +1,19 @@
 import appState from './appState';
-import * as result from './result/result';
+import HelpResult from './models/HelpResult';
+
 var cmdConfig = {};
 
 export default {
     initialize (cmd) {
             cmd.commands({
-            'help': function() {
-                var helpResult = document.querySelector('.result .helpResultTpl');
-                if(helpResult != null) {
-                    moveResultUp(helpResult);
-                    return;
-                }
+            'help': function(c) {
+                // var helpResult = document.querySelector('.result .helpResultTpl');
+                // if(helpResult != null) {
+                //     moveResultUp(helpResult);
+                //     return;
+                // }
 
-                appState.addCommandResult(new result.HelpResult());                
+                appState.addCommandResult(new HelpResult(c.input));                
             },
             'clear': function() {
                 appState.clearCommmandResults();

src/app/components/AppRoot.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import InputBox from './InputBox';
-import * as results from '../result/result';
-import HelpView from './HelpView';
+import DisplayResultView from './results/DisplayResultView';
 
 export default class AppRoot extends React.Component {
     componentWillMount() {
@@ -13,11 +12,10 @@ export default class AppRoot extends React.Component {
         this.setState(this.props.appState);
     }
     render() {
-        var results = this.state.commandResults.map((r, i) => this.findResultComponent(r, i));
+        var results = this.state.commandResults.map((r, i) => <DisplayResultView key={i} content={r} input="sad" inputHash="asd" />);
         return <div>
             <div className="header">
                 <h1>Bitwise<span style={{color: "#c5c5c5"}}>Cmd</span></h1>
-                <div>State: <span>{JSON.stringify(this.state)}</span></div>
                 <ul className="top-links">
                     <li>
                         <a href="https://github.com/BorisLevitskiy/BitwiseCmd"><i className="icon github">&nbsp;</i><span className="link-text">Project on GitHub</span></a>
@@ -44,12 +42,4 @@ export default class AppRoot extends React.Component {
             </div>
         </div>;
     }
-
-    findResultComponent(result, key) {
-        if(result instanceof results.HelpResult) {
-            return <HelpView key={key} />
-        }
-
-        return <span>Unknown result {typeof result}</span>
-    }
 }

src/app/components/results/DisplayResultView.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import HelpResultView from './HelpResultView';
+import HelpResult from '../../models/HelpResult';
+
+export default class DisplayResult extends React.Component {
+    render() {
+        return <div className="result">
+                        <div className="input mono"><span className="cur">&gt;</span>{this.props.content.input}<a class="hashLink" title="Link for this expression" href={window.location.pathname + '#' + this.props.inputHash}>#</a></div>
+                        <div className="content">
+                            {this.findResultComponent(this.props.content)}
+                        </div>
+                    </div>;
+    }
+
+    findResultComponent(result, key) {
+        if(result instanceof HelpResult) {
+            return <HelpResultView key={key} content={result} />
+        }
+
+        return <span>Unknown result {typeof result}</span>
+    }
+}

src/app/components/results/HelpResultView.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export default class HelpView extends React.Component {
+export default class HelpResultView extends React.Component {
     render() {
         return <div className="help helpResultTpl">
                         <div style={{overflow: "hidden"}}>

src/app/index.jsx

@@ -8,5 +8,7 @@ import AppRoot from './components/AppRoot';
 
 commands.initialize(cmd);
 
+cmd.execute('help');
+
 var root = <AppRoot appState={appState} />;
 ReactDOM.render(root, document.getElementById('root'));

src/app/models/CommandResult.js

@@ -0,0 +1,5 @@
+export default class CommandResult {
+    constructor(input) {
+        this.input = input;
+    }
+}

src/app/models/HelpResult.js

@@ -0,0 +1,7 @@
+import CommandResult from './CommandResult';
+
+export default class HelpResult extends CommandResult {
+    constructor(input) {
+        super(input);
+    }
+}

src/app/result/result.js

@@ -1,2 +0,0 @@
-export class HelpResult {
-}