[example] fill in example with dyamically changing data for reactix -> d3

example/dist/index.html

@@ -34,6 +34,7 @@
         <div id="reset-zoom">Reset zoom</div>
         <div id="xml"></div>
 
+        <h1>Reactix</h1>
         <div id="react"></div>
 
         <!-- NOTE: it's important that this is at the end so that the DOM is ready -->

example/index.html

@@ -35,6 +35,7 @@
         <div id="reset-zoom">Reset zoom</div>
         <div id="xml"></div>
 
+        <h1>Reactix</h1>
         <div id="react"></div>
 
         <!-- NOTE: it's important that this is at the end so that the DOM is ready -->

example/spago.dhall

@@ -30,6 +30,7 @@ to generate this file without the comments in this block.
   , "psci-support"
   , "reactix"
   , "reactix-d3"
+  , "toestand"
   , "transformers"
   , "tuples"
   , "web-dom"

example/src/EReact.purs

 module Example.React where
 
 import Data.Maybe (Maybe(..))
-import Data.Nullable (toMaybe)
+import Data.Nullable (toMaybe, null)
 import DOM.Simple as DOM
 import DOM.Simple (Element)
-import DOM.Simple.Console (log)
+import DOM.Simple.Console (log, log2)
 import DOM.Simple.Document (document)
+import DOM.Simple.Event (class IsEvent)
+import DOM.Simple.Event as DE
 import Effect (Effect)
 import FFI.Simple ((...), delay, args2)
+import Math (remainder)
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Reactix.SyntheticEvent as RE
+import Toestand as T
+
+import Graphics.D3.Selection as Selection
+import Graphics.D3.Selection ((>=>), (>=>-), (>=>++))
 
 import Prelude
 
@@ -29,4 +37,44 @@ app = R.createElement appCpt
 appCpt :: R.Component ()
 appCpt = R.hooksComponentWithModule "Example.React" "app" cpt where
   cpt {} _ = do
-    pure $ H.div {} [ H.text "hello" ]
+    containerRef <- R.useRef null
+
+    d3Data <- T.useBox [ "first data" ]
+    d3Data' <- T.useLive T.unequal d3Data
+    newItem <- T.useBox (Nothing :: Maybe String)
+    newItem' <- T.useLive T.unequal newItem
+
+    R.useLayoutEffect' $ do
+      _ <- Selection.rootSelect "#react-svg"
+        >>= Selection.selectAll "p"
+        >>= Selection.bindData d3Data'
+        >>= Selection.enter
+        >=>++ "p"
+        >>= Selection.style'' "color" (\_d idx -> if idx `remainder` 2.0 == 0.0 then "green" else "red")
+        >>= Selection.text' show
+      pure unit
+
+    pure $ H.div {}
+      [ H.div {}
+        [ H.form {}
+          [ H.label {} [ H.text "Enter new item" ]
+          , H.input { on: { change: onInputChange newItem } }
+          , H.button { on: { click: onSubmitClick d3Data newItem newItem' } } [ H.text "submit" ] ]
+        ]
+      , H.div { id: "react-svg"
+              , ref: containerRef
+              , width: "400"
+              , height: "200" } []
+      ]
+    where
+      onInputChange newItem e = do
+        let val = R.unsafeEventValue e
+        T.write_ (Just val) newItem
+      onSubmitClick :: T.Box (Array String) -> T.Box (Maybe String) -> Maybe String -> RE.SyntheticEvent DE.MouseEvent -> Effect Unit
+      onSubmitClick d3Data newItem newItem' e = do
+        RE.preventDefault e
+        RE.stopPropagation e
+        case newItem' of
+          Nothing -> pure unit
+          Just ni -> T.modify_ (\d -> d <> [ ni ]) d3Data
+        T.write_ Nothing newItem

packages-additions.dhall

@@ -60,4 +60,33 @@
   , repo = "https://github.com/poorscript/purescript-reactix/"
   , version = "v0.4.11"
   }
+  , toestand =
+    { dependencies =
+      [ "aff"
+      , "arrays"
+      , "dom-simple"
+      , "effect"
+      , "ffi-simple"
+      , "foldable-traversable"
+      , "maybe"
+      , "ordered-collections"
+      , "prelude"
+      , "psci-support"
+      , "reactix"
+      , "record"
+      , "refs"
+      , "spec"
+      , "spec-mocha"
+      , "tuples"
+      , "typelevel-prelude"
+      , "typisch"
+      , "unfoldable"
+      ]
+    , repo = "https://github.com/poorscript/purescript-toestand"
+    , version = "v0.6.2"
+    }
+  , typisch =
+    { dependencies = [ "prelude" ]
+    , repo = "https://github.com/poorscript/purescript-typisch"
+    , version = "v0.2.1" }
 }