Rendering a separate component at a later stage

I’m having an issue rendering a separate component (with it’s own state) at a later time.

In this example, app2 is something I’d like to render at a later stage. Perhaps a user clicked a button and this component would populate a modal window. To make things as simple as possible, this example attempts to load app2 after 3 seconds via setTimeout().

const choo = require('choo')

// app 1
const app1 = choo()

app1.model({
  state: {
    data: 'app1',
  },
  reducers: {
    update: (action, state) => ({data: action.value})
  }
})

function app1main (params, state, send) {
  return choo.view`<button onclick=${(evt) => send('update', {value: 'app2main'})}>${state.data}</button>`
}

app1.router((route) => [
  route('/', app1main)
])

const tree1 = app1.start({name: 'app1'})
document.body.appendChild(tree1)


// app 2
// subcribes to 'init' to trigger the start of a countdown
const app2 = choo()

function init (send) {
  send('start', { payload: send })
}

app2.model({
  state: {
    data: 'app2',
    count: 5,
    timer: null
  },
  reducers: {
    update: (action, state) => ({data: action.value}),
    start: (action, state)=> {{
      timer: setInterval(() => { action.payload('tick')}, 1000)
    }},
    tick: (action, state) => ({
      count: state.count - 1
    })
  },
  subscriptions: [init]
})

function app2main (params, state, send) {
  return choo.view`<button onclick=${(evt) => send('update', {value: 'app1main'})}>${state.data} ${state.count}</button>`
}

app2.router((route) => [
  route('/', app2main)
])

setTimeout(function() {
  const tree2 = app2.start({name: 'app2'})
  document.body.appendChild(tree2)
}, 3000)

You’d notice that the 2 apps render, but nothing is really happening. Removing the setTimeout from the rendering of app2 so they render at the same time, you’ll notice app2 will start decrementing.

Is there a way around this ?

[toddself]

There is no newb here 😄! I get stuck on the smallest things sometimes for hours.

Good luck! Hope you enjoy conducting the train!

[chrisbuttery]

toot toot!