how to power two streams from one DOM event - cyclejs

Question

Form has a Save button. When clicked it supposed to route to another component and save form data. But router$ stream consumes the click event leaving socket$ stream without event to act upon. In the code below saveClick$ only works for router$ but not for socket$.
import sampleCombine from 'xstream/extra/sampleCombine'
import parent from '../../../util/parent'
import xs from 'xstream'
import dataRequest from './dataRequest'
export default ({DOM, onion, props$}) => {
const saveClick$ = DOM
.select('.MetaNav__Save')
.events('click')
return {
router$: xs.merge(
DOM.select('.MetaNav__Cancel')
.events('click')
.compose(sampleCombine(onion.state$)),
saveClick$
.compose(sampleCombine(onion.state$))
)
.map(([e, state]) => `/album/${window.btoa(parent(state.id))}`),
socket$: saveClick$
.compose(sampleCombine(onion.state$))
.map(([e, state]) => ({
messageType: 'graphql',
message: `mutation {
setInfo(info: {title: "${document.getElementById('MetaTitle').value}", description: "${document.getElementById('MetaDescription').value}", favorite: ${document.getElementById('MetaFavorite').checked.toString()}}, id: "${state.id}") {
id
}
}`
}))
.startWith(dataRequest(props$))
}
}
How can I get two streams powered by same event? imitate() seems to be doing the trick but documentation says it exist
to allow one thing: circular dependency of streams
This is a very basic use case. It feels like I am missing something fundamental. Help is appreciated.

Answer 1

Duplicate saveClick$ before sending to router$.
import sampleCombine from 'xstream/extra/sampleCombine'
import parent from '../../../util/parent'
import xs from 'xstream'
import dataRequest from './dataRequest'
export default ({DOM, onion, props$}) => {
const saveClick$ = DOM.select('.MetaNav__Save')
.events('click')
const saveClickSocket$ = saveClick$
.compose(sampleCombine(onion.state$))
.map(([e, state]) => ({
messageType: 'graphql',
message: `mutation {setInfo(info: {title: "${document.getElementById('MetaTitle').value}", description: "${document.getElementById('MetaDescription').value}", favorite: ${document.getElementById('MetaFavorite').checked.toString()}}, id: "${state.id}") {id}}`
}))
.startWith(dataRequest(props$))
const allClick$ = xs.merge(
DOM.select('.MetaNav__Cancel')
.events('click')
.compose(sampleCombine(onion.state$)),
saveClick$,
.compose(sampleCombine(onion.state$))
)
.map(([e, state]) => `/album/${window.btoa(parent(state.id))}`),
return {
router$: allClick$,
socket$: saveClickSocket$
}
}
Refactored stream construction for clarity:
const saveClick$ = DOM.select('.MetaNav__Save')
.events('click')
.compose(sampleCombine(onion.state$))
const cancelClick$ = DOM.select('.MetaNav__Cancel')
.events('click')
.compose(sampleCombine(onion.state$))
const saveClickSocket$ = saveClick$
.map(([e, state]) => ({
messageType: 'graphql',
message: `mutation {setInfo(info: {title: "${document.getElementById('MetaTitle').value}", description: "${document.getElementById('MetaDescription').value}", favorite: ${document.getElementById('MetaFavorite').checked.toString()}}, id: "${state.id}") {id}}`
}))
.startWith(dataRequest(props$))
const allClick$ = xs.merge(
cancelClicks,
saveClick$,
)
.map(([e, state]) => `/album/${window.btoa(parent(state.id))}`),

Answer 2

this was a wrongfully asked question. see comment...