Add positive/negative button

__tests__/components/GreenButton_test.re

@@ -0,0 +1,24 @@
+open Jest;
+open Expect;
+
+let _ =
+
+describe "GreenButton" (fun _ => {
+  test "renders" (fun _ => {
+    let action = Action.Add;
+    let dispatch = fun _ => ();
+    let tree = GreenButton.createElement ::action ::dispatch children::[] () |> Renderer.render;
+
+    expect tree |> toMatchSnapshot;
+  });
+
+  test "renders a class name" (fun _ => {
+    let action = Action.Add;
+    let className = Styles.make color::"rebeccapurple" () |> Styles.className;
+    let dispatch = fun _ => ();
+    let tree = GreenButton.createElement ::action ::className ::dispatch children::[] ()
+      |> Renderer.render;
+
+    expect tree |> toMatchSnapshot;
+  });
+});

__tests__/components/__snapshots__/buttons_test.js.snap

@@ -14,16 +14,27 @@ exports[`Buttons renders 1`] = `
             }
       />,
           Array [
-            <OperationButton
+            <GreenButton
               reasonProps={
                       Array [
-                              2,
+                              7,
                               "",
                               [Function],
                             ]
               }
       />,
-            0,
+            Array [
+              <OperationButton
+                reasonProps={
+                          Array [
+                                    2,
+                                    "",
+                                    [Function],
+                                  ]
+                }
+      />,
+              0,
+            ],
           ],
         ],
       ]
@@ -36,6 +47,15 @@ exports[`Buttons renders 1`] = `
         ]
       }
     />
+    <GreenButton
+      reasonProps={
+        Array [
+          7,
+          "",
+          [Function],
+        ]
+      }
+    />
     <OperationButton
       reasonProps={
         Array [

__tests__/components/__snapshots__/clearButton_test.js.snap

@@ -1,11 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ClearButton renders 1`] = `
-<OperationButton
+<GreenButton
   reasonProps={
     Array [
       1,
-      "css-1gxh4ww css-1eo5al3",
+      Object {
+        "data-css-galczn": "",
+      },
       [Function],
     ]
   }

__tests__/components/__snapshots__/features_test.js.snap

@@ -35,7 +35,7 @@ exports[`Features renders 1`] = `
   <Feature
     reasonProps={
       Array [
-        1,
+        0,
         "Positive/Negative",
       ]
     }

__tests__/components/__snapshots__/greenButton_test.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GreenButton renders 1`] = `
+<OperationButton
+  reasonProps={
+    Array [
+      0,
+      "css-h4v74b css-1eo5al3",
+      [Function],
+    ]
+  }
+/>
+`;
+
+exports[`GreenButton renders a class name 1`] = `
+<OperationButton
+  reasonProps={
+    Array [
+      0,
+      "css-h4v74b css-1eo5al3 css-aori8y",
+      [Function],
+    ]
+  }
+/>
+`;

__tests__/reductive/store_test.re

@@ -202,4 +202,101 @@ describe "store" (fun _ => {
 
     expect actual |> toEqual expected;
   });
+
+  test "reducer handles PosNeg action with initial state" (fun _ => {
+    let state: Store.state = Store.init;
+    let actual = Store.reducer state Action.PosNeg;
+    let expected: Store.state = { operations: [] };
+
+    expect actual |> toEqual expected;
+  });
+
+  test "reducer handles PosNeg action with Pending state" (fun _ => {
+    let state: Store.state = {
+      operations: [
+        Operation.create "4" "" Action.Pending 4,
+      ]
+    };
+    let actual = Store.reducer state Action.PosNeg |> toTuple;
+    let expected = {
+      operations: [
+        ( "-4", "", Action.Pending, -4 ),
+      ]
+    };
+
+    expect actual |> toEqual expected;
+  });
+
+  test "reducer handles PosNeg action with no right value" (fun _ => {
+    let state: Store.state = {
+      operations: [
+        Operation.create "4" "" Action.Add 4,
+      ]
+    };
+    let actual = Store.reducer state Action.PosNeg |> toTuple;
+    let expected = {
+      operations: [
+        ( "4", "-4", Action.Add, 0 ),
+      ]
+    };
+
+    expect actual |> toEqual expected;
+  });
+
+  test "reducer handles PosNeg action with non-Pending state" (fun _ => {
+    let state: Store.state = {
+      operations: [
+        Operation.create "4" "2" Action.Add 6,
+      ]
+    };
+    let actual = Store.reducer state Action.PosNeg |> toTuple;
+    let expected = {
+      operations: [
+        ( "4", "-2", Action.Add, 2 ),
+      ]
+    };
+
+    expect actual |> toEqual expected;
+  });
+
+  test "reducer handles PosNeg -> Equals -> Equals" (fun _ => {
+    let state: Store.state = {
+      operations: [
+        Operation.create "-15" "-15" Action.Equals (-15),
+        Operation.create "5" "-3" Action.Multiply (-15),
+      ]
+    };
+    let actual = Store.reducer state Action.Equals |> toTuple;
+    let expected = {
+      operations: [
+        ( "45", "45", Action.Equals, 45 ),
+        ( "-15", "-3", Action.Multiply, 45 ),
+        ( "-15", "-15", Action.Equals, -15 ),
+        ( "5", "-3", Action.Multiply, -15 ),
+      ]
+    };
+
+    expect actual |> toEqual expected;
+  });
+
+  test "reducer handles Equals -> PosNeg -> Equals" (fun _ => {
+    let equals: Store.state = {
+      operations: [
+        Operation.create "-15" "-15" Action.Equals (-15),
+        Operation.create "5" "-3" Action.Multiply (-15),
+      ]
+    };
+    let state = Store.reducer equals Action.PosNeg;
+    let actual = Store.reducer state Action.Equals |> toTuple;
+    let expected = {
+      operations: [
+        ( "-45", "-45", Action.Equals, -45 ),
+        ( "15", "-3", Action.Multiply, -45 ),
+        ( "15", "15", Action.Equals, 15 ),
+        ( "5", "-3", Action.Multiply, -15 ),
+      ]
+    };
+
+    expect actual |> toEqual expected;
+  });
 });

src/components/Buttons.re

@@ -10,6 +10,7 @@ module Buttons = {
     <div>
       <ButtonGroup>
         <ClearButton dispatch />
+        <GreenButton dispatch action=PosNeg />
         <OperationButton dispatch action=Divide />
       </ButtonGroup>
       <ButtonGroup>

src/components/ClearButton.re

@@ -7,13 +7,10 @@ module ClearButton = {
   };
 
   let className: string =
-    Styles.merge [
-      Styles.make background::"#3bf3a9" flex::"75%" () |> Styles.className,
-      Styles.make color::"#3bf3a9" () |> Styles.hover,
-    ];
+    Styles.make flex::"50%" () |> Styles.className;
 
   let render { props: { dispatch } } =>
-    <OperationButton className dispatch action=Clear />;
+    <GreenButton className dispatch action=Clear />;
 };
 
 include ReactRe.CreateComponent ClearButton;

src/components/Features.re

@@ -17,7 +17,7 @@ module Features = {
       <Feature emoji=Checkmark text="Simple operations" />
       <Feature emoji=Soon text="Decimals" />
       <Feature emoji=Soon text="Percentage" />
-      <Feature emoji=Soon text="Positive/Negative" />
+      <Feature emoji=Checkmark text="Positive/Negative" />
       <Feature emoji=Soon text="Advanced options" />
       <Feature emoji=Soon text="Operation history" />
     </div>;

src/components/GreenButton.re

@@ -0,0 +1,25 @@
+module GreenButton = {
+  include ReactRe.Component;
+  let name = "GreenButton";
+
+  type props = {
+    action: Store.action,
+    className: string,
+    dispatch: Store.action => unit,
+  };
+
+  let getClassName className =>
+    Styles.merge [
+      Styles.make background::"#3bf3a9" () |> Styles.className,
+      Styles.make color::"#3bf3a9" () |> Styles.hover,
+      Util.strEmpty className ? Styles.empty : className,
+    ];
+
+  let render { props: { action, className, dispatch } } =>
+    <OperationButton className=(getClassName className) dispatch action />;
+};
+
+include ReactRe.CreateComponent GreenButton;
+
+let createElement ::action ::className="" ::dispatch =>
+  wrapProps { action, className, dispatch };

src/reductive/action.re

@@ -6,7 +6,8 @@ type model =
   | Pending
   | Input string
   | Multiply
-  | Subtract;
+  | Subtract
+  | PosNeg;
 
 /* model -> (int -> int -> int) */
 let toInfix action =>
@@ -28,5 +29,6 @@ let toText action =>
     | Equals => "="
     | Multiply => "×"
     | Subtract => "−"
+    | PosNeg => "+/−"
     | _ => ""
   };

src/reductive/operation.re

@@ -50,6 +50,7 @@ let find lst predicate =>
 let update input { left, right, symbol } =>
   switch symbol {
     | Pending => create (left ^ input) right symbol (left ^ input |> Util.toInt)
+    | Equals => create left right symbol (left |> Util.toInt)
     | _ =>
       execute (Action.toInfix symbol) left (right ^ input)
         |> create left (right ^ input) symbol

src/reductive/store.re

@@ -19,6 +19,27 @@ let addEquals lst (cur: Operation.model) => {
   };
 };
 
+/* string -> string */
+let flipNumber num => num |> Util.toInt |> (*) (-1) |> Util.toString;
+
+/* list Operation.model -> Operation.model -> list Operation.model */
+let doPosNeg lst (cur: Operation.model) => {
+  let { left, right, symbol }: Operation.model = cur;
+
+  let prev = switch right {
+    | "" => switch symbol {
+      | Pending => Operation.create (flipNumber left) right symbol 0
+      | _ => Operation.create left (flipNumber left) symbol 0
+    }
+    | _ => switch symbol {
+      | Equals => Operation.create (flipNumber left) (flipNumber right) symbol 0
+      | _ => Operation.create left (flipNumber right) symbol 0
+    }
+  } |> Operation.update "";
+
+  [ prev ] @ lst;
+};
+
 /* state -> action -> state */
 let reducer state action => {
   let cur = Operation.head state.operations;
@@ -37,6 +58,12 @@ let reducer state action => {
       }
     }
     | Pending => state
+    | PosNeg => {
+      operations: switch cur.total {
+        | 0 => state.operations
+        | _ => doPosNeg old cur
+      }
+    }
     | _ => {
       operations: switch cur.symbol {
         | Pending