hartzis

class Image extends Component {
  componentDidMount() {
    // if image hasn't completed loading, then let react handle error
    if (!this._image.complete) return;
    // if image has finished loading and has 'errored'(errored when naturalWidth === 0)
    // then run the onError callback
    if (this._image.naturalWidth === 0) {
      this.props.onError();
    }
  }

hartzis

.lucid-tab(@ext: ''; @color: '') {
  tabs-bar tabs-tab .title[data-name*="@{ext}"],
  .tab-bar .tab .title[data-name*="@{ext}"] {
    border-top: 2px solid @color;
    // color: @color;
  }
}

hartzis

@import "lucid-mixins";

// .lucid-tab('.html', rgb(60, 120, 168));
// .lucid-tab('.js', rgb(220,20,60));
// .lucid-tab('.json', rgb(252,128,27));
// .lucid-tab('.coffee', rgb(214,233,245));
// .lucid-tab('.py', rgb(60, 120, 168));
// .lucid-tab('.less', rgb(50, 90, 162));
.lucid-tab('.scss', rgb(144,198,149));
// .lucid-tab('.css', #29abde);

hartzis

import {connect} from 'react-redux';
import {compose, withPropsOnChange} from 'recompose';
import View from './Scientist.jsx';

export default compose(
  connect((state, props)=>{
    return {
      ...state.scientists.get(props.scientist),
    };
  }),

hartzis

export default function Scientist({dob, fullname, imageSrc}) {
  return (
    <div>
      <h3>{fullname}</h3>
      <h5>{dob}</h5>
      <img src={imageSrc} />
    </div>
  )
}

hartzis

import {connect} from 'react-redux';
import View from './Scientist.jsx';

export default connect((state, props)=>{
  return {
    ...state.scientists.get(props.scientist),
  };
})(View);

hartzis

const scientists = {
  'alan' : {
    fullname: 'Alan Mathison Turing',
    dob: {month: 6, day: 23, year: 1912},
    image: 'turing.jpg',
  },
  'grace' : {
    fullname: 'Grace Brewster Murray Hopper',
    dob: {month: 12, day: 9, year: 1906},
    image: 'hopper.jpg',

hartzis

test('basic <Item/>', (t)=> {
  t.plan(1);

  const basicItem = {id: 'one'};
  const wrapper = shallow(<Item item={basicItem}/>);

  t.equal(wrapper.find('div').text(), 'one');
});

hartzis

import test from 'tape';
import React from 'react';
import { shallow } from 'enzyme';
import List from './List';

test('empty <List/>', (t)=> {
  t.plan(1);

  const emptyList = [];
  const wrapper = shallow(<List items={emptyList} />);

hartzis

import Item from './Item';

export function List ({items}) {
  return (
    <div>
      <p>Number in List: <span>{items.length}</span></p>
      {items.map(item => <Item item={item}/>)}
    </div>  
  )
}