houdini/app/javascript/legacy/components/supporter-address-form.es6

89 lines
2.8 KiB
Text
Raw Normal View History

2019-11-06 20:36:28 +00:00
// License: LGPL-3.0-or-later
const h = require('snabbdom/h')
const R = require('ramda')
const flyd = require('flyd')
const button = require('ff-core/button')
const serializeForm = require('form-serialize')
flyd.scanMerge = require('flyd/module/scanmerge')
flyd.flatMap = require('flyd/module/flatmap')
flyd.filter = require('flyd/module/filter')
flyd.mergeAll = require('flyd/module/mergeall')
const request = require('../common/request')
// pass in your existing supporter data to prefill the form
// pass in your url endpoint for supporter updates
// pass in some default data for your update payload
function init(state) {
state = state || {}
state = R.merge({
submit$: flyd.stream()
, supporter$: flyd.stream(state.supporter || {})
, error$: flyd.stream()
}, state)
state.updated$ = flyd.map(
ev => {
ev.preventDefault()
return serializeForm(ev.target, {hash: true})
}
, state.submit$ )
state.supporter$ = flyd.merge(state.updated$, flyd.stream(state.supporter))
state.response$ = flyd.flatMap(
supporter => flyd.map(R.prop('body'), request({
method: 'put'
, path: state.path || `/nonprofits/${app.nonprofit_id}/supporters`
, send: R.merge({supporter}, state.payload || {})
}).load)
, state.updated$ )
state.loading$ = flyd.mergeAll([
flyd.map(R.always(true), state.submit$)
, flyd.map(R.always(false), state.response$)
])
return state
}
// things you need in state:
// - a supporter object with name, address, city, state_code, country, zip_code
// - the $submitAddressUpdate stream
function view(state) {
var supporter = state.supporter
return h('form', { on: {submit: state.submit$}}, [
h('div.layout--three.u-marginBottom--10', [
h('span', [
h('label', 'Name')
, h('input', {props: {name: 'name', placeholder: 'name', value: supporter.name}})
])
, h('span', [
h('label', 'Street Address')
, h('input', {props: {name: 'address', placeholder: 'address', value: supporter.address}})
])
, h('span', [
h('label', 'City')
, h('input', {props: {name: 'city', placeholder: 'city', value: supporter.city}})
])
, ])
, h('div.layout--three.u-marginBottom--15', [
h('span', [
h('label', 'State/Region')
, h('input', {props: {name: 'state_code', placeholder: 'state/region', value: supporter.state_code}})
])
, h('span', [
h('label', 'Postal Code')
, h('input', {props: {name: 'zip_code', placeholder: 'postal code', value: supporter.zip_code}})
])
, h('span', [
h('label', 'Country')
, h('input', {props: {name: 'country', placeholder: 'country', value: supporter.country}})
])
])
, h('input', {props: {type: 'hidden', name: 'id', value: supporter.id}})
, button(R.pick(['loading$', 'error$'], state))
])
}
module.exports = {view, init}