Update examples (#33)

Author: spicydonuts

README.md

@@ -23,29 +23,34 @@ module React.Basic.Example where
 
 import Prelude
 
-import Control.Monad.Eff.Uncurried (mkEffFn1)
 import React.Basic (ReactComponent, react)
 import React.Basic.DOM as R
+import React.Basic.Events as Events
 
 -- The props for the component
 type ExampleProps =
   { label :: String
   }
 
 -- Create a component by passing a record to the `react` function.
--- The `render` function takes a display name, the props and current state, as well as a
+-- The `render` function takes the props and current state, as well as a
 -- state update callback, and produces a document.
-example :: ReactComponent ExampleProps
-example = react
-  { displayName: "Example"
-  , initialState: { counter: 0 }
-  , receiveProps: \_ _ _ -> pure unit
-  , render: \{ label } { counter } setState ->
-      R.button { onClick: mkEffFn1 \_ -> do
-                            setState \s -> { counter: s.counter + 1 }
-               , children: [ R.text (label <> ": " <> show counter) ]
-               }
-  }
+component :: ReactComponent ExampleProps
+component = react { displayName: "Counter", initialState, receiveProps, render }
+  where
+    initialState =
+      { counter: 0
+      }
+
+    receiveProps _ _ _ =
+      pure unit
+
+    render props state setState =
+      R.button
+        { onClick: Events.handler_ do
+                     setState \s -> s { counter = s.counter + 1 }
+        , children: [ R.text (props.label <> ": " <> show state.counter) ]
+        }
 ```
 
 This component can be used directly from JavaScript. For example, if you are using `purs-loader`:

examples/component/src/Container.purs

@@ -5,11 +5,12 @@ import React.Basic.DOM as R
 import ToggleButton as ToggleButton
 
 component :: ReactComponent {}
-component = stateless
-  { displayName: "Container"
-  , render: \_ ->
-      R.div { children: [ createElement ToggleButton.component { on: true }
-                        , createElement ToggleButton.component { on: false }
-                        ]
-            }
-  }
+component = stateless { displayName: "Container", render }
+  where
+    render _ =
+      R.div
+        { children:
+            [ createElement ToggleButton.component { on: true }
+            , createElement ToggleButton.component { on: false }
+            ]
+        }

examples/component/src/ToggleButton.purs

@@ -2,21 +2,25 @@ module ToggleButton where
 
 import Prelude
 
-import Control.Monad.Eff.Uncurried (mkEffFn1)
 import React.Basic (ReactComponent, react)
 import React.Basic.DOM as R
+import React.Basic.Events as Events
 
 type ExampleProps =
   { on :: Boolean
   }
 
 component :: ReactComponent ExampleProps
-component = react
-  { displayName: "ToggleButton"
-  , initialState: { on: false }
-  , receiveProps: \{ on } _ setState -> setState (const { on })
-  , render: \_ { on } setState ->
-      R.button { onClick: mkEffFn1 \_ -> setState \s -> { on: not s.on }
-               , children: [ R.text if on then "On" else "Off" ]
-               }
-  }
+component = react { displayName: "ToggleButton", initialState, receiveProps, render }
+  where
+    initialState =
+      { on: false }
+
+    receiveProps props _ setState =
+      setState _ { on = props.on }
+
+    render _ state setState =
+      R.button
+        { onClick: Events.handler_ (setState \s -> s { on = not s.on })
+        , children: [ R.text if state.on then "On" else "Off" ]
+        }

examples/controlled-input/src/ControlledInput.purs

@@ -3,27 +3,34 @@ module ControlledInput where
 import Prelude
 
 import Data.Maybe (Maybe(..), fromMaybe, maybe)
-import React.Basic (ReactComponent, react)
+import React.Basic (ReactComponent, fragment, react)
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (preventDefault, targetValue, timeStamp)
 import React.Basic.Events as Events
 
 component :: ReactComponent {}
-component = react
-  { displayName: "ControlledInput"
-  , initialState: { value: "hello world", timeStamp: Nothing }
-  , receiveProps: \_ _ _ -> pure unit
-  , render: \_ state setState ->
-      R.div_
-        [ R.p_ [ R.input { onChange: Events.handler (preventDefault >>> Events.merge { targetValue, timeStamp })
-                             \{ timeStamp, targetValue } -> setState \_ ->
-                                { value: fromMaybe "" targetValue
-                                , timeStamp: Just timeStamp
-                                }
-                         , value: state.value
-                         }
-               ]
+component = react { displayName: "ControlledInput", initialState, receiveProps, render }
+  where
+    initialState =
+      { value: "hello world"
+      , timeStamp: Nothing
+      }
+
+    receiveProps _ _ _ =
+      pure unit
+      
+    render _ state setState =
+      fragment
+        [ R.input
+            { onChange:
+                Events.handler
+                  (preventDefault >>> Events.merge { targetValue, timeStamp })
+                  \{ timeStamp, targetValue } ->
+                    setState _ { value = fromMaybe "" targetValue
+                               , timeStamp = Just timeStamp
+                               }
+            , value: state.value
+            }
         , R.p_ [ R.text ("Current value = " <> show state.value) ]
         , R.p_ [ R.text ("Changed at = " <> maybe "never" show state.timeStamp) ]
         ]
-  }

examples/counter/src/Counter.purs

@@ -2,9 +2,9 @@ module Counter where
 
 import Prelude
 
-import Control.Monad.Eff.Uncurried (mkEffFn1)
 import React.Basic (ReactComponent, react)
 import React.Basic.DOM as R
+import React.Basic.Events as Events
 
 -- The props for the component
 type ExampleProps =
@@ -15,13 +15,18 @@ type ExampleProps =
 -- The `render` function takes the props and current state, as well as a
 -- state update callback, and produces a document.
 component :: ReactComponent ExampleProps
-component = react
-  { displayName: "Counter"
-  , initialState: { counter: 0 }
-  , receiveProps: \_ _ _ -> pure unit
-  , render: \{ label } { counter } setState ->
-      R.button { onClick: mkEffFn1 \_ -> do
-                            setState \s -> { counter: s.counter + 1 }
-               , children: [ R.text (label <> ": " <> show counter) ]
-               }
-  }
+component = react { displayName: "Counter", initialState, receiveProps, render }
+  where
+    initialState =
+      { counter: 0
+      }
+
+    receiveProps _ _ _ =
+      pure unit
+
+    render props state setState =
+      R.button
+        { onClick: Events.handler_ do
+                     setState \s -> s { counter = s.counter + 1 }
+        , children: [ R.text (props.label <> ": " <> show state.counter) ]
+        }