Skip to content

Instantly share code, notes, and snippets.

@pmros pmros/README.md
Last active Aug 15, 2016

Embed
What would you like to do?
Submission app in CycleJS with most using a state store driver.
import most from 'most'
import {h} from '@cycle/dom'
const view = state =>
state.status === 'confirm' ? viewConfirm(state) : viewWaiting(state)
const viewWaiting = state =>
h('button#submit', {attrs: {disabled: state.disabled}}, 'Submit')
const viewConfirm = state =>
h('span', [
h('button#cancel', 'Cancel'),
h('button#confirm', 'Confirm')
])
const domEvents = DOM => ({
submit: DOM.select('#submit').events('click')
, cancel: DOM.select('#cancel').events('click')
, confirm: DOM.select('#confirm').events('click')
})
const modStates = events => ([
events.submit.map(() => state => ({...state, status: 'confirm'}))
, events.cancel.map(() => state => ({...state, status: 'waiting'}))
, events.confirm.map(() => state => ({...state, status: 'waiting'}))
, events.disabled.map(disabled => state => ({...state, disabled}))
])
const main = ({DOM, state, disabled}) => {
const events = {...domEvents(DOM), disabled}
const mods = modStates(events)
const vdom = state.map(state => view(state))
return {
DOM: vdom
, state: most.merge(...mods)
, submit: events.confirm.map(() => true)
}
}
const initialState = {
status: 'waiting'
, disabled: true
}
export {main as default, initialState}
import Cycle from '@cycle/most-run'
import {makeDOMDriver} from '@cycle/dom'
import Submission, {initialState as initialStateSubmission} from './submission'
import {initialState as initialStateConfirm} from './confirm'
import equal from 'deep-equal'
import {subject} from 'most-subject'
const makeStateStoreDriver = (initialState = {}) => input =>
input
.scan((state, changeState) => changeState(state), initialState)
.skipRepeatsWith(equal)
const initialState = {
...initialStateSubmission,
confirm: initialStateConfirm
}
const drivers = {
DOM: makeDOMDriver('#root'),
state: makeStateStoreDriver(initialState)
}
Cycle.run(Submission, drivers)
import most from 'most'
import {h} from '@cycle/dom'
import {over, lensProp} from 'ramda'
import Confirm from './confirm-most'
const view = (state, confirm) =>
h('div', [
h('input#field', {props:{value: state.field}}),
confirm,
h('p', `Submitted value: ${state.submission}`)
])
const domEvents = DOM => ({
field: DOM.select('#field').events('keyup').map(e => e.target.value)
})
const modStates = events => ([
events.field.map(value => state => ({...state, field: value}))
, events.submit.map(() =>
state => ({...state, field: '', submission: state.field})
)
])
const modChildState = (state, namespace) => ([
state.map(changeState => over(lensProp(namespace), changeState))
])
const main = ({DOM, state}) => {
const confirm = Confirm({
DOM
, state: state.map(v => v.confirm)
, disabled: state.map(v => v.field === '')
})
const events = {
...domEvents(DOM)
, submit: confirm.submit
}
const mods = [
...modStates(events)
, ...modChildState(confirm.state, 'confirm')
]
const vdom = most.combine(
(state, confirm) => view(state, confirm)
, state, confirm.DOM)
return {
DOM: vdom
, state: most.merge(...mods)
}
}
const initialState = {
field: '',
submission: ''
}
export { main as default, initialState }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.