app.deku.js

import bus from 'bus';

import { dom } from 'deku';
import CardAnswers from '../card-answers';
import CardForm from '../card-form';

var propTypes = {
  card: { source: 'card' },
  answer: { source: 'answer' }
};

function render(component) {
  let { props, state } = component;
  let { card, answer } = props;

  function getCard() {
    bus.emit('cards:get');
  }

  if (!card && !answer) {    
    return (
      <span>loading</span>
    );
  }

  console.dir(answer);

  return (    
      <div class="App">
        <div class="App-content">
          <figure class="App-section">
            <img src={(card || answer).img} alt="" class="App-image" />            
          </figure>
        </div>
        <div class="App-content App-content--main">
          <div class="App-section">
            <article class="Card">
              {card ? <CardForm card={card} /> : <CardAnswers card={answer} />}
              <button class="Card-button Card-button--next" onClick={getCard} title="Get a new card">
                <span class="Card-buttonText">&rsaquo;</span>
              </button>
            </article>
          </div>
        </div>
      </div>
  );
}

export default { propTypes, render };