Update CatGifsReactHooks

recipes/CatGifsReactHooks/spago.dhall

@@ -12,6 +12,7 @@
   , "react-basic"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall

recipes/CatGifsReactHooks/src/Main.purs

@@ -11,16 +11,17 @@ 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 (css)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 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 (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 data GifState
@@ -30,33 +31,38 @@ data GifState
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      catGifs <- mkCatGifs
-      render (catGifs {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkCatGifs :: Component {}
-mkCatGifs = do
+mkApp :: Component {}
+mkApp = do
   component "CatGifs" \_ -> React.do
     (resetToken /\ reset) <- useResetToken
     gifState <- toGifState <$> useAff resetToken getRandomCatGif
-    let
-      onClick = handler_ reset
+    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.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.button
+                      { onClick
+                      , style: css { display: "block" }
+                      , children: [ R.text "More Please!" ]
+                      }
                   , R.img { src: url }
                   ]
           ]
@@ -74,4 +80,10 @@ getRandomCatGif = do
   pure do
     -- Using `hush` to ignore the possible error messages
     { body } <- hush response
-    hush (decodeJson body >>= (_ .: "data") >>= (_ .: "images") >>= (_ .: "downsized") >>= (_ .: "url"))
+    hush
+      ( decodeJson body
+          >>= (_ .: "data")
+          >>= (_ .: "images")
+          >>= (_ .: "downsized")
+          >>= (_ .: "url")
+      )