Skip to content

Commit d7973f1

Browse files
andys8andys8
authored
Update 21 react examples to v18 (#298)
* Update package-set (same as try.purescript.org) See <purescript/trypurescript#294> * Update BookReactHooks * Update ButtonsReactHooks * Update CardsReactHooks * Update CatGifsReactHooks * Update ClockReactHooks * Update ComponentsInputReactHooks * Update ComponentsMultiTypeReactHooks * Update ComponentsReactHooks * Update DragAndDropReactHooks * Update FileUploadReactHooks * Update FormsReactHooks * Update GroceriesReactHooks * Update ImagePreviewsHalogenHooks * Update NumbersReactHooks * Update PositionsReactHooks * Update RoutingHashReactHooks * Update RoutingPushReactHooks * Update ShapesReactHooks * Update TextFieldsReactHooks * Update TicTacToeReactHooks * Update TimeReactHooks
1 parent 080eace commit d7973f1

File tree

45 files changed

+573
-564
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+573
-564
lines changed

‎packages.dhall‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
let upstream =
2-
https://github.com/purescript/package-sets/releases/download/psc-0.15.4-20220723/packages.dhall
3-
sha256:efb50561d50d0bebe01f8e5ab21cda51662cca0f5548392bafc3216953a0ed88
2+
https://github.com/purescript/package-sets/releases/download/psc-0.15.4-20220808/packages.dhall
3+
sha256:60eee64b04ca0013fae3e02a69fc3b176105c6baa2f31865c67cd5f881a412fd
44

55
let overrides = {=}
66

‎recipes/BookReactHooks/spago.dhall‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
, "react-basic-dom"
1111
, "react-basic-hooks"
1212
, "web-html"
13+
, "web-dom"
1314
]
1415
, packages = ../../packages.dhall
1516
, sources = [ "recipes/BookReactHooks/src/**/*.purs" ]

‎recipes/BookReactHooks/src/Main.purs‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ import Data.Either (Either(..))
99
import Data.Maybe (Maybe(..))
1010
import Effect (Effect)
1111
import Effect.Exception (throw)
12-
import React.Basic.DOM (render)
1312
import React.Basic.DOM as R
13+
import React.Basic.DOM.Client (createRoot, renderRoot)
1414
import React.Basic.Hooks (Component, component)
1515
import React.Basic.Hooks as React
1616
import React.Basic.Hooks.Aff (useAff)
17+
import Web.DOM.NonElementParentNode (getElementById)
1718
import Web.HTML (window)
18-
import Web.HTML.HTMLDocument (body)
19-
import Web.HTML.HTMLElement (toElement)
19+
import Web.HTML.HTMLDocument (toNonElementParentNode)
2020
import Web.HTML.Window (document)
2121

2222
data TextState
@@ -25,15 +25,17 @@ data TextState
2525

2626
main :: Effect Unit
2727
main = do
28-
body <- body =<< document =<< window
29-
case body of
30-
Nothing -> throw "Could not find body."
31-
Just b -> do
32-
bookComponent <- mkBookComponent
33-
render (bookComponent {}) (toElement b)
28+
doc <- document =<< window
29+
root <- getElementById "root" $ toNonElementParentNode doc
30+
case root of
31+
Nothing -> throw "Could not find root."
32+
Just container -> do
33+
reactRoot <- createRoot container
34+
app <- mkApp
35+
renderRoot reactRoot (app {})
3436

35-
mkBookComponent :: Component {}
36-
mkBookComponent = do
37+
mkApp :: Component {}
38+
mkApp = do
3739
let
3840
url = "https://elm-lang.org/assets/public-opinion.txt"
3941
component "Book" \_ -> React.do

‎recipes/ButtonsReactHooks/spago.dhall‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
, "react-basic"
88
, "react-basic-dom"
99
, "react-basic-hooks"
10+
, "web-dom"
1011
, "web-html"
1112
]
1213
, packages = ../../packages.dhall

‎recipes/ButtonsReactHooks/src/Main.purs‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,34 @@ import Prelude
55
import Data.Maybe (Maybe(..))
66
import Effect (Effect)
77
import Effect.Exception (throw)
8-
import React.Basic.DOM (render)
98
import React.Basic.DOM as R
9+
import React.Basic.DOM.Client (createRoot, renderRoot)
1010
import React.Basic.Events (handler_)
1111
import React.Basic.Hooks (Component, component, useState, (/\))
1212
import React.Basic.Hooks as React
13+
import Web.DOM.NonElementParentNode (getElementById)
1314
import Web.HTML (window)
14-
import Web.HTML.HTMLDocument (body)
15-
import Web.HTML.HTMLElement (toElement)
15+
import Web.HTML.HTMLDocument (toNonElementParentNode)
1616
import Web.HTML.Window (document)
1717

1818
main :: Effect Unit
1919
main = do
20-
body <- body =<< document =<< window
21-
case body of
22-
Nothing -> throw "Could not find body."
23-
Just b -> do
24-
buttons <- mkButtons
25-
render (buttons {}) (toElement b)
20+
doc <- document =<< window
21+
root <- getElementById "root" $ toNonElementParentNode doc
22+
case root of
23+
Nothing -> throw "Could not find root."
24+
Just container -> do
25+
reactRoot <- createRoot container
26+
app <- mkApp
27+
renderRoot reactRoot (app {})
2628

27-
mkButtons :: Component {}
28-
mkButtons = do
29+
mkApp :: Component {}
30+
mkApp =
2931
component "Buttons" \_ -> React.do
3032
count /\ setCount <- useState 0
31-
let
32-
handleClick = handler_ <<< setCount
33-
pure
34-
$ R.div_
35-
[ R.button { onClick: handleClick (_ - 1), children: [ R.text "-" ] }
36-
, R.div_ [ R.text (show count) ]
37-
, R.button { onClick: handleClick (_ + 1), children: [ R.text "+" ] }
38-
]
33+
let handleClick = handler_ <<< setCount
34+
pure $ R.div_
35+
[ R.button { onClick: handleClick (_ - 1), children: [ R.text "-" ] }
36+
, R.div_ [ R.text (show count) ]
37+
, R.button { onClick: handleClick (_ + 1), children: [ R.text "+" ] }
38+
]

‎recipes/CardsReactHooks/spago.dhall‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
, "react-basic"
1010
, "react-basic-dom"
1111
, "react-basic-hooks"
12+
, "web-dom"
1213
, "web-html"
1314
]
1415
, packages = ../../packages.dhall

‎recipes/CardsReactHooks/src/Main.purs‎

Lines changed: 38 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,46 +6,46 @@ import Data.Array.NonEmpty (cons')
66
import Data.Maybe (Maybe(..))
77
import Effect (Effect)
88
import Effect.Exception (throw)
9-
import React.Basic.DOM (css, render)
9+
import React.Basic.DOM (css)
1010
import React.Basic.DOM as R
11+
import React.Basic.DOM.Client (createRoot, renderRoot)
1112
import React.Basic.Events (handler_)
1213
import React.Basic.Hooks (Component, component, useState, (/\))
1314
import React.Basic.Hooks as React
1415
import Test.QuickCheck (mkSeed)
1516
import Test.QuickCheck.Gen (Gen, elements, runGen)
17+
import Web.DOM.NonElementParentNode (getElementById)
1618
import Web.HTML (window)
17-
import Web.HTML.HTMLDocument (body)
18-
import Web.HTML.HTMLElement (toElement)
19+
import Web.HTML.HTMLDocument (toNonElementParentNode)
1920
import Web.HTML.Window (document)
2021

2122
main :: Effect Unit
2223
main = do
23-
body <- body =<< document =<< window
24-
case body of
25-
Nothing -> throw "Could not find body."
26-
Just b -> do
27-
cardsComponent <- mkCardsComponent
28-
render (cardsComponent {}) (toElement b)
24+
doc <- document =<< window
25+
root <- getElementById "root" $ toNonElementParentNode doc
26+
case root of
27+
Nothing -> throw "Could not find root."
28+
Just container -> do
29+
reactRoot <- createRoot container
30+
app <- mkApp
31+
renderRoot reactRoot (app {})
2932

30-
mkCardsComponent :: Component {}
31-
mkCardsComponent = do
32-
let
33-
initialGenState = { newSeed: mkSeed 3, size: 1 }
33+
mkApp :: Component {}
34+
mkApp = do
35+
let initialGenState = { newSeed: mkSeed 3, size: 1 }
3436
component "Cards" \_ -> React.do
3537
-- "Card state" is a tuple of the card and generator state.
3638
-- We don't need the actual generator state for rendering, so we're ignoring it with `_`.
3739
(card /\ _) /\ setCardState <- useState (runGen cardGenerator initialGenState)
3840
let
39-
onClick =
40-
handler_ do
41-
-- Modify the card generator state by re-running the generator.
42-
-- We don't need the card value for this update function, so it is ignored with `_`.
43-
setCardState \(_ /\ genState) -> runGen cardGenerator genState
44-
pure
45-
$ R.div_
46-
[ R.button { onClick, children: [ R.text "Draw" ] }
47-
, R.div { style: css { fontSize: "12em" }, children: [ R.text (viewCard card) ] }
48-
]
41+
onClick = handler_ do
42+
-- Modify the card generator state by re-running the generator.
43+
-- We don't need the card value for this update function, so it is ignored with `_`.
44+
setCardState \(_ /\ genState) -> runGen cardGenerator genState
45+
pure $ R.div_
46+
[ R.button { onClick, children: [ R.text "Draw" ] }
47+
, R.div { style: css { fontSize: "12em" }, children: [ R.text (viewCard card) ] }
48+
]
4949

5050
data Card
5151
= Ace
@@ -63,22 +63,21 @@ data Card
6363
| King
6464

6565
cardGenerator :: Gen Card
66-
cardGenerator =
67-
elements
68-
$ cons' Ace
69-
[ Two
70-
, Three
71-
, Four
72-
, Five
73-
, Six
74-
, Seven
75-
, Eight
76-
, Nine
77-
, Ten
78-
, Jack
79-
, Queen
80-
, King
81-
]
66+
cardGenerator = elements $
67+
cons' Ace
68+
[ Two
69+
, Three
70+
, Four
71+
, Five
72+
, Six
73+
, Seven
74+
, Eight
75+
, Nine
76+
, Ten
77+
, Jack
78+
, Queen
79+
, King
80+
]
8281

8382
viewCard :: Card -> String
8483
viewCard = case _ of

‎recipes/CatGifsReactHooks/spago.dhall‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
, "react-basic"
1313
, "react-basic-dom"
1414
, "react-basic-hooks"
15+
, "web-dom"
1516
, "web-html"
1617
]
1718
, packages = ../../packages.dhall

‎recipes/CatGifsReactHooks/src/Main.purs‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,17 @@ import Data.Maybe (Maybe(..), maybe)
1111
import Effect (Effect)
1212
import Effect.Aff (Aff)
1313
import Effect.Exception (throw)
14-
import React.Basic.DOM (css, render)
14+
import React.Basic.DOM (css)
1515
import React.Basic.DOM as R
16+
import React.Basic.DOM.Client (createRoot, renderRoot)
1617
import React.Basic.Events (handler_)
1718
import React.Basic.Hooks (Component, component, (/\))
1819
import React.Basic.Hooks as React
1920
import React.Basic.Hooks.Aff (useAff)
2021
import React.Basic.Hooks.ResetToken (useResetToken)
22+
import Web.DOM.NonElementParentNode (getElementById)
2123
import Web.HTML (window)
22-
import Web.HTML.HTMLDocument (body)
23-
import Web.HTML.HTMLElement (toElement)
24+
import Web.HTML.HTMLDocument (toNonElementParentNode)
2425
import Web.HTML.Window (document)
2526

2627
data GifState
@@ -30,33 +31,38 @@ data GifState
3031

3132
main :: Effect Unit
3233
main = do
33-
body <- body =<< document =<< window
34-
case body of
35-
Nothing -> throw "Could not find body."
36-
Just b -> do
37-
catGifs <- mkCatGifs
38-
render (catGifs {}) (toElement b)
34+
doc <- document =<< window
35+
root <- getElementById "root" $ toNonElementParentNode doc
36+
case root of
37+
Nothing -> throw "Could not find root."
38+
Just container -> do
39+
reactRoot <- createRoot container
40+
app <- mkApp
41+
renderRoot reactRoot (app {})
3942

40-
mkCatGifs :: Component {}
41-
mkCatGifs = do
43+
mkApp :: Component {}
44+
mkApp = do
4245
component "CatGifs" \_ -> React.do
4346
(resetToken /\ reset) <- useResetToken
4447
gifState <- toGifState <$> useAff resetToken getRandomCatGif
45-
let
46-
onClick = handler_ reset
48+
let onClick = handler_ reset
4749
pure
4850
$ R.div_
4951
[ R.h2_ [ R.text "Random Cats" ]
5052
, case gifState of
5153
Loading -> R.text "Loading..."
5254
Failure ->
5355
R.div_
54-
[ R.text "I could not load a random cat for some reason. "
56+
[ R.text "I could not load a random cat for some reason."
5557
, R.button { onClick, children: [ R.text "Try Again!" ] }
5658
]
5759
Success url ->
5860
R.div_
59-
[ R.button { onClick, style: css { display: "block" }, children: [ R.text "More Please!" ] }
61+
[ R.button
62+
{ onClick
63+
, style: css { display: "block" }
64+
, children: [ R.text "More Please!" ]
65+
}
6066
, R.img { src: url }
6167
]
6268
]
@@ -74,4 +80,10 @@ getRandomCatGif = do
7480
pure do
7581
-- Using `hush` to ignore the possible error messages
7682
{ body } <- hush response
77-
hush (decodeJson body >>= (_ .: "data") >>= (_ .: "images") >>= (_ .: "downsized") >>= (_ .: "url"))
83+
hush
84+
( decodeJson body
85+
>>= (_ .: "data")
86+
>>= (_ .: "images")
87+
>>= (_ .: "downsized")
88+
>>= (_ .: "url")
89+
)

‎recipes/ClockReactHooks/spago.dhall‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
, "prelude"
1111
, "react-basic-dom"
1212
, "react-basic-hooks"
13+
, "web-dom"
1314
, "web-html"
1415
]
1516
, packages = ../../packages.dhall

0 commit comments

Comments
 (0)