From d5e8cd307fc06deea58ff5d768a7d33235c4eb61 Mon Sep 17 00:00:00 2001
From: Roman Galochkin <roman.redrat@gmail.com>
Date: Fri, 10 Apr 2020 12:01:24 +0300
Subject: [PATCH] Adds a Home page with models table

---
 src/App.re        |  9 +----
 src/pages/Home.re | 85 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/Home.re

diff --git a/src/App.re b/src/App.re
index 236879d6..e9dea9c3 100644
--- a/src/App.re
+++ b/src/App.re
@@ -70,13 +70,6 @@ module Menu = {
   let make = () => {
     <div className=Styles.menu>
       <Item href={routeToPath(Home)} key="home"> {"Home" |> E.ste} </Item>
-      {Models.all
-       |> E.A.fmap((model: Prop.Model.t) => {
-            <Item href={routeToPath(Model(model.id))} key={model.id}>
-              {model.name |> E.ste}
-            </Item>
-          })
-       |> ReasonReact.array}
       <Item href={routeToPath(DistBuilder)} key="dist-builder">
         {"Dist Builder" |> E.ste}
       </Item>
@@ -115,7 +108,7 @@ let make = () => {
      | DistBuilder => <DistBuilder />
      | DistBuilder2 => <DistBuilder2 />
      | DistBuilder3 => <DistBuilder3 />
-     | Home => <div> {"Welcome" |> E.ste} </div>
+     | Home => <Home />
      | _ => <div> {"Page is not found" |> E.ste} </div>
      }}
   </div>;
diff --git a/src/pages/Home.re b/src/pages/Home.re
new file mode 100644
index 00000000..001ef4a1
--- /dev/null
+++ b/src/pages/Home.re
@@ -0,0 +1,85 @@
+type route =
+  | Model(string);
+
+let routeToPath = route =>
+  switch (route) {
+  | Model(modelId) => "/m/" ++ modelId
+  };
+
+module Models = {
+  let all = [|
+    EAFunds.Interface.model,
+    GlobalCatastrophe.Interface.model,
+    Human.Interface.model,
+  |];
+  let getById = id => E.A.getBy(all, r => r.id == id);
+};
+
+module Styles = {
+  open Css;
+  let h3 = style([fontSize(`em(1.5)), marginBottom(`em(1.5))]);
+  let card = style([marginTop(`em(2.)), marginBottom(`em(2.))]);
+};
+
+module Table = {
+  module TableStyles = {
+    open Css;
+    let row = style([display(`flex), height(`em(4.))]);
+    let col = (~f=1.0, ()) => {
+      style([flex(`num(f))]);
+    };
+  };
+
+  module Item = {
+    [@react.component]
+    let make = (~model: Prop.Model.t, ~children) => {
+      <div className=TableStyles.row>
+        <div className={TableStyles.col()}>
+          <a
+            href={routeToPath(Model(model.id))}
+            onClick={e => {
+              e->ReactEvent.Synthetic.preventDefault;
+              ReasonReactRouter.push(routeToPath(Model(model.id)));
+            }}>
+            children
+          </a>
+        </div>
+        <div className={TableStyles.col(~f=3.0, ())}>
+          {model.description |> E.ste}
+        </div>
+        <div className={TableStyles.col()}> {model.author |> E.ste} </div>
+      </div>;
+    };
+  };
+
+  module ColumnsTitles = {
+    [@react.component]
+    let make = () => {
+      <div className=TableStyles.row>
+        <div className={TableStyles.col()}> {"Name" |> E.ste} </div>
+        <div className={TableStyles.col(~f=3.0, ())}>
+          {"Description" |> E.ste}
+        </div>
+        <div className={TableStyles.col()}> {"Author" |> E.ste} </div>
+      </div>;
+    };
+  };
+
+  [@react.component]
+  let make = () => {
+    <>
+      <h3 className=Styles.h3> {"Probability Models" |> E.ste} </h3>
+      <ColumnsTitles />
+      {Models.all
+       |> E.A.fmap((model: Prop.Model.t) => {
+            <Item model key={model.id}> {model.name |> E.ste} </Item>
+          })
+       |> ReasonReact.array}
+    </>;
+  };
+};
+
+[@react.component]
+let make = () => {
+  <div> <div className=Styles.card> <Table /> </div> </div>;
+};
\ No newline at end of file