Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor Scout/Ajax forms to use window.fetch() with the new Janitor API #69

Merged
merged 4 commits into from Jun 6, 2017

Conversation

jankeromnes
Copy link
Member

@jankeromnes jankeromnes commented Jun 1, 2017

Currently, async actions triggered by buttons and forms on the Janitor website work approximately like this:

<form id="my-form">
  <input data-submit-on="blur" name="key" value="value">
</form>

<script>
Scout('#my-form').on('submit', function (query) {
  query.action = 'ajax-action';
  query.data = getFormData(form);
  query.resp = onAjaxResponse;
});
</script>
// Server-side (/app.js):
camp.ajax.on('ajax-action', onAjaxRequest);

We would like to replace Scout calls by window.fetch() on the website, and camp.ajax.on() handlers by the new Janitor API on the server (a REST/JSON web API implemented with Self API).

The new proposed way to implement async website actions (buttons and forms) works approximately as follows:

<form id="my-form" action="/api/hosts/host.name/credentials" method="delete">
  <input type="submit" value="Reset host credentials">
</form>

<script>
var form = document.querySelector('#my-form');
form.addEventListener('submit', function (event) {
  var data = getFormData(form);
  window.fetch(form.action, {
    method: 'DELETE',
    body: JSON.stringify(data, null, 2)
  })
  .then(onFetchResponse)
  .catch(onError);
});
</script>
// Server-side (/api/hosts-api.js):
hostAPI.delete('/credentials', {
  title: 'Reset host credentials',
  handler: (request, response) => {}
});

…PI calls.

Uses the new `window.fetch()` API and deprecates older Scout-based Ajax forms.
See also: RFC 6902 - JSON Patch.
@jankeromnes
Copy link
Member Author

@espadrine Hi! Since you're familiar with Scout, and since you suggested I switch to window.fetch() in order to use my new JSON API directly from the website, could you please take a look at this pull request?

I've already tested the new code and it works fine (for DELETE and PATCH calls), but I'd really like a second opinion on this, in case I'm doing something horribly wrong.

Thanks! 😄

@jankeromnes jankeromnes changed the title Refactor Scout/Ajax forms to use window.fetch() and the new Janitor API Refactor Scout/Ajax forms to use window.fetch() with the new Janitor API Jun 1, 2017
@espadrine
Copy link

lgtm!

You might want to include a polyfill for old browsers (incl. IE11). Although, if you are targeting evergreen, it's not necessary.

@jankeromnes
Copy link
Member Author

I squeezed in two commits to add fetch and Promise polyfills, and update the website's JS libraries.

@jankeromnes jankeromnes merged commit 28f0a12 into JanitorTechnology:master Jun 6, 2017
@jankeromnes jankeromnes deleted the fetchforms branch June 6, 2017 14:29
@jankeromnes
Copy link
Member Author

As @nt1m pointed out, this change seems to break Firefox but not Chrome. Oh well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants