Adds a routing
This commit is contained in:
parent
98c26da6eb
commit
b6559ef1bb
91
src/App.re
91
src/App.re
|
@ -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]
|
||||
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">
|
||||
<FormBuilder.ModelForm model=EAFunds.Interface.model />
|
||||
<FormBuilder.ModelForm model=GlobalCatastrophe.Interface.model />
|
||||
<Menu />
|
||||
{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>;
|
||||
};
|
||||
};
|
||||
|
|
|
@ -296,4 +296,6 @@ module JsArray = {
|
|||
Rationale.Option.toExn("Warning: This should not have happened"),
|
||||
);
|
||||
let filter = Js.Array.filter;
|
||||
};
|
||||
};
|
||||
|
||||
let ste = React.string;
|
||||
|
|
Loading…
Reference in New Issue
Block a user