Add BasicHalogenHooks (#175)

JordanMartinez · web-flow · commit 64b41ebd23eb · 2020-07-12T20:46:35.000-07:00
* Add BasicHalogenHooks

* Fix readme
diff --git a/README.md b/README.md
@@ -84,6 +84,7 @@ Running a web-compatible recipe:
 | Node | Web Browser | Recipe | Description |
 | :-: | :-: | - | - |
 |   | :heavy_check_mark: | [AddRemoveEventListenerJs](recipes/AddRemoveEventListenerJs) | This recipe shows how to add and remove an event listener to an HTML element. |
+|   | :heavy_check_mark: | [BasicHalogenHooks](recipes/BasicHalogenHooks) | Displays a button that toggles the label to "On" and "Off". |
 | :heavy_check_mark: | :heavy_check_mark: | [BigIntJs](recipes/BigIntJs) | This recipe shows how to print, create, and use values of the `BigIntJs` type in either the node.js or web browser console. |
 |   | :heavy_check_mark: | [BookHalogenHooks](recipes/BookHalogenHooks) | A Halogen port of the ["HTTP - Book" Elm Example](https://elm-lang.org/examples/book). |
 |   | :heavy_check_mark: | [BookReactHooks](recipes/BookReactHooks) | A React port of the ["HTTP - Book" Elm Example](https://elm-lang.org/examples/book). |
diff --git a/recipes/BasicHalogenHooks/.gitignore b/recipes/BasicHalogenHooks/.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/
diff --git a/recipes/BasicHalogenHooks/README.md b/recipes/BasicHalogenHooks/README.md
@@ -0,0 +1,3 @@
+# BasicHalogenHooks
+
+Displays a button that toggles the label to "On" and "Off".
diff --git a/recipes/BasicHalogenHooks/spago.dhall b/recipes/BasicHalogenHooks/spago.dhall
@@ -0,0 +1,10 @@
+{ name = "BasicHalogenHooks"
+, dependencies =
+  [ "console"
+  , "effect"
+  , "halogen-hooks"
+  , "psci-support"
+  ]
+, packages = ../../packages.dhall
+, sources = [ "recipes/BasicHalogenHooks/src/**/*.purs" ]
+}
diff --git a/recipes/BasicHalogenHooks/src/Main.purs b/recipes/BasicHalogenHooks/src/Main.purs
@@ -0,0 +1,33 @@
+module BasicHalogenHooks.Main where
+
+import Prelude
+
+import Data.Maybe (Maybe(..))
+import Data.Tuple.Nested ((/\))
+import Effect (Effect)
+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.VDom.Driver (runUI)
+
+main :: Effect Unit
+main =
+  HA.runHalogenAff do
+    body <- HA.awaitBody
+    void $ runUI hookComponent Nothing body
+
+hookComponent
+  :: forall unusedQuery unusedInput unusedOutput anyMonad
+   . H.Component HH.HTML unusedQuery unusedInput unusedOutput anyMonad
+hookComponent = Hooks.component \_ _ -> Hooks.do
+  enabled /\ enabledIdx <- Hooks.useState false
+  let label = if enabled then "On" else "Off"
+  Hooks.pure $
+    HH.button
+      [ HP.title label
+      , HE.onClick \_ -> Just $ Hooks.modify_ enabledIdx not
+      ]
+      [ HH.text label ]
diff --git a/recipes/BasicHalogenHooks/web/index.html b/recipes/BasicHalogenHooks/web/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>BasicHalogenHooks</title>
+</head>
+
+<body>
+  <script src="./index.js"></script>
+</body>
+
+</html>
diff --git a/recipes/BasicHalogenHooks/web/index.js b/recipes/BasicHalogenHooks/web/index.js
@@ -0,0 +1,2 @@
+"use strict";
+require("../../../output/BasicHalogenHooks.Main/index.js").main();

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# BasicHalogenHooks`
	`2`	`+`
	`3`	`+Displays a button that toggles the label to "On" and "Off".`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+"use strict";`
	`2`	`+require("../../../output/BasicHalogenHooks.Main/index.js").main();`