Add ComponentsInputHalogenHooks

README.md

@@ -95,6 +95,7 @@ Running a web-compatible recipe:
 |   | :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: | [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: | :heavy_check_mark: | [DebuggingLog](recipes/DebuggingLog) | This recipe shows how to do print-debugging using the `Debug` module's `spy` and `traceM` functions. The compiler will emit warnings to remind you to remove these debug functions before you ship production code. |
 | :heavy_check_mark: |   | [DiceCLI](recipes/DiceCLI) | This recipe shows how to create an interactive command line prompt that repeatedly generates a random number between 1 and 6. |
 | :heavy_check_mark: | :heavy_check_mark: | [DiceLog](recipes/DiceLog) | This recipe shows how to log a random integer between 1 and 6 (representing a roll of a die) in either the node.js or web browser console. |

recipes/ComponentsInputHalogenHooks/.gitignore

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

recipes/ComponentsInputHalogenHooks/README.md

@@ -0,0 +1,9 @@
+# ComponentsInputHalogenHooks
+
+Each time a parent re-renders, it will pass a new input value into the child, and the child will update accordingly.
+
+## Expected Behavior:
+
+### Browser
+
+The parent stores an `Int`. Clicking the buttons will increment/decrement that value. The children will produce the result of a mathematical computation using that value.

recipes/ComponentsInputHalogenHooks/spago.dhall

@@ -0,0 +1,11 @@
+{ name = "ComponentsInputHalogenHooks"
+, dependencies =
+  [ "console"
+  , "effect"
+  , "halogen-hooks"
+  , "halogen-hooks-extra"
+  , "psci-support"
+  ]
+, packages = ../../packages.dhall
+, sources = [ "recipes/ComponentsInputHalogenHooks/src/**/*.purs" ]
+}

recipes/ComponentsInputHalogenHooks/src/Main.purs

@@ -0,0 +1,63 @@
+module ComponentsInputHalogenHooks.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)
+import Halogen as H
+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 as Hooks
+import Halogen.Hooks.Extra.Hooks.UseGet (useGet)
+import Halogen.VDom.Driver (runUI)
+
+main :: Effect Unit
+main =
+  HA.runHalogenAff do
+    body <- HA.awaitBody
+    void $ runUI containerComponent unit body
+
+_button :: SProxy "button"
+_button = SProxy
+
+containerComponent
+  :: forall unusedQuery unusedInput unusedOutput anyMonad
+   . MonadEffect anyMonad
+  => H.Component HH.HTML unusedQuery unusedInput unusedOutput anyMonad
+containerComponent = Hooks.component \_ _ -> Hooks.do
+  state /\ stateIdx <- Hooks.useState 0
+  Hooks.pure $
+    HH.div_
+    [ HH.ul_
+        [ HH.slot _display 1 displayComponent state absurd
+        , HH.slot _display 2 displayComponent (state * 2) absurd
+        , HH.slot _display 3 displayComponent (state * 3) absurd
+        , HH.slot _display 4 displayComponent (state * 10) absurd
+        , HH.slot _display 5 displayComponent (state * state) absurd
+        ]
+    , HH.button
+        [ HE.onClick \_ -> Just $ Hooks.modify_ stateIdx (_ + 1) ]
+        [ HH.text "+1"]
+    , HH.button
+        [ HE.onClick \_ -> Just $ Hooks.modify_ stateIdx (_ - 1) ]
+        [ HH.text "-1"]
+    ]
+
+_display = SProxy :: SProxy "display"
+
+displayComponent
+  :: forall unusedQuery unusedOutput anyMonad
+   . MonadEffect anyMonad
+  => H.Component HH.HTML unusedQuery Int unusedOutput anyMonad
+displayComponent = Hooks.component \_ input -> Hooks.do
+  latestInput <- useGet input
+  Hooks.pure $
+    HH.div_
+    [ HH.text "My input value is:"
+    , HH.strong_ [ HH.text (show latestInput) ]
+    ]

recipes/ComponentsInputHalogenHooks/web/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>ComponentsInputHalogenHooks</title>
+  </head>
+
+  <body>
+    <script src="./index.js"></script>
+  </body>
+</html>

recipes/ComponentsInputHalogenHooks/web/index.js

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