Replace giphy API with dog API in CatGifReactHooks and CatGifHalogenHooks recipes (#304)

* Use dog.ceo API in stead of giphy.com

* Update filenames, README

* Replace giphy API with dog.ceo in Halogen recipe

* Remove links to Elm example in DogImages recipes

---------

Co-authored-by: Peter Murphy <[email protected]>

Author: pete-murphy

README.md

@@ -98,8 +98,6 @@ Running a web-compatible recipe:
 | :heavy_check_mark: |   | [CapabilityPatternNode](recipes/CapabilityPatternNode) | A skeletal version of an application structuring pattern |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/CardsHalogenHooks/src/Main.purs)) | [CardsHalogenHooks](recipes/CardsHalogenHooks) | A Halogen port of the ["Random - Cards" Elm Example](https://elm-lang.org/examples/cards). |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/CardsReactHooks/src/Main.purs)) | [CardsReactHooks](recipes/CardsReactHooks) | A React port of the ["Random - Cards" Elm Example](https://elm-lang.org/examples/cards). |
-|   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/CatGifsHalogenHooks/src/Main.purs)) | [CatGifsHalogenHooks](recipes/CatGifsHalogenHooks) | A Halogen port of the ["HTTP - Cat GIFs" Elm Example](https://elm-lang.org/examples/cat-gifs). |
-|   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/CatGifsReactHooks/src/Main.purs)) | [CatGifsReactHooks](recipes/CatGifsReactHooks) | A React port of the ["HTTP - Cat GIFs" Elm Example](https://elm-lang.org/examples/cat-gifs). |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/ClockReactHooks/src/Main.purs)) | [ClockReactHooks](recipes/ClockReactHooks) | A React port of the ["User Interface - Clock" Elm Example](https://elm-lang.org/examples/clock). |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/ComponentsHalogenHooks/src/Main.purs)) | [ComponentsHalogenHooks](recipes/ComponentsHalogenHooks) | Demonstrates how to nest one Halogen-Hooks-based component inside another and send/receive queries between the two. |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/ComponentsInputHalogenHooks/src/Main.purs)) | [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. |
@@ -111,6 +109,8 @@ Running a web-compatible recipe:
 | :heavy_check_mark: | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/DebuggingLog/src/Main.purs)) | [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: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/DiceLog/src/Main.purs)) | [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. |
+|   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/DogImagesHalogenHooks/src/Main.purs)) | [DogImagesHalogenHooks](recipes/DogImagesHalogenHooks) | Fetches random dog images from the [Dog API](https://dog.ceo/dog-api/). |
+|   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/DogImagesReactHooks/src/Main.purs)) | [DogImagesReactHooks](recipes/DogImagesReactHooks) | Fetches random dog images from the [Dog API](https://dog.ceo/dog-api/). |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/DragAndDropHalogenHooks/src/Main.purs)) | [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: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/DragAndDropReactHooks/src/Main.purs)) | [DragAndDropReactHooks](recipes/DragAndDropReactHooks) | A React port of the ["Files - Drag-and-Drop" Elm Example](https://elm-lang.org/examples/drag-and-drop). |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/FileUploadHalogenHooks/src/Main.purs)) | [FileUploadHalogenHooks](recipes/FileUploadHalogenHooks) | A Halogen port of the ["Files - Upload" Elm Example](https://elm-lang.org/examples/upload). |

recipes/CatGifsHalogenHooks/README.md

@@ -0,0 +1,9 @@
+# CatGifsHalogenHooks
+
+Fetches random dog images from the [Dog API](https://dog.ceo/dog-api/).
+
+## Expected Behavior:
+
+### Browser
+
+The browser will display "Loading..." and then display a dog image with a button that will display the next random dog image if the HTTP request succeeds or an error message along with the same button if it fails.

recipes/CatGifsHalogenHooks/web/index.html

@@ -1,4 +1,4 @@
-{ name = "CatGifsHalogenHooks"
+{ name = "DogImagesHalogenHooks"
 , dependencies =
   [ "aff"
   , "affjax"
@@ -19,5 +19,5 @@
   , "tuples"
   ]
 , packages = ../../packages.dhall
-, sources = [ "recipes/CatGifsHalogenHooks/src/**/*.purs" ]
+, sources = [ "recipes/DogImagesHalogenHooks/src/**/*.purs" ]
 }

recipes/CatGifsHalogenHooks/web/index.js

@@ -1,11 +1,11 @@
-module CatGifsHalogenHooks.Main where
+module DogImagesHalogenHooks.Main where
 
 import Prelude
 
 import Affjax.ResponseFormat as AXRF
 import Affjax.StatusCode (StatusCode(..))
 import Affjax.Web as AX
-import CSS (block, display)
+import CSS (block, display, marginBottom, maxWidth, px, rem)
 import Data.Argonaut.Core (Json)
 import Data.Codec (decode)
 import Data.Codec.Argonaut (JsonDecodeError)
@@ -41,64 +41,66 @@ hookComponent = Hooks.component \_ _ -> Hooks.do
   content /\ contentIdx <- Hooks.useState RD.NotAsked
 
   let
-    getNextGif = do
+    getNextImage = do
       Hooks.put contentIdx RD.Loading
       errorOrResponse <- liftAff $ AX.request $ AX.defaultRequest
-        { url = "https://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=cat"
+        { url = "https://dog.ceo/api/breeds/image/random"
         , method = Left GET
         , responseFormat = AXRF.json
         }
       let
         httpResult = case errorOrResponse of
           Right jsonRec | jsonRec.status == StatusCode 200 ->
             case decodeJson jsonRec.body of
-              Right rec -> RD.Success rec.data.images.downsized.url
+              Right rec -> RD.Success rec.message
               _ -> RD.Failure "decode error"
           _ ->
             RD.Failure "http error"
 
       Hooks.put contentIdx httpResult
 
   Hooks.useLifecycleEffect do
-    getNextGif
+    getNextImage
     pure Nothing
 
   Hooks.pure $
     HH.div_
-      [ HH.h2_ [ HH.text "Random Cats" ]
+      [ HH.h2_ [ HH.text "Random Dogs" ]
       , case content of
           RD.NotAsked ->
             HH.text "Loading page..."
           RD.Loading ->
             HH.text "Loading..."
-          RD.Failure _ ->
+          RD.Failure reason ->
             HH.div_
-              [ HH.text "I could not load a random cat for some reason. "
+              [ HH.text "I could not load a random dog for some reason. "
+              , HH.pre_ [ HH.text reason ]
               , HH.button
-                  [ HE.onClick \_ -> getNextGif
-                  ]
+                  [ HE.onClick \_ -> getNextImage ]
                   [ HH.text "Try Again!" ]
               ]
 
           RD.Success url ->
             HH.div_
               [ HH.button
-                  [ HE.onClick \_ -> getNextGif
-                  , HC.style $ display block
+                  [ HE.onClick \_ -> getNextImage
+                  , HC.style do
+                      display block
+                      marginBottom (1.0 # rem)
                   ]
                   [ HH.text "More Please!" ]
-              , HH.img [ HP.src url ]
+              , HH.img
+                  [ HP.src url
+                  , HC.style do
+                      maxWidth (400.0 # px)
+                  ]
               ]
       ]
 
-decodeJson :: Json -> Either JsonDecodeError { data :: { images :: { downsized :: { url :: String } } } }
+decodeJson :: Json -> Either JsonDecodeError { message :: String, status :: String }
 decodeJson = decode
-  $ CA.object "data"
+  $ CA.object "response"
   $ CAR.record
-      { data: CA.object "images" $ CAR.record
-          { images: CA.object "downsized" $ CAR.record
-              { downsized: CA.object "url" $ CAR.record
-                  { url: CA.string }
-              }
-          }
+      { message: CA.string
+      , status: CA.string
       }