Update Halogen and React cards recipes (#143)

Author: milesfrain

README.md

@@ -69,7 +69,7 @@ Running a web-compatible recipe:
 |   | :heavy_check_mark: | [BookReact](recipes/BookReact) | A React port of the ["HTTP - Book" Elm Example](https://elm-lang.org/examples/book). |
 |   | :heavy_check_mark: | [ButtonsHalogen](recipes/ButtonsHalogen) | A Halogen port of the ["User Input - Buttons" Elm Example](https://elm-lang.org/examples). |
 |   | :heavy_check_mark: | [ButtonsReact](recipes/ButtonsReact) | A React port of the ["User Input - Buttons" Elm Example](https://elm-lang.org/examples/buttons). |
-|   | :heavy_check_mark: | [CardsHalogen](recipes/CardsHalogen) | A Halogen port of the ["Random - Cards" Elm Example](https://elm-lang.org/examples). |
+|   | :heavy_check_mark: | [CardsHalogen](recipes/CardsHalogen) | A Halogen port of the ["Random - Cards" Elm Example](https://elm-lang.org/examples/cards). |
 |   | :heavy_check_mark: | [CardsReact](recipes/CardsReact) | A React port of the ["Random - Cards" Elm Example](https://elm-lang.org/examples/cards). |
 |   | :heavy_check_mark: | [CatGifsHalogen](recipes/CatGifsHalogen) | A Halogen port of the ["HTTP - Cat GIFs" Elm Example](https://elm-lang.org/examples). |
 |   | :heavy_check_mark: | [CatGifsReact](recipes/CatGifsReact) | A React port of the ["HTTP - Cat GIFs" Elm Example](https://elm-lang.org/examples/cat-gifs). |

recipes/CardsHalogen/README.md

@@ -1,9 +1,9 @@
 # CardsHalogen
 
-A Halogen port of the ["Random - Cards" Elm Example](https://elm-lang.org/examples).
+A Halogen port of the ["Random - Cards" Elm Example](https://elm-lang.org/examples/cards).
 
 ## Expected Behavior:
 
 ### Browser
 
-If the user clicks the "Draw" button, a random card will be displayed. Note: the Elm example uses a uniform generator whereas this example does not because PureScript does not have an out-of-box uniform generator.
+When the user clicks the "Draw" button, a random card is drawn from a deck of 13 spades and displayed.

recipes/CardsHalogen/spago.dhall

@@ -4,8 +4,9 @@
   , "effect"
   , "halogen-css"
   , "halogen-hooks"
+  , "nonempty"
   , "psci-support"
-  , "random"
+  , "quickcheck"
   ]
 , packages = ../../packages.dhall
 , sources = [ "recipes/CardsHalogen/src/**/*.purs" ]

recipes/CardsHalogen/src/Main.purs

@@ -4,18 +4,19 @@ import Prelude
 
 import CSS (fontSize, em)
 import Data.Maybe (Maybe(..))
+import Data.NonEmpty ((:|))
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Class (class MonadEffect)
-import Effect.Random (randomInt)
-import Halogen (liftEffect)
 import Halogen as H
 import Halogen.Aff as HA
 import Halogen.HTML as HH
-import Halogen.HTML.Events as HE
 import Halogen.HTML.CSS as HC
+import Halogen.HTML.Events as HE
 import Halogen.Hooks as Hooks
 import Halogen.VDom.Driver (runUI)
+import Test.QuickCheck (mkSeed)
+import Test.QuickCheck.Gen (Gen, elements, runGen)
 
 main :: Effect Unit
 main =
@@ -28,23 +29,25 @@ hookComponent
    . MonadEffect anyMonad
   => H.Component HH.HTML unusedQuery unusedInput unusedOutput anyMonad
 hookComponent = Hooks.component \_ _ -> Hooks.do
-  card /\ cardIdx <- Hooks.useState Three
+  let
+    initialGenState = { newSeed: mkSeed 3, size: 1 }
+  -- "Card state" is a tuple of the card and generator state.
+  -- We don't need the actual generator state for rendering, so we're ignoring it with `_`.
+  (card /\ _) /\ cardStateIdx <- Hooks.useState (runGen cardGenerator initialGenState)
   Hooks.pure $
     HH.div_
     [ HH.button
       [ HE.onClick \_ -> Just do
-          -- Elm uses a uniform generator
-          -- PureScript doesn't have an out-of-box version of that,
-          -- so we'll just use a random value.
-        i <- liftEffect $ randomInt 1 13
-        Hooks.put cardIdx $ intToCard i
+        -- Modify the card generator state by re-running the generator.
+        -- We don't need the card value for this update function, so it is ignored with `_`.
+        Hooks.modify_ cardStateIdx \(_ /\ genState) -> runGen cardGenerator genState
       ]
       [ HH.text "Draw" ]
     , HH.div
       [ HC.style do
         fontSize $ em 12.0
       ]
-      [ HH.text $ renderCard card ]
+      [ HH.text $ viewCard card ]
     ]
 
 data Card
@@ -62,24 +65,26 @@ data Card
   | Queen
   | King
 
-intToCard :: Int -> Card
-intToCard = case _ of
-  1 -> Ace
-  2 -> Two
-  3 -> Three
-  4 -> Four
-  5 -> Five
-  6 -> Six
-  7 -> Seven
-  8 -> Eight
-  9 -> Nine
-  10 -> Ten
-  11 -> Jack
-  12 -> Queen
-  _ -> King
+cardGenerator :: Gen Card
+cardGenerator =
+  elements
+    $ Ace
+    :| [ Two
+      , Three
+      , Four
+      , Five
+      , Six
+      , Seven
+      , Eight
+      , Nine
+      , Ten
+      , Jack
+      , Queen
+      , King
+      ]
 
-renderCard :: Card -> String
-renderCard = case _ of
+viewCard :: Card -> String
+viewCard = case _ of
   Ace -> "🂡"
   Two -> "🂢"
   Three -> "🂣"

recipes/CardsReact/README.md

@@ -6,7 +6,7 @@ A React port of the ["Random - Cards" Elm Example](https://elm-lang.org/examples
 
 ### Browser
 
-If the user clicks the "Draw" button, a random card will be drawn from a deck of 13 spades and displayed.
+When the user clicks the "Draw" button, a random card is drawn from a deck of 13 spades and displayed.
 
 ## Dependencies Used:
 

recipes/CardsReact/src/Main.purs

@@ -17,6 +17,35 @@ 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
+      cardsComponent <- mkCardsComponent
+      render (cardsComponent {}) c
+
+mkCardsComponent :: Component {}
+mkCardsComponent = do
+  let
+    initialGenState = { newSeed: mkSeed 3, size: 1 }
+  component "Cards" \_ -> React.do
+    -- "Card state" is a tuple of the card and generator state.
+    -- We don't need the actual generator state for rendering, so we're ignoring it with `_`.
+    (card /\ _) /\ setCardState <- useState (runGen cardGenerator initialGenState)
+    let
+      onClick =
+        handler_ do
+          -- Modify the card generator state by re-running the generator.
+          -- We don't need the card value for this update function, so it is ignored with `_`.
+          setCardState \(_ /\ genState) -> runGen cardGenerator genState
+    pure
+      $ R.div_
+          [ R.button { onClick, children: [ R.text "Draw" ] }
+          , R.div { style: css { fontSize: "12em" }, children: [ R.text (viewCard card) ] }
+          ]
+
 data Card
   = Ace
   | Two
@@ -50,31 +79,6 @@ cardGenerator =
       , King
       ]
 
-main :: Effect Unit
-main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
-      cardsComponent <- mkCardsComponent
-      render (cardsComponent {}) c
-
-mkCardsComponent :: Component {}
-mkCardsComponent = do
-  let
-    initialGenState = { newSeed: mkSeed 3, size: 1 }
-  component "Cards" \_ -> React.do
-    (card /\ _) /\ setCardState <- useState (runGen cardGenerator initialGenState)
-    let
-      onClick =
-        handler_ do
-          setCardState \(_ /\ genState) -> runGen cardGenerator genState
-    pure
-      $ R.div_
-          [ R.button { onClick, children: [ R.text "Draw" ] }
-          , R.div { style: css { fontSize: "12em" }, children: [ R.text (viewCard card) ] }
-          ]
-
 viewCard :: Card -> String
 viewCard = case _ of
   Ace -> "🂡"