CODEWITHSUNDEEP
cyclejsxstream-js
Adil Nurtayev
Adil Nurtayev

Reputation: 1

how to power two streams from one DOM event

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.

Upvotes: 0

Views: 174

Answers (2)

Adil Nurtayev
Adil Nurtayev

Reputation: 1

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

Upvotes: 0

bloodyKnuckles
bloodyKnuckles

Reputation: 12079

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))}`),

Upvotes: 0

Related Questions