Skip to content

Commit 61ce4a4

Browse files
author
Madeline Trotter
committed
Optimize component for less boilerplate
The existing functions have been renamed to `reactComponent`, etc
1 parent 17f9251 commit 61ce4a4

File tree

23 files changed

+118
-148
lines changed

23 files changed

+118
-148
lines changed

‎examples/aff/src/Example.purs‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,16 @@ import Prelude
44
import Data.Foldable (find)
55
import Data.Maybe (Maybe(..))
66
import Data.Newtype (class Newtype, un)
7-
import Effect (Effect)
87
import Effect.Aff (Aff, Milliseconds(..), delay, error, message, throwError)
98
import React.Basic.DOM as R
109
import React.Basic.DOM.Events (capture_)
1110
import React.Basic.Events (handler_)
12-
import React.Basic.Hooks (JSX, ReactComponent, component, element, fragment, useState, (/\))
11+
import React.Basic.Hooks (Component, component, fragment, useState, (/\))
1312
import React.Basic.Hooks as React
1413
import React.Basic.Hooks.Aff (useAff)
1514
import React.Basic.Hooks.ErrorBoundary (mkErrorBoundary)
1615

17-
mkExample :: Effect (ReactComponent {})
16+
mkExample :: Component Unit
1817
mkExample = do
1918
errorBoundary <- mkErrorBoundary "AffExErrorBoundary"
2019
catDetails <- mkCatDetails
@@ -32,24 +31,23 @@ mkExample = do
3231
[ catKeyList catKey setCatKey
3332
, case catKey of
3433
Nothing -> mempty
35-
Just k -> catDetails { catKey: k }
34+
Just k -> catDetails k
3635
]
3736
]
3837
where
3938
-- This component is the main `useAff` demo. It receives a key
4039
-- as a prop and renders both the loading state and the final
4140
-- result.
42-
mkCatDetails :: Effect ({ catKey :: Key Cat } -> JSX)
43-
mkCatDetails =
44-
map element do
45-
component "CatDetails" \{ catKey } -> React.do
46-
catState <- useAff catKey $ fetch catKey
47-
pure
48-
$ R.p_
49-
[ case map entity catState of
50-
Nothing -> R.text "Loading..."
51-
Just (Cat { name }) -> R.text $ "A cat named " <> name
52-
]
41+
mkCatDetails :: Component (Key Cat)
42+
mkCatDetails = do
43+
component "CatDetails" \catKey -> React.do
44+
catState <- useAff catKey $ fetch catKey
45+
pure
46+
$ R.p_
47+
[ case map entity catState of
48+
Nothing -> R.text "Loading..."
49+
Just (Cat { name }) -> R.text $ "A cat named " <> name
50+
]
5351

5452
renderAppError error resetApp =
5553
fragment

‎examples/aff/src/Main.purs‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
55
import Effect (Effect)
66
import Effect.Exception (throw)
77
import Example (mkExample)
8-
import React.Basic.Hooks (element)
98
import React.Basic.DOM (render)
109
import Web.DOM.NonElementParentNode (getElementById)
1110
import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
1918
Nothing -> throw "Container element not found."
2019
Just c -> do
2120
ex <- mkExample
22-
let
23-
app = element ex {}
24-
render app c
21+
render (ex unit) c

‎examples/component/src/Example.purs‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
module Example where
22

33
import Prelude
4-
import Effect (Effect)
54
import React.Basic.DOM as R
6-
import React.Basic.Hooks (ReactComponent, component, element)
5+
import React.Basic.Hooks (Component, component)
76
import ToggleButton (mkToggleButton)
87

9-
mkExample :: Effect (ReactComponent {})
8+
mkExample :: Component Unit
109
mkExample = do
1110
-- create the child components this parent will use
1211
toggleButton <- mkToggleButton
@@ -15,7 +14,7 @@ mkExample = do
1514
pure
1615
$ R.div
1716
{ children:
18-
[ element toggleButton { label: "A" }
19-
, element toggleButton { label: "B" }
17+
[ toggleButton { label: "A" }
18+
, toggleButton { label: "B" }
2019
]
2120
}

‎examples/component/src/Main.purs‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
55
import Effect (Effect)
66
import Effect.Exception (throw)
77
import Example (mkExample)
8-
import React.Basic.Hooks (element)
98
import React.Basic.DOM (render)
109
import Web.DOM.NonElementParentNode (getElementById)
1110
import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
1918
Nothing -> throw "Container element not found."
2019
Just c -> do
2120
ex <- mkExample
22-
let
23-
app = element ex {}
24-
render app c
21+
render (ex unit) c

‎examples/component/src/ToggleButton.purs‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
module ToggleButton where
22

33
import Prelude
4-
import Effect (Effect)
54
import Effect.Console (log)
65
import React.Basic.DOM as R
76
import React.Basic.Events (handler_)
8-
import React.Basic.Hooks (ReactComponent, component, useEffect, useState, (/\))
7+
import React.Basic.Hooks (Component, component, useEffect, useState, (/\))
98
import React.Basic.Hooks as React
109

11-
mkToggleButton :: Effect (ReactComponent { label :: String })
10+
mkToggleButton :: Component { label :: String }
1211
mkToggleButton = do
1312
component "ToggleButton" \{ label } -> React.do
1413
on /\ setOn <- useState false
@@ -19,7 +18,7 @@ mkToggleButton = do
1918
$ R.button
2019
{ onClick: handler_ $ setOn not
2120
, children:
22-
[ R.text label
23-
, R.text if on then " On" else " Off"
24-
]
21+
[ R.text label
22+
, R.text if on then " On" else " Off"
23+
]
2524
}

‎examples/context/src/Example.purs‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,27 @@ import Prelude
44
import Effect (Effect)
55
import React.Basic.DOM as R
66
import React.Basic.Events (handler_)
7-
import React.Basic.Hooks (type (/\), ReactComponent, JSX, ReactContext, component, createContext, element, provider, useContext, useState, (/\))
7+
import React.Basic.Hooks (type (/\), JSX, ReactContext, Component, component, createContext, provider, useContext, useState, (/\))
88
import React.Basic.Hooks as React
99

10-
mkExample :: Effect (ReactComponent {})
10+
mkExample :: Component Unit
1111
mkExample = do
1212
counterContext <- createContext (0 /\ pure unit)
1313
store <- mkStore counterContext
1414
counter <- mkCounter counterContext
15-
component "Context" \props -> React.do
15+
component "Context" \_ -> React.do
1616
pure
17-
$ element store
18-
{ content:
19-
[ element counter {}
20-
, element counter {}
21-
, element counter {}
22-
]
23-
}
17+
$ store
18+
[ counter unit
19+
, counter unit
20+
, counter unit
21+
]
2422

2523
mkStore ::
2624
ReactContext (Int /\ (Effect Unit)) ->
27-
Effect (ReactComponent { content :: Array JSX })
25+
Component (Array JSX)
2826
mkStore context = do
29-
component "Store" \{ content } -> React.do
27+
component "Store" \content -> React.do
3028
counter /\ setCounter <- useState 0
3129
let
3230
increment = setCounter (_ + 1)
@@ -37,9 +35,9 @@ mkStore context = do
3735

3836
mkCounter ::
3937
ReactContext (Int /\ (Effect Unit)) ->
40-
Effect (ReactComponent {})
38+
Component Unit
4139
mkCounter counterContext = do
42-
component "Counter" \props -> React.do
40+
component "Counter" \_ -> React.do
4341
counter /\ increment <- useContext counterContext
4442
pure
4543
$ R.button

‎examples/context/src/Main.purs‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
55
import Effect (Effect)
66
import Effect.Exception (throw)
77
import Example (mkExample)
8-
import React.Basic.Hooks (element)
98
import React.Basic.DOM (render)
109
import Web.DOM.NonElementParentNode (getElementById)
1110
import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
1918
Nothing -> throw "Container element not found."
2019
Just c -> do
2120
ex <- mkExample
22-
let
23-
app = element ex {}
24-
render app c
21+
render (ex unit) c

‎examples/controlled-input/src/Example.purs‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@ module Example where
22

33
import Prelude
44
import Data.Maybe (Maybe(..), fromMaybe, maybe)
5-
import Effect (Effect)
65
import React.Basic.DOM as R
76
import React.Basic.DOM.Events (preventDefault, stopPropagation, targetValue, timeStamp)
87
import React.Basic.Events (EventHandler, handler, merge)
9-
import React.Basic.Hooks (ReactComponent, UseState, Hook, component, fragment, useState, (/\))
8+
import React.Basic.Hooks (Component, Hook, UseState, component, fragment, useState, (/\))
109
import React.Basic.Hooks as React
1110

12-
mkExample :: Effect (ReactComponent {})
11+
mkExample :: Component Unit
1312
mkExample = do
14-
component "ControlledInput" \props -> React.do
13+
component "ControlledInput" \_ -> React.do
1514
firstName <- useInput "hello"
1615
lastName <- useInput "world"
1716
pure

‎examples/controlled-input/src/Main.purs‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Data.Maybe (Maybe(..))
55
import Effect (Effect)
66
import Effect.Exception (throw)
77
import Example (mkExample)
8-
import React.Basic.Hooks (element)
98
import React.Basic.DOM (render)
109
import Web.DOM.NonElementParentNode (getElementById)
1110
import Web.HTML (window)
@@ -19,6 +18,4 @@ main = do
1918
Nothing -> throw "Container element not found."
2019
Just c -> do
2120
ex <- mkExample
22-
let
23-
app = element ex {}
24-
render app c
21+
render (ex unit) c

‎examples/counter/src/Example.js‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)