Show local time in Time* examples (#179)

* Fix TimeReactHooks example

Partially addresses #167

* Fix TimeHalogenHooks example

Partially addresses #167

* Remove unused dependencies

Author: pete-murphy

recipes/TimeHalogenHooks/spago.dhall

@@ -3,6 +3,7 @@
   [ "console"
   , "effect"
   , "halogen-hooks"
+  , "js-date"
   , "interpolate"
   , "psci-support"
   ]

recipes/TimeHalogenHooks/src/Main.purs

@@ -3,16 +3,15 @@ module TimeHalogenHooks.Main where
 import Prelude
 
 import Control.Monad.Rec.Class (forever)
-import Data.Enum (fromEnum)
+import Data.Int (floor)
 import Data.Interpolate (i)
+import Data.JSDate as JSDate
 import Data.Maybe (Maybe(..))
-import Data.Time (Time(..))
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Aff (Milliseconds(..), error)
 import Effect.Aff as Aff
 import Effect.Aff.Class (class MonadAff)
-import Effect.Now (nowTime)
 import Halogen (liftEffect)
 import Halogen as H
 import Halogen.Aff as HA
@@ -57,10 +56,9 @@ hookComponent = Hooks.component \_ _ -> Hooks.do
     HH.h1_ [ HH.text $ i hour":"minute":"second ]
 
   where
-    getTime = do
-      Time h m s _ <- liftEffect $ nowTime
-      let
-        hour = fromEnum h
-        minute = fromEnum m
-        second = fromEnum s
+    getTime = liftEffect do
+      now <- JSDate.now
+      hour <- floor <$> JSDate.getHours now
+      minute <- floor <$> JSDate.getMinutes now
+      second <- floor <$> JSDate.getSeconds now
       pure { hour, minute, second }

recipes/TimeReactHooks/spago.dhall

@@ -1,10 +1,9 @@
 { name = "TimeReactHooks"
 , dependencies =
   [ "console"
-  , "datetime"
   , "effect"
+  , "js-date"
   , "js-timers"
-  , "now"
   , "psci-support"
   , "react-basic-hooks"
   ]

recipes/TimeReactHooks/src/Main.purs

@@ -2,14 +2,13 @@ module TimeReactHooks.Main where
 
 import Prelude
 import Data.Array (intercalate)
-import Data.Enum (fromEnum)
+import Data.Int (floor)
+import Data.JSDate (JSDate)
+import Data.JSDate as JSDate
 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
@@ -20,6 +19,9 @@ import Web.HTML (window)
 import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
+type Time
+  = { hours :: Int, minutes :: Int, seconds :: Int }
+
 main :: Effect Unit
 main = do
   container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
@@ -31,22 +33,16 @@ main = do
 
 mkTime :: Component {}
 mkTime = do
-  now <- nowTime
+  now <- JSDate.now >>= getTime
   component "Time" \_ -> React.do
-    currentTime <- useCurrentTime now
-    let
-      hour = fromEnum (Time.hour currentTime)
-
-      minute = fromEnum (Time.minute currentTime)
-
-      second = fromEnum (Time.second currentTime)
+    { hours, minutes, seconds } <- useCurrentTime now
     pure
       $ R.h1_
           [ R.text
               $ intercalate ":"
-                  [ show hour
-                  , show minute
-                  , show second
+                  [ show hours
+                  , show minutes
+                  , show seconds
                   ]
           ]
 
@@ -60,6 +56,13 @@ useCurrentTime initialTime =
   coerceHook React.do
     currentTime /\ setCurrentTime <- useState' initialTime
     useEffectOnce do
-      intervalId <- setInterval 1000 (nowTime >>= setCurrentTime)
+      intervalId <- setInterval 1000 (JSDate.now >>= getTime >>= setCurrentTime)
       pure (clearInterval intervalId)
     pure currentTime
+
+getTime :: JSDate -> Effect Time
+getTime date = ado
+  hours <- floor <$> JSDate.getHours date
+  minutes <- floor <$> JSDate.getMinutes date
+  seconds <- floor <$> JSDate.getSeconds date
+  in { hours, minutes, seconds }