Add ClockReactHooks recipe (#190)

* Add ClockReactHooks recipe

Partially addresses #157

* Rename component Time → Clock

* Use tau

Author: pete-murphy

README.md

@@ -96,6 +96,7 @@ Running a web-compatible recipe:
 |   | :heavy_check_mark: | [CardsReactHooks](recipes/CardsReactHooks) | A React port of the ["Random - Cards" Elm Example](https://elm-lang.org/examples/cards). |
 |   | :heavy_check_mark: | [CatGifsHalogenHooks](recipes/CatGifsHalogenHooks) | A Halogen port of the ["HTTP - Cat GIFs" Elm Example](https://elm-lang.org/examples/cat-gifs). |
 |   | :heavy_check_mark: | [CatGifsReactHooks](recipes/CatGifsReactHooks) | A React port of the ["HTTP - Cat GIFs" Elm Example](https://elm-lang.org/examples/cat-gifs). |
+|   | :heavy_check_mark: | [ClockReactHooks](recipes/ClockReactHooks) | A React port of the ["User Interface - Clock" Elm Example](https://elm-lang.org/examples/clock). |
 |   | :heavy_check_mark: | [ComponentsHalogenHooks](recipes/ComponentsHalogenHooks) | Demonstrates how to nest one Halogen-Hooks-based component inside another and send/receive queries between the two. |
 |   | :heavy_check_mark: | [ComponentsInputHalogenHooks](recipes/ComponentsInputHalogenHooks) | Each time a parent re-renders, it will pass a new input value into the child, and the child will update accordingly. |
 |   | :heavy_check_mark: | [ComponentsMultiTypeHalogenHooks](recipes/ComponentsMultiTypeHalogenHooks) | Demonstrates a component that can communicate with its children that have differing types. |

recipes/ClockReactHooks/.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/ClockReactHooks/README.md

@@ -0,0 +1,14 @@
+# ClockReactHooks
+
+A React port of the ["User Interface - Clock" Elm Example](https://elm-lang.org/examples/clock).
+
+## Expected Behavior:
+
+### Browser
+
+The browser will render a clock showing the current local time.
+
+## Dependencies Used:
+
+[react](https://www.npmjs.com/package/react)
+[react-dom](https://www.npmjs.com/package/react-dom)

recipes/ClockReactHooks/spago.dhall

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

recipes/ClockReactHooks/src/Main.purs

@@ -0,0 +1,89 @@
+module ClockReactHooks.Main where
+
+import Prelude
+import Data.JSDate (JSDate)
+import Data.JSDate as JSDate
+import Data.Maybe (Maybe(..))
+import Data.Newtype (class Newtype)
+import Effect (Effect)
+import Effect.Exception (throw)
+import Effect.Timer (clearInterval, setInterval)
+import Math (cos, sin, tau)
+import React.Basic.DOM (render)
+import React.Basic.DOM.SVG as SVG
+import React.Basic.Hooks (Component, Hook, JSX, 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)
+
+type Time
+  = { hours :: Number, minutes :: Number, seconds :: Number }
+
+main :: Effect Unit
+main = do
+  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
+  case container of
+    Nothing -> throw "Root element not found."
+    Just c -> do
+      clock <- mkClock
+      render (clock {}) c
+
+mkClock :: Component {}
+mkClock = do
+  now <- JSDate.now >>= getTime
+  component "Clock" \_ -> React.do
+    { hours, minutes, seconds } <- useCurrentTime now
+    pure
+      $ SVG.svg
+          { viewBox: "0 0 400 400"
+          , width: "400"
+          , height: "400"
+          , children:
+              [ SVG.circle { cx: "200", cy: "200", r: "120", fill: "#1293D8" }
+              , hand 6 60.0 (hours / 12.0)
+              , hand 6 90.0 (minutes / 60.0)
+              , hand 3 90.0 (seconds / 60.0)
+              ]
+          }
+
+hand :: Int -> Number -> Number -> JSX
+hand width length turns =
+  let
+    t = tau * (turns - 0.25)
+
+    x = 200.0 + length * cos t
+
+    y = 200.0 + length * sin t
+  in
+    SVG.line
+      { x1: "200"
+      , y1: "200"
+      , x2: show x
+      , y2: show y
+      , stroke: "white"
+      , strokeWidth: show width
+      , strokeLinecap: "round"
+      }
+
+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 (JSDate.now >>= getTime >>= setCurrentTime)
+      pure (clearInterval intervalId)
+    pure currentTime
+
+getTime :: JSDate -> Effect Time
+getTime date = ado
+  hours <- JSDate.getHours date
+  minutes <- JSDate.getMinutes date
+  seconds <- JSDate.getSeconds date
+  in { hours, minutes, seconds }

recipes/ClockReactHooks/web/index.html

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

recipes/ClockReactHooks/web/index.js

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