Adds a routing

This commit is contained in:
Roman Galochkin 2020-02-26 12:11:06 +03:00
parent 98c26da6eb
commit b6559ef1bb
2 changed files with 91 additions and 4 deletions

View File

@ -1,7 +1,92 @@
type route =
| EAFunds
| GlobalCatastrophe
| Home
| NotFound;
let routeToPath = route =>
switch (route) {
| EAFunds => "/ea-funds"
| GlobalCatastrophe => "/global-catastrophe"
| Home => "/"
| _ => "/"
};
module Menu = {
module Styles = {
open Css;
let menu =
style([
position(`relative),
marginTop(em(0.25)),
marginBottom(em(0.25)),
selector(
"a",
[
borderRadius(em(0.25)),
display(`inlineBlock),
backgroundColor(`hex("eee")),
padding(em(1.)),
cursor(`pointer),
],
),
selector("a:hover", [backgroundColor(`hex("bfcad4"))]),
selector("a:hover", [backgroundColor(`hex("bfcad4"))]),
selector(
"a:not(:first-child):not(:last-child)",
[marginRight(em(0.25)), marginLeft(em(0.25))],
),
]);
};
module Item = {
[@react.component]
let make = (~href, ~children) => {
<a
href
onClick={e => {
e->ReactEvent.Synthetic.preventDefault;
ReasonReactRouter.push(href);
}}>
children
</a>;
};
};
[@react.component]
let make = () => {
<div className=Styles.menu>
<Item href={routeToPath(Home)} key="home"> {"Home" |> E.ste} </Item>
<Item href={routeToPath(EAFunds)} key="ea-funds">
{"EA Funds" |> E.ste}
</Item>
<Item href={routeToPath(GlobalCatastrophe)} key="gc">
{"Global Catastrophe" |> E.ste}
</Item>
</div>;
};
};
[@react.component] [@react.component]
let make = () => { let make = () => {
let url = ReasonReactRouter.useUrl();
let routing =
switch (url.path) {
| ["ea-funds"] => EAFunds
| ["global-catastrophe"] => GlobalCatastrophe
| [] => Home
| _ => NotFound
};
<div className="w-full max-w-screen-xl mx-auto px-6"> <div className="w-full max-w-screen-xl mx-auto px-6">
<FormBuilder.ModelForm model=EAFunds.Interface.model /> <Menu />
<FormBuilder.ModelForm model=GlobalCatastrophe.Interface.model /> {switch (routing) {
| EAFunds => <FormBuilder.ModelForm model=EAFunds.Interface.model />
| GlobalCatastrophe =>
<FormBuilder.ModelForm model=GlobalCatastrophe.Interface.model />
| Home => <div> {"Welcome" |> E.ste} </div>
| _ => <div> {"Page is not found" |> E.ste} </div>
}}
</div>; </div>;
}; };

View File

@ -296,4 +296,6 @@ module JsArray = {
Rationale.Option.toExn("Warning: This should not have happened"), Rationale.Option.toExn("Warning: This should not have happened"),
); );
let filter = Js.Array.filter; let filter = Js.Array.filter;
}; };
let ste = React.string;