Restore broken Components*HalogenHooks recipes (#283)

* Restore broken Components*HalogenHooks recipes

* Add missing deps

README.md

@@ -99,7 +99,10 @@ Running a web-compatible recipe:
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/CatGifsHalogenHooks/src/Main.purs)) | [CatGifsHalogenHooks](recipes/CatGifsHalogenHooks) | A Halogen port of the ["HTTP - Cat GIFs" Elm Example](https://elm-lang.org/examples/cat-gifs). |
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/CatGifsReactHooks/src/Main.purs)) | [CatGifsReactHooks](recipes/CatGifsReactHooks) | A React port of the ["HTTP - Cat GIFs" Elm Example](https://elm-lang.org/examples/cat-gifs). |
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ClockReactHooks/src/Main.purs)) | [ClockReactHooks](recipes/ClockReactHooks) | A React port of the ["User Interface - Clock" Elm Example](https://elm-lang.org/examples/clock). |
+|   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsHalogenHooks/src/Main.purs)) | [ComponentsHalogenHooks](recipes/ComponentsHalogenHooks) | Demonstrates how to nest one Halogen-Hooks-based component inside another and send/receive queries between the two. |
+|   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsInputHalogenHooks/src/Main.purs)) | [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: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsInputReactHooks/src/Main.purs)) | [ComponentsInputReactHooks](recipes/ComponentsInputReactHooks) | Each time the parent's state updates, it will pass a new prop value into the child, and the child will update accordingly. |
+|   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsMultiTypeHalogenHooks/src/Main.purs)) | [ComponentsMultiTypeHalogenHooks](recipes/ComponentsMultiTypeHalogenHooks) | Demonstrates a component that can communicate with its children that have differing types. |
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsMultiTypeReactHooks/src/Main.purs)) | [ComponentsMultiTypeReactHooks](recipes/ComponentsMultiTypeReactHooks) | Demonstrates a parent component with several children components, each with different prop types. |
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsReactHooks/src/Main.purs)) | [ComponentsReactHooks](recipes/ComponentsReactHooks) | Demonstrates how to nest one React Hooks-based component inside another and send props from the parent to the child component. |
 | :heavy_check_mark: | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/DateTimeBasicsLog/src/Main.purs)) | [DateTimeBasicsLog](recipes/DateTimeBasicsLog) | This recipe shows how to use `purescript-datetime` library to create `Time`, `Date`, and `DateTime` values and adjust/diff them. |

recipes/ComponentsHalogenHooks/spago.dhall

@@ -0,0 +1,15 @@
+{ name = "ComponentsHalogenHooks"
+, dependencies =
+  [ "console"
+  , "effect"
+  , "halogen"
+  , "halogen-hooks"
+  , "maybe"
+  , "prelude"
+  , "psci-support"
+  , "refs"
+  , "tuples"
+  ]
+, packages = ../../packages.dhall
+, sources = [ "recipes/ComponentsHalogenHooks/src/**/*.purs" ]
+}

broken/ComponentsHalogenHooks/src/Main.purs → recipes/ComponentsHalogenHooks/src/Main.purs

@@ -3,7 +3,6 @@ module ComponentsHalogenHooks.Main where
 import Prelude hiding (top)
 
 import Data.Maybe (Maybe(..), maybe)
-import Data.Symbol (SProxy(..))
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Class (class MonadEffect)
@@ -14,18 +13,19 @@ import Halogen.Aff as HA
 import Halogen.HTML as HH
 import Halogen.HTML.Events as HE
 import Halogen.HTML.Properties as HP
-import Halogen.Hooks (Hooked, UseEffect, UseRef)
+import Halogen.Hooks (type (<>), Hook, UseEffect, UseRef)
 import Halogen.Hooks as Hooks
 import Halogen.VDom.Driver (runUI)
+import Type.Proxy (Proxy(..))
 
 main :: Effect Unit
 main =
   HA.runHalogenAff do
     body <- HA.awaitBody
     void $ runUI containerComponent unit body
 
-_button :: SProxy "button"
-_button = SProxy
+_button :: Proxy "button"
+_button = Proxy
 
 containerComponent
   :: forall unusedQuery unusedInput unusedOutput anyMonad
@@ -37,7 +37,7 @@ containerComponent = Hooks.component \rec _ -> Hooks.do
   buttonState /\ buttonStateIdx <- Hooks.useState (Nothing :: Maybe Boolean)
   Hooks.pure $
     HH.div_
-    [ HH.slot _button unit buttonComponent unit \_ -> Just do
+    [ HH.slot _button unit buttonComponent unit \_ -> do
         Hooks.modify_ toggleCountIdx (_ + 1)
     , HH.p_
         [ HH.text ("Button has been toggled " <> show toggleCount <> " time(s)") ]
@@ -47,8 +47,8 @@ containerComponent = Hooks.component \rec _ -> Hooks.do
             <> (maybe "(not checked yet)" (if _ then "on" else "off") buttonState)
             <> ". "
         , HH.button
-            [ HE.onClick \_ -> Just do
-                mbBtnState <- Hooks.query rec.slotToken _button unit $ H.request IsOn
+            [ HE.onClick \_ -> do
+                mbBtnState <- Hooks.query rec.slotToken _button unit $ H.mkRequest IsOn
                 Hooks.put buttonStateIdx mbBtnState
             ]
             [ HH.text "Check now" ]
@@ -73,7 +73,7 @@ buttonComponent = Hooks.component \rec _ -> Hooks.do
   Hooks.pure $
     HH.button
       [ HP.title label
-      , HE.onClick \_ -> Just do
+      , HE.onClick \_ -> do
           newState <- Hooks.modify enabledIdx not
           Hooks.raise rec.outputToken $ Toggled newState
       ]
@@ -82,7 +82,7 @@ buttonComponent = Hooks.component \rec _ -> Hooks.do
 useRenderCount
   :: forall m a
    . MonadEffect m
-  => Hooked m a (UseEffect (UseRef Int a)) Int
+  => Hook m (UseRef Int <> UseEffect <> a) Int
 useRenderCount = Hooks.do
   renders /\ rendersRef <- Hooks.useRef 1
   Hooks.captures {} Hooks.useTickEffect do

broken/ComponentsInputHalogenHooks/spago.dhall → recipes/ComponentsInputHalogenHooks/spago.dhall

@@ -2,8 +2,13 @@
 , dependencies =
   [ "console"
   , "effect"
+  , "halogen"
   , "halogen-hooks"
+  , "maybe"
+  , "prelude"
   , "psci-support"
+  , "refs"
+  , "tuples"
   ]
 , packages = ../../packages.dhall
 , sources = [ "recipes/ComponentsInputHalogenHooks/src/**/*.purs" ]

broken/ComponentsInputHalogenHooks/src/Main.purs → recipes/ComponentsInputHalogenHooks/src/Main.purs

@@ -2,8 +2,6 @@ module ComponentsInputHalogenHooks.Main where
 
 import Prelude hiding (top)
 
-import Data.Maybe (Maybe(..))
-import Data.Symbol (SProxy(..))
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Class (class MonadEffect, liftEffect)
@@ -12,18 +10,19 @@ import Halogen as H
 import Halogen.Aff as HA
 import Halogen.HTML as HH
 import Halogen.HTML.Events as HE
-import Halogen.Hooks (Hooked, UseEffect, UseRef)
+import Halogen.Hooks (type (<>), Hook, UseEffect, UseRef)
 import Halogen.Hooks as Hooks
 import Halogen.VDom.Driver (runUI)
+import Type.Proxy (Proxy(..))
 
 main :: Effect Unit
 main =
   HA.runHalogenAff do
     body <- HA.awaitBody
     void $ runUI containerComponent unit body
 
-_button :: SProxy "button"
-_button = SProxy
+_button :: Proxy "button"
+_button = Proxy
 
 containerComponent
   :: forall unusedQuery unusedInput unusedOutput anyMonad
@@ -42,16 +41,16 @@ containerComponent = Hooks.component \_ _ -> Hooks.do
         , HH.slot _display 5 displayComponent (state * state) absurd
         ]
     , HH.button
-        [ HE.onClick \_ -> Just $ Hooks.modify_ stateIdx (_ + 1) ]
+        [ HE.onClick \_ -> Hooks.modify_ stateIdx (_ + 1) ]
         [ HH.text "+1"]
     , HH.button
-        [ HE.onClick \_ -> Just $ Hooks.modify_ stateIdx (_ - 1) ]
+        [ HE.onClick \_ -> Hooks.modify_ stateIdx (_ - 1) ]
         [ HH.text "-1"]
     , HH.p_
         [ HH.text ("Parent has been rendered " <> show parentRenders <> " time(s)") ]
     ]
 
-_display = SProxy :: SProxy "display"
+_display = Proxy :: Proxy "display"
 
 displayComponent
   :: forall unusedQuery unusedOutput anyMonad
@@ -67,7 +66,7 @@ displayComponent = Hooks.component \_ input -> Hooks.do
 useRenderCount
   :: forall m a
    . MonadEffect m
-  => Hooked m a (UseEffect (UseRef Int a)) Int
+  => Hook m (UseRef Int <> UseEffect <> a) Int
 useRenderCount = Hooks.do
   renders /\ rendersRef <- Hooks.useRef 1
   Hooks.captures {} Hooks.useTickEffect do

broken/ComponentsMultiTypeHalogenHooks/spago.dhall → recipes/ComponentsMultiTypeHalogenHooks/spago.dhall

@@ -2,8 +2,13 @@
 , dependencies =
   [ "console"
   , "effect"
+  , "halogen"
   , "halogen-hooks"
+  , "maybe"
+  , "prelude"
   , "psci-support"
+  , "refs"
+  , "tuples"
   ]
 , packages = ../../packages.dhall
 , sources = [ "recipes/ComponentsMultiTypeHalogenHooks/src/**/*.purs" ]

broken/ComponentsMultiTypeHalogenHooks/src/Main.purs → recipes/ComponentsMultiTypeHalogenHooks/src/Main.purs

@@ -3,7 +3,6 @@ module ComponentsMultiTypeHalogenHooks.Main where
 import Prelude
 
 import Data.Maybe (Maybe(..))
-import Data.Symbol (SProxy(..))
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Class (class MonadEffect, liftEffect)
@@ -13,18 +12,19 @@ import Halogen.Aff as HA
 import Halogen.HTML as HH
 import Halogen.HTML.Events as HE
 import Halogen.HTML.Properties as HP
-import Halogen.Hooks (Hooked, UseEffect, UseRef)
+import Halogen.Hooks (type (<>), Hook, UseEffect, UseRef)
 import Halogen.Hooks as Hooks
 import Halogen.VDom.Driver (runUI)
+import Type.Proxy (Proxy(..))
 
 main :: Effect Unit
 main =
   HA.runHalogenAff do
     body <- HA.awaitBody
     void $ runUI containerComponent unit body
 
-_button :: SProxy "button"
-_button = SProxy
+_button :: Proxy "button"
+_button = Proxy 
 
 containerComponent
   :: forall unusedQuery unusedInput unusedOutput anyMonad
@@ -34,9 +34,9 @@ containerComponent = Hooks.component \rec _ -> Hooks.do
   parentRenders <- useRenderCount
   state /\ stateIdx <- Hooks.useState { a: Nothing, b: Nothing, c: Nothing }
   let
-    _a = SProxy :: SProxy "a"
-    _b = SProxy :: SProxy "b"
-    _c = SProxy :: SProxy "c"
+    _a = Proxy :: Proxy "a"
+    _b = Proxy :: Proxy "b"
+    _c = Proxy :: Proxy "c"
 
   Hooks.pure $
     HH.div_
@@ -63,10 +63,10 @@ containerComponent = Hooks.component \rec _ -> Hooks.do
         , HH.li_ [ HH.text ("Component C: " <> show state.c) ]
         ]
     , HH.button
-        [ HE.onClick \_ -> Just do
-            a <- Hooks.query rec.slotToken _a unit (H.request IsOn)
-            b <- Hooks.query rec.slotToken _b unit (H.request GetCount)
-            c <- Hooks.query rec.slotToken _c unit (H.request GetValue)
+        [ HE.onClick \_ -> do
+            a <- Hooks.query rec.slotToken _a unit (H.mkRequest IsOn)
+            b <- Hooks.query rec.slotToken _b unit (H.mkRequest GetCount)
+            c <- Hooks.query rec.slotToken _c unit (H.mkRequest GetValue)
             Hooks.put stateIdx { a, b, c }
         ]
         [ HH.text "Check states now" ]
@@ -89,7 +89,7 @@ componentA = Hooks.component \rec _ -> Hooks.do
     HH.div_
     [ HH.p_ [ HH.text "Toggle me!" ]
     , HH.button
-        [ HE.onClick \_ -> Just do
+        [ HE.onClick \_ -> do
             Hooks.modify_ enabledIdx not ]
         [ HH.text (if enabled then "On" else "Off") ]
     ]
@@ -112,7 +112,7 @@ componentB = Hooks.component \rec _ -> Hooks.do
         , HH.strong_ [ HH.text (show count) ]
         ]
     , HH.button
-        [ HE.onClick \_ -> Just $ Hooks.modify_ countIdx (_ + 1) ]
+        [ HE.onClick \_ -> Hooks.modify_ countIdx (_ + 1) ]
         [ HH.text ("Increment") ]
     ]
 
@@ -132,14 +132,14 @@ componentC = Hooks.component \rec _ -> Hooks.do
     [ HH.p_ [ HH.text "What do you have to say?" ]
     , HH.input
         [ HP.value state
-        , HE.onValueInput (Just <<< Hooks.put stateIdx)
+        , HE.onValueInput (Hooks.put stateIdx)
         ]
     ]
 
 useRenderCount
   :: forall m a
    . MonadEffect m
-  => Hooked m a (UseEffect (UseRef Int a)) Int
+  => Hook m (UseRef Int <> UseEffect <> a) Int
 useRenderCount = Hooks.do
   renders /\ rendersRef <- Hooks.useRef 1
   Hooks.captures {} Hooks.useTickEffect do