Add FormsReactHooks (#164)

Author: pete-murphy

README.md

@@ -99,6 +99,7 @@ Running a web-compatible recipe:
 |   | :heavy_check_mark: | [DragAndDropHalogenHooks](recipes/DragAndDropHalogenHooks) | A Halogen port of the ["Files - Drag-and-Drop" Elm Example](https://elm-lang.org/examples/drag-and-drop). |
 |   | :heavy_check_mark: | [FileUploadHalogenHooks](recipes/FileUploadHalogenHooks) | A Halogen port of the ["Files - Upload" Elm Example](https://elm-lang.org/examples/upload). |
 |   | :heavy_check_mark: | [FindDomElementJs](recipes/FindDomElementJs) | This recipe shows how to find elements in the DOM by using query selectors. |
+|   | :heavy_check_mark: | [FormsReactHooks](recipes/FormsReactHooks) | A React port of the ["User Interface - Forms" Elm Example](https://elm-lang.org/examples/forms). |
 |   | :heavy_check_mark: | [GroceriesHalogenHooks](recipes/GroceriesHalogenHooks) | A Halogen port of the ["HTML - Groceries" Elm Example](https://elm-lang.org/examples). |
 |   | :heavy_check_mark: | [GroceriesReactHooks](recipes/GroceriesReactHooks) | A React port of the ["HTML - Groceries" Elm Example](https://elm-lang.org/examples). |
 |   | :heavy_check_mark: | [HelloHalogenHooks](recipes/HelloHalogenHooks) | A Halogen port of the ["HTML - Hello" Elm Example](https://elm-lang.org/examples). |

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

@@ -0,0 +1,14 @@
+# FormsReactHooks
+
+A React port of the ["User Interface - Forms" Elm Example](https://elm-lang.org/examples/forms).
+
+## Expected Behavior:
+
+### Browser
+
+The browser will display a form with three text fields, for name, password and password confirmation. A validation status will show below the form, to indicate "OK" if the passwords match, or "Passwords don't match!" otherwise.
+
+## Dependencies Used:
+
+[react](https://www.npmjs.com/package/react)
+[react-dom](https://www.npmjs.com/package/react-dom)

recipes/FormsReactHooks/spago.dhall

@@ -0,0 +1,10 @@
+{ name = "FormsReactHooks"
+, dependencies =
+  [ "console"
+  , "effect"
+  , "psci-support"
+  , "react-basic-hooks"
+  ]
+, packages = ../../packages.dhall
+, sources = [ "recipes/FormsReactHooks/src/**/*.purs" ]
+}

recipes/FormsReactHooks/src/Main.purs

@@ -0,0 +1,73 @@
+module FormsReactHooks.Main where
+
+import Prelude
+import Data.Maybe (Maybe(..), fromMaybe)
+import Effect (Effect)
+import Effect.Exception (throw)
+import React.Basic.DOM (css, render)
+import React.Basic.DOM as R
+import React.Basic.DOM.Events (preventDefault, targetValue)
+import React.Basic.Events (EventHandler, handler)
+import React.Basic.Hooks (Component, component, useState, (/\), Hook, UseState, type (/\))
+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)
+
+main :: Effect Unit
+main = do
+  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
+  case container of
+    Nothing -> throw "Root element not found."
+    Just c -> do
+      form <- mkForm
+      render (form {}) c
+
+mkForm :: Component {}
+mkForm = do
+  component "Form" \_ -> React.do
+    name /\ onNameChange <- useInput ""
+    password /\ onPasswordChange <- useInput ""
+    passwordAgain /\ onPasswordAgainChange <- useInput ""
+    let
+      renderValidation =
+        if password == passwordAgain then
+          R.div { style: css { color: "green" }, children: [ R.text "OK" ] }
+        else
+          R.div { style: css { color: "red" }, children: [ R.text "Passwords do not match!" ] }
+    pure
+      $ R.form
+          { onSubmit: handler preventDefault mempty
+          , children:
+              [ R.input
+                  { placeholder: "Name"
+                  , value: name
+                  , onChange: onNameChange
+                  }
+              , R.input
+                  { type: "password"
+                  , placeholder: "Password"
+                  , value: password
+                  , onChange: onPasswordChange
+                  }
+              , R.input
+                  { type: "password"
+                  , placeholder: "Re-enter Password"
+                  , value: passwordAgain
+                  , onChange: onPasswordAgainChange
+                  }
+              , renderValidation
+              ]
+          }
+
+useInput ::
+  String ->
+  Hook
+    (UseState String)
+    (String /\ EventHandler)
+useInput initialValue = React.do
+  value /\ setValue <- useState initialValue
+  let
+    onChange = handler targetValue (setValue <<< const <<< fromMaybe "")
+  pure (value /\ onChange)

recipes/FormsReactHooks/web/index.html

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

recipes/FormsReactHooks/web/index.js

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