Show entries by date (#14)

* Date selection added to UI. Only dates with reading history can be selected

*  Using React toolbox components

* Removed footer, entries, and date logic from Dokusho module

* Removed some modules, no need for a module when a file only contains component

README.md

@@ -27,13 +27,13 @@ This is a multi-module project. See the relevent modules for running instruction
 
 ### Minikube
 
-[Minikube](https://github.com/kubernetes/minikube) can be used to run a local kubernetes backend by a Mongo instance. 
+This project is built with Kubernetes for Google Cloud Engine; however, [Minikube](https://github.com/kubernetes/minikube) can be used to run a local backend cluster. 
 
 * `minikube start --vm-driver <hyperkit, xhyve, virtualbox, etc>`
 * `./bin/build-images.sh`
 * `./bin/create-services.sh`
 
-The backend's location can then be found using: `minikube service web --url`.
+The backend's location can then be found using: `minikube service backend --url`.
 
 ## Additional Information
 

dokusho/.gitignore

@@ -24,3 +24,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+toolbox/

dokusho/bsconfig.json

@@ -17,7 +17,8 @@
     "bs-jest",
     "@glennsl/bs-json",
     "bs-fetch",
-    "rationale"
+    "rationale",
+    "@astrada/reason-react-toolbox"
   ],
   "bs-dev-dependencies" : [
     "bs-jest",

dokusho/package.json

@@ -13,18 +13,19 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "react-toolbox-themr react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "coverage": "react-scripts test --env=jsdom --coverage",
     "ci": "react-scripts test --env=jsdom --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
     "eject": "react-scripts eject",
     "prepare": "npm link bs-platform",
-    "clean": "rm -rf lib && rm -rf node_modules",
-    "heroku-prebuild": "npm install -g bs-platform"
+    "clean": "rm -rf lib && rm -rf node_modules"
   },
   "devDependencies": {
+    "@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,19 @@
+[%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>
+      <div className="app">
+        <Dokusho/>
+      </div>
+    </ReactToolbox.ThemeProvider>
+};

dokusho/src/app/Actions.re

@@ -20,7 +20,9 @@ module Actions = {
             Client.userHistory(userId)
               |> then_((serverResponse: serverResponse) => {
                 if(List.length(serverResponse.readingHistory.days) != 0) {
-                  self.send(UpdateHistory(serverResponse.readingHistory.days))
+                  self.send(
+                    UpdateHistory(
+                      serverResponse.readingHistory.days))
                 };
                 resolve(serverResponse);
               }))

dokusho/src/app/DateSelector.re

@@ -0,0 +1,22 @@
+let component = ReasonReact.reducerComponent("DateSelector");
+
+let make = (~onChangeSelect, ~enabledDates, _children) => {
+  ...component,
+  initialState: () => Js.Date.make(),
+  reducer: (state, _ext) => 
+    ReasonReact.Update({ state }),
+  render: (
+      {state, reduce}) =>
+        <div> 
+            <ReactToolbox.DatePicker 
+                label="Date" 
+                value=(`Date(state))
+                enabledDates=(enabledDates)
+                onChange=((date, _mouse) =>
+                    {   
+                        onChangeSelect(date);
+                        (reduce(() => { date }))();
+                    }
+                )/> 
+        </div>
+};

dokusho/src/app/Day.re

@@ -38,5 +38,5 @@ module Day {
         |> List.map(i => float_of_int(i.value) *. PageType.pageScore(i.kind))
         |> List.fold_left((a, b) => a +. b, 0.);
 
-  let entries = (d) => d.entries 
+  let entries = (d: day) => d.entries;
 }

dokusho/src/app/DokuUtil.re

@@ -21,4 +21,20 @@ module DokuUtil = {
     };
     Bytes.sub_string(buf, 0, j^);
   };
-};
+};
+
+module DateUtil = {
+  open Types; 
+
+  let availableDates = (d: readingHistory) => d.days |> List.map(d => Js.Date.fromString(d.date)) |> (ls) => [Js.Date.make(), ...ls] |> Array.of_list;
+
+  let dateWithoutTime = selectedDate => Js.Date.fromFloat(Js.Date.utcWithYMDHMS(
+        ~year=Js.Date.getFullYear(selectedDate),
+        ~month=Js.Date.getMonth(selectedDate), 
+        ~date=Js.Date.getDate(selectedDate),
+        ~hours=0.,
+        ~minutes=0.,
+        ~seconds=0.)());
+
+  let asDateKey = (date) => Js.String.slice(~from=0, ~to_=16, Js.Date.toISOString(date));
+}

dokusho/src/app/Dokusho.re

@@ -1,56 +1,67 @@
 open Input;
-open Entry;
 open Types;
 open Day;
-open PageTypeSelection;
 open Actions;
+open DokuUtil;
+open Rationale;
 
 module Dokusho {
   let component = ReasonReact.reducerComponent("Dokusho");
   let initState = () => {
     readingData: { days : [Day.now()] },
-    selectedEntry: Book
+    selectedEntry: Book,
+    selectedDate: Js.Date.make()
   };
 
   let make = (_children) => {
     ...component,
     initialState: () => initState(),
-    reducer: (action, { readingData, selectedEntry }) => 
+    reducer: (action, { readingData, selectedEntry, selectedDate }) => 
       switch action {
         | ChangeSelection(pageType) => 
-            ReasonReact.Update({readingData: readingData, selectedEntry: pageType}); 
+            ReasonReact.Update({readingData: readingData, selectedEntry: pageType, selectedDate: selectedDate});
         | AddEntry(pageType, count) =>  
             Actions.addNewEntry(pageType, count);
         | UpdateHistory(days) => 
-            ReasonReact.Update({readingData: {days: days}, selectedEntry: selectedEntry}); 
+            ReasonReact.Update({readingData: {days: days}, selectedEntry: selectedEntry, selectedDate: selectedDate}); 
         | LoadUserData(userId) => 
             Actions.loadUserData(userId);
+        | SelectDate(date) => 
+            ReasonReact.Update({readingData: readingData, selectedEntry: selectedEntry, selectedDate: date});
           },
     didMount: (_self) => {
       Actions.loadUserData(testUser);
     },
     render: (self) => {
-      let pageCount = Day.pageCount(List.hd(self.state.readingData.days));      
+      let dateKey = self.state.selectedDate |> DateUtil.dateWithoutTime |> DateUtil.asDateKey;
 
-      <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>
+      let day = RList.find(d => d.date == dateKey, self.state.readingData.days);
+      let pageCount = day |> Option.fmap(Day.pageCount) |> Option.default(0.);
+      let entries = day |> Option.fmap(d => d.entries) |> Option.default([]);
+
+      let availableDates = DateUtil.availableDates(self.state.readingData);
+
+          <div>
+            <div className="title"> 
+              (ReasonReact.stringToElement("Dokusho"))
+            </div> 
+            <div className="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))) />
+
+              <DateSelector 
+                onChangeSelect=(self.reduce(date => SelectDate(date))) 
+                enabledDates=(availableDates) />  
+
+              <Entries entries=(entries) />
+
+              <Footer pageCount=(pageCount) />
+            </div>
+          </div>
     }
   };  
 }

dokusho/src/app/Entries.re

@@ -0,0 +1,18 @@
+open Types;
+
+let component = ReasonReact.statelessComponent("Entry");
+
+let make = (~entries: list(entry), _children) => {
+  ...component,
+  render: (_) =>
+    <div className="entries">
+      (
+        entries
+        |> List.map((entry: entry) =>
+             <Entry key=(string_of_int(entry.id)) entry />
+           )
+        |> Array.of_list
+        |> ReasonReact.arrayToElement
+      )
+    </div>
+};

dokusho/src/app/Entry.re

@@ -1,17 +1,18 @@
 open Types;
+
 open PageType;
 
-module Entry = {
-  let component = ReasonReact.statelessComponent("Entry");
-  
-  let make = (~entry: entry, _children) => {
-    ...component,
-    render: (_) =>
-      <div className="entry">
-          (entry.kind |> 
-          PageType.toString |> 
-          (str) => str ++ ": " ++ string_of_int(entry.value) |>
-          ReasonReact.stringToElement)
-      </div>
-  };
+let component = ReasonReact.statelessComponent("Entry");
+
+let make = (~entry: entry, _children) => {
+  ...component,
+  render: (_) =>
+    <div className="entry">
+      (
+        entry.kind
+        |> PageType.toString
+        |> ((str) => str ++ ": " ++ string_of_int(entry.value) 
+          |> ReasonReact.stringToElement)
+      )
+    </div>
 };

dokusho/src/app/Footer.re

@@ -0,0 +1,9 @@
+let component = ReasonReact.statelessComponent("Footer");
+
+let make = (~pageCount: float, _children) => {
+  ...component,
+  render: (_) =>
+    <div className="footer">
+      (ReasonReact.stringToElement(string_of_float(pageCount) ++ " pages"))
+    </div>
+};

dokusho/src/app/Input.re

@@ -22,25 +22,21 @@ module Input = {
         ReasonReact.Update({ text: filtered, selection: state.selection })
     },
       render: ({state: state, reduce}) => {
-          <div>
-            <input
-            value=state.text
-            _type="text"
-            pattern="[0-9]*"
-            placeholder="Pages"
-            onChange=((evt) => {
-              let txt = DokuUtil.valueFromEvent(evt);
-              reduce(() => {text: txt, selection: state.selection})()
-            })
-            onKeyDown=((evt) =>
+        <ReactToolbox.Input
+              className="textinput"
+              value=state.text
+              _type="text"
+              hint=str("Pages")
+              onChange=((txt, _mse) => {
+                reduce(() => {text: txt, selection: state.selection})()
+              })
+              onKeyDown=((evt) =>
                 if (ReactEventRe.Keyboard.key(evt) == "Enter") {
-                onSubmit(state.text);
-                (reduce(() => {text: "", selection: state.selection }))()
+                  onSubmit(state.text);
+                  (reduce(() => {text: "", selection: state.selection }))()
                 }
-            )
+              )
             />
-        </div>
-
-        }
+         }
     };
   };