Add ability to enter decimals

wyze · Apr 6, 2017 · cd9c228 · cd9c228
1 parent 93c692a
commit cd9c228
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 18 deletions.
diff --git a/__tests__/components/__snapshots__/buttons_test.js.snap b/__tests__/components/__snapshots__/buttons_test.js.snap
@@ -344,16 +344,27 @@ exports[`Buttons renders 1`] = `
             }
       />,
           Array [
-            <OperationButton
+            <ValueButton
               reasonProps={
                       Array [
-                              3,
-                              "",
                               [Function],
+                              0,
+                              ".",
                             ]
               }
       />,
-            0,
+            Array [
+              <OperationButton
+                reasonProps={
+                          Array [
+                                    3,
+                                    "",
+                                    [Function],
+                                  ]
+                }
+      />,
+              0,
+            ],
           ],
         ],
       ]
@@ -368,6 +379,15 @@ exports[`Buttons renders 1`] = `
         ]
       }
     />
+    <ValueButton
+      reasonProps={
+        Array [
+          [Function],
+          0,
+          ".",
+        ]
+      }
+    />
     <OperationButton
       reasonProps={
         Array [

diff --git a/__tests__/components/__snapshots__/features_test.js.snap b/__tests__/components/__snapshots__/features_test.js.snap
@@ -19,7 +19,7 @@ exports[`Features renders 1`] = `
   <Feature
     reasonProps={
       Array [
-        1,
+        0,
         "Decimals",
       ]
     }

diff --git a/__tests__/components/__snapshots__/valueButton_test.js.snap b/__tests__/components/__snapshots__/valueButton_test.js.snap
@@ -12,7 +12,7 @@ exports[`ValueButton renders 1`] = `
 
 exports[`ValueButton renders expanded button 1`] = `
 <button
-  className="css-1uxa59e css-1efi2jj css-1c4ilrr css-1x9fsos"
+  className="css-1uxa59e css-1efi2jj css-1c4ilrr css-94frz2"
   onClick={[Function]}
   value="1"
 >

diff --git a/__tests__/reductive/store_test.re b/__tests__/reductive/store_test.re
@@ -2,12 +2,20 @@ open Jest;
 open Expect;
 
 type tuple = { operations: list ( string, string, Action.model, float ) };
+
 let toTuple ({ operations }: Store.state): tuple => {
   operations: List.map
     (fun { Operation.left, right, symbol, total } => ( left, right, symbol, total ))
     operations
 };
 
+let reduce state action => Store.reducer state action;
+
+let run actions =>
+  actions
+    |> List.fold_left reduce Store.init
+    |> toTuple;
+
 let _ =
 
 describe "store" (fun _ => {
@@ -314,4 +322,49 @@ describe "store" (fun _ => {
 
     expect actual |> toEqual expected;
   });
+
+  test "reducer handles decimals" (fun _ => {
+    let actual = [
+      Action.Input "5",
+      Action.Input ".",
+      Action.Input "3",
+      Action.Add,
+      Action.Input "4",
+      Action.Input ".",
+      Action.Input "7",
+      Action.Equals,
+    ] |> run;
+    let expected = {
+      operations: [
+        ( "10", "10", Action.Equals, 10.0 ),
+        ( "5.3", "4.7", Action.Add, 10.0 ),
+      ]
+    };
+
+    expect actual |> toEqual expected;
+  });
+
+  test "reducer handles double decimals" (fun _ => {
+    let actual = [
+      Action.Input "2",
+      Action.Input ".",
+      Action.Input ".",
+      Action.Input "3",
+      Action.Add,
+      Action.Input "2",
+      Action.Input ".",
+      Action.Input "7",
+      Action.Input ".",
+      Action.Input "5",
+      Action.Equals,
+    ] |> run;
+    let expected = {
+      operations: [
+        ( "5.05", "5.05", Action.Equals, 5.05 ),
+        ( "2.3", "2.75", Action.Add, 5.05 ),
+      ]
+    };
+
+    expect actual |> toEqual expected;
+  });
 });
diff --git a/src/components/Buttons.re b/src/components/Buttons.re
@@ -33,6 +33,7 @@ module Buttons = {
       </ButtonGroup>
       <ButtonGroup>
         <ValueButton dispatch expand=true value="0" />
+        <ValueButton dispatch value="." />
         <OperationButton dispatch action=Equals />
       </ButtonGroup>
     </div>;

diff --git a/src/components/Features.re b/src/components/Features.re
@@ -15,7 +15,7 @@ module Features = {
   let render _ =>
     <div className>
       <Feature emoji=Checkmark text="Simple operations" />
-      <Feature emoji=Soon text="Decimals" />
+      <Feature emoji=Checkmark text="Decimals" />
       <Feature emoji=Soon text="Percentage" />
       <Feature emoji=Checkmark text="Positive/Negative" />
       <Feature emoji=Soon text="Advanced options" />

diff --git a/src/components/ValueButton.re b/src/components/ValueButton.re
@@ -12,7 +12,7 @@ module ValueButton = {
     Styles.merge [
       Styles.button,
       expand
-        ? Styles.make flex::"75%" () |> Styles.className
+        ? Styles.make flex::"50%" paddingLeft::".9em" textAlign::"left" () |> Styles.className
         : Styles.empty
     ];
 

diff --git a/src/reductive/action.re b/src/reductive/action.re
@@ -17,7 +17,7 @@ let toInfix action =>
     | Multiply => (*.)
     | Subtract => (-.)
     /* noop function */
-    | _ => (fun _ _ => 0.0)
+    | _ => (fun left _ => left)
   };
 
 /* model -> string */

diff --git a/src/reductive/operation.re b/src/reductive/operation.re
@@ -47,15 +47,19 @@ let find lst predicate =>
   };
 
 /* string -> model -> model */
-let update input { left, right, symbol } =>
-  switch symbol {
-    | Pending => create (left ^ input) right symbol (left ^ input |> Util.toFloat)
-    | Equals => create left right symbol (left |> Util.toFloat)
-    | _ =>
-      execute (Action.toInfix symbol) left (right ^ input)
-        |> create left (right ^ input) symbol
+let update input { left, right, symbol } => {
+  let ( left', right' ) = switch ( input, symbol ) {
+    | ( ".", Pending ) => ( Util.isFloat left ? left : left ^ input, right )
+    | ( ".", _ ) => ( left, Util.isFloat right ? right : right ^ input )
+    | ( _, Pending ) => ( left ^ input, right )
+    | ( _, Equals ) => ( left, right )
+    | ( _, _ ) => ( left, right ^ input )
   };
 
+  execute (Action.toInfix symbol) left' right' |>
+    create left' right' symbol;
+};
+
 /* list model -> string */
 let getInput lst =>
   switch lst {

diff --git a/src/util.re b/src/util.re
@@ -1,5 +1,8 @@
+/* string -> bool */
+let strEmpty str => String.length str == 0;
+
 /* string -> float */
-let toFloat str => float_of_string str;
+let toFloat str => strEmpty str ? 0.0 : float_of_string str;
 
 /* float -> string */
 let toString flt => {
@@ -11,4 +14,4 @@ let toString flt => {
 };
 
 /* string -> bool */
-let strEmpty str => String.length str == 0;
+let isFloat str => Js.String.includes "." str;