mikesol / purescript-deku

A PureScript web UI framework

Home Page:https://purescript-deku.surge.sh/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to run a function when component has mounted (and pass a setX function to it) ?

jerbaroo opened this issue · comments

You can see in the example below what I am trying to accomplish, in short:

  • create a setLocation function via useState
  • when the component mounts run a function from 3rd party JS: initMap which will attach to the Deku-generated DOM
  • pass setLocation to initMap, so that when locations on the map are clicked the Purescript can be informed
foreign import initMap :: EffectFn1 (Location -> Effect Unit) Unit

myMap :: Nut
myMap = Deku.do
  setLocation /\ location <- useState initialLocation
  onDidMount (runEffectFn1 initMap setLocation) $
    D.div [ DA.id_ "map-row" ]
      [ D.div [ DA.id_ "map-container" ] []
      , location <#~> locationInfo
      ]

onDidMount is in the Pursuit documentation, but does need seem to be in the create-deku-app-generated project.

The answer was to use Self.

The Pursuit documentation and the README is out of date (as they both mention Deku.Lifecycle which is a solution in an old version of Deku).

myMap :: Nut
myMap = Deku.do
  setLocation /\ location <- useState initialLocation
  D.div
    [ DA.id_ "map-row"
    , Self.self_ \_ -> liftEffect $ runEffectFn2
      initLeaflet allLocations setLocation
    ]
    [ D.div [ DA.id_ "map-container" ] []
    , location <#~> locationInfo
    ]