index.js

/** @flow */

require('./styles.css')

var React = require('react');
var PureRenderMixin = require('react/lib/ReactComponentWithPureRenderMixin');
var {PropTypes} = React;
var {Link} = require('react-router');

var shape = function(props) {
  return PropTypes.shape(props.reduce(function(o, p) {
    o[p] = PropTypes.string.isRequired;
    return o;
  }, {}));
};

var PersonaListItem = React.createClass({
  propTypes: {
    persona: shape(['name', 'title', 'sex', 'race', 'age', 'quote']),
  },

  mixins: [PureRenderMixin],

  render(): ?ReactElement {
    var {persona} = this.props;

    return (
      <Link to="Persona" params={{id: persona.id}} className={suit()}>
        <div className={suit('avatar')}><image src={persona.image} /></div>
        <div className={suit('info')}>
          <span className={suit('name')}>{persona.name}</span>
          <span className={suit('title')}>{persona.title}</span>
          <span className={suit('sex')}>{persona.sex}</span>
          <span className={suit('race')}>{persona.race}</span>
          <span className={suit('age')}>{`${persona.age} years old`}</span>
          <blockquote className={suit('quote')}>{persona.quote}</blockquote>
        </div>
      </Link>
    );
  }
});

module.exports = PersonaListItem;