text: // @flow
  
  import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { createSelector } from 'reselect';
  
  import actions from '../../actions/gw2';
  import Infusion from '../Infusion';
  import PlaceholderInfusion from '../Infusion/Placeholder';
  
  export const selector = createSelector(
    (state, props) => state.items[props.id],
    (data) => ({
      data,
    })
  );
  
  interface Gw2InfusionProps {
    id: number,
    fetch: ([number]) => void,
    data?: Object,
  }
  
  export default connect(selector, {
    fetch: actions.fetchItems,
  })(
    class Gw2Infusion extends Component<Gw2InfusionProps> {
      componentDidMount () {
        const { id: propsID = null, fetch: propsFetch } = this.props;
        propsID && propsFetch([propsID]);
      }
  
      UNSAFE_componentWillReceiveProps (nextProps) {
        const { id: propsID, fetch } = this.props;
        const { id: nextID } = nextProps;
        if (propsID === nextID) {
          return;
        }
  
        fetch([nextID]);
      }
  
      render () {
        const { data = null, id } = this.props;
        if ((!data || data.error) && id) {
          return <PlaceholderInfusion />;
        }
  
        return <Infusion {...this.props} />;
      }
    }
  );
  