add a form

[brandly]

right now, POST /links expects JSON data, so here are our options:

• change endpoint to take name and url from application/x-www-form-urlencoded data, and change <form> to <form action="/links">
• add some JS to the page to post JSON, but i'd like some way to write a .js file that gets inlined, instead of writing JS in a haskell string. the JS would look something like

document.querySelector('form')
  .addEventListener('submit', function (e) {
    e.preventDefault();
    const body = Array.from(e.target.elements)
      .filter(el => el.type !== 'submit')
      .reduce((out, el) => {
        out[el.name] = el.value
        return out
      }, {});
    fetch('/links', {
      method: 'POST',
      body: JSON.stringify(body)
    }).then(r => {
      if (r.ok) {
        window.location.reload();
      } else {
        console.error(r);
      }
    });
  });

i vote for the first option. we could look at content-type and accept either JSON or form data. i'm not sure how to do these things in haskell, cc @mitchellwrosen

[meangrape]

I like the idea of using Content-Type & non-inline content. However I defer to @mitchellwrosen for architectural guidance since Haskell + FE stuff is something I barely know added to something I don’t know.

On Sat, Mar 17, 2018 at 2:31 PM Matthew Brandly ***@***.***> wrote: right now, POST /links expects JSON data, so here are our options: - change endpoint to take name and url from application/x-www-form-urlencoded data, and change <form> to <form action="/links"> - add some JS to the page to post JSON, but i'd like some way to write a .js file that gets inlined, instead of writing JS in a haskell string. the JS would look something like document.querySelector('form') .addEventListener('submit', function (e) { e.preventDefault(); const body = Array.from(e.target.elements) .filter(el => el.type !== 'submit') .reduce((out, el) => { out[el.name] = el.value return out }, {}); fetch('/links', { method: 'POST', body: JSON.stringify(body) }).then(r => { if (r.ok) { window.location.reload(); } else { console.error(r); } }); }); i vote for the first option. we could look at content-type and accept either JSON or form data. i'm not sure how to do these things in haskell, cc @mitchellwrosen <https://github.com/mitchellwrosen> ------------------------------ You can view, comment on, or merge this pull request online at: #9 Commit Summary - add a nonfunctional form File Changes - *M* app/Main.hs <https://github.com/jayed/gogurl/pull/9/files#diff-0> (1) Patch Links: - https://github.com/jayed/gogurl/pull/9.patch - https://github.com/jayed/gogurl/pull/9.diff — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#9>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAjeyBUu-lSGthMGaBufSIe04ty5BmPks5tfVaMgaJpZM4Su6bu> .

-- Jay Edwards | @meangrape | [email protected]

[mitchellwrosen]

Sure, option 1 sounds good

[mitchellwrosen]

I opened scotty-web/scotty#216 so this is more of a one-liner for us

[meangrape]

I created a new branch, link-form, and merged this PR there. I don't want to merge non-working code into master. We'll keep this open while we resolve things and see how the scotty PR goes.

Thanks, all!

[meangrape]

@brandly Here's a pointer to static content in Scotty. A few years old but looks like a good start.