First attempt at table

src/EAFunds/EAFunds_Form.bs.js

@@ -5,56 +5,9 @@ var Curry = require("bs-platform/lib/js/curry.js");
 var React = require("react");
 var Antd_Radio = require("bs-ant-design-alt/src/Antd_Radio.js");
 var Belt_Array = require("bs-platform/lib/js/belt_Array.js");
-var ReForm$BsReform = require("bs-reform/src/ReForm.bs.js");
 var EAFunds_Data$ProbExample = require("./EAFunds_Data.bs.js");
 var EAFunds_Model$ProbExample = require("./EAFunds_Model.bs.js");
 
-function get(state, field) {
-  switch (field) {
-    case /* Group */0 :
-        return state[/* group */0];
-    case /* Year */1 :
-        return state[/* year */1];
-    case /* Parameter */2 :
-        return state[/* parameter */2];
-    
-  }
-}
-
-function set(state, field, value) {
-  switch (field) {
-    case /* Group */0 :
-        return /* record */[
-                /* group */value,
-                /* year */state[/* year */1],
-                /* parameter */state[/* parameter */2]
-              ];
-    case /* Year */1 :
-        return /* record */[
-                /* group */state[/* group */0],
-                /* year */value,
-                /* parameter */state[/* parameter */2]
-              ];
-    case /* Parameter */2 :
-        return /* record */[
-                /* group */state[/* group */0],
-                /* year */state[/* year */1],
-                /* parameter */value
-              ];
-    
-  }
-}
-
-var FormConfig = {
-  get: get,
-  set: set
-};
-
-var Form = ReForm$BsReform.Make({
-      set: set,
-      get: get
-    });
-
 function handleChange(handleChange$1, $$event) {
   return Curry._1(handleChange$1, $$event.target.value);
 }
@@ -126,21 +79,11 @@ function EAFunds_Form(Props) {
                     }), React.createElement(Antd_Radio.make, {
                       value: "Payouts",
                       children: "Payouts"
-                    })), foundGroup !== undefined && foundProperty !== undefined ? EAFunds_Model$ProbExample.run(foundGroup[/* group */0], year, foundProperty) : "", React.createElement("table", {
+                    })), foundGroup !== undefined && foundProperty !== undefined ? EAFunds_Model$ProbExample.run(foundGroup[/* group */0], year, foundProperty) : "");
-                  className: "table-auto"
-                }, React.createElement("thead", undefined, React.createElement("tr", undefined, React.createElement("th", {
-                              className: "px-4 py-2 border"
-                            }, "sdfsdf"), React.createElement("th", {
-                              className: "px-4 py-2 border"
-                            }, "sdfsdf"), React.createElement("th", {
-                              className: "px-4 py-2 border"
-                            }, "sdfsdf"))), React.createElement("tbody", undefined)));
 }
 
 var make = EAFunds_Form;
 
-exports.FormConfig = FormConfig;
-exports.Form = Form;
 exports.handleChange = handleChange;
 exports.make = make;
-/* Form Not a pure module */
+/* react Not a pure module */

src/EAFunds/EAFunds_Form.re

@@ -1,16 +1,5 @@
-open BsReform;
 open EAFunds_Data;
 
-module FormConfig = [%lenses
-  type state = {
-    group: string,
-    year: float,
-    parameter: string,
-  }
-];
-
-module Form = ReForm.Make(FormConfig);
-
 let handleChange = (handleChange, event) =>
   handleChange(ReactEvent.Form.target(event)##value);
 
@@ -62,21 +51,5 @@ let make = () => {
        }
      )
      |> ReasonReact.string}
-    <table className="table-auto">
-      <thead>
-        <tr>
-          <th className="px-4 py-2 border">
-            {"sdfsdf" |> ReasonReact.string}
-          </th>
-          <th className="px-4 py-2 border">
-            {"sdfsdf" |> ReasonReact.string}
-          </th>
-          <th className="px-4 py-2 border">
-            {"sdfsdf" |> ReasonReact.string}
-          </th>
-        </tr>
-      </thead>
-      <tbody />
-    </table>
   </>;
 };

src/EAFunds/EAFunds_Form2.re

@@ -0,0 +1,60 @@
+open BsReform;
+open EAFunds_Data;
+
+module FormConfig = [%lenses
+  type state = {
+    group: string,
+    year: float,
+    parameter: string,
+  }
+];
+
+module Form = ReForm.Make(FormConfig);
+
+let handleChange = (handleChange, event) =>
+  handleChange(ReactEvent.Form.target(event)##value);
+
+[@react.component]
+let make = () => {
+  let (year, setYear) = React.useState(() => 2021.);
+  <>
+    <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)
+        | _ => ()
+        }
+      )}
+    />
+    <table className="table-auto">
+      <thead>
+        <tr>
+          <th className="px-4 py-2"> {"Fund Name" |> ReasonReact.string} </th>
+          <th className="px-4 py-2"> {"Donations" |> ReasonReact.string} </th>
+          <th className="px-4 py-2"> {"Payouts" |> ReasonReact.string} </th>
+        </tr>
+      </thead>
+      <tbody>
+        {funds
+         |> Belt.Array.map(_, r =>
+              <tr>
+                <th className="px-4 py-2 border ">
+                  {r.name |> ReasonReact.string}
+                </th>
+                <th className="px-4 py-2 border font-normal">
+                  {EAFunds_Model.run(r.group, year, DONATIONS)
+                   |> ReasonReact.string}
+                </th>
+                <th className="px-4 py-2 border font-normal">
+                  {EAFunds_Model.run(r.group, year, PAYOUTS)
+                   |> ReasonReact.string}
+                </th>
+              </tr>
+            )
+         |> ReasonReact.array}
+      </tbody>
+    </table>
+  </>;
+};

src/Index.bs.js

@@ -2,10 +2,10 @@
 
 var React = require("react");
 var ReactDOMRe = require("reason-react/src/ReactDOMRe.js");
-var EAFunds_Form$ProbExample = require("./EAFunds/EAFunds_Form.bs.js");
+var EAFunds_Form2$ProbExample = require("./EAFunds/EAFunds_Form2.bs.js");
 
 ((import('./styles/index.css')));
 
-ReactDOMRe.renderToElementWithId(React.createElement(EAFunds_Form$ProbExample.make, { }), "app");
+ReactDOMRe.renderToElementWithId(React.createElement(EAFunds_Form2$ProbExample.make, { }), "app");
 
 /*  Not a pure module */

src/Index.re

@@ -1,2 +1,2 @@
 [%bs.raw {|import('./styles/index.css')|}];
-ReactDOMRe.renderToElementWithId(<EAFunds_Form />, "app");
+ReactDOMRe.renderToElementWithId(<EAFunds_Form2 />, "app");