Simple widget that does basic calculations on all variables

src/EAFunds/EAFunds_Form.bs.js

@@ -65,14 +65,16 @@ function EAFunds_Form(Props) {
         }));
   var setGroup = match[1];
   var group = match[0];
-  React.useState((function () {
-          return 0.3;
-        }));
   var match$1 = React.useState((function () {
+          return 2021;
+        }));
+  var setYear = match$1[1];
+  var year = match$1[0];
+  var match$2 = React.useState((function () {
           return "Donations";
         }));
-  var setProperty = match$1[1];
+  var setProperty = match$2[1];
-  var property = match$1[0];
+  var property = match$2[0];
   var foundGroup = Belt_Array.getBy(EAFunds_Data$ProbExample.funds, (function (r) {
           return r[/* name */1] === group;
         }));
@@ -87,7 +89,21 @@ function EAFunds_Form(Props) {
     default:
       foundProperty = undefined;
   }
-  return React.createElement(React.Fragment, undefined, React.createElement(Antd_Radio.Group.make, {
+  return React.createElement(React.Fragment, undefined, React.createElement("input", {
+                  type: "number",
+                  value: year.toString(),
+                  onChange: (function (param) {
+                      var r = param.target.value;
+                      var r$1 = Number(r);
+                      if (r$1 >= 2020.0 && r$1 <= 2050.0) {
+                        return Curry._1(setYear, (function (param) {
+                                      return r$1;
+                                    }));
+                      } else {
+                        return /* () */0;
+                      }
+                    })
+                }), React.createElement(Antd_Radio.Group.make, {
                   value: group,
                   onChange: (function (param) {
                       return Curry._1(setGroup, param.target.value);
@@ -110,7 +126,7 @@ function EAFunds_Form(Props) {
                     }), React.createElement(Antd_Radio.make, {
                       value: "Payouts",
                       children: "Payouts"
-                    })), foundGroup !== undefined && foundProperty !== undefined ? EAFunds_Model$ProbExample.run(foundGroup[/* group */0], 2029, foundProperty) : "");
+                    })), foundGroup !== undefined && foundProperty !== undefined ? EAFunds_Model$ProbExample.run(foundGroup[/* group */0], year, foundProperty) : "");
 }
 
 var make = EAFunds_Form;

src/EAFunds/EAFunds_Form.re

@@ -17,7 +17,7 @@ let handleChange = (handleChange, event) =>
 [@react.component]
 let make = () => {
   let (group, setGroup) = React.useState(() => "Animal Welfare Fund");
-  let (year, setYear) = React.useState(() => 0.3);
+  let (year, setYear) = React.useState(() => 2021.);
   let (property, setProperty) = React.useState(() => "Donations");
   let foundGroup = Belt.Array.getBy(EAFunds_Data.funds, r => r.name === group);
   let foundProperty =
@@ -27,6 +27,16 @@ let make = () => {
     | _ => None
     };
   <>
+    <input
+      type_="number"
+      value={year |> Js.Float.toString}
+      onChange={handleChange(r =>
+        switch (Js.Float.fromString(r)) {
+        | r when r >= 2020.0 && r <= 2050.0 => setYear(_ => r)
+        | _ => ()
+        }
+      )}
+    />
     <Antd.Radio.Group value=group onChange={handleChange(r => setGroup(r))}>
       {EAFunds_Data.funds
        |> Array.map(f =>
@@ -47,7 +57,7 @@ let make = () => {
     </Antd.Radio.Group>
     {(
        switch (foundGroup, foundProperty) {
-       | (Some(g), Some(f)) => EAFunds_Model.run(g.group, 2029., f)
+       | (Some(g), Some(f)) => EAFunds_Model.run(g.group, year, f)
        | _ => ""
        }
      )