diff --git a/src/Container/Container.bs.js b/src/Container/Container.bs.js index 9d8a7d8..a3f06ba 100644 --- a/src/Container/Container.bs.js +++ b/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 }))); } diff --git a/src/Container/Container.res b/src/Container/Container.res index bd1bbde..f0e50bd 100644 --- a/src/Container/Container.res +++ b/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()}, ) diff --git a/src/DatePicker/DatePicker.bs.js b/src/DatePicker/DatePicker.bs.js index b688fa2..0144bae 100644 --- a/src/DatePicker/DatePicker.bs.js +++ b/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 })); } diff --git a/src/DatePicker/DatePicker.res b/src/DatePicker/DatePicker.res index 63ea829..21677f2 100644 --- a/src/DatePicker/DatePicker.res +++ b/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)) } diff --git a/src/UserEntry/UserEntry.bs.js b/src/UserEntry/UserEntry.bs.js index b2c6f6f..856c6c0 100644 --- a/src/UserEntry/UserEntry.bs.js +++ b/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; diff --git a/src/UserEntry/UserEntry.res b/src/UserEntry/UserEntry.res index a2b5d9d..3543ea0 100644 --- a/src/UserEntry/UserEntry.res +++ b/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])
{React.string(j`${name} - ${