Fix broken CatGifsReactHooks recipe (#189)

* Fix broken CatGifsReactHooks recipe

Resolves #183

* Add header

Author: pete-murphy

README.md

@@ -95,6 +95,7 @@ Running a web-compatible recipe:
 |   | :heavy_check_mark: | [CardsHalogenHooks](recipes/CardsHalogenHooks) | A Halogen port of the ["Random - Cards" Elm Example](https://elm-lang.org/examples/cards). |
 |   | :heavy_check_mark: | [CardsReactHooks](recipes/CardsReactHooks) | A React port of the ["Random - Cards" Elm Example](https://elm-lang.org/examples/cards). |
 |   | :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: | [ComponentsMultiTypeHalogenHooks](recipes/ComponentsMultiTypeHalogenHooks) | Demonstrates a component that can communicate with its children that have differing types. |

broken/CatGifsReactHooks/src/Main.purs

@@ -0,0 +1,76 @@
+module CatGifsReactHooks.Main where
+
+import Prelude
+import Affjax as Affjax
+import Affjax.ResponseFormat as ResponseFormat
+import Data.Argonaut.Decode (decodeJson)
+import Data.Argonaut.Decode.Combinators ((.:))
+import Data.Either (hush)
+import Data.Maybe (Maybe(..), maybe)
+import Effect (Effect)
+import Effect.Aff (Aff)
+import Effect.Exception (throw)
+import React.Basic.DOM (css, render)
+import React.Basic.DOM as R
+import React.Basic.Events (handler_)
+import React.Basic.Hooks (Component, component, (/\))
+import React.Basic.Hooks as React
+import React.Basic.Hooks.Aff (useAff)
+import React.Basic.Hooks.ResetToken (useResetToken)
+import Web.DOM.NonElementParentNode (getElementById)
+import Web.HTML (window)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.Window (document)
+
+data GifState
+  = Failure
+  | Loading
+  | Success String
+
+main :: Effect Unit
+main = do
+  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
+  case container of
+    Nothing -> throw "Root element not found."
+    Just c -> do
+      catGifs <- mkCatGifs
+      render (catGifs {}) c
+
+mkCatGifs :: Component {}
+mkCatGifs = do
+  component "CatGifs" \_ -> React.do
+    (resetToken /\ reset) <- useResetToken
+    gifState <- toGifState <$> useAff resetToken getRandomCatGif
+    let
+      onClick = handler_ reset
+    pure
+      $ R.div_
+          [ R.h2_ [ R.text "Random Cats" ]
+          , case gifState of
+              Loading -> R.text "Loading..."
+              Failure ->
+                R.div_
+                  [ R.text "I could not load a random cat for some reason. "
+                  , R.button { onClick, children: [ R.text "Try Again!" ] }
+                  ]
+              Success url ->
+                R.div_
+                  [ R.button { onClick, style: css { display: "block" }, children: [ R.text "More Please!" ] }
+                  , R.img { src: url }
+                  ]
+          ]
+
+-- | Collapse nested `Maybe`s to our `GifState` type
+toGifState :: Maybe (Maybe String) -> GifState
+toGifState = maybe Loading (maybe Failure Success)
+
+getRandomCatGif :: Aff (Maybe String)
+getRandomCatGif = do
+  response <-
+    Affjax.get
+      ResponseFormat.json
+      "https://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=cat"
+  pure do
+    -- Using `hush` to ignore the possible error messages
+    { body } <- hush response
+    hush (decodeJson body >>= (_ .: "data") >>= (_ .: "image_url"))