Add TimeReactHooks (#165)

Author: pete-murphy

README.md

@@ -118,4 +118,5 @@ Running a web-compatible recipe:
 |   | :heavy_check_mark: | [TextFieldsHalogenHooks](recipes/TextFieldsHalogenHooks) | A Halogen port of the ["User Interface - Text Fields" Elm Example](https://elm-lang.org/examples). |
 |   | :heavy_check_mark: | [TextFieldsReactHooks](recipes/TextFieldsReactHooks) | A React port of the ["User Interface - Text Fields" Elm Example](https://elm-lang.org/examples/text-fields). |
 |   | :heavy_check_mark: | [TimeHalogenHooks](recipes/TimeHalogenHooks) | A Halogen port of the ["Time - Time" Elm Example](https://elm-lang.org/examples). |
+|   | :heavy_check_mark: | [TimeReactHooks](recipes/TimeReactHooks) | A React port of the ["User Interface - Time" Elm Example](https://elm-lang.org/examples/time). |
 |   | :heavy_check_mark: | [WindowPropertiesJs](recipes/WindowPropertiesJs) | This recipe shows how to get and print various properties in the browser's `window` object. |

recipes/TimeReactHooks/.gitignore

@@ -0,0 +1,15 @@
+/bower_components/
+/node_modules/
+/.pulp-cache/
+/output/
+/generated-docs/
+/.psc-package/
+/.psc*
+/.purs*
+/.psa*
+/.spago
+/.cache/
+/dist/
+/web-dist/
+/prod-dist/
+/prod/

recipes/TimeReactHooks/README.md

@@ -0,0 +1,14 @@
+# TimeReactHooks
+
+A React port of the ["User Interface - Time" Elm Example](https://elm-lang.org/examples/time).
+
+## Expected Behavior:
+
+### Browser
+
+The browser will display the current time in hours, minutes and seconds, updating every second.
+
+## Dependencies Used:
+
+[react](https://www.npmjs.com/package/react)
+[react-dom](https://www.npmjs.com/package/react-dom)

recipes/TimeReactHooks/spago.dhall

@@ -0,0 +1,13 @@
+{ name = "TimeReactHooks"
+, dependencies =
+  [ "console"
+  , "datetime"
+  , "effect"
+  , "js-timers"
+  , "now"
+  , "psci-support"
+  , "react-basic-hooks"
+  ]
+, packages = ../../packages.dhall
+, sources = [ "recipes/TimeReactHooks/src/**/*.purs" ]
+}

recipes/TimeReactHooks/src/Main.purs

@@ -0,0 +1,65 @@
+module TimeReactHooks.Main where
+
+import Prelude
+import Data.Array (intercalate)
+import Data.Enum (fromEnum)
+import Data.Maybe (Maybe(..))
+import Data.Newtype (class Newtype)
+import Data.Time (Time)
+import Data.Time as Time
+import Effect (Effect)
+import Effect.Exception (throw)
+import Effect.Now (nowTime)
+import Effect.Timer (clearInterval, setInterval)
+import React.Basic.DOM (render)
+import React.Basic.DOM as R
+import React.Basic.Hooks (Component, Hook, UseEffect, UseState, coerceHook, component, useEffectOnce, useState', (/\))
+import React.Basic.Hooks as React
+import Web.DOM.NonElementParentNode (getElementById)
+import Web.HTML (window)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.Window (document)
+
+main :: Effect Unit
+main = do
+  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
+  case container of
+    Nothing -> throw "Root element not found."
+    Just c -> do
+      time <- mkTime
+      render (time {}) c
+
+mkTime :: Component {}
+mkTime = do
+  now <- nowTime
+  component "Time" \_ -> React.do
+    currentTime <- useCurrentTime now
+    let
+      hour = fromEnum (Time.hour currentTime)
+
+      minute = fromEnum (Time.minute currentTime)
+
+      second = fromEnum (Time.second currentTime)
+    pure
+      $ R.h1_
+          [ R.text
+              $ intercalate ":"
+                  [ show hour
+                  , show minute
+                  , show second
+                  ]
+          ]
+
+newtype UseCurrentTime hooks
+  = UseCurrentTime (UseEffect Unit (UseState Time hooks))
+
+derive instance ntUseCurrentTime :: Newtype (UseCurrentTime hooks) _
+
+useCurrentTime :: Time -> Hook UseCurrentTime Time
+useCurrentTime initialTime =
+  coerceHook React.do
+    currentTime /\ setCurrentTime <- useState' initialTime
+    useEffectOnce do
+      intervalId <- setInterval 1000 (nowTime >>= setCurrentTime)
+      pure (clearInterval intervalId)
+    pure currentTime

recipes/TimeReactHooks/web/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>TimeReactHooks</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="./index.js"></script>
+  </body>
+</html>

recipes/TimeReactHooks/web/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("../../../output/TimeReactHooks.Main/index.js").main();