TMDb UI

SketchSystems.spec

TMDb UI
  HomePage
    selectMovie -> DetailsPage
    queryEntry -> SearchResults
    queryClean -> Discovery
      
    Discovery*
    SearchResults

  DetailsPage
    goBack -> HomePage
  
  

SketchSystems_prototype.js

function render (model) {
  console.log(model)
  return (<>
    <h1>{model.active_states[0].parent.name}</h1>
    <h2>{model.active_states[0].name}</h2>
    <ThumbContainer {...{ model }} />
    <DetailsPage visible={model.active_states[0].name === 'DetailsPage'} />
  </>)
}
          
function ThumbContainer (props) {
  return (
    <div style={{ display: 'flex' }}>
      <Thumbnail onClick={() => props.model.emit('selectMovie')} />
      <Thumbnail onClick={() => props.model.emit('selectMovie')} />
      <Thumbnail onClick={() => props.model.emit('selectMovie')} />
    </div>
  )
}
  
function Thumbnail (props) {
  return (
    <div
      class="thumbnail"
      style={{
        cursor: 'pointer',
        margin: '10px', 
        background: '#aaf',
        width: '50px', 
        height: '50px'
      }}
      { ...props }
    ></div>
  )
}

function DetailsPage (props) {
  return (
    <div style={{
      display: props.visible ? 'block' : 'none'
    }}>
      Details
    </div>
  )
}