Halogen-formless example refreshes page and loses state

#1

I’m new to purescript, halogen, and front end in general but I like FP so I thought I would give it a try.
Just tried copying the example in the halogen-formless README exactly but I the component seems to log to the console and then immediately refresh the page so I can’t see it. Which means I can’t do anything stateful. I changed the state to be an Array of dogs and have the form add the dog to the array and render the list of dogs. You see the dog added to the list then immediately disappear.

Does anyone know what I am doing wrong? Code is here: https://github.com/JoeCordingley/formless-example/blob/master/src/Dogs.purs

1 Like
#2

The example has a bug: the browser will refresh the page when you submit a form, so you need to prevent that from happening using preventDefault. The previous version of this example didn’t use the form submit event (it used a click), so I missed the issue. When I have a little time I’ll fix it!

The issue is with line 54 where the example uses HH.form_ to create a <form> element. We instead need this to be something like:

HH.form
  [ HE.onSubmit HandleSubmit ]
  [ ... ]

with an accompanying handleAction:

data Action = HandleSubmit Web.Event.Event

-- You're already using this as your `handleEvent` function
handleEvent = Formless.raiseResult 

handleAction = case _ of
  HandleSubmit event -> do
    Web.Event.Event.preventDefault event
    run Formless.submit
  where
  run action = Formless.handleAction handleAction handleEvent action

…however, since this is so common, I really ought to add a version of F.submit that accepts an Event and prevents it on your behalf. (I’d accept a PR for this!)

2 Likes
#3

Thank you for your help. I tried to add the onSubmit to the properties of the form and I got an error that the types of spec don’t unify. However, you mentioned that the problem was that the default behaviour of forms was to refresh the page. Which means that simply changing HH.form_ to HH.div_ fixes the example. Which you hinted at.

It’s possible that this stuff maybe beyond me at this point. But I will keep plugging away at it until I get stuck. It would help me if there was pursuit documentation available of your library but I can’t find any. It’s also a pain that pursuit documentation is not available on Kapeli Dash which I use for Scala and Haskell but that might be peculiar to me. Though I should be able to get quite a lot done just repurposing the example, now it works.

Thanks
Joe

#4

I’m a Dash user too, it would be great to have Pursuit in there too but…i just keep a pinned tab with Pursuit at all times. i think you can configure Pursuit lookup in the editor too somehow but it’s always seemed just a bit more yak-shaving than i want to get into when i need a quick lookup.

1 Like