Disable flip-bit for now

src/app/cmd.js

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

src/app/commands.js

@@ -13,7 +13,6 @@ export default {
                    canHandle: (input) => expression.parser.canParse(input),
                    handle: function(c) {
                        var expr = expression.parser.parse(c.input);
-                       console.log(expr);
                        appState.addCommandResult(new ExpressionResult(c.input, expr));
                    }         
              })

src/app/components/AppRoot.jsx

@@ -12,6 +12,8 @@ export default class AppRoot extends React.Component {
         this.setState(this.props.appState);
     }
     render() {
+        console.log('[AppRoot] render():this.state.commandResults', this.state.commandResults)
+
         var results = this.state.commandResults.map((r, i) => <DisplayResultView key={i} content={r} input={r.input} inputHash={r.inputHash} />);
         return <div>
             <div className="header">

src/app/components/results/ExpressionResultView.jsx

@@ -5,8 +5,12 @@ import * as expression from '../../expression';
 export default class ExpressionResultView extends React.Component {
     render() {
         var expr = this.props.result.expression;
+
         if(expr instanceof expression.ListOfNumbersExpression) {
-            return <ListOfNumbersExpressionView expression={expr} />
+            return <div>
+                <b>Expression: {expr.expressionString}</b>
+                <ListOfNumbersExpressionView expression={expr} />
+            </div>
         }
 
         return <b>Expression: {expr.expressionString}</b>;

src/app/components/results/ListOfNumbersExpressionView.jsx

@@ -4,35 +4,47 @@ import formatter from '../../formatter';
 export default class ListOfNumersExpressionView extends React.Component {
     render() {
         const expr = this.props.expression;
-        const numberViews = expr.numbers.map((n, i) => <OperandView key={i} operand={n} maxBitsLegnth={expr.maxBitsLegnth} />) 
+        const numberRows = expr.numbers.map((n, i) => <OperandView key={i} operand={n} maxBitsLegnth={expr.maxBitsLegnth} />);
-        return <table className="expression" cellspacing="0">
+        console.log('Numbers: ', expr.numbers);
-                    {numberViews}        
+        return <div>
-               </table>
+                <div>
+                    !{expr.toString()}!
+                </div>
+                <table className="expression">
+                        <tbody>
+                            {numberRows}
+                        </tbody>        
+                    </table>
+        </div>
     }
 }
 
 class OperandView extends React.Component {
-    componentWillMount() {
+   constructor() {
-        this.setState(this.props.operand);
+       super();
-    }
+       this.state = { operand: null };
+   }
     render() {
-        const op = this.state;
+        const op = this.props.operand;
         const binaryString = formatter.padLeft(op.bin, this.props.maxBitsLegnth, '0');
 
         return <tr data-kind={op.kind}>
-            <td className="label">{op.input}</td>
+                    <td className="label">{op.input}</td>
-            <td className="bin"><ClickableBinary binaryString={binaryString} onFlipBit={i => this.flipBit(i)} /></td>
+                    <td className="bin"><ClickableBinary binaryString={binaryString} onFlipBit={e => this.flipBit(e)} /></td>
-            <td className="other">{op.other}</td>
+                    <td className="other">{op.other}</td>
-        </tr>
+                </tr>;
     };
 
     flipBit(index) {    
         var op = this.props.operand;
         const binaryString = formatter.padLeft(op.bin, this.props.maxBitsLegnth, '0');
         var arr = binaryString.split('');
+        // TODO: this code looks ugly
         arr[index] = arr[index] == '0' ? '1' : '0';
-        op.update(arr.join(''));
+        var bin = arr.join('');
-        this.setState(op);
+        op.setValue(parseInt(bin, 2));
+
+        this.setState({ operand: op });
     }
 }
 

src/app/expression.js

@@ -134,7 +134,7 @@ export class Operand {
         
 
      getOtherKind(kind) {
-        switch(kind) {
+        switch(kind || this.kind) {
             case 'dec': return 'hex';
             case 'hex': return 'dec';
             default : throw new Error(kind + " kind doesn't have opposite kind")
@@ -145,11 +145,15 @@ export class Operand {
         return this.input;
     }
 
-    update(binary) {
+    setValue(value) {
-        this.value = parseInt(2);
+        console.log('Before ' + value, this);
-        this.bin = binary;
+        this.value = value;
+        this.bin = Operand.toKindString(this.value, 'bin');
         this.dec = Operand.toKindString(this.value, 'dec');
         this.hex = Operand.toKindString(this.value, 'hex');
+        this.other = Operand.toKindString(this.value, this.getOtherKind());
+        this.input = Operand.toKindString(this.value, this.kind);
+        console.log('After ' + value, this);
     }
         
     static getBitLength(num) {
@@ -241,6 +245,10 @@ export class ListOfNumbersExpression {
         this.numbers = numbers;
         this.maxBitsLegnth = _.chain(numbers).map(n => n.lengthInBits).reduce((n , c) => n >= c ? n : c, 0).value();
     }
+
+    toString() {
+        return this.numbers.map(n => n.value.toString()).join(' ');
+    }
 }
 
 export class Expression {

src/app/index.jsx

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