Skip to content

Commit 17f9251

Browse files
author
Madeline Trotter
committed
New toys c:
1 parent 07aae1a commit 17f9251

25 files changed

+1837
-116
lines changed

‎.prettierrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"trailingComma": "none"
3+
}

‎README.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,12 @@ mkCounter = do
3131

3232
More examples:
3333

34-
- [Counter with an effect](./examples/counter/src/Counter.purs)
35-
- [Reducer/action-style](./examples/reducer/src/Reducer.purs)
36-
- [Controlled inputs](./examples/controlled-input/src/ControlledInput.purs)
37-
- Components: [Parent](./examples/component/src/Container.purs) and [Child](./examples/component/src/ToggleButton.purs)
38-
- [Refs to DOM nodes](./examples/refs/src/Refs.purs) (and extracting hook logic from a component for reuse)
39-
- [A Todo App](./examples/todo-app/src/TodoApp.purs) (components, inputs, state)
40-
- [Context](./examples/context/src/Context.purs) (creating and consuming React context)
41-
- [Aff helper](./examples/aff/src/AffEx.purs) (async state management)
34+
- [Counter with an effect](./examples/counter/src/Example.purs)
35+
- [Reducer/action-style](./examples/reducer/src/Example.purs)
36+
- [Controlled inputs](./examples/controlled-input/src/Example.purs)
37+
- Components: [Parent](./examples/component/src/Example.purs) and [Child](./examples/component/src/ToggleButton.purs)
38+
- [Refs to DOM nodes](./examples/refs/src/Example.purs) (and extracting hook logic from a component for reuse)
39+
- [A Todo App](./examples/todo-app/src/Example.purs) (components, inputs, state)
40+
- [Context](./examples/context/src/Example.purs) (creating and consuming React context)
41+
- [Aff](./examples/aff/src/Example.purs) (rendering async data, using error boundaries)
42+
- [Suspense](./examples/suspense/src/Example.purs) (experimental, React Suspense demo -- similar to the Aff example, but the loading state is managed by the parent instead of the detail rendering component)

‎examples/aff/src/Example.purs‎

Lines changed: 72 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -5,73 +5,95 @@ import Data.Foldable (find)
55
import Data.Maybe (Maybe(..))
66
import Data.Newtype (class Newtype, un)
77
import Effect (Effect)
8-
import Effect.Aff (Aff, Milliseconds(..), delay, error, throwError)
8+
import Effect.Aff (Aff, Milliseconds(..), delay, error, message, throwError)
99
import React.Basic.DOM as R
10+
import React.Basic.DOM.Events (capture_)
1011
import React.Basic.Events (handler_)
11-
import React.Basic.Hooks (type (/\), ReactComponent, Hook, JSX, component, element, fragment, useState, (/\))
12+
import React.Basic.Hooks (JSX, ReactComponent, component, element, fragment, useState, (/\))
1213
import React.Basic.Hooks as React
1314
import React.Basic.Hooks.Aff (useAff)
15+
import React.Basic.Hooks.ErrorBoundary (mkErrorBoundary)
1416

1517
mkExample :: Effect (ReactComponent {})
1618
mkExample = do
17-
-- A component for fetching and rendering a Cat entity.
19+
errorBoundary <- mkErrorBoundary "AffExErrorBoundary"
1820
catDetails <- mkCatDetails
1921
component "AffEx" \props -> React.do
20-
catKey /\ catChooser <- useCatKeyChooser
22+
catKey /\ setCatKey <- useState Nothing
23+
let
24+
reset = setCatKey \_ -> Nothing
2125
pure
22-
$ R.div
23-
{ style: R.css { display: "flex", flexFlow: "column" }
24-
, children:
25-
[ R.h2_ [ R.text "Cat chooser" ]
26-
, R.p_
27-
[ R.text
28-
$ "Select a key to fetch! If you get bored (how would you even!?) "
29-
<> "try holding your arrow keys to select really fast! The result "
30-
<> "always matches the chosen key."
31-
]
32-
, catChooser
33-
, R.p_
34-
[ case catKey of
26+
$ R.div_
27+
[ R.h2_ [ R.text "Cat chooser" ]
28+
, errorBoundary \{ error, dismissError } -> case error of
29+
Just e -> renderAppError e (reset *> dismissError)
30+
Nothing ->
31+
fragment
32+
[ catKeyList catKey setCatKey
33+
, case catKey of
3534
Nothing -> mempty
36-
Just k -> element catDetails { catKey: k }
35+
Just k -> catDetails { catKey: k }
3736
]
37+
]
38+
where
39+
-- This component is the main `useAff` demo. It receives a key
40+
-- as a prop and renders both the loading state and the final
41+
-- 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
3852
]
53+
54+
renderAppError error resetApp =
55+
fragment
56+
[ R.p_ [ R.text "Error!" ]
57+
, R.p_ [ R.text $ message error ]
58+
, R.button
59+
{ onClick: capture_ do resetApp
60+
, children: [ R.text "Reset" ]
3961
}
40-
where
41-
-- This hook packages up some interactive UI and the current
42-
-- selection the user has made via that UI.
43-
useCatKeyChooser :: Hook _ ((Maybe (Key Cat)) /\ JSX)
44-
useCatKeyChooser = React.do
45-
catKey /\ setCatKey <- useState Nothing
46-
let
47-
catChoice k =
48-
R.label_
49-
[ R.input
50-
{ type: "radio"
51-
, name: "cat-key"
52-
, checked: Just k == catKey
53-
, onChange:
54-
handler_ do
55-
setCatKey \_ -> Just k
56-
}
57-
, R.text $ " " <> showCatKey k
58-
]
62+
]
5963

60-
showCatKey :: Key Cat -> String
61-
showCatKey (Key k) = "Cat " <> k
62-
pure $ catKey /\ fragment (map (catChoice <<< key) fakeDb)
64+
catKeyList selectedCatKey setCatKey =
65+
let
66+
cats =
67+
fakeDb
68+
<> [ Entity
69+
(Key "error (choose to throw a React render error)")
70+
(Cat { name: "" })
71+
]
6372

64-
-- Hooks can't be used conditionally but components can!
65-
-- Not needing to deal with a `Maybe` key simplifies this
66-
-- compoennt a bit.
67-
mkCatDetails :: Effect (ReactComponent { catKey :: Key Cat })
68-
mkCatDetails = do
69-
component "CatDetails" \{ catKey } -> React.do
70-
catState <- useAff catKey $ fetch catKey
71-
pure case map entity catState of
72-
Nothing -> R.text "Loading..."
73-
Just (Cat { name }) -> R.text $ "A cat named " <> name
73+
catKeyRadioButton k =
74+
R.div_
75+
[ R.label_
76+
[ R.input
77+
{ type: "radio"
78+
, name: "cat-key"
79+
, checked: Just k == selectedCatKey
80+
, onChange:
81+
handler_ do
82+
setCatKey \_ -> Just k
83+
}
84+
, R.text $ " Cat " <> un Key k
85+
]
86+
]
87+
in
88+
fragment $ map (catKeyRadioButton <<< key) cats
7489

90+
--
91+
-- The bits below this point aren't directly relevant to the example,
92+
-- just a slightly more interesting data model than returing a single
93+
-- string.
94+
--
95+
--
96+
--
7597
-- Typed keys are a great way to tie entity-specific behavior
7698
-- to an ID. We can use this phantom type to write a class
7799
-- for generic, type-safe data fetching.

‎examples/suspense/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
output
2+
html/index.js
3+
package-lock.json
4+
node_modules

‎examples/suspense/Makefile‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
parent_sources := $$(npx spago -x ../../spago.dhall sources | sed 's/^/..\/..\//' | tr '\n' ' ')
2+
3+
all: output node_modules
4+
npx purs bundle -m Main --main Main output/*/*.js > output/bundle.js
5+
npx browserify output/bundle.js -o html/index.js
6+
7+
output: node_modules
8+
set -o noglob && \
9+
npx purs compile \
10+
src/**/*.purs \
11+
$(parent_sources)
12+
13+
node_modules:
14+
npm i --no-save browserify react react-dom
15+
16+
clean:
17+
rm -rf node_modules output
18+
19+
.PHONY: all output clean

‎examples/suspense/html/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>react-basic example</title>
5+
</head>
6+
<body>
7+
<div id="container"></div>
8+
<script src="index.js"></script>
9+
</body>
10+
</html>

‎examples/suspense/src/Example.purs‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
module Example where
2+
3+
import Prelude
4+
import Data.Foldable (find)
5+
import Data.Maybe (Maybe(..))
6+
import Data.Newtype (class Newtype, un)
7+
import Data.Time.Duration (Seconds(..), fromDuration)
8+
import Effect (Effect)
9+
import Effect.Aff (Aff, Milliseconds(..), delay, error, message, throwError)
10+
import React.Basic.DOM as R
11+
import React.Basic.DOM.Events (capture_)
12+
import React.Basic.Events (handler_)
13+
import React.Basic.Hooks (JSX, ReactComponent, component, element, fragment, useState, (/\))
14+
import React.Basic.Hooks as React
15+
import React.Basic.Hooks.ErrorBoundary (mkErrorBoundary)
16+
import React.Basic.Hooks.Suspense (suspend, suspense)
17+
import React.Basic.Hooks.Suspense.Store (SuspenseStore, get, mkSuspenseStore)
18+
19+
mkExample :: Effect (ReactComponent {})
20+
mkExample = do
21+
errorBoundary <- mkErrorBoundary "SuspenseExErrorBoundary"
22+
catDetails <- mkCatDetails
23+
component "SuspenseEx" \props -> React.do
24+
catKey /\ setCatKey <- useState Nothing
25+
let
26+
reset = setCatKey \_ -> Nothing
27+
pure
28+
$ R.div_
29+
[ R.h2_ [ R.text "Cat chooser" ]
30+
, errorBoundary \{ error, dismissError } -> case error of
31+
Just e -> renderAppError e (reset *> dismissError)
32+
Nothing ->
33+
fragment
34+
[ catKeyList catKey setCatKey
35+
, case catKey of
36+
Nothing -> mempty
37+
Just k ->
38+
R.p_
39+
[ suspense
40+
{ fallback: R.text "Loading..."
41+
, children: [ catDetails { catKey: k } ]
42+
}
43+
]
44+
]
45+
]
46+
where
47+
-- This component is the main `suspense` demo (but don't forget the `suspense`
48+
-- element above!). It receives a key as a prop and renders the result as though
49+
-- it were synchronously available.
50+
mkCatDetails :: Effect ({ catKey :: Key Cat } -> JSX)
51+
mkCatDetails = do
52+
catStore :: SuspenseStore (Key Cat) _ <-
53+
mkSuspenseStore (Just $ fromDuration $ Seconds 10.0) fetch
54+
element
55+
<$> component "CatDetails" \{ catKey } -> React.do
56+
cat <- suspend $ get catStore catKey
57+
pure
58+
$ R.p_
59+
[ case entity cat of
60+
Cat { name } -> R.text $ "A cat named " <> name
61+
]
62+
63+
renderAppError error resetApp =
64+
fragment
65+
[ R.p_ [ R.text "Error!" ]
66+
, R.p_ [ R.text $ message error ]
67+
, R.button
68+
{ onClick: capture_ do resetApp
69+
, children: [ R.text "Reset" ]
70+
}
71+
]
72+
73+
catKeyList selectedCatKey setCatKey =
74+
let
75+
cats =
76+
fakeDb
77+
<> [ Entity
78+
(Key "error (choose to throw a React render error)")
79+
(Cat { name: "" })
80+
]
81+
82+
catKeyRadioButton k =
83+
R.div_
84+
[ R.label_
85+
[ R.input
86+
{ type: "radio"
87+
, name: "cat-key"
88+
, checked: Just k == selectedCatKey
89+
, onChange:
90+
handler_ do
91+
setCatKey \_ -> Just k
92+
}
93+
, R.text $ " Cat " <> un Key k
94+
]
95+
]
96+
in
97+
fragment $ map (catKeyRadioButton <<< key) cats
98+
99+
--
100+
-- The bits below this point aren't directly relevant to the example,
101+
-- just a slightly more interesting data model than returing a single
102+
-- string.
103+
--
104+
--
105+
--
106+
-- Typed keys are a great way to tie entity-specific behavior
107+
-- to an ID. We can use this phantom type to write a class
108+
-- for generic, type-safe data fetching.
109+
newtype Key entity
110+
= Key String
111+
112+
derive instance eqKey :: Eq (Key entity)
113+
114+
derive instance ordKey :: Ord (Key entity)
115+
116+
derive instance ntKey :: Newtype (Key entity) _
117+
118+
-- An entity wrapper. In a real app this would hold other metadata
119+
-- such as create and update dates.
120+
data Entity entity
121+
= Entity (Key entity) entity
122+
123+
key :: forall entity. Entity entity -> Key entity
124+
key (Entity k _) = k
125+
126+
entity :: forall entity. Entity entity -> entity
127+
entity (Entity _ e) = e
128+
129+
class Fetch entity where
130+
fetch :: Key entity -> Aff (Entity entity)
131+
132+
-- An example entity
133+
newtype Cat
134+
= Cat { name :: String }
135+
136+
fakeDb :: Array (Entity Cat)
137+
fakeDb =
138+
[ Entity (Key "abc") (Cat { name: "Herb" })
139+
, Entity (Key "def") (Cat { name: "Maxi" })
140+
, Entity (Key "ghi") (Cat { name: "Chloe" })
141+
]
142+
143+
instance fetchCat :: Fetch Cat where
144+
fetch k = do
145+
delay $ Milliseconds 300.0
146+
-- pretend this happens on the server
147+
case fakeDb # find (key >>> (_ == k)) of
148+
Nothing ->
149+
-- This should never happen in a normal application path
150+
-- if only the server can generate keys :)
151+
throwError
152+
$ error
153+
$ "DB error: Cat not found for key "
154+
<> un Key k
155+
Just e -> pure e

‎examples/suspense/src/Main.purs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
module Main where
2+
3+
import Prelude
4+
import Data.Maybe (Maybe(..))
5+
import Effect (Effect)
6+
import Effect.Exception (throw)
7+
import Example (mkExample)
8+
import React.Basic.Hooks (element)
9+
import React.Basic.DOM (render)
10+
import Web.DOM.NonElementParentNode (getElementById)
11+
import Web.HTML (window)
12+
import Web.HTML.HTMLDocument (toNonElementParentNode)
13+
import Web.HTML.Window (document)
14+
15+
main :: Effect Unit
16+
main = do
17+
container <- getElementById "container" =<< (map toNonElementParentNode $ document =<< window)
18+
case container of
19+
Nothing -> throw "Container element not found."
20+
Just c -> do
21+
ex <- mkExample
22+
let
23+
app = element ex {}
24+
render app c

0 commit comments

Comments
 (0)