import YourMagicContainer from 'react-magic-hat'
import ComponentA, {id as CompA} from 'components'
import ComponentB from 'components'

const renderFrame = pageObject => {
  // Please check the renderFrame(pageObject) documentation for all the properties passed to the pageObject.
  const {id, actions, state} = pageObject

  // We get the Component that is going to be rendered, the following is probably the most naive way.
  const Muv = id === CompA ? ComponentA : ComponentB

  // Another way to do it in the demo, using import-glob
  // https://github.com/albinotonnina/demo-magic-hat/blob/master/src/Demo.js#L5-L21

  return <Muv {...actions} {...state} />
}

const Layout = () => (
  <div>
    <YourMagicContainer renderFrame={renderFrame} />
  </div>
)

import getComponentById from './your-components'

const renderFrame = pageObject => {
  const {
    id, // 'my-component-id'
    page, // 4
    activePage, // 5
    state, // { roses: 'blue', violets: 'red', pass:'whetever', pleases: 'you' }
    actions // see next paragraph for the actions methods
  } = pageObject

  const Muv = getComponentById(id) // return a Component

  return <Muv {...state} {...actions} />
}