Configured Reason React Tools

dokusho/package.json

@@ -26,6 +26,7 @@
     "@astrada/reason-react-toolbox": "^0.4.2",
     "bs-jest": "^0.3.2",
     "bs-react-test-renderer": "^2.0.0",
+    "react-toolbox-themr": "^1.0.2",
     "reason-react": "^0.3.2"
   },
   "jest": {

dokusho/public/index.html

@@ -10,6 +10,12 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+
+    <!--
+       Material design configuration 
+    -->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

dokusho/src/App.re

@@ -0,0 +1,17 @@
+[%bs.raw {|require('./toolbox/theme.css')|}];
+
+open Dokusho;
+
+[@bs.module]
+external theme : ReactToolbox.ThemeProvider.theme = "./toolbox/theme";
+[%bs.raw {|require('./toolbox/theme.css')|}];
+
+let component = ReasonReact.statelessComponent("App");
+
+let make = _children => {
+  ...component,
+  render: _self =>
+    <ReactToolbox.ThemeProvider theme>
+      <Dokusho/>
+    </ReactToolbox.ThemeProvider>
+};

dokusho/src/app/Dokusho.re

@@ -5,6 +5,8 @@ open Day;
 open PageTypeSelection;
 open Actions;
 
+[@bs.module]
+
 module Dokusho {
   let component = ReasonReact.reducerComponent("Dokusho");
   let initState = () => {
@@ -31,26 +33,25 @@ module Dokusho {
     },
     render: (self) => {
       let pageCount = Day.pageCount(List.hd(self.state.readingData.days));      
-
-      <div className="app">
-        <div className="title"> 
-          (ReasonReact.stringToElement("Dokusho"))
-          <Input 
-            selection=self.state.selectedEntry
-            onSubmit=(self.reduce((text) => AddEntry(self.state.selectedEntry, int_of_string(text))))
-            />
-          <PageTypeSelection onChangeSelect=(self.reduce(selected => ChangeSelection(selected))) />
-        </div>
-        <div className="entries">
-          (List.hd(self.state.readingData.days).entries
-              |> List.map((entry: entry) => <Entry key=(string_of_int(entry.id)) entry=entry />) 
-              |> Array.of_list
-              |> ReasonReact.arrayToElement)
-        </div>
-        <div className="footer">
-          (ReasonReact.stringToElement(string_of_float(pageCount) ++ " pages"))
+        <div className="app">
+          <div className="title"> 
+            (ReasonReact.stringToElement("Dokusho"))
+            <Input 
+              selection=self.state.selectedEntry
+              onSubmit=(self.reduce((text) => AddEntry(self.state.selectedEntry, int_of_string(text))))
+              />
+            <PageTypeSelection onChangeSelect=(self.reduce(selected => ChangeSelection(selected))) />
+          </div>
+          <div className="entries">
+            (List.hd(self.state.readingData.days).entries
+                |> List.map((entry: entry) => <Entry key=(string_of_int(entry.id)) entry=entry />) 
+                |> Array.of_list
+                |> ReasonReact.arrayToElement)
+          </div>
+          <div className="footer">
+            (ReasonReact.stringToElement(string_of_float(pageCount) ++ " pages"))
+          </div>
         </div>
-      </div>
     }
   };  
 }

dokusho/src/index.re

@@ -3,8 +3,6 @@
 
 [@bs.module "./registerServiceWorker"] external register_service_worker : unit => unit = "default";
 
-open Dokusho;
-
-ReactDOMRe.renderToElementWithId(<Dokusho />, "root");
+ReactDOMRe.renderToElementWithId(<App />, "root");
 
 register_service_worker();