HOC Sample 3:Inheritance Inversion

HOCSample-3.jsx

function withSubscription(WrappedComponent, selectData) {
  return class extends WrappedComponent {
    constructor(props) {
      super(props)
      this.handleChange = this.handleChange.bind(this)
      this.state = {
        data: selectData(DataSource, props)
      }
    }
    
    componentDidMount() {
      DataSource.addChangeListener(this.handleChange)
    }
    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange)
    }
    handleChange() {
      this.setState({
        data: selectData(DataSource, this.props)
      })
    }
    
    render() {
      return super.render()
    }
  }
}

const Card = ({ card }) => (
  <div className="card">
    <div className="card-content" style={{ color: card.color }}>
      {card.name}
    </div>
  </div>
)

class List extends React.Component {
  render() {
    return (
      <div className="column"
        style={{ backgroundColor: this.props.list.color }}>
        <header>{`${this.props.list.name} (id:${this.props.list.id})`}</header>
        {this.state.data.map((card, idx) => 
           <Card card={card} key={idx} />
         )}
      </div>
    )
  }
}

const ListWithSubscription = withSubscription(
  List,
  (DataSource, props) => DataSource.getCards(props.list.id)
)

class Board extends React.Component {
  render() {
    return (
      <div className="columns">
        {this.state.data.map(list => 
           <ListWithSubscription list={list} key={list.id} />
        )}
      </div>
    )
  }
}

const BoardWithSubscription = withSubscription(
  Board,
  (DataSource) => DataSource.getLists()
)