Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for modals and deeplinking #2226

Merged
merged 2 commits into from Apr 12, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 10 additions & 10 deletions frontend/wallet/src/App.re
Expand Up @@ -3,10 +3,6 @@ open Tc;

let dev = true;

let sendMoney = () => {
print_endline("Sending!");
};

let createTray = () => {
let t = AppTray.get();
let items =
Expand All @@ -21,7 +17,12 @@ let createTray = () => {
make(Radio({js| Wallet_1 □ 100|js}), ()),
make(Radio({js| Vault □ 100,000|js}), ()),
make(Separator, ()),
make(Label("Send"), ~accelerator="CmdOrCtrl+S", ~click=sendMoney, ()),
make(
Label("Send"),
~accelerator="CmdOrCtrl+S",
~click=() => AppWindow.deepLink(Route.Send),
(),
),
make(Separator, ()),
make(Label("Request"), ~accelerator="CmdOrCtrl+R", ()),
make(Separator, ()),
Expand All @@ -41,14 +42,13 @@ App.on(
`Ready,
() => {
createTray();
let _ = AppWindow.get();
();
AppWindow.deepLink(Route.Home);
},
);

App.on(`WindowAllClosed, () =>
print_endline("Closing window, menu staying open")
);
// We need this handler here to prevent the application from exiting on all
// windows closed. Keep in mind, we have the tray.
App.on(`WindowAllClosed, () => ());

// Proof of concept on "database"
let hello_world: Js.Json.t = Js.Json.string("hello world");
Expand Down
20 changes: 17 additions & 3 deletions frontend/wallet/src/AppWindow.re
Expand Up @@ -3,11 +3,11 @@ open BsElectron;
include BrowserWindow.MakeBrowserWindow(Messages);

include Single.Make({
type input = unit;
type input = Route.t;
type t = BrowserWindow.t;

let make: (~drop: unit => unit, input) => t =
(~drop, ()) => {
(~drop, route) => {
let window =
make(
makeWindowConfig(
Expand All @@ -23,8 +23,22 @@ include Single.Make({
(),
),
);
loadURL(window, "file://" ++ ProjectRoot.path ++ "public/index.html");
loadURL(
window,
"file://"
++ ProjectRoot.path
++ "public/index.html#"
++ Route.print(route),
);
on(window, `Closed, drop);
window;
};
});

let deepLink = route => {
let w = get(route);
// route handling is idempotent so doesn't matter if we also send the message
// if window already exists
send(w, `Deep_link(route));
();
};
7 changes: 7 additions & 0 deletions frontend/wallet/src/Delete.re
@@ -0,0 +1,7 @@
[@react.component]
let make = () => {
<div>
<h1> {ReasonReact.string("Delete Wallet")} </h1>
<p> {ReasonReact.string("etc.")} </p>
</div>;
};
3 changes: 3 additions & 0 deletions frontend/wallet/src/MainCommunication.re
@@ -0,0 +1,3 @@
open BsElectron;

include IpcRenderer.MakeIpcRenderer(Messages);
2 changes: 1 addition & 1 deletion frontend/wallet/src/Messages.re
@@ -1,4 +1,4 @@
let message = __MODULE__;
type mainToRendererMessages = [ | `Hello_world];
type mainToRendererMessages = [ | `Deep_link(Route.t)];

type rendererToMainMessages = [ | `HelloBack];
24 changes: 24 additions & 0 deletions frontend/wallet/src/Modal.re
@@ -0,0 +1,24 @@
[@react.component]
let make = (~view) => {
switch (view) {
| None => <span />
| Some(view) =>
<div
className=Css.(
style([
position(`absolute),
left(`zero),
top(`zero),
display(`flex),
justifyContent(`center),
alignItems(`center),
width(`percent(100.)),
height(`percent(100.)),
backgroundColor(StyleGuide.Colors.savilleAlpha(0.95)),
])
)
onClick={_ => Router.navigate(Home)}>
view
</div>
};
};
32 changes: 27 additions & 5 deletions frontend/wallet/src/Page.re
Expand Up @@ -6,8 +6,22 @@ let httpLink =
let instance =
ReasonApollo.createApolloClient(~link=httpLink, ~cache=inMemoryCache, ());

Router.listenToMain();

[@react.component]
let make = (~message) =>
let make = (~message) => {
let url = ReasonReact.Router.useUrl();

let modalView =
switch (Route.parse(url.hash)) {
| Some(Route.Send) => Some(<Send />)
| Some(DeleteWallet) => Some(<Delete />)
| Some(Home) => None
| None =>
Js.log2("Failed to parse route: ", url.hash);
None;
};

<ApolloShim.Provider client=instance>
<div
style={ReactDOMRe.Style.make(
Expand All @@ -17,11 +31,19 @@ let make = (~message) =>
~right="0",
~bottom="0",
~left="0",
~display="flex",
~flexDirection="column",
(),
)}>
<Header />
<Body message />
<div className=Css.(style([display(`flex), flexDirection(`column)]))>
<Header />
<Body message />
</div>
<button onClick={_e => Router.(navigate(Send))}>
{ReasonReact.string("Send")}
</button>
<button onClick={_e => Router.(navigate(DeleteWallet))}>
{ReasonReact.string("Delete wallet")}
</button>
<Modal view=modalView />
</div>
</ApolloShim.Provider>;
};
2 changes: 2 additions & 0 deletions frontend/wallet/src/RendererCommunication.re
@@ -0,0 +1,2 @@
open BsElectron;
include IpcMain.MakeIpcMain(Messages);
26 changes: 26 additions & 0 deletions frontend/wallet/src/Route.re
@@ -0,0 +1,26 @@
// TODO: If we start to get crazy routes, we should implement
// http://www.informatik.uni-marburg.de/~rendel/unparse/
// as demonstrated in https://github.com/pointfreeco/swift-web/

// Law: All route handlers are idempotent!
// (1) It's a good user experience to _see_ what's going to happen in the UI
// before actions happen
// (2) Other code depends on this property

type t =
| Send
| DeleteWallet // TODO: include wallet id in payload
| Home;

let parse =
fun
| "send" => Some(Send)
| "wallet/delete" => Some(DeleteWallet)
| "" => Some(Home)
| _ => None;

let print =
fun
| Send => "send"
| DeleteWallet => "wallet/delete"
| Home => "";
8 changes: 8 additions & 0 deletions frontend/wallet/src/Router.re
@@ -0,0 +1,8 @@
let navigate = route => ReasonReact.Router.push("#" ++ Route.print(route));

let listenToMain = () =>
MainCommunication.on((. _event, message) =>
switch (message) {
| `Deep_link(route) => navigate(route)
}
);
7 changes: 7 additions & 0 deletions frontend/wallet/src/Send.re
@@ -0,0 +1,7 @@
[@react.component]
let make = () => {
<div>
<h1> {ReasonReact.string("Send Coda")} </h1>
<p> {ReasonReact.string("etc.")} </p>
</div>;
};
3 changes: 3 additions & 0 deletions frontend/wallet/src/StyleGuide.re
Expand Up @@ -5,6 +5,9 @@ module Colors = {
let hexToString = (`hex(s)) => s;

let bgColor = `hex("121F2B");
let savilleAlpha = a => `rgba((31, 45, 61, a));
let saville = savilleAlpha(1.);

let headerBgColor = `hex("06111bBB");
let headerGreyText = `hex("516679");
let textColor = white;
Expand Down