Live updates!

src/Container/Container.bs.js

@@ -1,18 +1,30 @@
 'use strict';
 
 var React = require("react");
+var Moment = require("moment");
 var UserEntry$ReasonReactExamples = require("../UserEntry/UserEntry.bs.js");
 var DatePicker$ReasonReactExamples = require("../DatePicker/DatePicker.bs.js");
 
 function Container(Props) {
+  var match = React.useReducer((function (param, action) {
+          return {
+                  date: action._0
+                };
+        }), {
+        date: Moment()
+      });
+  var state = match[0];
   return React.createElement("div", {
               className: "flex one"
-            }, React.createElement(DatePicker$ReasonReactExamples.make, {}), React.createElement("ol", undefined, React.createElement(UserEntry$ReasonReactExamples.make, {
-                      name: "Anthony",
-                      score: "1:00"
+            }, React.createElement(DatePicker$ReasonReactExamples.make, {
+                  currentDate: state.date,
+                  updateDate: match[1]
+                }), React.createElement("ol", undefined, React.createElement(UserEntry$ReasonReactExamples.make, {
+                      name: "a_mae_zing",
+                      currentDate: state.date
                     }), React.createElement(UserEntry$ReasonReactExamples.make, {
-                      name: "Mae",
-                      score: "0:15"
+                      name: "Anthony",
+                      currentDate: state.date
                     })));
 }
 

src/Container/Container.res

@@ -5,10 +5,10 @@ type state = {date: MomentRe.Moment.t}
 @react.component
 let make = () => {
   let (state, dispatch) = React.useReducer(
-    (state, action) =>
+    {(_, action) =>
       switch (action) {
         | ChangeDate(newDate) => {date: newDate}
-      },
+      }},
       {date: MomentRe.momentNow()},
   )
 

src/DatePicker/DatePicker.bs.js

@@ -5,19 +5,18 @@ var React = require("react");
 var Moment = require("moment");
 
 function DatePicker(Props) {
-  var match = React.useState(function () {
-        return Moment();
-      });
-  var updateDate = match[1];
+  var currentDate = Props.currentDate;
+  var updateDate = Props.updateDate;
   var handleChange = function ($$event) {
-    var value = $$event.target.value;
-    return Curry._1(updateDate, (function (param) {
-                  return Moment(value, "YYYY-MM-DD");
-                }));
+    var value = Moment($$event.target.value, "YYYY-MM-DD");
+    console.log("Updating date to " + String(value));
+    return Curry._1(updateDate, /* ChangeDate */{
+                _0: value
+              });
   };
   return React.createElement(React.Fragment, undefined, React.createElement("input", {
                   type: "date",
-                  value: match[0].format("YYYY-MM-DD"),
+                  value: currentDate.format("YYYY-MM-DD"),
                   onChange: handleChange
                 }));
 }

src/DatePicker/DatePicker.res

@@ -15,6 +15,7 @@ let make = (~currentDate, ~updateDate) => {
 */
   let handleChange = (event: ReactEvent.Form.t) => {
     let value = ReactEvent.Form.target(event)["value"] -> MomentRe.momentWithFormat("YYYY-MM-DD")
+    Js.log(`Updating date to ${Js.String2.make(value)}`)
     updateDate(ChangeDate(value))
   }
 

src/UserEntry/UserEntry.bs.js

@@ -1,13 +1,66 @@
 'use strict';
 
+var Curry = require("bs-platform/lib/js/curry.js");
 var React = require("react");
+var Belt_Array = require("bs-platform/lib/js/belt_Array.js");
+var Belt_Option = require("bs-platform/lib/js/belt_Option.js");
+var Belt_Result = require("bs-platform/lib/js/belt_Result.js");
+var Entities$ReasonReactExamples = require("../Entities.bs.js");
 
 function UserEntry(Props) {
   var name = Props.name;
-  var score = Props.score;
+  var currentDate = Props.currentDate;
+  var match = React.useState(function () {
+        return /* LoadingScore */0;
+      });
+  var setState = match[1];
+  var state = match[0];
+  React.useEffect((function () {
+          console.log("currentDate == " + String(currentDate));
+          console.log(currentDate.format("YYYY-MM-DD"));
+          fetch("https://acicchetti.dev/crossword/v1/" + currentDate.format("YYYY-MM-DD")).then(function (prim) {
+                    return prim.json();
+                  }).then(function (text) {
+                  var newScore = Belt_Result.mapWithDefault(Entities$ReasonReactExamples.score_api_response_decode(text), /* ErrorFetchingScore */1, (function (x) {
+                          console.log(x);
+                          return Belt_Option.mapWithDefault(Belt_Array.getBy(x, (function (username) {
+                                            return name === Entities$ReasonReactExamples.getName(username);
+                                          })), /* NoScore */2, (function (user_score) {
+                                        return /* LoadedScore */{
+                                                _0: user_score.time
+                                              };
+                                      }));
+                        }));
+                  return Promise.resolve(Curry._1(setState, (function (_oldState) {
+                                    return newScore;
+                                  })));
+                }).catch(function (_err) {
+                return Promise.resolve(Curry._1(setState, (function (_previousState) {
+                                  return /* ErrorFetchingScore */1;
+                                })));
+              });
+          
+        }), [currentDate]);
+  var tmp;
+  if (typeof state === "number") {
+    switch (state) {
+      case /* LoadingScore */0 :
+          tmp = "Loading";
+          break;
+      case /* ErrorFetchingScore */1 :
+          tmp = "Error Fetching Score";
+          break;
+      case /* NoScore */2 :
+          tmp = "No Score";
+          break;
+      
+    }
+  } else {
+    tmp = state._0;
+  }
   return React.createElement("article", {
               className: "stack pseudo button"
-            }, name + (" - " + score));
+            }, name + " - " + tmp);
 }
 
 var make = UserEntry;

src/UserEntry/UserEntry.res

@@ -16,14 +16,16 @@ let make = (~name: string, ~currentDate: MomentRe.Moment.t) => {
     -> Belt.Option.mapWithDefault(NoScore, (user_score) => LoadedScore(user_score.time))
   }
 
-  React.useEffect0(() => {
+  React.useEffect1(() => {
+    Js.log(`currentDate == ${Js.String2.make(currentDate)}`)
     open! Js.Promise
     {
+      Js.log(currentDate |> MomentRe.Moment.format("YYYY-MM-DD"))
       Fetch.fetch(j`https://acicchetti.dev/crossword/v1/${currentDate |> MomentRe.Moment.format("YYYY-MM-DD")}`)
         |> then_(Fetch.Response.json)
         |> then_(text =>
           score_api_response_decode(text)
-          -> Belt.Result.mapWithDefault(ErrorFetchingScore, (x) => x |> getUserScore)
+          -> Belt.Result.mapWithDefault(ErrorFetchingScore, (x) => {Js.log(x); x |> getUserScore })
           -> (newScore => setState(_oldState => newScore))
           -> resolve
           )
@@ -34,7 +36,7 @@ let make = (~name: string, ~currentDate: MomentRe.Moment.t) => {
         |> ignore
     }
     None
-  })
+  }, [currentDate])
 
   <article className="stack pseudo button">
     {React.string(j`${name} - ${