Use dog.ceo API in stead of giphy.com

recipes/CatGifsReactHooks/spago.dhall

@@ -4,6 +4,7 @@
   , "affjax"
   , "affjax-web"
   , "argonaut-codecs"
+  , "bifunctors"
   , "effect"
   , "either"
   , "exceptions"

recipes/CatGifsReactHooks/src/Main.purs

@@ -4,10 +4,10 @@ import Prelude
 
 import Affjax.ResponseFormat as ResponseFormat
 import Affjax.Web as Affjax
-import Data.Argonaut.Decode (decodeJson)
-import Data.Argonaut.Decode.Combinators ((.:))
-import Data.Either (hush)
-import Data.Maybe (Maybe(..), maybe)
+import Data.Argonaut.Decode (decodeJson, printJsonDecodeError)
+import Data.Bifunctor (lmap)
+import Data.Either (Either(..))
+import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Aff (Aff)
 import Effect.Exception (throw)
@@ -24,11 +24,6 @@ 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
   doc <- document =<< window
@@ -43,20 +38,24 @@ main = do
 mkApp :: Component {}
 mkApp = do
   component "CatGifs" \_ -> React.do
-    (resetToken /\ reset) <- useResetToken
-    gifState <- toGifState <$> useAff resetToken getRandomCatGif
-    let onClick = handler_ reset
+    resetToken /\ reset <- useResetToken
+    response <- useAff resetToken getRandomCatGif
+
+    let
+      onClick = handler_ reset
+
     pure
       $ R.div_
           [ R.h2_ [ R.text "Random Cats" ]
-          , case gifState of
-              Loading -> R.text "Loading..."
-              Failure ->
+          , case response of
+              Nothing -> R.text "Loading..."
+              Just (Left reason) ->
                 R.div_
                   [ R.text "I could not load a random cat for some reason."
+                  , R.pre_ [ R.text reason ]
                   , R.button { onClick, children: [ R.text "Try Again!" ] }
                   ]
-              Success url ->
+              Just (Right url) ->
                 R.div_
                   [ R.button
                       { onClick
@@ -67,23 +66,17 @@ mkApp = do
                   ]
           ]
 
--- | Collapse nested `Maybe`s to our `GifState` type
-toGifState :: Maybe (Maybe String) -> GifState
-toGifState = maybe Loading (maybe Failure Success)
-
-getRandomCatGif :: Aff (Maybe String)
+getRandomCatGif :: Aff (Either String 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")
-          >>= (_ .: "images")
-          >>= (_ .: "downsized")
-          >>= (_ .: "url")
-      )
+      "https://dog.ceo/api/breeds/image/random"
+  let
+    decodedResult = do
+      { body } <- lmap Affjax.printError response
+      decodedBody :: { message :: String, status :: String } <-
+        lmap printJsonDecodeError (decodeJson body)
+      if decodedBody.status == "success" then Right decodedBody.message
+      else Left (show decodedBody)
+  pure decodedResult